/**
 * global-ui.css  —  OnlineConvers Site-Wide Design System
 * =========================================================
 * Applies the homepage's premium light-mode design to every
 * inner page (calculator pages, category pages, static pages).
 *
 * Loaded AFTER styles.css, cat.css, calc-page.css so it wins
 * the specificity battle cleanly.
 *
 * Rules:
 *   - All overrides use the hp-* token system for consistency
 *   - NO HTML content is changed
 *   - Dark-mode variants respect [data-theme="dark"]
 *   - Mobile-first at 768px, 600px, 480px, 375px
 * =========================================================
 */

/* ============================================================
   1. DESIGN TOKENS  (mirrors homepage.css --hp-* variables)
   ============================================================ */
:root {
  /* Primary */
  --gu-primary:        #2563eb;
  --gu-primary-hover:  #1d4ed8;
  --gu-primary-light:  #eff6ff;
  --gu-primary-ring:   rgba(37, 99, 235, .15);
  --gu-secondary:      #0ea5e9;

  /* Surfaces */
  --gu-bg:             #f8fafc;
  --gu-surface:        #ffffff;
  --gu-surface-2:      #f1f5f9;

  /* Text */
  --gu-heading:        #111827;
  --gu-body:           #374151;
  --gu-muted:          #6b7280;
  --gu-subtle:         #9ca3af;

  /* Status */
  --gu-success:        #16a34a;
  --gu-warning:        #f59e0b;
  --gu-danger:         #ef4444;

  /* Borders */
  --gu-border:         #e5e7eb;
  --gu-border-focus:   #2563eb;

  /* Shadows */
  --gu-shadow-sm:   0 1px 3px rgba(0, 0, 0, .06);
  --gu-shadow-md:   0 4px 16px rgba(0, 0, 0, .08);
  --gu-shadow-lg:   0 10px 40px rgba(0, 0, 0, .10);
  --gu-shadow-pri:  0 6px 20px rgba(37, 99, 235, .25);

  /* Radius */
  --gu-r-sm:   8px;
  --gu-r-md:   14px;
  --gu-r-lg:   20px;
  --gu-r-full: 9999px;

  /* Transition */
  --gu-ease: all .2s cubic-bezier(.4, 0, .2, 1);

  /* Result accent */
  --gu-result-bg:      #f0fdf4;
  --gu-result-border:  #bbf7d0;
  --gu-result-text:    #15803d;
  --gu-result-amount:  #16a34a;
}

/* Dark mode token overrides */
html[data-theme="dark"] {
  --gu-bg:             #0f172a;
  --gu-surface:        #1e293b;
  --gu-surface-2:      #0f172a;
  --gu-heading:        #f1f5f9;
  --gu-body:           #cbd5e1;
  --gu-muted:          #94a3b8;
  --gu-subtle:         #64748b;
  --gu-border:         #334155;
  --gu-border-focus:   #60a5fa;
  --gu-primary-light:  rgba(37, 99, 235, .15);
  --gu-result-bg:      rgba(22, 163, 74, .12);
  --gu-result-border:  rgba(22, 163, 74, .30);
  --gu-result-text:    #4ade80;
  --gu-result-amount:  #4ade80;
}

/* ============================================================
   2. PAGE BODY  —  clean light background
   ============================================================ */
body.calc-page,
body.cat-page,
body.page-body {
  background: var(--gu-bg) !important;
  color: var(--gu-body) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

html[data-theme="dark"] body.calc-page,
html[data-theme="dark"] body.cat-page,
html[data-theme="dark"] body.page-body {
  background: var(--gu-bg) !important;
  color: var(--gu-body) !important;
}

/* ============================================================
   3. STICKY HEADER  —  always clean white
   ============================================================ */
.app-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e8ecf4 !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.06) !important;
  height: 64px !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  gap: 12px !important;
}

html[data-theme="dark"] .app-header {
  background: #fff !important;
  border-bottom-color: #e8ecf4 !important;
}

