/* ==========================================================================
   GOOGLE FONTS IMPORT (Global)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   GLOBAL VARIABLES and BASE STYLES (COMMON)
   ========================================================================== */
:root {
    /* Light Mode Default Variables */
    --primary-color: #1e3c72;
    --secondary-color: #2a5298;
    --accent-color: #ffc107;
    --text-light: white;
    --text-dark: #333;
    --text-muted: #555;
    --error-color: #dc3545;
    --success-color: #28a745;
    --light-bg: #f8f9fa;
    --page-bg: #f0f2f5;

    --footer-bg: #0f0f0f;
    --footer-text: #adb5bd;
    --footer-text-light: #ced4da;
    --footer-title: #ffffff;
    --footer-bottom-bg: #000000;

    --header-height: 70px;
    --header-bg: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --header-text-color: var(--text-light);
    --header-icon-color: var(--text-light);
    --header-btn-bg: var(--accent-color);
    --header-btn-text: var(--primary-color);
    --header-btn-hover-bg: #e0a800;

    /* Neumorphic variables - Light Mode */
    --neumorphic-bg: #e0e5ec;
    --neumorphic-shadow-light: #ffffff;
    --neumorphic-shadow-dark: #b8babe;
    --neumorphic-text-color: #2c3e50;
    --neumorphic-input-bg: #f5f7fa;
    --neumorphic-input-focus-bg: var(--neumorphic-input-bg);
    --neumorphic-btn-bg: #d1d9e6;
    --neumorphic-btn-text: #34495e;
    --neumorphic-btn-hover-bg: #c5ccd8;
    --neumorphic-btn-disabled-bg: #ccc;
    --neumorphic-btn-disabled-text: #777;

    --tool-description-bg: rgba(255, 255, 255, 0.6);
    --tool-description-shadow-light: rgba(255, 255, 255, 0.8);
    --tool-description-shadow-dark: rgba(184, 186, 190, 0.6);
    --tool-description-text: var(--text-dark);
    --tool-description-h2-border: var(--accent-color);
    --tool-disclaimer-border: var(--accent-color);
    --tool-disclaimer-bg: rgba(255, 193, 7, 0.08);

    --ad-placeholder-bg: #f0f0f0;
    --ad-placeholder-text-color: #777;
    --ad-placeholder-border-color: #ccc;

    /* Theme Switch Colors - Light Mode */
    --theme-switch-track-bg-off: var(--neumorphic-bg);
    --theme-switch-track-shadow-off: inset 1px 1px 3px var(--neumorphic-shadow-dark), inset -1px -1px 3px var(--neumorphic-shadow-light);
    --theme-switch-track-bg-on: var(--accent-color);
    --theme-switch-track-shadow-on: 0 0 5px color-mix(in srgb, var(--accent-color) 70%, transparent);
    --theme-switch-thumb-bg: var(--neumorphic-shadow-light);
    --theme-switch-thumb-shadow: 1px 1px 3px var(--neumorphic-shadow-dark), -1px -1px 2px var(--neumorphic-shadow-light);
    --theme-switch-icon-color-off: color-mix(in srgb, var(--primary-color) 80%, black);
    --theme-switch-icon-color-on: var(--header-btn-text);
    --theme-transition-duration: 0.3s;
}

