/* assets/css/style.css */

/* --- Main- VARIABLES --- */
:root {
  /* Dark Mode Colors (Default) */
  --bg-body: #020617;
  /* Deepest Navy/Black */
  --bg-card: #0f172a;
  /* Dark Blue/Grey */
  --text-main: #f8fafc;
  /* White/Off-white */
  --text-muted: #94a3b8;
  /* Muted Grey */

  /* Brand Colors */
  --primary: #6366f1;
  /* Indigo */
  --primary-hover: #4f46e5;
  --accent: #ec4899;
  /* Pink */

  /* Glass Effect */
  --glass-bg: rgba(15, 23, 42, 0.6);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 12px;

  /* Spacing */
  --container-width: 1200px;
  --header-height: 80px;
  --radius: 12px;
}

/* Light Mode Override */
.theme-light {
  --bg-body: #ffffff;
  --bg-card: #f1f5f9;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --glass-bg: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(0, 0, 0, 0.05);
}

/* --- RESET & BASE --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-body);
  color: var(--text-main);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  transition: background-color 0.3s, color 0.3s;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- HEADER / NAVBAR --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background: rgba(2, 6, 23, 0.7);
  /* Fallback */
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1000;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Logo */
.header-brand {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.header-brand:hover {
  /* transform: scale(1.05); Removed per user request */
  color: var(--primary);
  text-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

/* Nav Links */
.header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-link {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 50px;
  transition: all 0.3s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-link:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.03);
}

.nav-link-icon {
  margin-right: 6px;
  transition: transform 0.3s ease;
}

.nav-link:hover .nav-link-icon {
  transform: translateY(-2px);
}

/* Right Actions (Theme/Lang) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-icon {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  border-color: var(--text-muted);
}

/* Language Dropdown */
.lang-switch {
  position: relative;
}

.lang-current {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 8px;
  display: none;
  /* JS to toggle */
  min-width: 100px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.lang-switch:hover .lang-dropdown {
  display: block;
}

.lang-dropdown a {
  display: block;
  padding: 8px 12px;
  font-size: 0.9rem;
  border-radius: 4px;
}

.lang-dropdown a:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 99px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
  /* Glow */
}

.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
}

.btn-ghost:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
}

/* --- HERO SECTION --- */
.hero {
  padding-top: 160px;
  /* Space for navbar */
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  border: 1px solid rgba(99, 102, 241, 0.2);
  margin-bottom: 24px;
}

.pill-dot {
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
}

.hero-title {
  font-size: 3.5rem;
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.hero-accent {
  background: linear-gradient(135deg, #6366f1, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-muted);
  margin-bottom: 40px;
  max-width: 500px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
}

.hero-metadata {
  display: flex;
  gap: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--glass-border);
}

.hero-stat {
  display: flex;
  flex-direction: column;
}

.hero-stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.hero-stat-value {
  font-weight: 600;
  font-size: 0.9rem;
}

/* --- HERO PREVIEW CARD --- */
.preview-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 6px;
  /* Inner border spacing */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.preview-card-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 8px;
}

.window-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot-red {
  background: #ef4444;
}

.dot-amber {
  background: #f59e0b;
}

.dot-green {
  background: #10b981;
}

.preview-title {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-left: auto;
  margin-right: auto;
}

.preview-card-body {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  padding: 20px;
}

.preview-images {
  display: flex;
  gap: 4px;
  height: 280px;
}

.preview-column {
  flex: 1;
  position: relative;
  background: #1e293b;
  border-radius: 8px;
  overflow: hidden;
}

.preview-label {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
}

.preview-face {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.8;
}

.preview-slider-hint {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 15px;
}

.hero-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 16px;
}

.dummy-tool-container {
  max-width: 480px;
  margin: 0 auto;
  transform: scale(0.95);
  width: 100%;
}

@media (max-width: 768px) {
  .dummy-tool-container {
    transform: none;
    padding: 0 10px;
  }
}

