/* This mirrors the exact variables and styling rules of the index.html Elite refinements */

/* Elite Navigation Refinements */
html {
  font-size: 88% !important;
}

.nav-logo-name {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: -0.035em !important;
  font-weight: 700 !important;
}

.nav-link, .nav-dropdown-btn {
  letter-spacing: -0.011em !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  padding: 0.5rem 0.8rem !important;
}

.nav-links {
  margin-left: auto !important;
  margin-right: 1.5rem !important;
  gap: 0.15rem !important;
}

.nav-inner {
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
}

.nav-cta-btn svg {
  transform: translateY(1px) !important;
}

:root {
  --bg-page: #FFFFFF;
  --bg-section: #F8FAFC;
  --bg-card: #FFFFFF;
  --text-heading: #0F172A;
  /* Slate */
  --text-body: #0F172A;
  /* Matches ITR base text */
  --text-muted: #64748B;
  --accent-gold: #f59e0b;
  --beige-gold: #FBF8F3;
  --border-subtle: #E2E8F0;

  --link-color: #050811;
  --link-hover: #f59e0b;
}

body {
  background-color: var(--bg-page) !important;
  color: var(--text-body) !important;
}

/* Base Sections */
.bg-white,
section {
  background-color: var(--bg-page) !important;
}

.bg-light,
.page-hero,
section[style*="background:var(--navy)"],
section[style*="background: var(--navy)"] {
  background-color: var(--bg-section) !important;
}

.page-hero {
  background: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.04) 0%, transparent 60%), var(--bg-section) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

/* Cards & Components */
.card,
.flip-card-front,
.flip-card-back,
.process-step,
.pricing-card {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03) !important;
}

/* Specific component inline overrides */
div[style*="rgba(0,0,0,0.03)"],
div[style*="rgba(0,0,0,0.05)"],
div[style*="rgba(255,255,255,.08)"] {
  background: var(--bg-card) !important;
  border-color: var(--border-subtle) !important;
}

/* Hardcoded colored cards mapping to light mode equivalents */
div[style*="linear-gradient(135deg,#1a73e8,#0d47a1)"],
div[style*="linear-gradient(135deg,#1877F2,#42b72a)"],
div[style*="linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)"],
div[style*="background:#1877F2"],
div[style*="background:#0077B5"],
div[style*="background:#FF0000"] {
  background: var(--bg-card) !important;
  border-color: var(--border-subtle) !important;
}

div[style*="linear-gradient"] h3,
div[style*="linear-gradient"] li,
div[style*="linear-gradient"] p,
div[style*="linear-gradient"] div:first-child {
  color: var(--text-body) !important;
}

/* Pricing / Popular Cards explicitly mimic ITR Beige Pivot */
.popular,
.best-value,
.pricing-card.popular {
  background-color: var(--beige-gold) !important;
  border-color: #E5E0D5 !important;
}

/* Headings & Text */
h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.card-title,
.font-heading,
.pricing-badge,
.nav-logo-name,
.page-hero h1,
.page-hero h2,
.page-hero h3 {
  color: var(--text-heading) !important;
}

p,
span,
li,
.card-text,
.section-subtitle,
.footer-desc,
.page-hero p,
.page-hero .hero-sub {
  color: var(--text-body) !important;
}

.flip-card-hint,
.overline,
.text-small,
.card-text span,
.nav-logo-sub {
  color: var(--text-muted) !important;
}

/* Accent texts */
.text-gold,
.overline {
  color: var(--accent-gold) !important;
}

/* Structural Components */
hr,
.divider,
.section-border {
  border-color: var(--border-subtle) !important;
}

/* Icons */
.card-icon {
  background: rgba(245, 158, 11, 0.05) !important;
  /* Soft gold tint */
}

svg.table-yes,
.card-icon svg {
  stroke: var(--accent-gold) !important;
}

/* Buttons */
.btn-primary,
.btn-gold,
.btn-success,
.btn-blue,
.nav-cta-btn,
.mobile-cta-btn {
  background: var(--accent-gold) !important;
  color: #000 !important;
  border: none !important;
}

.btn-outline {
  border: 1px solid var(--accent-gold) !important;
  color: var(--accent-gold) !important;
}

.btn-navy {
  background: var(--text-heading) !important;
  color: #FFF !important;
}

div[style*="linear-gradient"] .btn {
  background: var(--accent-gold) !important;
  color: #000 !important;
  border: none !important;
}

