/* Global Theme (Dark + Light) with Glassmorphism Utility Classes */
:root {
  --color-bg: #0f172a;
  --color-bg-alt: #1e293b;
  --color-surface: rgba(255,255,255,0.07);
  --color-surface-alt: rgba(255,255,255,0.12);
  --color-border: rgba(255,255,255,0.15);
  --color-text: #ffffff; /* brighter text for dark theme */
  --color-text-soft: #e5e7eb; /* soft text still bright enough */
  --color-nav-link: #e2e8f0;
  --color-nav-link-hover: #ffffff;
  --color-dropdown-bg: rgba(15,23,42,0.95);
  --color-dropdown-border: rgba(255,255,255,0.12);
  --color-dropdown-link: #e2e8f0;
  --color-dropdown-link-hover-bg: rgba(99,102,241,0.25);
  --color-dropdown-link-hover: #ffffff;
  --color-accent: #6366f1;
  --color-accent-alt: #10b981;
  --shadow-elev: 0 12px 34px -10px rgba(0,0,0,0.55);
  --blur-backdrop: 12px; /* Reduced from 18px to lower GPU usage */
  --transition-fast: .2s cubic-bezier(.4,.2,.2,1);
  --focus-ring: 0 0 0 3px rgba(99,102,241,.45);
}

/* Ensure all text elements use theme colors in dark mode - EXCEPT buttons */
body, h1, h2, h3, h4, h5, h6, p, span, a, label, li, td, th, div {
  color: var(--color-text);
}

/* Explicitly prevent buttons from inheriting text colors */
button, input[type="submit"], button[type="submit"], .btn, .glass-btn, .compress-btn {
  color: white !important;
}

/* Specific overrides for various text elements */
.section-heading, .page-title, .tool-title, .hero-title, .info-title, .feature-title {
  color: var(--color-text) !important;
}

.section-sub, .page-subtitle, .tool-description, .hero-subtitle, .processing-status {
  color: var(--color-text-soft) !important;
}

/* Additional text elements that need proper theming */
.upload-text, .upload-hint, .file-details h4, .file-details p, .option-label, 
.format-title, .format-desc, .info-list li, .faq-item h3, .faq-item p,
.stat-label, .feature-card h3, .feature-card p {
  color: var(--color-text) !important;
}

/* Form elements text colors */
input, textarea, select {
  color: var(--color-text);
}

/* Link colors in content */
.content-area a, .info-section a {
  color: var(--color-accent);
}

.content-area a:hover, .info-section a:hover {
  color: var(--color-accent-alt);
}

/* Light theme variables */
.light-theme {
  --color-bg: #f1f5f9;
  --color-bg-alt: #ffffff;
  --color-surface: rgba(255,255,255,0.85);
  --color-surface-alt: rgba(255,255,255,0.92);
  --color-border: rgba(0,0,0,0.08);
  --color-text: #1e293b;
  --color-text-soft: #475569;
  --color-nav-link: #1e293b;
  --color-nav-link-hover: #111827;
  --color-dropdown-bg: rgba(255,255,255,0.98);
  --color-dropdown-border: rgba(0,0,0,0.08);
  --color-dropdown-link: #1e293b;
  --color-dropdown-link-hover-bg: rgba(99,102,241,0.12);
  --color-dropdown-link-hover: #111827;
  --shadow-elev: 0 8px 26px -8px rgba(0,0,0,.15);
}

body {
  background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
  color: var(--color-text);
  transition: background .5s ease, color .3s ease;
  -webkit-font-smoothing: antialiased;
}

.glass-card {
  background: var(--color-surface);
  backdrop-filter: blur(var(--blur-backdrop)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-backdrop)) saturate(140%);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 1.5rem 1.65rem;
  box-shadow: var(--shadow-elev), inset 0 0 0 1px rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background .35s ease;
}
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg,rgba(255,255,255,.18),rgba(255,255,255,0) 60%);
  opacity: .28;
}
.glass-card:hover {
  transform: translateY(-4px);
}

.glass-border { border:1px solid var(--color-border); }