/* --- SECTIONS (Features, Steps, etc.) --- */
.section {
  padding: 100px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
  max-width: 700px;
  margin-inline: auto;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  padding: 32px;
  border-radius: var(--radius);
  transition: transform 0.2s;
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: 20px;
}

.feature-title {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.feature-body {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.feature-list li {
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding-left: 20px;
  position: relative;
}

.feature-list li::before {
  content: '•';
  color: var(--primary);
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* Steps */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  counter-reset: step;
}

.step-card {
  text-align: center;
  padding: 30px;
}

.step-number {
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
  display: block;
  margin-bottom: 16px;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--glass-border);
  padding: 60px 0 30px;
  margin-top: 60px;
  text-align: center;
}

.footer-links {
  margin-bottom: 20px;
}

.footer-links a {
  margin: 0 15px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.footer-links a:hover {
  color: var(--text-main);
}

.footer-copy {
  color: var(--text-muted);
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ---------- FOOTER STYLES ---------- */
.site-footer {
  background-color: #020617;
  /* Dark default */
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 60px 0 30px;
  margin-top: auto;
  color: #94a3b8;
}

html.theme-light .site-footer {
  background-color: #f8fafc;
  border-top: 1px solid #e2e8f0;
  color: #64748b;
}

/* Grid Layout */
.footer-top {
  /* Flexible Grid: Brand (2fr) + 3 Columns (1fr each) */
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 50px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
  text-align: left;
}

/* Brand Section */
.footer-logo img {
  height: 32px;
  width: auto;
}

/* Handle Logo visibility based on theme */
.footer-logo .logo-light {
  display: none;
}

.footer-logo .logo-dark {
  display: block;
}

html.theme-light .footer-logo .logo-light {
  display: block;
}

html.theme-light .footer-logo .logo-dark {
  display: none;
}

.footer-desc {
  font-size: 0.95rem;
  display: flex;
  line-height: 1.6;
  max-width: 300px;
  margin-bottom: 10px;
}

/* Social Icons */
.footer-socials {
  display: flex;
  gap: 15px;
}

.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  color: #fff;
  transition: all 0.2s ease;
  font-size: 1rem;
}

html.theme-light .footer-socials a {
  background: rgba(0, 0, 0, 0.05);
  color: #334155;
}

.footer-socials a:hover {
  background: #3b82f6;
  /* Premium Blue */
  color: #fff;
  transform: translateY(-3px);
}

/* Navigation Links */
.footer-heading {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
}

html.theme-light .footer-heading {
  color: #0f172a;
}

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav-list a {
  color: inherit;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.footer-nav-list a:hover {
  color: #3b82f6;
  padding-left: 5px;
  /* Tiny slide effect */
}

/* Bottom Bar */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

html.theme-light .footer-bottom {
  border-top: 1px solid #e2e8f0;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr;
    /* Stack vertically */
    gap: 40px;
    text-align: center;
  }

  .footer-col {
    align-items: center;
    /* Center items */
  }

  .footer-desc {
    margin: 0 auto 15px auto;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}

/* Responsive */
@media (max-width: 900px) {
  .hero-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    text-align: center;
    overflow: hidden;
    /* Prevent child overflow */
  }

  .hero-left,
  .hero-right {
    width: 100%;
    max-width: 100%;
  }

  .hero-title {
    font-size: 2.5rem;
    /* Smaller font for mobile */
  }

  .hero-actions {
    justify-content: center;
    flex-wrap: wrap;
    /* Handle button overflow */
  }

  .hero-metadata {
    justify-content: center;
    flex-wrap: wrap;
  }

  .steps-grid {
    grid-template-columns: 1fr;
  }

  .header-nav {
    display: none;
  }

  /* Mobile menu needed later */
}

/* File Uploader Box */
.upload-zone {
  border: 2px dashed var(--glass-border);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: rgba(0, 0, 0, 0.2);
  position: relative;
}

.upload-zone:hover {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.05);
}

.upload-input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
}

.upload-icon {
  font-size: 3rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  display: block;
}