body.dark-mode {
    /* Dark Mode Variable Overrides */
    --primary-color: #3b82f6;
    --secondary-color: #1d4ed8;
    --accent-color: #f59e0b;
    --text-light: #1f2937;
    --text-dark: #e5e7eb;
    --text-muted: #9ca3af;
    --page-bg: #111827;

    --header-bg: linear-gradient(135deg, #1f2937, #374151);
    --header-text-color: #e5e7eb;
    --header-icon-color: #e5e7eb;
    --header-btn-bg: var(--accent-color);
    --header-btn-text: #111827;
    --header-btn-hover-bg: #d97706;

    --neumorphic-bg: #1f2937;
    --neumorphic-shadow-light: #374151;
    --neumorphic-shadow-dark: #0e131c;
    --neumorphic-text-color: #d1d5db;
    --neumorphic-input-bg: #2b3648;
    --neumorphic-input-focus-bg: var(--neumorphic-input-bg);
    --neumorphic-btn-bg: #374151;
    --neumorphic-btn-text: #e5e7eb;
    --neumorphic-btn-hover-bg: #4b5563;
    --neumorphic-btn-disabled-bg: #4b5563;
    --neumorphic-btn-disabled-text: #9ca3af;

    --tool-description-bg: rgba(31, 41, 55, 0.7);
    --tool-description-shadow-light: rgba(75, 85, 99, 0.5);
    --tool-description-shadow-dark: rgba(17, 24, 39, 0.5);
    --tool-description-text: var(--text-dark);
    --tool-description-h2-border: var(--accent-color);
    --tool-disclaimer-border: var(--accent-color);
    --tool-disclaimer-bg: rgba(245, 158, 11, 0.1);

    --ad-placeholder-bg: #374151;
    --ad-placeholder-text-color: #9ca3af;
    --ad-placeholder-border-color: #4b5563;

    /* Theme Switch Colors - Dark Mode */
    --theme-switch-track-bg-off: var(--neumorphic-bg);
    --theme-switch-track-shadow-off: inset 1px 1px 3px var(--neumorphic-shadow-dark), inset -1px -1px 3px var(--neumorphic-shadow-light);
    --theme-switch-track-bg-on: var(--accent-color);
    --theme-switch-track-shadow-on: 0 0 8px color-mix(in srgb, var(--accent-color) 50%, transparent);
    --theme-switch-thumb-bg: var(--neumorphic-shadow-light);
    --theme-switch-thumb-shadow: 1px 1px 3px var(--neumorphic-shadow-dark), -1px -1px 2px var(--neumorphic-shadow-light);
    --theme-switch-icon-color-off: var(--accent-color);
    --theme-switch-icon-color-on: var(--header-btn-text);
}

* {
    margin: 0; padding: 0; box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    transition: background-color var(--theme-transition-duration) ease,
                color var(--theme-transition-duration) ease,
                border-color var(--theme-transition-duration) ease,
                box-shadow var(--theme-transition-duration) ease;
}
*:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
*:focus { outline: none; }

html { scroll-behavior: smooth; }
body {
    min-height: 100vh; overflow-x: hidden; background: var(--page-bg);
    padding-top: var(--header-height); display: flex; flex-direction: column;
    color: var(--text-dark);
}
body.menu-open { overflow-y: hidden; }
.container { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; width: 100%; }
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
main { flex-grow: 1; padding: 30px 15px; display: flex; flex-direction: column; align-items: center; }

/* ==========================================================================
   HEADER STYLES (COMMON)
   ========================================================================== */
header { background: var(--header-bg); color: var(--header-text-color); padding: 0 20px; display: flex; justify-content: space-between; align-items: center; position: fixed; width: 100%; top: 0; left: 0; z-index: 1000; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); height: var(--header-height); box-sizing: border-box; }
.logo { font-size: 28px; font-weight: bold; letter-spacing: 1px; display: flex; align-items: center; }
.logo i { margin-right: 10px; font-size: inherit; color: var(--header-icon-color); }
.logo-link { color: var(--header-text-color); text-decoration: none; font-weight: bold; }
.header-right-controls { display: none; align-items: center; gap: 10px; }
.desktop-nav { display: flex; gap: 15px; align-items: center; }
.desktop-nav a { color: var(--header-text-color); text-decoration: none; font-size: 16px; font-weight: 500; padding: 5px 0; display: inline-flex; align-items: center; gap: 6px; }
.desktop-nav a:hover { color: var(--accent-color); text-decoration: underline; }
.desktop-nav a.active { color: var(--accent-color); }
.desktop-nav a.btn { background-color: var(--header-btn-bg); color: var(--header-btn-text) !important; padding: 8px 15px; border-radius: 5px; font-weight: bold; text-decoration: none; }
.desktop-nav a.btn:hover { background-color: var(--header-btn-hover-bg); color: var(--header-btn-text) !important; text-decoration: none; }
.menu-icon { font-size: 28px; cursor: pointer; color: var(--header-icon-color); background: transparent; border: none; padding: 10px; }
.menu-icon i { color: var(--header-icon-color); font-size: 24px; display: block; }
.theme-switch { position: relative; display: inline-block; width: 50px; height: 26px; align-self: center; }
.desktop-nav-theme-toggle { margin-right: 5px; margin-left: 0; }
.theme-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--theme-switch-track-bg-off); box-shadow: var(--theme-switch-track-shadow-off); transition: background-color var(--theme-transition-duration), box-shadow var(--theme-transition-duration); }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: var(--theme-switch-thumb-bg); box-shadow: var(--theme-switch-thumb-shadow); transition: transform var(--theme-transition-duration), background-color var(--theme-transition-duration), box-shadow var(--theme-transition-duration), color var(--theme-transition-duration); display: flex; align-items: center; justify-content: center; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; content: "\f186"; color: var(--theme-switch-icon-color-off); }
input:checked + .slider { background-color: var(--theme-switch-track-bg-on); box-shadow: var(--theme-switch-track-shadow-on); }
input:checked + .slider:before { transform: translateX(24px); content: "\f185"; color: var(--theme-switch-icon-color-on); }
.slider.round { border-radius: 26px; } .slider.round:before { border-radius: 50%; }
.mobile-menu { position: fixed; top: 0; right: -280px; width: 280px; max-width: 90%; height: 100vh; background: var(--primary-color); transition: right 0.4s ease-in-out; padding: 20px; z-index: 1001; box-shadow: -4px 0 8px rgba(0,0,0,0.2); overflow-y: auto; box-sizing: border-box; }
body.dark-mode .mobile-menu { background: #1f2937; }
.mobile-menu.show { right: 0; }
.mobile-menu .close-btn { font-size: 24px; cursor: pointer; color: var(--header-text-color); background: transparent; border: none; padding: 0; display: block; text-align: right; margin-bottom: 10px; }
.mobile-menu .menu-links { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.mobile-menu .menu-links a { color: var(--header-text-color); text-decoration: none; font-size: 18px; padding: 10px 0; display: flex; align-items: center; gap: 8px; transition: color 0.3s ease; }
.mobile-menu .menu-links a:hover, .mobile-menu .menu-links a.active { color: var(--accent-color); }
.mobile-menu .menu-links a.btn { background-color: var(--header-btn-bg); color: var(--header-btn-text) !important; padding: 10px 15px; border-radius: 5px; text-align: center; font-weight: bold; justify-content: center; }
.mobile-menu .menu-links a.btn:hover { background-color: var(--header-btn-hover-bg); }
.mobile-menu hr { width: 100%; border: 0; border-top: 0.5px solid rgba(255,255,255,0.2); margin: 15px 0; }
body.dark-mode .mobile-menu hr { border-top-color: rgba(229,231,235,0.2); }
.mobile-menu .social-icons-horizontal { margin-top: 20px; display: flex; justify-content: center; align-items: center; gap: 20px; }
.mobile-menu .social-icons-horizontal a { color: var(--header-text-color); font-size: 24px; transition: color 0.3s ease-in-out; padding: 0; }
.mobile-menu .social-icons-horizontal a:hover { color: var(--accent-color); }

/* ==========================================================================
   ADVERTISEMENT CONTAINER STYLES (COMMON)
   ========================================================================== */
.ad-container { display: none; background-color: var(--ad-placeholder-bg); align-items: center; justify-content: center; text-align: center; color: var(--ad-placeholder-text-color); font-size: 0.9em; margin-left: auto; margin-right: auto; overflow: hidden; }
.ad-container p.ad-placeholder-text { margin: 0; padding: 10px; border: 1px dashed var(--ad-placeholder-border-color); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ad-top, .ad-bottom { width: 100%; max-width: 728px; min-height: 90px; margin-bottom: 20px; }
.ad-top { margin-top: 0; } .ad-bottom { margin-top: 20px; margin-bottom: 0; }
.tool-layout-wrapper { display: flex; justify-content: center; align-items: flex-start; gap: 20px; width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; }
.ad-left, .ad-right { width: 160px; min-height: 600px; flex-shrink: 0; } .ad-left { order: -1; }
.tool-layout-wrapper > .tool-container { flex-grow: 1; }

/* ==========================================================================
   GENERAL .tool-container STYLES (COMMON)
   ========================================================================== */
.tool-container { background: var(--neumorphic-bg); padding: 25px; border-radius: 20px; box-shadow: 8px 8px 16px var(--neumorphic-shadow-dark), -8px -8px 16px var(--neumorphic-shadow-light); text-align: center; width: 100%; max-width: 800px; color: var(--neumorphic-text-color); margin-top: 0; margin-bottom: 0; }
.tool-container h1 { font-size: 26px; font-weight: 600; color: var(--neumorphic-text-color); margin-bottom: 10px; }
.tool-container .tagline { font-size: 15px; color: var(--text-muted); margin-bottom: 20px; }
.tool-container .tool-copyright { font-size: 0.9em; color: var(--text-muted); margin-top: 25px; margin-bottom: 20px; text-align: center; }
.tool-container .tool-copyright a { font-weight: bold; color: var(--error-color); text-decoration: none; }
body.dark-mode .tool-container .tool-copyright a { color: #f87171; }
.tool-container .tool-copyright a:hover { text-decoration: underline; }
.tool-container .tool-copyright a[href="https://www.scriptbazar.in"] { color: red !important; }
body.dark-mode .tool-container .tool-copyright a[href="https://www.scriptbazar.in"] { color: #ff5c5c !important; }

/* General Input Row & Group Styles (can be shared by tools) */
.tool-container .input-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 20px;
    align-items: center;
}
.tool-container .input-group {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
}
.tool-container .error-message {
    font-size: 0.85em;
    color: var(--error-color);
    text-align: left;
    margin-top: 5px;
    display: block;
    min-height: 1.2em;
}

/* General Button Styles (UPDATED to match iCloud tool's button layout) */
.tool-container .buttons {
    display: flex;
    gap: 15px; /* Spacing between buttons */
    margin: 25px 0;
    flex-wrap: nowrap; /* Buttons will try to stay in one line by default */
}
.tool-container .buttons button {
    flex-grow: 1; /* Allow buttons to grow and share space equally */
    flex-basis: 0; /* Start with a base size of 0 for equal distribution */
    min-width: 0; /* Allow buttons to shrink if needed, works with flex-basis:0 */
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    background: var(--neumorphic-btn-bg);
    color: var(--neumorphic-btn-text);
    box-shadow: 4px 4px 8px var(--neumorphic-shadow-dark),
                -4px -4px 8px var(--neumorphic-shadow-light);
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex; /* For better alignment of text/icons inside button */
    align-items: center; /* Vertically align content */
    justify-content: center; /* Horizontally align content */
    text-align: center; /* Ensure text is centered */
}
.tool-container .buttons button:disabled {
    background: var(--neumorphic-btn-disabled-bg);
    color: var(--neumorphic-btn-disabled-text);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.7;
}
.tool-container .buttons button:hover:not(:disabled) {
    transform: translateY(-2px);
    background: var(--neumorphic-btn-hover-bg);
    box-shadow: 6px 6px 12px var(--neumorphic-shadow-dark),
                -6px -6px 12px var(--neumorphic-shadow-light);
}
.tool-container .buttons button:active:not(:disabled) {
    transform: translateY(1px);
    background: var(--neumorphic-btn-bg);
    box-shadow: inset 2px 2px 4px var(--neumorphic-shadow-dark),
                inset -2px -2px 4px var(--neumorphic-shadow-light);
}

/* General Loading Indicator & Output Container (shared by tools using these IDs) */
.tool-container #loadingIndicator {
    display: none;
    font-size: 16px;
    color: var(--text-muted);
    margin-top: 15px;
    text-align: center;
}
.tool-container #loadingIndicator.hidden { display: none; }

.tool-container #output-container {
    margin-top: 20px;
    background: var(--neumorphic-input-bg);
    padding: 15px;
    border-radius: 10px;
    box-shadow: inset 4px 4px 8px var(--neumorphic-shadow-dark),
                inset -4px -4px 8px var(--neumorphic-shadow-light);
    word-wrap: break-word;
    text-align: center;
    color: var(--neumorphic-text-color);
    min-height: 50px;
}
.tool-container #output-container > div,
.tool-container #output-container > p:not(:first-child) {
    text-align: left;
}
.tool-container #output-container p { margin-bottom: 5px; }
/*
    The following two rules are for dynamically added input fields or copy buttons
    INSIDE the #output-container. If your JavaScript for the Google Drive tool
    (or other tools sharing this CSS) does not add such elements inside the
    #output-container, these rules can be safely removed.
    They are kept here for potential general use by other tools.
    If you are sure NO tool will use them, you can remove them.

.tool-container #output-container input[type="text"] {
    width: auto;
    flex-grow: 1;
    padding: 10px;
    border-radius: 8px;
    background: var(--neumorphic-input-bg);
    color: var(--neumorphic-text-color);
    box-shadow: inset 2px 2px 4px var(--neumorphic-shadow-dark), inset -2px -2px 4px var(--neumorphic-shadow-light);
    border: 1px solid transparent;
    margin: 0;
}
.tool-container #output-container .dynamic-copy-btn {
    padding: 10px 15px;
    border-radius: 8px;
    background: var(--neumorphic-btn-bg);
    color: var(--neumorphic-btn-text);
    box-shadow: 2px 2px 5px var(--neumorphic-shadow-dark), -2px -2px 5px var(--neumorphic-shadow-light);
    font-weight: bold;
    cursor: pointer;
    border: none;
}
.tool-container #output-container .dynamic-copy-btn:active {
    transform: translateY(1px);
    box-shadow: inset 1px 1px 2px var(--neumorphic-shadow-dark),
                inset -1px -1px 2px var(--neumorphic-shadow-light) !important;
}
*/
.tool-container #output-container a {
    color: var(--primary-color);
    text-decoration: underline;
    font-weight: 500;
}
body.dark-mode .tool-container #output-container a {
    color: var(--accent-color);
}
#output-container .success-message,
#output-container .failure-message {
    font-weight: 500;
    margin-top:10px;
    text-align: left;
}
#output-container .success-message { color: var(--success-color); }
#output-container .failure-message { color: var(--error-color); }