.glass-btn {
  background: linear-gradient(135deg,var(--color-accent),var(--color-accent-alt));
  color:#fff !important;
  border:none;
  border-radius:14px;
  padding: .8rem 1.25rem;
  font-weight:600;
  letter-spacing:.3px;
  position:relative;
  overflow:hidden;
  box-shadow:0 6px 20px -8px rgba(99,102,241,.55),0 0 0 1px rgba(255,255,255,.22);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.glass-btn:hover { transform: translateY(-3px); filter:brightness(1.06); }
.glass-btn:active { transform: translateY(0); }

.outline-btn {
  background:transparent;
  border:2px solid var(--color-accent);
  color:var(--color-accent) !important;
  box-shadow:none;
}
.outline-btn:hover { background:var(--color-accent); color:#fff !important; }

.glass-dropzone {
  background: var(--color-surface-alt);
  border: 2px dashed var(--color-border);
  padding: 2.25rem 1.5rem;
  border-radius: 20px;
  text-align:center;
  transition: border-color .3s ease, background .3s ease, transform .35s ease;
  cursor:pointer;
  position:relative;
}
.glass-dropzone.dragover, .glass-dropzone:hover {
  border-color: var(--color-accent);
  background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(16,185,129,0.20));
  transform: scale(1.02);
}

.theme-toggle {
  position:fixed;
  bottom:20px; right:20px;
  z-index:1200;
  display:flex;gap:.5rem;
}
.theme-toggle button{min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;}

.text-soft { color: var(--color-text-soft) !important; }

/* Smooth fade for theme switching */
.theme-transition * { transition: background .5s ease, color .4s ease !important; }

/* Scrollbar styling (WebKit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--color-accent),var(--color-accent-alt)); border-radius:6px; }

/* Utility spacing overrides for consistency */
.mt-6 { margin-top:4rem; }
.mb-6 { margin-bottom:4rem; }

/* Form Controls refinement */
.glass-input, .glass-select, .glass-textarea {
  background: var(--color-surface-alt);
  border:1px solid var(--color-border);
  color: var(--color-text);
  border-radius:12px;
  padding:.8rem .95rem;
  width:100%;
  transition:border-color .3s ease, background .3s ease;
}
.glass-input:focus, .glass-select:focus, .glass-textarea:focus {
  outline:none;
  border-color: var(--color-accent);
  background: rgba(255,255,255,0.16);
  box-shadow: var(--focus-ring);
}

/* Code / mono blocks */
pre, code { background: var(--color-surface-alt); color: var(--color-text); }

/* Light theme adjustments for glass surfaces and text colors */
.light-theme .glass-card { box-shadow: var(--shadow-elev); }
.light-theme .glass-dropzone { background: rgba(255,255,255,0.65); }
.light-theme .glass-dropzone.dragover { background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(16,185,129,0.15)); }

/* Light theme text color overrides - EXCEPT buttons */
.light-theme body, .light-theme h1, .light-theme h2, .light-theme h3, .light-theme h4, .light-theme h5, .light-theme h6, 
.light-theme p, .light-theme span, .light-theme a, .light-theme label, .light-theme li, .light-theme td, .light-theme th, .light-theme div {
  color: var(--color-text);
}

/* Explicitly prevent buttons from inheriting light theme text colors */
.light-theme button, .light-theme input[type="submit"], .light-theme button[type="submit"], 
.light-theme .btn, .light-theme .glass-btn, .light-theme .compress-btn {
  color: white !important;
}

.light-theme .section-heading, .light-theme .page-title, .light-theme .tool-title, 
.light-theme .hero-title, .light-theme .info-title, .light-theme .feature-title {
  color: var(--color-text) !important;
}

.light-theme .section-sub, .light-theme .page-subtitle, .light-theme .tool-description, 
.light-theme .hero-subtitle, .light-theme .processing-status {
  color: var(--color-text-soft) !important;
}

/* Fade-in animation for cards */
.fade-in { animation: fadeIn .6s ease; }
@keyframes fadeIn { from {opacity:0; transform: translateY(12px);} to {opacity:1; transform: translateY(0);} }

/* Dropdown adaptive styling (overrides inline older styles) */
.dropdown-content {background: var(--color-dropdown-bg)!important; border:1px solid var(--color-dropdown-border)!important; box-shadow:0 10px 30px -8px rgba(0,0,0,.5);} 
.dropdown-content a {color: var(--color-dropdown-link)!important; background:transparent; transition: background .25s ease,color .25s ease;} 
.dropdown-content a:hover {background: var(--color-dropdown-link-hover-bg)!important; color: var(--color-dropdown-link-hover)!important;} 

/* Nav link color adaptive */
.topnav .nav-links a, .topnav .dropdown .dropbtn {color: var(--color-nav-link)!important;} 
.topnav .nav-links a:hover, .topnav .dropdown .dropbtn:hover {color: var(--color-nav-link-hover)!important;} 

/* Reduced effects mode for low-power GPUs */
.reduced-effects body::before, .reduced-effects body::after {display:none!important;} 
.reduced-effects .glass-card {backdrop-filter: none!important; -webkit-backdrop-filter:none!important; background: var(--color-surface-alt);} 
.reduced-effects .topnav {backdrop-filter: none!important; -webkit-backdrop-filter:none!important;} 

@media (prefers-reduced-motion: reduce) { 
  body::before, body::after {animation: none !important;} 
}