.upload-text {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.upload-sub {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 800px) {
  .tool-layout {
    grid-template-columns: 1fr;
  }

  .tool-sidebar {
    margin-bottom: 20px;
  }
}



/* --- STATIC PAGES (About, Terms, Privacy) --- */

.page-section {
  padding-top: 120px;
  /* Extra space for fixed header */
  min-height: 80vh;
}

.page-card {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  /* optional soft shadow */
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.45);
}

.page-header {
  text-align: center;
  margin-bottom: 50px;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 16px;
  /* Gradient that works in both themes */
  background: linear-gradient(90deg,
      var(--text-main),
      var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-bar {
  width: 60px;
  height: 4px;
  background: var(--primary);
  margin: 0 auto;
  border-radius: 2px;
}

/* Typography for Admin Content */
.page-content {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.8;
}

.page-content h2 {
  color: var(--text-main);
  font-size: 1.75rem;
  margin-top: 40px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 10px;
}

.page-content h3 {
  color: var(--text-main);
  font-size: 1.4rem;
  margin-top: 30px;
  margin-bottom: 15px;
}

.page-content p {
  margin-bottom: 24px;
}

.page-content ul,
.page-content ol {
  margin-bottom: 24px;
  padding-left: 20px;
}

.page-content li {
  margin-bottom: 10px;
  list-style-type: disc;
}

.page-content a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.page-content a:hover {
  color: var(--primary-hover);
}

/* Responsive */
@media (max-width: 768px) {
  .page-card {
    padding: 30px 20px;
  }

  .page-title {
    font-size: 2rem;
  }
}

/*** Download Button **/

.tool-download-btn {
  display: none;
}

.tool-download-btn.is-visible {
  display: inline-flex;
  /* or block, up to you */
}

.enhancer-skeleton {
  position: absolute;
  inset: 0;
  display: none;
  /* JS will set flex when active */
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #0f172a, #1e293b, #0f172a);
  background-size: 200% 100%;
  animation: enhancerShimmer 1.8s infinite;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

@keyframes enhancerShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* =========================================
   COMPONENTS: Modern Tool Cards
   ========================================= */
.tool-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
  cursor: pointer;
  position: relative;
}

.tool-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
}

.tool-preview {
  height: 220px;
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: rgba(0, 0, 0, 0.3);
}

.tool-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tool-card:hover .tool-preview img {
  transform: scale(1.05);
}

.tool-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 5px;
}

.tool-info {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tool-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tool-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.tool-action {
  font-weight: 600;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  margin-top: auto;
}

.tool-card:hover .tool-action {
  color: var(--primary-hover);
}

/* =========================================
   UTILITIES: Tool Specifics & Privacy
   ========================================= */

/* =============================
   IMAGE ENHANCER – PREVIEW + SLIDER
   ============================= */

.tool-page-image-enhancer,
.tool-page-remove-bg,
.tool-page-face-restoration {
  padding-top: 110px;
  padding-bottom: 80px;
}

.tool-page-image-enhancer-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
}

.tool-preview-column,
.tool-panel-column {
  flex: 1 1 320px;
}

/* Preview box  */
.enhancer-preview-box {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: radial-gradient(circle at top left, var(--bg-card), var(--bg-body));
  border: 1px solid var(--glass-border);
  aspect-ratio: 4 / 3;
  /* keeps height stable */
}