/* Logo */
.app-header .logo-icon {
  width: 34px !important;
  height: 34px !important;
  background: var(--gu-primary) !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.app-header .logo-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #fff !important;
  color: #fff !important;
}
html[data-theme="dark"] .app-header .logo-icon { background: var(--gu-primary) !important; }
html[data-theme="dark"] .app-header .logo-icon svg { stroke: #fff !important; }

/* Brand text */
.app-header .brand-text h1 {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  background: none !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}
.app-header .brand-text h1 span {
  color: var(--gu-primary) !important;
  -webkit-text-fill-color: var(--gu-primary) !important;
  background: none !important;
}
html[data-theme="dark"] .app-header .brand-text h1 { color: #1e293b !important; -webkit-text-fill-color: #1e293b !important; }
html[data-theme="dark"] .app-header .brand-text h1 span { color: var(--gu-primary) !important; -webkit-text-fill-color: var(--gu-primary) !important; }

/* Nav links in header */
.app-header .nav-link {
  color: #4b5563 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 5px 9px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}
.app-header .nav-link:hover {
  color: var(--gu-primary) !important;
  background: var(--gu-primary-light) !important;
}
.app-header .nav-link.active {
  color: var(--gu-primary) !important;
  background: var(--gu-primary-light) !important;
  font-weight: 600 !important;
}

/* Hamburger lines dark in light header */
.app-header .hamburger-line,
html[data-theme="dark"] .app-header .hamburger-line {
  background: #374151 !important;
}
.app-header .hamburger-btn,
html[data-theme="dark"] .app-header .hamburger-btn {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}
.app-header .hamburger-btn:hover,
html[data-theme="dark"] .app-header .hamburger-btn:hover {
  background: #e2e8f0 !important;
  border-color: var(--gu-primary) !important;
}

/* Contact button */
.contact-btn-header {
  display: inline-flex !important;
  align-items: center !important;
  padding: 7px 14px !important;
  background: var(--gu-primary) !important;
  color: #fff !important;
  border-radius: var(--gu-r-full) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  border: none !important;
  box-shadow: var(--gu-shadow-pri) !important;
  transition: var(--gu-ease) !important;
  text-decoration: none !important;
}
.contact-btn-header:hover {
  background: var(--gu-primary-hover) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

/* Nav dropdown menus */
.nav-dropdown-menu {
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: var(--gu-r-md) !important;
  box-shadow: var(--gu-shadow-lg) !important;
  padding: 6px !important;
  min-width: 200px !important;
}
.nav-dropdown-item {
  display: block !important;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  text-decoration: none !important;
  transition: var(--gu-ease) !important;
}
.nav-dropdown-item:hover {
  background: var(--gu-primary-light) !important;
  color: var(--gu-primary) !important;
}
.nav-dropdown-viewall {
  border-top: 1px solid #e2e8f0 !important;
  margin-top: 4px !important;
  color: var(--gu-primary) !important;
  font-weight: 600 !important;
}

/* ============================================================
   4. BREADCRUMB  — upgraded
   ============================================================ */
.cat-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: var(--gu-muted) !important;
  padding: 16px 0 8px !important;
  flex-wrap: wrap !important;
}
.cat-breadcrumb a {
  color: var(--gu-muted) !important;
  text-decoration: none !important;
  transition: color .15s !important;
}
.cat-breadcrumb a:hover { color: var(--gu-primary) !important; }
.cat-breadcrumb .bc-cur { color: var(--gu-primary) !important; font-weight: 500 !important; }
.cat-breadcrumb .bc-sep { opacity: .5 !important; }

/* ============================================================
   5. CATEGORY SIDEBAR  — cleaner cards
   ============================================================ */
.cat-sidebar-nav {
  background: var(--gu-surface) !important;
  border: 1px solid var(--gu-border) !important;
  border-radius: var(--gu-r-md) !important;
  overflow: hidden !important;
  box-shadow: var(--gu-shadow-sm) !important;
}
.cat-nav-item {
  color: var(--gu-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  border-left: 3px solid transparent !important;
  transition: var(--gu-ease) !important;
}
.cat-nav-item:hover {
  background: var(--gu-primary-light) !important;
  color: var(--gu-primary) !important;
}
.cat-nav-item.active {
  background: var(--gu-primary-light) !important;
  color: var(--gu-primary) !important;
  border-left-color: var(--gu-primary) !important;
  font-weight: 600 !important;
}
.cat-sidebar-widget {
  background: var(--gu-surface) !important;
  border: 1px solid var(--gu-border) !important;
  border-radius: var(--gu-r-md) !important;
  box-shadow: var(--gu-shadow-sm) !important;
}

html[data-theme="dark"] .cat-sidebar-nav,
html[data-theme="dark"] .cat-sidebar-widget {
  background: var(--gu-surface) !important;
  border-color: var(--gu-border) !important;
}
html[data-theme="dark"] .cat-nav-item { color: var(--gu-body) !important; }
html[data-theme="dark"] .cat-widget-title { color: var(--gu-heading) !important; }
html[data-theme="dark"] .cat-widget-desc { color: var(--gu-muted) !important; }

/* ============================================================
   6. CATEGORY HEADER BANNER
   ============================================================ */
.cat-header {
  background: var(--gu-surface) !important;
  border: 1px solid var(--gu-border) !important;
  border-radius: var(--gu-r-md) !important;
  box-shadow: var(--gu-shadow-sm) !important;
}
.cat-header-text h1 { color: var(--gu-heading) !important; }
.cat-header-text p   { color: var(--gu-muted) !important; }

/* ============================================================
   7. CALCULATOR CARDS  (cat-card grid)
   ============================================================ */
.cat-card {
  background: var(--gu-surface) !important;
  border: 1px solid var(--gu-border) !important;
  border-radius: var(--gu-r-md) !important;
  transition: var(--gu-ease) !important;
  box-shadow: var(--gu-shadow-sm) !important;
  text-decoration: none !important;
}
.cat-card:hover {
  border-color: #bfdbfe !important;
  box-shadow: 0 6px 24px rgba(37,99,235,.12) !important;
  transform: translateY(-3px) !important;
}
.cat-card-name { color: var(--gu-heading) !important; font-size: 12.5px !important; font-weight: 700 !important; }
.cat-card-desc { color: var(--gu-muted) !important; }
.cat-card-link { color: var(--gu-primary) !important; font-weight: 600 !important; }

html[data-theme="dark"] .cat-card {
  background: var(--gu-surface) !important;
  border-color: var(--gu-border) !important;
}
html[data-theme="dark"] .cat-card-name { color: var(--gu-heading) !important; }

/* Feature/benefit tiles */
.cat-feature, .cat-benefit {
  background: var(--gu-surface) !important;
  border: 1px solid var(--gu-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--gu-shadow-sm) !important;
}
.cat-feature-text strong, .cat-benefit-text strong { color: var(--gu-heading) !important; }
.cat-feature-text span,   .cat-benefit-text span   { color: var(--gu-muted) !important; }

.cat-section-card {
  background: var(--gu-surface) !important;
  border: 1px solid var(--gu-border) !important;
  border-radius: var(--gu-r-md) !important;
  box-shadow: var(--gu-shadow-sm) !important;
}
.cat-section-title { color: var(--gu-heading) !important; }

/* Disclaimer */
.cat-disclaimer {
  background: var(--gu-primary-light) !important;
  border-color: #bfdbfe !important;
  color: #1e40af !important;
}

/* ============================================================
   8. CALCULATOR GRID  (input + output two-col)
   ============================================================ */
.calculator-grid {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 24px !important;
  align-items: start !important;
}

/* ============================================================
   9. INPUT PANEL CARD
   ============================================================ */
.card,
.input-panel.card {
  background: var(--gu-surface) !important;
  border: 1px solid var(--gu-border) !important;
  border-radius: var(--gu-r-lg) !important;
  box-shadow: var(--gu-shadow-md) !important;
  padding: 28px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.card:hover {
  box-shadow: var(--gu-shadow-lg) !important;
  border-color: #bfdbfe !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .input-panel.card {
  background: var(--gu-surface) !important;
  border-color: var(--gu-border) !important;
}

/* Panel header */
.panel-header h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--gu-heading) !important;
  letter-spacing: -.4px !important;
  margin-bottom: 6px !important;
}
.panel-header p {
  color: var(--gu-muted) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* ============================================================
   10. FORM INPUTS
   ============================================================ */
.group-label {
  color: var(--gu-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  margin-bottom: 7px !important;
}

input[type="number"],
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="date"],
textarea,
select,
.calc-input {
  background: #f8fafc !important;
  border: 1.5px solid var(--gu-border) !important;
  color: var(--gu-heading) !important;
  border-radius: var(--gu-r-sm) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  padding: 11px 14px !important;
  transition: var(--gu-ease) !important;
  width: 100% !important;
  outline: none !important;
  box-sizing: border-box !important;
}
input[type="number"]::placeholder,
input[type="text"]::placeholder,
.calc-input::placeholder {
  color: var(--gu-subtle) !important;
}
input[type="number"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus,
.calc-input:focus {
  background: #fff !important;
  border-color: var(--gu-border-focus) !important;
  box-shadow: 0 0 0 3px var(--gu-primary-ring) !important;
}

select,
select.calc-input {
  cursor: pointer !important;
  appearance: auto !important;
}

html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .calc-input {
  background: rgba(255,255,255,.05) !important;
  border-color: var(--gu-border) !important;
  color: var(--gu-heading) !important;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] .calc-input:focus {
  background: rgba(255,255,255,.08) !important;
}

/* Range sliders */
input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 5px !important;
  background: var(--gu-border) !important;
  border-radius: var(--gu-r-full) !important;
  border: none !important;
  outline: none !important;
  width: 100% !important;
  padding: 0 !important;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: var(--gu-primary) !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(37,99,235,.35) !important;
}

/* ============================================================
   11. CALCULATE BUTTON
   ============================================================ */
.calc-btn-primary,
button.calc-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 14px 20px !important;
  background: var(--gu-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--gu-r-md) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: var(--gu-ease) !important;
  margin-top: 16px !important;
  box-shadow: var(--gu-shadow-pri) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.calc-btn-primary:hover,
button.calc-btn-primary:hover {
  background: var(--gu-primary-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(37,99,235,.38) !important;
  color: #fff !important;
}
.calc-btn-primary:active,
button.calc-btn-primary:active {
  transform: translateY(0) !important;
}

/* ============================================================
   12. RESULT / NET PAY CARD  —  clean green accent
   ============================================================ */
.net-pay-card {
  background: var(--gu-result-bg) !important;
  border: 1px solid var(--gu-result-border) !important;
  border-radius: var(--gu-r-lg) !important;
  padding: 28px !important;
  box-shadow: var(--gu-shadow-sm) !important;
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: none !important;
}
.net-pay-card::before { display: none !important; }

.net-pay-header h3 {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--gu-result-text) !important;
}
.net-pay-amount-wrapper .amount {
  font-size: 48px !important;
  font-weight: 800 !important;
  letter-spacing: -2px !important;
  color: var(--gu-result-amount) !important;
  background: none !important;
  -webkit-text-fill-color: var(--gu-result-amount) !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}
.net-pay-amount-wrapper .currency {
  color: var(--gu-result-amount) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
}
.net-pay-sub {
  font-size: 13px !important;
  color: var(--gu-muted) !important;
  margin-top: 6px !important;
}
.net-pay-sub strong { color: var(--gu-heading) !important; }

html[data-theme="dark"] .net-pay-card {
  background: var(--gu-result-bg) !important;
  border-color: var(--gu-result-border) !important;
}
html[data-theme="dark"] .net-pay-amount-wrapper .amount {
  color: var(--gu-result-amount) !important;
  -webkit-text-fill-color: var(--gu-result-amount) !important;
}

/* ============================================================
   13. BREAKDOWN / DETAIL ROWS
   ============================================================ */
.breakdown-item,
.deduction-row,
.summary-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--gu-border) !important;
  font-size: 14px !important;
  color: var(--gu-body) !important;
}
.breakdown-item:last-child,
.deduction-row:last-child,
.summary-row:last-child { border-bottom: none !important; }

.breakdown-label { color: var(--gu-body) !important; }
.breakdown-value { font-weight: 700 !important; color: var(--gu-heading) !important; }

/* ============================================================
   14. FORMULA CARD
   ============================================================ */
.formula-card {
  border-radius: var(--gu-r-md) !important;
  padding: 18px !important;
  margin-top: 20px !important;
}
.formula-expression {
  font-family: 'Courier New', monospace !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 10px !important;
  background: var(--gu-bg) !important;
  border-radius: var(--gu-r-sm) !important;
  color: var(--gu-heading) !important;
  text-align: center !important;
  word-break: break-all !important;
}
.formula-explanation {
  font-size: 13px !important;
  color: var(--gu-muted) !important;
  line-height: 1.65 !important;
}

/* ============================================================
   15. TABS  (calculator mode selectors)
   ============================================================ */
.tab-container {
  background: var(--gu-surface-2) !important;
  border: 1.5px solid var(--gu-border) !important;
  border-radius: var(--gu-r-sm) !important;
  padding: 4px !important;
  display: flex !important;
}
.tab-btn {
  background: transparent !important;
  border: none !important;
  color: var(--gu-muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  transition: var(--gu-ease) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.tab-btn:hover { color: var(--gu-primary) !important; background: var(--gu-primary-light) !important; }
.tab-btn.active {
  background: var(--gu-surface) !important;
  color: var(--gu-primary) !important;
  box-shadow: var(--gu-shadow-sm) !important;
  font-weight: 700 !important;
}

/* ============================================================
   16. CONTENT SECTIONS (SEO/info below calculator)
   ============================================================ */
.content-section,
.rich-content-container .content-section {
  background: var(--gu-surface) !important;
  border: 1px solid var(--gu-border) !important;
  border-radius: var(--gu-r-md) !important;
  padding: 28px 32px !important;
  margin-bottom: 20px !important;
  box-shadow: var(--gu-shadow-sm) !important;
}
.content-section h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--gu-heading) !important;
  border-bottom: 2px solid var(--gu-border) !important;
  padding-bottom: 10px !important;
  margin-bottom: 14px !important;
}
.content-section h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--gu-heading) !important;
  margin: 16px 0 8px !important;
}
.content-section p {
  font-size: 14.5px !important;
  color: var(--gu-body) !important;
  line-height: 1.75 !important;
  margin-bottom: 10px !important;
}
.content-section ul,
.content-section ol {
  padding-left: 22px !important;
  color: var(--gu-body) !important;
  font-size: 14.5px !important;
  line-height: 1.8 !important;
  margin-bottom: 10px !important;
}