/* Accordion Specific */
.accordion-item {
  background: var(--bg-card) !important;
  border-color: var(--border-subtle) !important;
}

.accordion-trigger {
  color: var(--text-heading) !important;
}

.accordion-body-inner {
  color: var(--text-body) !important;
}

/* Navigation Overrides */
#main-nav {
  background: var(--bg-page) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

#main-nav:not(.scrolled) .nav-link,
#main-nav:not(.scrolled) .nav-services-btn,
#main-nav:not(.scrolled) .mobile-nav-link,
#main-nav:not(.scrolled) .mobile-services-btn,
#main-nav.scrolled .nav-link,
#main-nav.scrolled .nav-services-btn,
#main-nav.scrolled .mobile-nav-link,
#main-nav.scrolled .mobile-services-btn {
  color: var(--text-heading) !important;
}

#main-nav:not(.scrolled) .nav-link.active,
#main-nav:not(.scrolled) .nav-services-btn.active,
#main-nav:not(.scrolled) .mobile-nav-link.active,
#main-nav.scrolled .nav-link.active,
#main-nav.scrolled .nav-services-btn.active,
#main-nav.scrolled .mobile-nav-link.active {
  color: var(--accent-gold) !important;
}

#main-nav .mobile-menu-btn svg {
  stroke: var(--text-heading) !important;
}

/* Footer & Dropdown remain dark as per style.css */

/* =============================================
   EXTENDED DESIGN SYSTEM — DNT GLOBAL TOKENS
   ============================================= */

:root {
  /* Spacing System */
  --form-grid-gap: 1.25rem;
  --card-padding: 2.5rem;
  --section-spacing: 5rem;

  /* Input System */
  --input-height: 52px;
  --input-radius: 12px;
  --input-border: #d1d5db;
  --input-focus-ring: #f59e0b;
  --input-bg: #ffffff;
  --input-text: #0f172a;
  --input-placeholder: #9ca3af;
  --input-icon-color: #6b7280;
  --input-error-color: #ef4444;
  --input-success-color: #10b981;

  /* Glass Card */
  --glass-card-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.97));
  --glass-card-border: rgba(245, 158, 11, 0.25);
  --glass-card-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(245, 158, 11, 0.06);
  --glass-card-blur: blur(12px);

  /* Button System */
  --btn-primary-bg: linear-gradient(135deg, #f59e0b, #d97706);
  --btn-primary-text: #050811;
  --btn-primary-shadow: 0 4px 20px rgba(245, 158, 11, 0.35);
  --btn-radius: 12px;
  --btn-padding: 0.85rem 2rem;
  --btn-font-size: 0.95rem;
}

/* =============================================
   GLASS-MORPHISM CARD SYSTEM
   ============================================= */
.glass-card {
  background: var(--glass-card-bg) !important;
  border: 1.5px solid var(--glass-card-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--glass-card-shadow) !important;
  backdrop-filter: var(--glass-card-blur) !important;
  -webkit-backdrop-filter: var(--glass-card-blur) !important;
}

/* =============================================
   BUTTON HIERARCHY
   ============================================= */
.btn-dnt-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border: none !important;
  border-radius: var(--btn-radius) !important;
  padding: var(--btn-padding) !important;
  font-size: var(--btn-font-size) !important;
  font-weight: 700 !important;
  font-family: 'Outfit', sans-serif !important;
  box-shadow: var(--btn-primary-shadow) !important;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s !important;
  min-height: 44px;
  text-decoration: none;
}

.btn-dnt-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(245, 158, 11, 0.45) !important;
}

.btn-dnt-primary:active {
  transform: translateY(0) !important;
}

.btn-dnt-primary:disabled,
.btn-dnt-primary.loading {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.btn-dnt-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: transparent !important;
  color: #0f172a !important;
  border: 2px solid #0f172a !important;
  border-radius: var(--btn-radius) !important;
  padding: var(--btn-padding) !important;
  font-size: var(--btn-font-size) !important;
  font-weight: 600 !important;
  font-family: 'Outfit', sans-serif !important;
  cursor: pointer;
  transition: all 0.2s !important;
  min-height: 44px;
  text-decoration: none;
}

.btn-dnt-secondary:hover {
  background: #0f172a !important;
  color: #fff !important;
}

.btn-dnt-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent !important;
  color: var(--accent-gold) !important;
  border: none !important;
  padding: 0.5rem 0 !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: gap 0.2s !important;
  text-decoration: none;
}