/* Images */
.enhancer-preview-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* After image clipped by slider */
#previewEnhanced {
  clip-path: inset(0 0 0 50%);
  transition: opacity 0.25s ease;

  /* Checkerboard for transparency */
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #ddd 25%, transparent 25%),
    linear-gradient(-45deg, #ddd 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ddd 75%),
    linear-gradient(-45deg, transparent 75%, #ddd 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Slider handle (line + knob) */
.enhancer-slider-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.enhancer-slider-line {
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

.enhancer-slider-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 18px;
  color: #fff;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
}

/* Invisible range input */
#compareSlider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
  /* Allow vertical scrolling on mobile */
}

/* Shimmer overlay */
.enhancer-skeleton {
  position: absolute;
  inset: 0;
  display: none;
  opacity: 0;
  background: linear-gradient(90deg,
      rgba(15, 23, 42, 0.96) 0%,
      rgba(30, 64, 175, 0.95) 40%,
      rgba(15, 23, 42, 0.96) 80%);
  background-size: 300% 100%;
  animation: enhancer-shimmer 3s infinite linear;
  pointer-events: none;
}

@keyframes enhancer-shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.tool-preview-tip {
  margin-top: 10px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Status text – re-use theme variables */
.tool-status {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.tool-status-success {
  color: #4ade80;
}

.tool-status-error {
  color: #f97373;
}

/* Dropzone + panel (simple, theme-aware) */
.tool-panel-card {
  background: var(--glass-bg);
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  padding: 24px 22px;
}

.tool-panel-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 6px;
}

.tool-panel-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.tool-dropzone {
  border-radius: 14px;
  border: 1.5px dashed rgba(148, 163, 184, 0.6);
  padding: 22px 18px;
  text-align: center;
  background: rgba(15, 23, 42, 0.4);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.theme-light .tool-dropzone {
  background: rgba(241, 245, 249, 0.8);
}

.tool-dropzone:hover {
  border-color: var(--primary);
}

.tool-dropzone-title {
  font-size: 0.98rem;
  color: var(--text-main);
  margin-bottom: 4px;
}

.tool-dropzone-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.tool-dropzone-btn {
  border-radius: 999px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #f9fafb;
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}

/* Scale buttons (uses your existing variables) */
.tool-scale-row {
  margin-top: 18px;
}

.tool-scale-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.tool-scale-buttons {
  display: flex;
  gap: 8px;
}

.scale-btn {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: transparent;
  color: var(--text-main);
  padding: 6px 14px;
  font-size: 0.8rem;
  cursor: pointer;
}

.scale-btn span {
  opacity: 0.7;
  margin-left: 4px;
  font-size: 0.78rem;
}

.scale-btn-active {
  border-color: var(--primary);
  background: linear-gradient(198deg, var(--primary), var(--bg-card));
  color: #f9fafc;
}

/* Enhance button */
/* Enhance button */
.tool-enhance-btn {
  margin-top: 18px;
  width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tool-enhance-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
  filter: brightness(1.1);
}

.tool-enhance-btn:active {
  transform: translateY(0);
}

.tool-enhance-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.tool-enhance-btn .btn-label-loading {
  display: none;
}

.tool-enhance-btn.is-loading .btn-label-default {
  display: none;
}

.tool-enhance-btn.is-loading .btn-label-loading {
  display: inline;
}

/* --- FINAL CTA SECTION --- */
.section-cta {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.cta-inner {
  max-width: 900px;
  margin: 0 auto;
}

.cta-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 60px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Glow effect behind */
.cta-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}

.cta-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

.cta-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 16px;
  background: linear-gradient(to right, #fff, #94a3b8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}

.cta-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 32px;
}

.cta-actions {
  position: relative;
  z-index: 2;
}

/* Enhancer button override for CTA */
.btn-cta-lg {
  padding: 16px 40px;
  font-size: 1.1rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 0 25px rgba(99, 102, 241, 0.4);
}

.btn-cta-lg:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 40px rgba(99, 102, 241, 0.5);
}

@media (max-width: 768px) {
  .cta-card {
    padding: 40px 20px;
  }

  .cta-title {
    font-size: 2rem;
  }
}

/* Small spinner */
.btn-spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
  display: none;
}

.tool-enhance-btn.is-loading .btn-spinner {
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Terms */
.tool-terms {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.tool-terms a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Responsive */
@media (max-width: 900px) {
  .tool-page-image-enhancer-inner {
    flex-direction: column;
    align-items: stretch;
    /* Force full width on mobile */
    gap: 24px;
  }

  .tool-preview-column {
    margin-bottom: 50px;
    /* Failsafe spacing */
  }
}


/* --- INFO CARDS (Privacy / Alternative) --- */
.info-section {
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  padding: 80px 0;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

/* Centered Premium Logic */
.info-card-center {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 50px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-card-center:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* Specific glows based on type */
.card-privacy {
  border-top: 4px solid #10b981;
}

.card-privacy::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top, rgba(16, 185, 129, 0.08), transparent 50%);
  pointer-events: none;
}

.card-alternative {
  border-top: 4px solid #f59e0b;
}

.card-alternative::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top, rgba(245, 158, 11, 0.08), transparent 50%);
  pointer-events: none;
}

.info-icon-center {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}

.icon-privacy {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.icon-alternative {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

.info-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-main);
  position: relative;
  z-index: 2;
}

.info-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-muted);
  position: relative;
  z-index: 2;
}