html[data-theme="dark"] .content-section {
  background: var(--gu-surface) !important;
  border-color: var(--gu-border) !important;
}
html[data-theme="dark"] .content-section h2,
html[data-theme="dark"] .content-section h3 { color: var(--gu-heading) !important; }
html[data-theme="dark"] .content-section p,
html[data-theme="dark"] .content-section li  { color: var(--gu-body) !important; }

/* Intro lead card */
.intro-lead-card {
  background: var(--gu-primary-light) !important;
  border-left: 4px solid var(--gu-primary) !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
}
.intro-lead-card p { color: #1e40af !important; font-size: 15px !important; }

/* ============================================================
   17. STATIC PAGES  (about, blog, contact, privacy, etc.)
   ============================================================ */
.page-container,
.static-shell {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 32px 20px 60px !important;
}

/* ============================================================
   18. BLOG CARDS
   ============================================================ */
.blog-card,
.post-card {
  background: var(--gu-surface) !important;
  border: 1px solid var(--gu-border) !important;
  border-radius: var(--gu-r-md) !important;
  transition: var(--gu-ease) !important;
  overflow: hidden !important;
  box-shadow: var(--gu-shadow-sm) !important;
}
.blog-card:hover,
.post-card:hover {
  box-shadow: var(--gu-shadow-md) !important;
  border-color: #bfdbfe !important;
  transform: translateY(-3px) !important;
}

/* ============================================================
   19. NAV RIGHT AREA  (lang + contact alignment)
   ============================================================ */
.nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   20. FOOTER  —  matches homepage footer style
   ============================================================ */
.app-footer {
  background: #0f172a !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding: 40px 24px 28px !important;
  color: rgba(248,251,255,.5) !important;
  font-size: 13px !important;
  text-align: center !important;
  margin-top: 48px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.footer-link { color: rgba(248,251,255,.55) !important; }
.footer-link:hover { color: #7dd3fc !important; }

/* ============================================================
   21. SCROLLBAR  — subtle
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ============================================================
   22. MOBILE NAVIGATION OVERLAY  (injected by nav.js)
   ============================================================ */
.mobile-nav-overlay {
  background: rgba(15,23,42,.55) !important;
  backdrop-filter: blur(4px) !important;
}
.mobile-nav-panel {
  background: #ffffff !important;
  border-radius: 0 !important;
  box-shadow: var(--gu-shadow-lg) !important;
  max-width: 320px !important;
}
.mobile-nav-link {
  color: var(--gu-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 13px 20px !important;
  border-bottom: 1px solid var(--gu-border) !important;
  display: block !important;
  text-decoration: none !important;
  transition: var(--gu-ease) !important;
}
.mobile-nav-link:hover,
.mobile-nav-link.active {
  background: var(--gu-primary-light) !important;
  color: var(--gu-primary) !important;
}

/* ============================================================
   23. UTILITY CLASSES
   ============================================================ */
.info-box-read-only {
  background: var(--gu-surface-2) !important;
  border: 1.5px solid var(--gu-border) !important;
  color: var(--gu-heading) !important;
  border-radius: var(--gu-r-sm) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 11px 14px !important;
}

.result-error { color: #ef4444 !important; font-size: 13px !important; margin-top: 6px !important; }

/* Accordion */
.accordion-card {
  background: var(--gu-surface) !important;
  border: 1px solid var(--gu-border) !important;
  border-radius: var(--gu-r-sm) !important;
}
.accordion-title {
  color: var(--gu-heading) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 14px 16px !important;
}
.accordion-content {
  color: var(--gu-body) !important;
  border-top-color: var(--gu-border) !important;
  padding: 0 16px 14px !important;
}

/* ============================================================
   24. RESPONSIVE  —  Mobile First Breakpoints
   ============================================================ */

/* ── ≤1024px: hide desktop sidebar on tablet ── */
@media (max-width: 1024px) {
  .cat-sidebar { display: none !important; }
  .cat-body { grid-template-columns: 1fr !important; }
  .cat-cards { grid-template-columns: repeat(4, 1fr) !important; }
  .cat-features { grid-template-columns: repeat(2, 1fr) !important; }
  .cat-benefits { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── ≤768px: full mobile ── */
@media (max-width: 768px) {
  /* App container */
  .app-container { padding: 12px !important; }

  /* Header adjustments */
  .app-header {
    padding: 0 14px !important;
    height: 58px !important;
  }

  /* Calculator two-col → single col */
  .calculator-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Cards full width */
  .card, .input-panel.card, .net-pay-card {
    padding: 20px !important;
    border-radius: 16px !important;
  }

  /* Form grids */
  .form-row,
  .form-row-3,
  .form-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Panel header font */
  .panel-header h2 { font-size: 18px !important; }
  .net-pay-amount-wrapper .amount { font-size: 40px !important; }

  /* Cat shell */
  .cat-shell { padding: 0 12px 32px !important; }

  /* Cat cards grid */
  .cat-cards { grid-template-columns: repeat(2, 1fr) !important; }
  .cat-features { grid-template-columns: 1fr 1fr !important; }
  .cat-benefits { grid-template-columns: 1fr 1fr !important; }

  /* Content sections */
  .content-section { padding: 20px !important; }
  .content-section h2 { font-size: 17px !important; }

  /* Tabs */
  .tab-btn { font-size: 12px !important; padding: 7px 10px !important; }

  /* Visuals grid */
  .visuals-grid { grid-template-columns: 1fr !important; }
}

/* ── ≤600px: compact form elements ── */
@media (max-width: 600px) {
  .cat-cards { grid-template-columns: repeat(2, 1fr) !important; }

  input[type="number"],
  input[type="text"],
  input[type="email"],
  input[type="search"],
  select,
  .calc-input {
    font-size: 16px !important; /* prevent zoom on iOS */
    padding: 12px !important;
  }

  .calc-btn-primary { font-size: 15px !important; padding: 13px !important; }

  .group-label { font-size: 11.5px !important; }
}

/* ── ≤480px: smallest phones ── */
@media (max-width: 480px) {
  .app-header { padding: 0 12px !important; }

  .panel-header h2 { font-size: 16px !important; }
  .panel-header p  { font-size: 13px !important; }

  .card, .input-panel.card { padding: 16px !important; border-radius: 14px !important; }
  .net-pay-card { padding: 16px !important; }

  .net-pay-amount-wrapper .amount { font-size: 34px !important; letter-spacing: -1px !important; }
  .net-pay-amount-wrapper .currency { font-size: 22px !important; }

  .cat-card { padding: 12px 10px !important; }
  .cat-card-icon { width: 40px !important; height: 40px !important; font-size: 18px !important; }
  .cat-card-name { font-size: 11px !important; }

  .content-section { padding: 16px !important; border-radius: 12px !important; }
  .content-section h2 { font-size: 15px !important; }
  .content-section p { font-size: 13.5px !important; }
}

/* ── ≤375px: iPhone SE and tiny phones ── */
@media (max-width: 375px) {
  .cat-cards { grid-template-columns: repeat(2, 1fr) !important; }
  .cat-features { grid-template-columns: 1fr !important; }
  .cat-benefits { grid-template-columns: 1fr !important; }
  .panel-header h2 { font-size: 15px !important; }
  .net-pay-amount-wrapper .amount { font-size: 30px !important; }
}

/* ============================================================
   25. PRINT  — minimal print styles
   ============================================================ */
@media print {
  .app-header, .cat-sidebar, .mobile-nav-overlay { display: none !important; }
  .calculator-grid { grid-template-columns: 1fr !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* ============================================================
   26. HOMEPAGE FOOTER FOR ALL PAGES
   ============================================================ */
.hp-footer {
  background: #0F172A;
  color: #94A3B8;
  padding-top: 80px;
  margin-top: 64px;
}
[data-theme="dark"] .hp-footer { background: #020617; }

.hp-footer-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr 1.3fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.hp-footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.hp-footer-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #2563EB;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-footer-wordmark {
  font-size: 16px;
  font-weight: 800;
  color: #F1F5F9;
  letter-spacing: -.02em;
}
.hp-footer-wordmark em { font-style: normal; color: #0EA5E9; }
.hp-footer-brand p {
  font-size: 14px;
  line-height: 1.75;
  color: #64748B;
  max-width: 240px;
  margin-bottom: 20px;
}
.hp-footer-socials {
  display: flex;
  gap: 10px;
}
.hp-footer-social {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94A3B8;
  font-size: 15px;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
}
.hp-footer-social:hover { background: #2563EB; border-color: #2563EB; color: #fff; }

.hp-footer-col-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #E2E8F0;
  margin-bottom: 18px;
}
.hp-footer-links { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; }
.hp-footer-link {
  font-size: 14px;
  color: #64748B;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
  display: inline-block;
}
.hp-footer-link:hover { color: #CBD5E1; padding-left: 4px; }

.hp-newsletter p {
  font-size: 13.5px;
  color: #64748B;
  margin-bottom: 14px;
  line-height: 1.65;
}
.hp-newsletter-form { display: flex; gap: 8px; flex-direction: column; }
.hp-newsletter-input {
  width: 100%;
  padding: 11px 14px;
  font-size: 13px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #E2E8F0;
  outline: none;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
}
.hp-newsletter-input::placeholder { color: #475569; }
.hp-newsletter-input:focus { border-color: #2563EB; background: rgba(37,99,235,.08); }
.hp-newsletter-btn {
  width: 100%;
  padding: 11px;
  background: #2563EB;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
  border: none;
  cursor: pointer;
}
.hp-newsletter-btn:hover { background: #1D4ED8; }

.hp-footer-bottom {
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: #475569;
}
.hp-footer-bottom-links { display: flex; gap: 20px; flex-wrap: wrap; }
.hp-footer-bottom a { color: #475569; transition: color .2s; }
.hp-footer-bottom a:hover { color: #94A3B8; }

.hp-container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}

@media (max-width: 1200px) {
  .hp-footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; }
}
@media (max-width: 1024px) {
  .hp-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .hp-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .hp-footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  .hp-footer-bottom-links { gap: 14px; }
}

/* ============================================================
   27. TOOLS & ALL CALCULATORS CATEGORY PAGES UI/UX
   ============================================================ */

/* Shell & Layout */
.tools-shell,
.calcs-shell {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px 64px !important;
}

/* Breadcrumbs overrides */
.tools-breadcrumb,
.calcs-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: var(--gu-muted) !important;
  padding: 20px 0 0 !important;
}
.tools-breadcrumb a,
.calcs-breadcrumb a {
  color: var(--gu-muted) !important;
  text-decoration: none !important;
  transition: color .15s !important;
}
.tools-breadcrumb a:hover,
.calcs-breadcrumb a:hover {
  color: var(--gu-primary) !important;
}
.tools-breadcrumb .cur,
.calcs-breadcrumb .cur {
  color: var(--gu-primary) !important;
  font-weight: 600 !important;
}
.tools-breadcrumb .sep,
.calcs-breadcrumb .sep {
  opacity: 0.5 !important;
}

/* Hero Section */
.tools-hero,
.calcs-hero {
  background:
    radial-gradient(ellipse 100% 70% at 50% -5%, rgba(37, 99, 235, .05) 0%, transparent 60%),
    var(--gu-surface) !important;
  border: 1px solid var(--gu-border) !important;
  border-radius: var(--gu-r-lg) !important;
  padding: 54px 32px !important;
  text-align: center !important;
  margin: 24px 0 48px !important;
  box-shadow: var(--gu-shadow-sm) !important;
  position: relative !important;
  overflow: hidden !important;
}
html[data-theme="dark"] .tools-hero,
html[data-theme="dark"] .calcs-hero {
  background: var(--gu-surface) !important;
  border-color: var(--gu-border) !important;
}

.tools-hero-icon,
.calcs-hero-icon {
  font-size: 48px !important;
  margin-bottom: 16px !important;
  line-height: 1 !important;
}
.tools-hero h1,
.calcs-hero h1 {
  font-size: clamp(28px, 4.5vw, 38px) !important;
  font-weight: 800 !important;
  color: var(--gu-heading) !important;
  margin: 0 0 12px !important;
  letter-spacing: -.6px !important;
}
.tools-hero p,
.calcs-hero p {
  font-size: 16px !important;
  color: var(--gu-muted) !important;
  max-width: 540px !important;
  margin: 0 auto 24px !important;
  line-height: 1.65 !important;
}

.tools-hero-badge,
.calcs-hero-badge {
  display: inline-block !important;
  background: var(--gu-primary) !important;
  color: #fff !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  padding: 6px 18px !important;
  border-radius: var(--gu-r-full) !important;
  letter-spacing: .3px !important;
  box-shadow: var(--gu-shadow-pri) !important;
  border: none !important;
}

/* Section Title & Heading */
.tools-section-label,
.calcs-section-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  color: var(--gu-primary) !important;
  margin-bottom: 8px !important;
}
.tools-section-title,
.calcs-section-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--gu-heading) !important;
  margin: 0 0 8px !important;
  letter-spacing: -.4px !important;
}
.tools-section-sub,
.calcs-section-sub {
  font-size: 14.5px !important;
  color: var(--gu-muted) !important;
  margin: 0 0 36px !important;
}

/* Grid Layout */
.tools-grid,
.calcs-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 24px !important;
}

/* Cards (Standardized to Homepage categories look) */
.tools-card,
.calcs-card {
  background: var(--gu-surface) !important;
  border: 1px solid var(--gu-border) !important;
  border-radius: var(--gu-r-lg) !important;
  padding: 28px !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  box-shadow: var(--gu-shadow-sm) !important;
  transition: var(--gu-ease) !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.tools-card:hover,
.calcs-card:hover {
  box-shadow: 0 10px 30px rgba(37,99,235,.12) !important;
  transform: translateY(-4px) !important;
  border-color: #bfdbfe !important;
}

html[data-theme="dark"] .tools-card,
html[data-theme="dark"] .calcs-card {
  background: var(--gu-surface) !important;
  border-color: var(--gu-border) !important;
}
html[data-theme="dark"] .tools-card:hover,
html[data-theme="dark"] .calcs-card:hover {
  border-color: var(--gu-border-focus) !important;
}

/* Card Icons */
.tools-card-icon,
.calcs-card-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  flex-shrink: 0 !important;
  transition: var(--gu-ease) !important;
}
.tools-card:hover .tools-card-icon,
.calcs-card:hover .calcs-card-icon {
  transform: scale(1.08) !important;
}

/* Top bar (for Calcs card badge + icon alignment) */
.calcs-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.calcs-card-badge {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--gu-primary) !important;
  background: var(--gu-primary-light) !important;
  padding: 4px 10px !important;
  border-radius: var(--gu-r-full) !important;
}

/* Card Names */
.tools-card-name,
.calcs-card-name {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--gu-heading) !important;
  margin: 0 !important;
  letter-spacing: -.3px !important;
}

/* Card Descriptions */
.tools-card-desc,
.calcs-card-desc {
  font-size: 13.5px !important;
  color: var(--gu-muted) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  flex: 1 !important;
}

/* Feature tags inside tools card */
.tools-card-features {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 4px 0 !important;
}
.tools-card-feature {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--gu-body) !important;
  background: var(--gu-surface-2) !important;
  padding: 3px 10px !important;
  border-radius: var(--gu-r-full) !important;
  border: 1px solid var(--gu-border) !important;
}

/* Call to actions */
.tools-card-cta,
.calcs-card-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gu-primary) !important;
  margin-top: auto !important;
  transition: gap .2s !important;
}
.tools-card:hover .tools-card-cta,
.calcs-card:hover .calcs-card-cta {
  gap: 10px !important;
}

/* Responsive updates */
@media (max-width: 768px) {
  .tools-shell,
  .calcs-shell {
    padding: 0 16px 48px !important;
  }
  .tools-hero,
  .calcs-hero {
    padding: 36px 20px !important;
    margin: 16px 0 32px !important;
  }
  .tools-grid,
  .calcs-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}