/* Utility: neutral surface box for legacy template sections */
.surface-box {background: var(--color-surface); border:1px solid var(--color-border); border-radius:16px;}

/* Tools Grid - Button-Style Tool Boxes */
.tools-section {
    padding: 4rem 0;
    background: var(--color-bg-alt);
}

.tools-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.tools-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.5rem 0;
}

.tools-header p {
    font-size: 1.1rem;
    color: var(--color-text-soft);
    margin: 0;
}

.tools-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 900px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
}

.tool-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.9rem 1.4rem !important;
    background: linear-gradient(135deg, var(--color-surface) 0%, rgba(99,102,241,0.05) 100%) !important;
    border: 2px solid var(--color-border) !important;
    border-radius: 12px !important;
    color: var(--color-text) !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.15), 0 2px 4px -2px rgba(0,0,0,0.05) !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}

.tool-box::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
    transition: left 0.6s !important;
}

.tool-box:hover {
    background: linear-gradient(135deg, var(--color-accent) 0%, #5b5fcf 100%) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 12px 24px -8px rgba(99,102,241,0.4), 0 6px 16px -4px rgba(99,102,241,0.2) !important;
    border-color: var(--color-accent) !important;
}

.tool-box:hover::before {
    left: 100% !important;
}

.tool-box:active {
    transform: translateY(-1px) scale(1.01) !important;
    box-shadow: 0 6px 16px -6px rgba(99,102,241,0.3), 0 3px 8px -3px rgba(99,102,241,0.15) !important;
    transition: all 0.1s ease !important;
}

.tool-box:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.3), 0 4px 12px -4px rgba(0,0,0,0.15) !important;
}

.tool-box i {
    font-size: 1.1rem !important;
    width: 16px !important;
    text-align: center !important;
}

.tool-box span {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}

/* Responsive Design for Button-Style Tools */
@media (max-width: 600px) {
    .tools-section {
        padding: 2.5rem 0;
    }
    
    .tools-header h2 {
        font-size: 2rem;
    }
    
    .tools-grid {
        gap: 0.4rem;
        max-width: 100%;
        padding: 0 1rem;
    }
    
    .tool-box {
        padding: 0.7rem 1.1rem !important;
        font-size: 0.85rem !important;
        border-radius: 10px !important;
        border-width: 1.5px !important;
    }
    
    .tool-box i {
        font-size: 1rem !important;
        width: 14px !important;
    }
    
    .tool-box span {
        font-size: 0.85rem !important;
    }
}

@media (min-width: 601px) and (max-width: 768px) {
    .tools-grid {
        gap: 0.45rem;
        max-width: 700px;
    }
    
    .tool-box {
        padding: 0.8rem 1.2rem !important;
        border-radius: 11px !important;
    }
}

/* Global processing overlay */
.glass-overlay {position:fixed; inset:0; display:none; align-items:center; justify-content:center; backdrop-filter:blur(10px) saturate(130%); -webkit-backdrop-filter:blur(10px) saturate(130%); background:rgba(15,23,42,0.45); z-index:1300;}
.glass-processing-card {background:var(--color-surface-alt); border:1px solid var(--color-border); padding:2rem 2.25rem; border-radius:24px; width: min(420px,90%); text-align:center; box-shadow:0 18px 50px -12px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,0.06);} 
.spinner-dual {width:64px;height:64px; border:5px solid rgba(255,255,255,.15); border-top-color: var(--color-accent); border-right-color: var(--color-accent-alt); border-radius:50%; margin:0 auto 1.25rem; animation: spin 1s linear infinite;} 
@keyframes spin {0%{transform:rotate(0);}100%{transform:rotate(360deg);}}
.progress-track {height:10px; background:rgba(255,255,255,.08); border-radius:8px; overflow:hidden; margin-top:1rem; position:relative;}
.progress-fill {height:100%; width:0; background:linear-gradient(90deg,var(--color-accent),var(--color-accent-alt)); box-shadow:0 0 8px -2px var(--color-accent); transition:width .35s ease;}
.processing-status {font-weight:600; font-size:.95rem; letter-spacing:.5px; color:var(--color-text-soft);} 
.result-card {background:var(--color-surface); border:1px solid var(--color-border); padding:1.5rem 1.75rem; border-radius:20px; margin-top:2rem; text-align:center;}
.download-btn-primary {display:inline-flex; align-items:center; gap:.6rem; background:linear-gradient(135deg,var(--color-accent),var(--color-accent-alt)); color:#fff; border:none; border-radius:14px; padding:.9rem 1.4rem; font-weight:600; text-decoration:none; cursor:pointer; box-shadow:0 6px 22px -8px rgba(99,102,241,.6);} 
.download-btn-primary:hover {filter:brightness(1.07); transform:translateY(-2px);}