.btn-dnt-ghost:hover {
  gap: 0.85rem !important;
}

/* =============================================
   FORM COMPONENT SYSTEM
   ============================================= */

/* Form row grid */
.dnt-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--form-grid-gap);
  margin-bottom: var(--form-grid-gap);
}

.dnt-form-row.full {
  grid-template-columns: 1fr;
}

/* Floating Label Input Group */
.dnt-field {
  position: relative;
}

.dnt-field-inner {
  position: relative;
  display: flex;
  align-items: center;
}

.dnt-field-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--input-icon-color);
  pointer-events: none;
  z-index: 2;
  transition: color 0.2s;
  display: flex;
}

.dnt-field input,
.dnt-field select,
.dnt-field textarea {
  width: 100%;
  min-height: var(--input-height);
  padding: 1.5rem 1rem 0.5rem 2.9rem;
  border: 1.5px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 0.95rem;
  font-family: 'Outfit', sans-serif;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.dnt-field textarea {
  min-height: 130px;
  padding-top: 1.75rem;
  resize: vertical;
}

.dnt-field select {
  cursor: pointer;
}

/* Floating Label */
.dnt-label {
  position: absolute;
  left: 2.9rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.92rem;
  color: var(--input-placeholder);
  font-family: 'Outfit', sans-serif;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 2;
  background: transparent;
}

.dnt-field textarea~.dnt-label {
  top: 1.1rem;
  transform: none;
}

/* Floated state */
.dnt-field input:focus~.dnt-label,
.dnt-field input:not(:placeholder-shown)~.dnt-label,
.dnt-field select:focus~.dnt-label,
.dnt-field select.has-value~.dnt-label,
.dnt-field textarea:focus~.dnt-label,
.dnt-field textarea:not(:placeholder-shown)~.dnt-label {
  top: 0.45rem;
  transform: none;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-gold);
}

.dnt-field textarea:focus~.dnt-label,
.dnt-field textarea:not(:placeholder-shown)~.dnt-label {
  top: 0.4rem;
}

/* Focus ring */
.dnt-field input:focus,
.dnt-field select:focus,
.dnt-field textarea:focus {
  border-color: var(--input-focus-ring) !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important;
}

.dnt-field:focus-within .dnt-field-icon {
  color: var(--accent-gold);
}

/* Select arrow */
.dnt-select-wrap::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--input-icon-color);
}

/* Error state */
.dnt-field.has-error input,
.dnt-field.has-error select,
.dnt-field.has-error textarea {
  border-color: var(--input-error-color) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.dnt-field.has-error .dnt-field-icon {
  color: var(--input-error-color);
}

.dnt-error-msg {
  display: none;
  font-size: 0.78rem;
  color: var(--input-error-color);
  margin-top: 0.35rem;
  padding-left: 0.25rem;
  font-family: 'Outfit', sans-serif;
}

.dnt-field.has-error .dnt-error-msg {
  display: block;
}

/* Valid state */
.dnt-field.is-valid input,
.dnt-field.is-valid select,
.dnt-field.is-valid textarea {
  border-color: var(--input-success-color) !important;
}

/* Character counter */
.dnt-char-counter {
  font-size: 0.75rem;
  color: var(--input-placeholder);
  text-align: right;
  margin-top: 0.3rem;
  font-family: 'Outfit', sans-serif;
  transition: color 0.2s;
}

.dnt-char-counter.over {
  color: var(--input-error-color);
}

/* =============================================
   ANIMATION UTILITIES
   ============================================= */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-up.delay-1 {
  transition-delay: 0.1s;
}

.reveal-up.delay-2 {
  transition-delay: 0.2s;
}

.reveal-up.delay-3 {
  transition-delay: 0.3s;
}

.reveal-up.delay-4 {
  transition-delay: 0.4s;
}

/* Card hover lift */
.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.hover-lift:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

/* Spinner for loading buttons */
@keyframes dnt-spin {
  to {
    transform: rotate(360deg);
  }
}

.dnt-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(5, 8, 17, 0.25);
  border-top-color: #050811;
  border-radius: 50%;
  animation: dnt-spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* =============================================
   MOBILE RESPONSIVENESS
   ============================================= */
@media (max-width: 768px) {
  :root {
    --card-padding: 1.5rem;
    --form-grid-gap: 1rem;
  }

  .dnt-form-row {
    grid-template-columns: 1fr !important;
  }

  .glass-card {
    border-radius: 16px !important;
  }
}