@media (max-width: 900px) {
  .info-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.nav-link-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.2s;
}

.nav-link-dropdown:hover {
  /* Explicitly transparent to prevent card style */
  background: transparent !important;
  color: var(--text-main);
}

.nav-caret {
  font-size: 0.7rem;
  opacity: 0.8;
}



.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  /* Horizontal Layout */
  min-width: 400px;
  max-width: 600px;
  padding: 12px;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  z-index: 2000;
}

/* Invisible bridge to prevent closing when moving mouse */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -20px;
  /* Bridge the gap */
  left: 0;
  width: 100%;
  height: 20px;
  background: transparent;
}

.nav-dropdown-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s;
  text-decoration: none;
  background: transparent;
}

.nav-dropdown-link:hover {
  background: transparent;
  color: var(--primary);
  /* Removed card/transform effects */
}

.nav-dropdown-open {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Force hover state - Moved to bottom to ensure cascade priority */
.nav-item-has-dropdown:hover .nav-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}



/* ---- Brand logo for dark/light theme ---- */

.header-brand-logo {
  height: 60px;
  display: inline-block;
  vertical-align: middle;
}

/* Default: dark mode (html has no .theme-light class) */
.header-brand-logo--light {
  display: none;
}

/* When theme-light is active on <html>, flip them */
.theme-light .header-brand-logo--light {
  display: inline-block;
}

.theme-light .header-brand-logo--dark {
  display: none;
}

/* ---------- Header base layout (desktop) ---------- */

.tool-view-container {
  min-height: 600px;
  position: relative;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: linear-gradient(to bottom, rgba(2, 6, 23, 0.96), rgba(2, 6, 23, 0.92));
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

html.theme-light .site-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: rgba(148, 163, 184, 0.22);
}

.header-inner {
  max-width: var(--container-width, 1200px);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  min-height: 56px;
}

.header-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--text-main);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  z-index: 3001;
  /* always above overlay */
}

/* Logo swap (dark/light) */
.header-brand-logo--dark {
  display: block;
}

.header-brand-logo--light {
  display: none;
}

html.theme-light .header-brand-logo--dark {
  display: none;
}

html.theme-light .header-brand-logo--light {
  display: block;
}

/* NAV (desktop) */
.header-nav {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2.9rem;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.94rem;
  padding: 0.2rem 0;
  position: relative;
  transition: color 0.18s ease;
}

.nav-link:hover {
  color: var(--text-main);
}

.nav-link-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-link-icon {
  font-size: 0.9rem;
  opacity: 0.8;
}

.nav-item-has-dropdown {
  position: relative;
}

.nav-caret {
  font-size: 0.75rem;
  opacity: 0.8;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.4rem;
  min-width: 190px;
  padding: 0.4rem 0;
  background: var(--bg-card);
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.7);
  display: none;
  z-index: 2100;
}

.nav-dropdown-open {
  display: block;
}

.nav-dropdown-link {
  display: block;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease;
}

.nav-dropdown-link:hover {
  background: rgba(148, 163, 184, 0.16);
  color: var(--text-main);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  z-index: 5000 !important;
  /* Ensure it's above any invisible overlays */
  position: relative;
}

.btn-icon {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-main);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.btn-lang {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-main);
  cursor: pointer;
  font-size: 0.7rem;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.btn-icon:hover {
  background: rgba(148, 163, 184, 0.25);
  border-color: rgba(148, 163, 184, 0.8);
}

