/* ================================================================
   Ai business map — Brief (App) Premium Override
   Imported by free.html AFTER css/styles.css.
   Light business glassmorphism theme (blue accent #2f5bf0).
   Zero JS/logic touched.
   ================================================================ */

/* ─── OVERRIDE CSS VARIABLES ─────────────────────────────────── */
:root {
  --bg-dark: #f4f7fb;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-input: #f4f7fb;
  --border: #e4eaf2;
  --border-focus: #2f5bf0;
  --text-primary: #0e1b2e;
  --text-secondary: #56657c;
  --text-muted: #8a98ad;

  --glass-bg: #ffffff;
  --glass-border: #e4eaf2;
  --glass-shadow: 0 8px 30px rgba(20, 40, 90, 0.08), 0 0 0 1px rgba(20, 40, 90, 0.03);
  --glow-green: 0 0 20px rgba(47, 91, 240, 0.18);

  /* Blue brand scale */
  --primary-900: #1e3fb0;
  --primary-800: #234bd6;
  --primary-700: #2f5bf0;
  --primary-600: #4470f4;
  --primary-500: #2f5bf0;
  --primary-400: #6d8bff;
  --primary-300: #93a9ff;
  --primary-200: #c2cfff;
  --primary-100: #eaf0ff;
  --primary-50:  #f4f7ff;

  --accent-500: #2f5bf0;
  --accent-400: #4470f4;
  --accent-300: #6d8bff;
  --accent-200: #93a9ff;
  --accent-100: #eaf0ff;
  --accent-glow: rgba(47, 91, 240, 0.2);

  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ─── BODY ───────────────────────────────────────────────────── */
body {
  background: #f4f7fb !important;
  background-image:
    radial-gradient(ellipse at 15% 25%, rgba(47, 91, 240, 0.06) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 75%, rgba(109, 139, 255, 0.05) 0%, transparent 45%) !important;
  color: #0e1b2e !important;
}

/* Grain texture (very subtle on light) */
body::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  opacity: 0.02 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23grain)' opacity='1'/%3E%3C/svg%3E") !important;
  background-repeat: repeat !important;
  background-size: 200px 200px !important;
}

/* ─── GLASS CARD LIGHT ───────────────────────────────────────── */
.glass-card {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #e4eaf2 !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 30px rgba(20, 40, 90, 0.08), 0 1px 3px rgba(20, 40, 90, 0.04) !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
}
.glass-card:hover {
  border-color: rgba(47, 91, 240, 0.35) !important;
  box-shadow: 0 14px 40px rgba(47, 91, 240, 0.12), 0 1px 3px rgba(20, 40, 90, 0.04) !important;
}