/* ==========================================================================
   TOOL DESCRIPTION STYLES (COMMON)
   ========================================================================== */
.tool-description { text-align: left; margin-top: 30px; margin-bottom: 0; padding: 20px; border-top: 1px solid var(--neumorphic-shadow-dark); color: var(--tool-description-text); font-size: 0.95em; line-height: 1.7; background-color: var(--tool-description-bg); border-radius: 12px; box-shadow: inset 3px 3px 6px var(--tool-description-shadow-dark), inset -3px -3px 6px var(--tool-description-shadow-light); }
.tool-description h2 { font-size: 1.5em; color: var(--primary-color); margin-bottom: 18px; font-weight: 600; text-align: center; padding-bottom: 5px; border-bottom: 1px solid var(--tool-description-h2-border); display: block; }
body.dark-mode .tool-description h2 { color: var(--accent-color); }
.tool-description h3 { font-size: 1.2em; color: var(--secondary-color); margin-top: 25px; margin-bottom: 12px; font-weight: 600; }
body.dark-mode .tool-description h3 { color: var(--text-dark); }
.tool-description p { margin-bottom: 15px; } .tool-description ul { list-style-position: outside; margin-left: 25px; margin-bottom: 18px; }
.tool-description ul li { margin-bottom: 10px; padding-left: 5px; }
.tool-description .disclaimer { font-size: 0.9em; color: var(--text-muted); border-left: 4px solid var(--tool-disclaimer-border); padding: 12px 15px; margin-top: 25px; background-color: var(--tool-disclaimer-bg); border-radius: 4px; }
.tool-description .disclaimer strong { color: var(--error-color); font-weight: 600; }
body.dark-mode .tool-description .disclaimer strong { color: #f87171; }

/* ==========================================================================
   FOOTER STYLES (COMMON)
   ========================================================================== */
.site-footer { background-color: var(--footer-bg); color: var(--footer-text); padding-top: 50px; font-size: 14px; line-height: 1.6; margin-top: auto; width: 100%; box-sizing: border-box; }
.footer-main-container { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 40px; }
.footer-column.about-column { flex: 1 1 30%; min-width: 250px; text-align: left; }
.footer-column.about-column .footer-site-description { margin-bottom: 20px; color: var(--footer-text-light); max-width: 100%; margin-left: 0; margin-right: 0;}
.footer-column.about-column .footer-social-icons { justify-content: flex-start; }
.footer-links-group { flex: 2 1 65%; display: flex; flex-wrap: wrap; gap: 20px; }
.footer-column { flex: 1; min-width: 180px; } .footer-links-group .links-column { min-width: 160px; }
.footer-site-name { font-size: 28px; font-weight: 700; color: var(--footer-title); margin-bottom: 15px; }
.footer-column-title { font-size: 18px; font-weight: 600; color: var(--footer-title); margin-bottom: 20px; }
.footer-column ul { list-style: none; padding: 0; margin: 0; } .footer-column ul li { margin-bottom: 10px; }
.footer-column ul li a { color: var(--footer-text); text-decoration: none; } .footer-column ul li a:hover { color: var(--footer-title); padding-left: 5px; }
.footer-social-icons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.footer-social-icons a { display: inline-flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 50%; background-color: #343a40; color: var(--footer-title); font-size: 16px; text-decoration: none; transition: background-color 0.3s ease, transform 0.3s ease; }
.footer-social-icons a:hover { background-color: var(--accent-color); color: var(--primary-color) !important; transform: scale(1.1); }
body.dark-mode .footer-social-icons a:hover { color: #111827 !important; }
.footer-bottom { background-color: var(--footer-bottom-bg); padding: 20px 0; border-top: 1px solid #2c2c2c; }
.footer-bottom-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.footer-buy-code-btn { background-color: var(--accent-color); color: var(--primary-color) !important; padding: 8px 15px; border-radius: 5px; font-weight: bold; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background-color 0.3s ease, color 0.3s ease; border: none; }
.footer-buy-code-btn:hover { background-color: var(--header-btn-hover-bg); color: var(--primary-color) !important; text-decoration: none; }
body.dark-mode .footer-buy-code-btn { color: #111827 !important; }
.footer-buy-code-btn i { margin-right: 0; }
.copyright-text { font-size: 15px; color: var(--footer-text); margin: 0; text-align: right; flex-grow: 1; }
.copyright-text a, .copyright-text strong { color: var(--accent-color); text-decoration: none; }
.copyright-text a:hover { text-decoration: underline; }

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS (COMMON)
   ========================================================================== */
@media (max-width: 992px) {
    .tool-layout-wrapper { flex-direction: column; align-items: center; }
    .ad-top, .ad-bottom { max-width: 90%; }
    .tool-layout-wrapper > .tool-container { margin-left: auto; margin-right: auto; }
    .desktop-nav .desktop-nav-theme-toggle { margin-right: 10px; }
}

@media (max-width: 768px) {
    body { padding-top: 60px; --header-height: 60px; }
    header { height: var(--header-height); padding: 0 15px; }
    .logo { font-size: 26px; } .logo i { margin-right: 8px; }
    .desktop-nav { display: none; }
    .header-right-controls { display: flex; }
    .menu-icon { display: flex; }
    .mobile-header-theme-toggle { display: inline-block; }
    .desktop-nav-theme-toggle { display: none; }
    .footer-main-container { flex-direction: column; align-items: flex-start; }
    .footer-column.about-column { flex-basis: 100%; text-align: left; min-width: unset; }
    .footer-column.about-column .footer-site-description { max-width: 100%; margin-left: 0; margin-right: 0; font-size: 16px; }
    .footer-column.about-column .footer-social-icons { justify-content: flex-start; }
    .footer-links-group { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 15px; }
    .footer-links-group .footer-column.links-column { flex-basis: calc(50% - 10px); min-width: 150px; text-align: left; }
    .footer-column ul { text-align: left; }
    .footer-column ul li a { font-size: 16px; }
    .footer-bottom-container { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
    .footer-buy-code-btn { margin-bottom: 10px; font-size: 16px; }
    .copyright-text { text-align: center; font-size: 15px; }
    .ad-top, .ad-bottom { min-height: 50px; }
    .ad-top { margin-bottom: 15px;} .ad-bottom { margin-top: 15px;}

    /* UPDATED: Button layout adjustments for screens <= 768px */
    .tool-container .buttons {
        flex-wrap: wrap; /* Allow buttons to wrap to the next line */
        gap: 10px;
    }
    .tool-container .buttons #generateLink,
    .tool-container .buttons #copyLink { /* Assumes these IDs are consistent or use a common class/nth-child */
        width: calc(50% - 5px); /* Two buttons per row, considering the gap */
        flex-grow: 0;           /* Disable flex-grow for specific width */
        flex-basis: auto;       /* Reset flex-basis */
    }
    .tool-container .buttons #resetButton {
        width: 100%;            /* Make the last button take full width */
        flex-grow: 0;
        flex-basis: auto;
    }
}

@media (min-width: 769px) {
    .header-right-controls { display: none; }
    .desktop-nav-theme-toggle { display: inline-block; }
}

@media (min-width: 769px) and (max-width: 992px) {
    .footer-main-container { flex-direction: column; align-items: center; }
    .footer-column.about-column { flex-basis: 100%; text-align:center; min-width: unset; }
    .footer-column.about-column .footer-social-icons { justify-content: center; }
    .footer-links-group { width: 100%; justify-content: space-around; flex-direction: row; }
    .footer-links-group .footer-column.links-column { flex-basis: calc(45% - 15px); min-width: 160px; text-align: left; }
    .footer-column ul { text-align: left; }
}

@media (max-width: 500px) { /* Combined with the old 480px rules, specific to non-button elements */
    .tool-container { padding: 20px; }
    .tool-container h1 { font-size: 22px; }
    .tool-description { padding: 15px; font-size: 0.9em; }
    .tool-description h2 { font-size: 1.3em; }
    .tool-description h3 { font-size: 1.1em; }

    .logo { font-size: 24px; } .logo i { margin-right: 6px; }
    main { padding: 20px 5px; }
    .site-footer { font-size: 15px; padding-top: 30px; }
    .footer-site-name { font-size: 25px; }
    .footer-column-title { font-size: 18px; }
    .footer-column.about-column .footer-site-description { font-size: 15px; }
    .footer-column ul li a { font-size: 15px; }
    .footer-links-group { gap: 10px; }
    .footer-links-group .footer-column.links-column { flex-basis: calc(50% - 5px); min-width: auto; text-align: left; }
    .footer-buy-code-btn { font-size: 15px; padding: 6px 12px; }
    .copyright-text { font-size: 14px; }
    .ad-top, .ad-bottom { max-width: 100%; }
}


/* ==========================================================================
   DROPBOX DIRECT LINK GENERATOR SPECIFIC STYLES
   (Add this to your existing style.css file)
   ========================================================================== */
.tool-container .input-group label[for="dropboxUrl"] {
    font-size: 14px;
    font-weight: bold;
    color: var(--neumorphic-text-color);
    display: block;
    margin-bottom: 5px;
    text-align: center;
}

.tool-container input#dropboxUrl {
    width: 100%;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    background: var(--neumorphic-input-bg);
    color: var(--neumorphic-text-color);
    box-shadow: inset 4px 4px 8px var(--neumorphic-shadow-dark),
                inset -4px -4px 8px var(--neumorphic-shadow-light);
    margin: 0;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.tool-container input#dropboxUrl:focus {
    border-color: transparent; /* Keep border transparent on focus for neumorphic style */
    background: var(--neumorphic-input-focus-bg); /* Use focus background variable */
    box-shadow: inset 2px 2px 5px var(--neumorphic-shadow-dark), /* Adjusted focus shadow */
                inset -2px -2px 5px var(--neumorphic-shadow-light);
}