.lang-switch {
  position: relative;
  margin-right: 0 !important;
  /* Force no margin */
  pointer-events: none;
  /* Prevent container from blocking clicks */
}

.lang-switch>* {
  pointer-events: auto;
  /* Re-enable clicks on button and dropdown */
}

.lang-dropdown {
  position: absolute;
  /* Ensure dropdown doesn't overlap neighbors */
  width: max-content;
  right: 0;
  top: 100%;
  margin-top: 10px;
  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 15px 15px rgba(15, 23, 42, 0.35);
  display: none;
  min-width: 140px;
  z-index: 2200;
  pointer-events: auto;
  /* Re-enable clicks inside dropdown */

  /* SCROLL SUPPORT */
  max-height: 280px;
  /* Approx 8 items */
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Custom Scrollbar for Webkit */
.lang-dropdown::-webkit-scrollbar {
  width: 6px;
}

.lang-dropdown::-webkit-scrollbar-track {
  background: var(--bg-card);
}

.lang-dropdown::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 3px;
}

/* Add bridge to prevent closing on gap */
.lang-dropdown::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  width: 100%;
  height: 15px;
}

.lang-switch:hover .lang-dropdown,
.lang-dropdown.show {
  display: block;
}

.lang-dropdown a {
  display: block;
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
}

.lang-dropdown a:hover {
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-main);
}

/* Mobile toggle hidden on desktop */
.mobile-menu-toggle {
  display: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

/* ---------- MOBILE NAV FIX (<= 991px) ---------- */
@media (max-width: 991px) {
  .header-inner {
    gap: 0.75rem;
    flex-wrap: nowrap;
  }

  /* Hamburger button - pushed to left via order if flex container allows, 
     but currently .header-inner is space-between. 
     To move hamburger to left, we might need to change HTML order or use flex tricks. 
     User said "hamburger in good place" (which usually means right for mobile, or left if admin). 
     User said "hamburger should be in the left" in PREVIOUS request for admin. 
     For FRONTEND user said "hamburger ... is in good place". 
     Wait, user said "hamburger ... is in good place". So I won't move it. 
     I will focus on "sidebar should be open like we did for admin".
  */
  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: var(--text-main);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 3100;
  }

  .mobile-menu-toggle:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.1);
  }

  /* --- SIDEBAR OVERLAY --- */
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 2400;
    /* Below nav (2500) */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .sidebar-overlay.is-visible {
    opacity: 1;
    visibility: visible;
  }

  /* --- SLIDE-OUT SIDEBAR --- */
  .header-nav {
    display: block !important;
    /* Override desktop flex/none behavior */
    position: fixed;
    top: 0;
    right: -100%;
    /* Hidden off-canvas (Right) */
    left: auto;
    /* Unset left */
    width: 280px;
    height: 100vh;
    background: #020617;
    /* Solid Dark */
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
    z-index: 2500;
    padding: 80px 20px 40px 20px;
    overflow-y: auto;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Animate Right */
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    /* Shadow on left */
    border-left: 1px solid var(--glass-border);
    /* Removed backdrop-filter to prevent text blurriness */
  }

  /* Light Theme Sidebar */
  html.theme-light .header-nav {
    background: #ffffff;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-left: 1px solid rgba(0, 0, 0, 0.05);
  }

  .header-nav.is-open {
    right: 0;
    /* Slide in */
    left: auto;
    opacity: 1;
    transform: none;
  }

  body.nav-open {
    overflow: hidden;
  }

  /* Elevate header above overlay when open */
  body.nav-open .site-header {
    z-index: 3000 !important;
  }

  /* Stack items vertically */
  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }

  /* Modern Link Styling */
  .nav-link {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
    justify-content: flex-start;
    /* Align left */
    margin-bottom: 0;
  }

  html.theme-light .nav-link {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.05);
    color: #475569;
  }

  .nav-link:hover,
  .nav-link:active {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    color: var(--text-main);
    transform: translateX(5px);
  }

  html.theme-light .nav-link:hover {
    background: rgba(99, 102, 241, 0.08);
    color: #0f172a;
  }

  .nav-link-inner {
    width: 100%;
    justify-content: space-between;
  }

  .nav-link-icon {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
    margin-right: 12px;
    color: var(--primary);
  }

  /* Dropdown Toggles */
  .nav-item-has-dropdown {
    width: 100%;
  }

  .nav-link-dropdown {
    width: 100%;
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 12px 16px;
    color: var(--text-muted);
    font-weight: 500;
  }

  html.theme-light .nav-link-dropdown {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.05);
    color: #475569;
  }

  /* Mobile Dropdown Menu */
  .nav-dropdown {
    position: static;
    width: 100%;
    margin-top: 5px;
    border-radius: 12px;
    box-shadow: none;
    background: transparent;
    border: none;
    padding: 0 0 0 10px;
    /* Indent */
    display: none;
  }

  .nav-dropdown-open {
    display: block;
    animation: fadeIn 0.3s ease;
  }

  .nav-dropdown-link {
    padding: 10px 15px;
    font-size: 0.9rem;
    color: var(--text-muted);
    border-left: 2px solid var(--glass-border);
    margin-left: 10px;
    border-radius: 0 8px 8px 0;
  }

  .nav-dropdown-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    border-left-color: var(--primary);
  }

  html.theme-light .nav-dropdown-link {
    color: #64748b;
    border-left-color: rgba(0, 0, 0, 0.1);
  }

  html.theme-light .nav-dropdown-link:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #0f172a;
  }

  .lang-switch:hover .lang-dropdown {
    display: none;
  }
}