/* ─── LOGO SECTION ───────────────────────────────────────────── */
.logo-icon {
  background: linear-gradient(135deg, rgba(47, 91, 240, 0.18), rgba(109, 139, 255, 0.12)) !important;
  border: 1px solid rgba(47, 91, 240, 0.3) !important;
  box-shadow: 0 8px 24px rgba(47, 91, 240, 0.2) !important;
}
.logo-title {
  background: linear-gradient(135deg, #0e1b2e, #2f5bf0) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.logo-subtitle { color: rgba(47, 91, 240, 0.85) !important; }

/* ─── PROGRESS STEPS LIGHT ───────────────────────────────────── */
.progress-steps::before {
  background: #e4eaf2 !important;
}
.progress-track {
  background: linear-gradient(90deg, #2f5bf0, #6d8bff) !important;
  box-shadow: 0 0 12px rgba(47, 91, 240, 0.3) !important;
}
.progress-dot {
  background: #ffffff !important;
  border-color: rgba(47, 91, 240, 0.3) !important;
  backdrop-filter: none !important;
  color: #8a98ad !important;
  transition: all 0.3s var(--spring) !important;
}
.progress-dot.completed {
  background: linear-gradient(135deg, #2f5bf0, #234bd6) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(47, 91, 240, 0.4) !important;
  color: #fff !important;
}
.progress-dot.active {
  background: linear-gradient(135deg, rgba(47, 91, 240, 0.15), rgba(109, 139, 255, 0.08)) !important;
  border-color: #2f5bf0 !important;
  box-shadow: 0 0 0 4px rgba(47, 91, 240, 0.12) !important;
  color: #2f5bf0 !important;
}
.progress-label { color: #8a98ad !important; font-size: 11px !important; }
.progress-label.active    { color: #2f5bf0 !important; }
.progress-label.completed { color: rgba(47, 91, 240, 0.85) !important; }

/* ─── STEP HEADERS ───────────────────────────────────────────── */
.step-header h2 {
  color: #0e1b2e !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
}
.step-header p { color: #56657c !important; }

/* ─── FORM INPUTS LIGHT ──────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="password"],
textarea,
select {
  background: #f4f7fb !important;
  border: 1px solid #e4eaf2 !important;
  color: #0e1b2e !important;
  border-radius: 12px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: #2f5bf0 !important;
  box-shadow: 0 0 0 3px rgba(47, 91, 240, 0.15) !important;
  background: #ffffff !important;
}
input::placeholder,
textarea::placeholder { color: #8a98ad !important; }
label { color: #56657c !important; font-size: 14px !important; font-weight: 500 !important; }

/* ─── OPTION CARDS (radio / checkbox choices) ────────────────── */
.option-card,
.option-label,
[class*="option-"],
[class*="-option"] {
  background: #ffffff !important;
  border: 1px solid #e4eaf2 !important;
  border-radius: 16px !important;
  color: #56657c !important;
  transition: all 0.25s var(--spring) !important;
  backdrop-filter: none !important;
}
.option-card:hover,
.option-label:hover {
  border-color: rgba(47, 91, 240, 0.4) !important;
  background: rgba(47, 91, 240, 0.06) !important;
  color: #0e1b2e !important;
  transform: translateY(-2px) !important;
}
.option-card.selected,
.option-label.selected,
input[type="radio"]:checked + .option-label,
input[type="checkbox"]:checked + .option-label {
  background: rgba(47, 91, 240, 0.1) !important;
  border-color: rgba(47, 91, 240, 0.5) !important;
  color: #2f5bf0 !important;
  box-shadow: 0 0 0 1px rgba(47, 91, 240, 0.2) !important;
}

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn-primary,
button[type="submit"],
.submit-btn,
.btn-next,
.next-btn,
[class*="btn-primary"] {
  background: linear-gradient(135deg, #2f5bf0, #234bd6) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.3s var(--spring) !important;
  box-shadow: 0 8px 24px rgba(47, 91, 240, 0.32) !important;
}
.btn-primary:hover,
button[type="submit"]:hover,
.submit-btn:hover,
.btn-next:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 14px 40px rgba(47, 91, 240, 0.42) !important;
}
.btn-primary:disabled,
button[type="submit"]:disabled { opacity: 0.5 !important; transform: none !important; cursor: not-allowed !important; }

.btn-secondary,
.btn-back,
.back-btn,
[class*="btn-secondary"] {
  background: #ffffff !important;
  border: 1px solid #e4eaf2 !important;
  color: #56657c !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s var(--spring) !important;
  backdrop-filter: none !important;
}
.btn-secondary:hover,
.btn-back:hover {
  background: #f4f7fb !important;
  border-color: rgba(47, 91, 240, 0.4) !important;
  color: #0e1b2e !important;
  transform: translateY(-2px) !important;
}

/* ─── TARIFF / PRICING CARDS ─────────────────────────────────── */
.tariff-card,
.plan-card,
.price-card,
[class*="tariff"],
[class*="plan-card"] {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #e4eaf2 !important;
  border-radius: 20px !important;
  transition: all 0.35s var(--spring) !important;
  cursor: pointer !important;
}
.tariff-card:hover,
.plan-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(47, 91, 240, 0.4) !important;
  box-shadow: 0 20px 60px rgba(47, 91, 240, 0.15) !important;
}
.tariff-card.selected,
.plan-card.selected,
.tariff-card.active,
.plan-card.active {
  border-color: rgba(47, 91, 240, 0.6) !important;
  background: rgba(47, 91, 240, 0.06) !important;
  box-shadow: 0 0 0 2px rgba(47, 91, 240, 0.3), 0 20px 60px rgba(47, 91, 240, 0.18) !important;
}

/* ─── PAYMENT STEP ───────────────────────────────────────────── */
.payment-block,
.payment-form,
.payment-container {
  background: #ffffff !important;
  backdrop-filter: none !important;
  border: 1px solid #e4eaf2 !important;
  border-radius: 20px !important;
}

/* ─── PROMO CODE ─────────────────────────────────────────────── */
#promo-code-input {
  background: #f4f7fb !important;
  border: 1px solid #e4eaf2 !important;
  color: #0e1b2e !important;
  border-radius: 12px !important;
}
#apply-promo-btn {
  background: rgba(47, 91, 240, 0.12) !important;
  border: 1px solid rgba(47, 91, 240, 0.3) !important;
  color: #2f5bf0 !important;
  border-radius: 10px !important;
  transition: all 0.2s var(--spring) !important;
}
#apply-promo-btn:hover {
  background: rgba(47, 91, 240, 0.2) !important;
  color: #234bd6 !important;
  transform: translateY(-1px) !important;
}

/* ─── INFO BOXES ─────────────────────────────────────────────── */
.info-box, .alert, .notice {
  background: #f4f7fb !important;
  border: 1px solid #e4eaf2 !important;
  border-radius: 12px !important;
  color: #56657c !important;
}
.alert-success { background: rgba(15, 174, 114, 0.08) !important; border-color: rgba(15, 174, 114, 0.25) !important; color: #0a8a5a !important; }
.alert-error   { background: rgba(220, 40, 40, 0.07)  !important; border-color: rgba(220, 40, 40, 0.25)  !important; color: #d12f2f !important; }

/* ─── LOADING / SPINNERS ─────────────────────────────────────── */
.loading-spinner,
[class*="spinner"] {
  border-color: rgba(47, 91, 240, 0.2) !important;
  border-top-color: #2f5bf0 !important;
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
.site-footer {
  background: #ffffff !important;
  border-top: 1px solid #e4eaf2 !important;
}
.footer-link { color: #8a98ad !important; }
.footer-link:hover { color: #2f5bf0 !important; }

/* ─── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #eef3f9; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #2f5bf0, #6d8bff); border-radius: 3px; }

/* ─── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .glass-card { border-radius: 16px !important; }
}