:root {
  color-scheme: light;
  --site-pattern: url("kodaq-pattern.jpg");
  --site-bg-soft: url("kodaq-bg-soft.jpg");
  --site-bg-hero: url("kodaq-bg-hero.jpg");
  --site-bg-gold-teal: url("kodaq-bg-gold-teal.jpg");
  --site-bg-neutral: url("kodaq-bg-neutral.jpg");
}


html[dir="ltr"] body {
  font-family: "Sora", "Montserrat", "Cairo", sans-serif;
}


.site-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.site-pref-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 42px;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--primary-deep);
  background: rgba(255, 255, 255, 0.66);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.site-pref-button:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 61, 63, 0.24);
  background: rgba(255, 255, 255, 0.9);
}

.site-pref-button .material-symbols-outlined {
  font-size: 20px;
}

.site-control-text {
  letter-spacing: 0;
}

.site-header .button,
.site-header .nav-action {
  width: auto;
}
























@media (max-width: 900px) {
  .site-controls {
    gap: 6px;
  }

  .site-control-text {
    display: none;
  }
}

@media (max-width: 640px) {
  .site-header .nav {
    min-width: 0;
    flex-wrap: nowrap;
  }

  .site-header .brand {
    min-width: auto;
    flex: 0 0 auto;
    gap: 0;
  }

  .site-header .brand-mark {
    display: block;
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .site-header .brand-name small {
    display: none;
  }

  .site-header .nav-links {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .site-header .nav > .button,
  .site-header .nav > .nav-action {
    display: none;
  }

  .site-controls {
    gap: 4px;
  }

  .site-pref-button {
    min-width: 36px;
    min-height: 36px;
    padding: 8px;
  }

  .site-pref-button .material-symbols-outlined {
    font-size: 19px;
  }

  .container,
  .hero-inner,
  .app-hero-inner,
  .legal-hero-inner,
  .commerce-container,
  .commerce-hero-inner,
  .admin-layout,
  .admin-main,
  .admin-panel,
  .control-grid,
  .activation-layout,
  .activation-panel,
  .license-card {
    min-width: 0;
    max-width: 100%;
  }

  .activation-layout {
    width: min(var(--container), calc(100% - 32px));
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-inner,
  .app-hero-inner,
  .legal-hero-inner,
  .commerce-hero-inner,
  .license-card,
  .download-box {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-inner > *,
  .app-hero-inner > *,
  .legal-hero-inner > *,
  .commerce-hero-inner > *,
  .activation-layout > *,
  .license-card > *,
  .download-box > *,
  .download-actions,
  .download-actions > *,
  .actions,
  .hero-actions,
  .commerce-actions {
    min-width: 0;
    max-width: 100%;
  }

  .download-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .activation-panel,
  .license-card,
  .control-card,
  .legal-note,
  .panel-title,
  .plan-row,
  .data-checklist span {
    overflow-wrap: anywhere;
  }

  .editable-table-wrap,
  .admin-table {
    max-width: 100%;
  }

  .editable-table-wrap {
    direction: ltr;
  }

  .editable-table-wrap table,
  .editable-table-wrap th,
  .editable-table-wrap td {
    direction: rtl;
  }
}

/* KODAQ full dark mode + premium glass layer */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #EEF4F3;
  --primary: #37D0C5;
  --primary-deep: #EAF7F4;
  --teal: #5DE0D2;
  --gold: #F2AA00;
  --gold-text: #FFD56F;
  --gold-soft: rgba(242, 170, 0, 0.18);
  --surface: #061F21;
  --surface-strong: #0A2C2F;
  --muted: #A9BCBC;
  --line: rgba(255, 255, 255, 0.14);
  --glass: rgba(8, 45, 47, 0.56);
  --glass-strong: rgba(9, 45, 48, 0.74);
  --shadow: 0 32px 100px rgba(0, 0, 0, 0.42);
  --glow: 0 0 38px rgba(242, 170, 0, 0.28), 0 0 90px rgba(55, 208, 197, 0.16);
  --logo-card-bg: rgba(8, 45, 47, 0.82);
}

html[data-theme="dark"] body {
  color: var(--ink) !important;
  background:
    radial-gradient(circle at 16% 9%, rgba(242, 170, 0, 0.18), transparent 28%),
    radial-gradient(circle at 80% 3%, rgba(55, 208, 197, 0.13), transparent 26%),
    linear-gradient(180deg, rgba(3, 20, 22, 0.98), rgba(6, 31, 33, 0.98)),
    var(--bg-soft, var(--site-bg-soft)) center / cover fixed !important;
}

html[data-theme="dark"] body::before { background: rgba(242, 170, 0, 0.30) !important; }
html[data-theme="dark"] body::after { background: rgba(55, 208, 197, 0.26) !important; }

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .commerce-header {
  background: rgba(5, 27, 29, 0.76) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .brand-name,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .commerce-title,
html[data-theme="dark"] .legal-hero h1,
html[data-theme="dark"] .admin-kpi-value {
  color: var(--primary-deep) !important;
}

html[data-theme="dark"] .brand-name small,
html[data-theme="dark"] p,
html[data-theme="dark"] .hero-copy,
html[data-theme="dark"] .nav-links a,
html[data-theme="dark"] .legal-meta span,
html[data-theme="dark"] .metric-card span,
html[data-theme="dark"] .admin-gate-note,
html[data-theme="dark"] .admin-kpi-label {
  color: var(--muted) !important;
}

html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .nav-links a.active {
  color: #061F21 !important;
  background: rgba(242, 170, 0, 0.92) !important;
}

html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] .site-pref-button,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .tag,
html[data-theme="dark"] .commerce-tags span,
html[data-theme="dark"] .legal-meta span {
  color: var(--primary-deep) !important;
  background: rgba(9, 45, 48, 0.68) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(20px) saturate(1.18);
}

html[data-theme="dark"] .site-pref-button:hover,
html[data-theme="dark"] .site-pref-button.is-active {
  background: rgba(242, 170, 0, 0.92) !important;
  color: #061F21 !important;
  border-color: rgba(242, 170, 0, 0.42) !important;
}

html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .step,
html[data-theme="dark"] .feature-chip,
html[data-theme="dark"] .solution-card,
html[data-theme="dark"] .control-card,
html[data-theme="dark"] .admin-panel,
html[data-theme="dark"] .legal-note,
html[data-theme="dark"] .plan-row,
html[data-theme="dark"] .commerce-card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .download-box,
html[data-theme="dark"] .license-card,
html[data-theme="dark"] .media-card,
html[data-theme="dark"] .cta {
  background: linear-gradient(145deg, rgba(9, 45, 48, 0.76), rgba(3, 20, 22, 0.54)) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  box-shadow: 0 26px 85px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  color: var(--ink) !important;
  background: rgba(4, 24, 26, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: rgba(238, 244, 243, 0.48) !important; }

html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td { border-color: rgba(255, 255, 255, 0.12) !important; }
html[data-theme="dark"] th { color: var(--primary-deep) !important; background: rgba(242, 170, 0, 0.08) !important; }

.kodaq-wa-float {
  position: fixed;
  inset: auto 20px 20px auto;
  z-index: 70;
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  color: #081f20;
  background: linear-gradient(135deg, #ffd56f, #f2aa00);
  box-shadow: 0 18px 44px rgba(242, 170, 0, 0.34), 0 0 42px rgba(18, 107, 104, 0.18);
  transform: translateZ(0);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.kodaq-wa-float:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 24px 58px rgba(242, 170, 0, 0.42), 0 0 62px rgba(18, 107, 104, 0.26);
}

.kodaq-wa-float .material-symbols-outlined { font-size: 28px; }

@media (max-width: 640px) {
  .kodaq-wa-float { width: 52px; height: 52px; border-radius: 18px; inset: auto 14px 14px auto; }
}