/* Tool Page Container - Fix header overlap */
.tool-page-container {
  padding-top: calc(var(--header-height) + 40px);
  margin-bottom: 20px;
}

/* Premium Tool Toggle (Segmented Control Style) */
.tool-toggle-wrapper {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  position: relative;
  margin-bottom: 30px;
  gap: 5px;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 5px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  margin-top: 20px;
  /* Centering */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.tool-toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 999px;
  color: #94a3b8;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  white-space: nowrap;
}

.tool-toggle-pill i {
  font-size: 1rem;
  opacity: 0.7;
  transition: transform 0.3s ease;
}

.tool-toggle-pill:hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.03);
}

.tool-toggle-pill:hover i {
  transform: scale(1.1);
  opacity: 1;
}

.tool-toggle-pill.active {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tool-toggle-pill.active i {
  opacity: 1;
}

/* Light Mode Overrides */
html.theme-light .tool-toggle-wrapper {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

html.theme-light .tool-toggle-pill {
  color: #64748b;
}

html.theme-light .tool-toggle-pill:hover {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.03);
}

html.theme-light .tool-toggle-pill.active {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* ----------------------------------------------------- */
/* GOOGLE TRANSLATE WIDGET STYLING                       */
/* ----------------------------------------------------- */

/* Container placement */
#google_translate_element {
  display: inline-block;
  vertical-align: middle;
  min-width: 120px;
}

/* Hide the top frame */
.goog-te-banner-frame {
  display: none !important;
}

body {
  top: 0 !important;
}

/* Customize the widget select box */
.goog-te-gadget-simple {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 6px 10px !important;
  border-radius: 99px !important;
  font-family: inherit !important;
  font-size: 0.85rem !important;
  color: #fff !important;
  transition: all 0.2s ease;
  cursor: pointer;
}

.goog-te-gadget-simple:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Hide annoying "Powered by Google" text/logo if possible cleanly */
.goog-te-gadget-icon {
  display: none !important;
}

/* Text styles inside widget */
.goog-te-menu-value {
  color: #e2e8f0 !important;
  font-family: 'Inter', sans-serif !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.goog-te-menu-value span {
  color: #e2e8f0 !important;
  border-left: none !important;
}

.goog-te-menu-value span:first-child {
  /* The language name */
  font-weight: 500;
}

/* Ensure dropdown menu is visible and high z-index, but NOT bulky */
.goog-te-menu-frame {
  z-index: 999999 !important;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5) !important;
  border-radius: 12px !important;

  /* Constraint the size to look like a normal dropdown */
  max-width: 300px !important;
  max-height: 400px !important;
  width: 100% !important;
  /* Allow it to shrink */

  /* Fix positioning if needed - usually strictly controlled by Google JS, 
       but we can try to influence it */
}

/* 
   Hack to style the iframe content? 
   We cannot easily style INSIDE the iframe due to browser security,
   but constraining the iframe dimensions usually forces Google's
   internal layout to switch to a vertical list.
*/
/* ----------------------------------------------------- */
/* FAQ SECTION STYLES                                   */
/* ----------------------------------------------------- */
.section-faq {
  padding: 4rem 0;
  position: relative;
  z-index: 10;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2.5rem;
  background: linear-gradient(to right, #fff, #94a3b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

html.theme-light .section-title {
  background: linear-gradient(to right, #0f172a, #475569);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.faq-grid {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html.theme-light .faq-item {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.faq-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

html.theme-light .faq-item:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.faq-question {
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #f8fafc;
  list-style: none;
}

html.theme-light .faq-question {
  color: #0f172a;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-icon {
  transition: transform 0.3s ease;
  font-size: 0.9rem;
  color: #94a3b8;
}

html.theme-light .faq-icon {
  color: #64748b;
}

details[open] .faq-icon {
  transform: rotate(180deg);
  color: #38bdf8;
}

html.theme-light details[open] .faq-icon {
  color: #2563eb;
}

.faq-answer {
  padding: 0 1.5rem 1.5rem 1.5rem;
  color: #cbd5e1;
  line-height: 1.6;
  font-size: 0.95rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 0;
  padding-top: 1rem;
}

html.theme-light .faq-answer {
  color: #475569;
  border-top-color: #e2e8f0;
}

/* Animation for opening */
details[open] .faq-answer {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----------------------------------------------------- */

/* 1. Hide the banner frame visually but keep it in DOM */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
iframe.goog-te-banner-frame,
.skiptranslate {
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  top: -9999px !important;
  display: block !important;
}

/* 2. Reset Body Position (Google pushes it down by 40px) */
body {
  top: 0px !important;
  position: static !important;
  min-height: 0 !important;
  margin-top: 0px !important;
}

/* 3. Hide the "Original text" tooltip popup on hover */
.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 4. Hide "Suggest better translation" popup */
#goog-gt-tt {
  display: none !important;
  visibility: hidden !important;
}

/* 5. Ensure our custom switcher stays visible */
.lang-switch {
  position: relative;
  z-index: 999999;
}

/* --- HISTORY SECTION MODERN UI --- */
.history-grid-container {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 10px 5px 20px 5px;
  /* Bottom padding for hover scale */
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
}

.history-card {
  flex: 0 0 100px;
  width: 100px;
  height: 100px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  /* Checkerboard base */
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #ddd 25%, transparent 25%),
    linear-gradient(-45deg, #ddd 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ddd 75%),
    linear-gradient(-45deg, transparent 75%, #ddd 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.history-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hover Effects */
.history-card:hover {
  transform: translateY(-5px) scale(1.05);
  border-color: var(--primary);
  box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.3);
  z-index: 10;
}

.history-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Fix download button flicker */
.tool-download-btn {
  display: none;
}

/* --- Sample Gallery Section (Premium Modern) --- */
.gallery-section {
  padding: 80px 0;
  border-top: 1px solid var(--glass-border);
  position: relative;
}

.gallery-section-title {
  margin-bottom: 50px;
  text-align: center;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.gallery-item {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1/1;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
  background: #000;
  /* Fallback */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, opacity 0.3s;
  display: block;
}

.gallery-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* Hover Interaction */
.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.3);
  border-color: rgba(99, 102, 241, 0.3);
}

.gallery-item:hover img {
  transform: scale(1.15);
  opacity: 0.9;
}

/* Iconic Overlay */
.gallery-item::after {
  content: '\f00e';
  /* fa-magnifying-glass-plus */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  font-size: 1.5rem;
  color: #fff;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.gallery-item:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}