/* ============================================================
   Babiators Customer Theme — Official Design System
   Брендовая тема для клиентских страниц.
   Подключается после variables.css + base.css + components.css.
   Палитра из design-system/babiators/tokens.css:
     - Vibrant Blue #003DA5 (primary)
     - Aqua #00BFB2 (accent)
     - Tangerine #FF6A39 (warm CTA)
     - Cream #F0EFDD (bg)
     - Font: Plus Jakarta Sans + Space Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* === Официальная DS палитра === */
  --bab-blue:             #003DA5;
  --bab-blue-deep:        #243A74;
  --bab-blue-light:       #2E61AE;
  --bab-blue-soft:        rgba(0, 61, 165, 0.08);
  --bab-aqua:             #00BFB2;
  --bab-aqua-dark:        #009191;
  --bab-aqua-light:       #4CC1BC;
  --bab-tangerine:        #FF6A39;
  --bab-tangerine-dark:   #E13E26;
  --bab-tangerine-light:  #F58663;

  --bab-baby-blue:        #87D1E6;
  --bab-baby-blue-light:  #ABDFF1;
  --bab-blush:            #FF585D;
  --bab-blush-light:      #F4848C;
  --bab-yellow:           #F8E200;
  --bab-yellow-light:     #FEED76;
  --bab-mint:             #4CC1BC;

  --bab-white:            #FFFFFF;
  --bab-cream:            #F0EFDD;
  --bab-cream-light:      #FAFBF7;
  --bab-border:           #E2DED9;
  --bab-border-soft:      #EDEBE5;
  --bab-text:             #2C2A27;
  --bab-text-muted:       #6B6966;
  --bab-text-soft:        #9A9793;

  --bab-shadow:           0 2px 8px rgba(0, 61, 165, 0.06), 0 4px 16px rgba(0, 61, 165, 0.06);
  --bab-shadow-hover:     0 8px 32px rgba(0, 61, 165, 0.12);

  /* === Переопределение глобальных токенов === */
  --color-bg:             var(--bab-white);
  --color-bg-page:        var(--bab-cream);
  --color-text:           var(--bab-text);
  --color-text-secondary: var(--bab-text-muted);
  --color-text-muted:     var(--bab-text-soft);
  --color-border:         var(--bab-border);
  --color-border-light:   var(--bab-border-soft);
  --color-border-focus:   var(--bab-blue);

  --color-accent:         var(--bab-tangerine);
  --color-accent-hover:   var(--bab-tangerine-dark);
  --color-accent-light:   rgba(255, 106, 57, 0.06);
  --color-accent-50:      rgba(255, 106, 57, 0.08);

  --color-success:        var(--bab-aqua-dark);
  --color-success-bg:     #E4F6F4;
  --color-success-border: var(--bab-aqua-light);
  --color-error:          #C5283D;
  --color-error-bg:       #FDE8EB;
  --color-error-border:   var(--bab-blush-light);
  --color-warning:        #8A6A00;
  --color-warning-bg:     #FFF8D6;
  --color-warning-border: var(--bab-yellow);
  --color-info:           var(--bab-blue);
  --color-info-bg:        #E6F0FA;
  --color-info-border:    var(--bab-baby-blue-light);

  --radius-sm:            8px;
  --radius-md:            12px;
  --radius-lg:            16px;
  --radius-xl:            24px;
  --radius-btn:           999px;

  --font-family:          'Plus Jakarta Sans', 'Euclid Circular A', system-ui, sans-serif;
  --font-mono:            'Space Mono', 'GT Maru Mono', monospace;
}

body {
  font-family: var(--font-family);
  background: var(--bab-cream);
  color: var(--bab-text);
}

/* === Заголовки — Vibrant Blue === */
h1, h2, h3, h4 {
  font-family: var(--font-family);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--bab-blue);
}

/* === Лого в хедере === */
.header-logo {
  display: block;
  height: 28px;
  width: auto;
}

.logo, .register-logo, .login-logo {
  display: inline-flex;
  align-items: center;
}
.logo img, .register-logo img, .login-logo img {
  height: 28px;
  width: auto;
}

/* === Кнопки: pill + playful hover === */
.btn {
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  box-shadow: var(--bab-shadow);
}
@media (hover: hover) {
  .btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--bab-shadow-hover);
  }
}
.btn-primary {
  background: var(--bab-tangerine);
  color: #fff;
  border-color: var(--bab-tangerine);
}
@media (hover: hover) {
  .btn-primary:hover:not(:disabled) {
    background: var(--bab-tangerine-dark);
  }
}
.btn-secondary {
  background: var(--bab-white);
  color: var(--bab-blue);
  border: 1px solid var(--bab-blue);
}
@media (hover: hover) {
  .btn-secondary:hover:not(:disabled) {
    background: #E4F6F4;
    color: var(--bab-blue);
    border-color: var(--bab-aqua);
  }
}
.btn-ghost {
  background: var(--bab-white);
  color: var(--bab-blue);
  border: 1px solid var(--bab-border);
  box-shadow: none;
}
@media (hover: hover) {
  .btn-ghost:hover:not(:disabled) {
    background: var(--bab-cream);
    color: var(--bab-blue);
    border-color: var(--bab-blue);
    box-shadow: var(--bab-shadow);
  }
}
.btn-warning {
  background: var(--bab-yellow-light);
  color: var(--bab-blue);
  border: 1px solid var(--bab-yellow);
}
@media (hover: hover) {
  .btn-warning:hover:not(:disabled) {
    background: var(--bab-yellow);
  }
}
.btn-success {
  background: var(--bab-aqua);
  color: #fff;
}
.btn-danger {
  background: var(--bab-blush);
  color: #fff;
}
.btn-link {
  box-shadow: none;
  color: var(--bab-tangerine);
}
.btn-link:hover { transform: none; box-shadow: none; }

/* === Поля ввода === */
.input, .select, .textarea {
  background: var(--bab-white);
  border: 1px solid var(--bab-border);
  border-radius: var(--radius-md, 10px);
  font-family: var(--font-family);
  color: var(--bab-text);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--bab-tangerine);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 61, 165, 0.12);
  background: var(--bab-white);
}

/* === Карточки === */
.card, .form-section {
  background: var(--bab-white);
  border: 1px solid var(--bab-border);
  border-radius: var(--radius-xl, 20px);
  box-shadow: var(--bab-shadow);
}

/* === Бейджи === */
.badge {
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 3px 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-size: 10px;
}
.badge::before { display: none; }
.badge-success {
  background: #E4F6F4;
  color: var(--bab-aqua-dark);
  border-color: var(--bab-aqua-light);
}
.badge-warning {
  background: #FFF8D6;
  color: #8A6A00;
  border-color: var(--bab-yellow);
}
.badge-error {
  background: #FDE8EB;
  color: var(--bab-tangerine-dark);
  border-color: var(--bab-blush-light);
}
.badge-info {
  background: #E6F0FA;
  color: var(--bab-blue);
  border-color: var(--bab-baby-blue-light);
}
.badge-pending {
  background: var(--bab-cream-light);
  color: var(--bab-text-muted);
  border-color: var(--bab-border);
  border-style: dashed;
}

/* === Алерты === */
.alert { border-radius: var(--radius-lg, 12px); font-weight: 500; }

/* === Хедеры клиентских страниц === */
.account-header, .register-header {
  background: var(--bab-white);
  border-bottom: 1px solid var(--bab-border);
}
.logo {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--bab-blue);
  text-decoration: none;
}
.register-logo {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--bab-blue);
}

/* === Register page === */
.register-hero h1 { color: var(--bab-blue); }
.register-hero p { color: var(--bab-text-muted); }
.form-section legend { color: var(--bab-blue); font-weight: 700; }
.glasses-number { color: var(--bab-tangerine); }

.drop-zone {
  border: 2px dashed var(--bab-border);
  border-radius: var(--radius-lg, 16px);
  background: var(--bab-cream);
}
.drop-zone:hover, .drop-zone.dragover {
  border-color: var(--bab-tangerine);
  background: rgba(255, 106, 57, 0.06);
}

/* === Login page === */
.login-wrap { background: var(--bab-cream); }
.login-logo {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  color: var(--bab-blue);
}
.login-card .card {
  border-radius: var(--radius-xl, 20px);
  border: 1px solid var(--bab-border);
  box-shadow: var(--bab-shadow);
}
.admin-link a { color: var(--bab-text-soft); }
.admin-link a:hover { color: var(--bab-tangerine); }

/* === Claim wizard steps === */
.claim-step {
  border: 1px solid var(--bab-border);
  border-radius: var(--radius-lg, 16px);
  background: var(--bab-white);
  box-shadow: var(--bab-shadow);
}
.claim-step h3 { color: var(--bab-blue); }
.claim-step h3::before { color: var(--bab-tangerine); }
.delivery-tab {
  border: 2px solid var(--bab-border);
  border-radius: var(--radius-lg, 12px);
  font-family: var(--font-family);
}
.delivery-tab.active {
  border-color: var(--bab-tangerine);
  background: rgba(255, 106, 57, 0.06);
}
.tariff-option {
  border: 1px solid var(--bab-border);
  border-radius: var(--radius-lg, 12px);
}
.tariff-option:hover, .tariff-option.selected {
  border-color: var(--bab-tangerine);
  background: rgba(255, 106, 57, 0.06);
}
.payment-option {
  border: 2px solid var(--bab-border);
  border-radius: var(--radius-lg, 12px);
}
.payment-option.selected {
  border-color: var(--bab-tangerine);
  background: rgba(255, 106, 57, 0.06);
}

/* === Успех экран === */
.success-icon {
  background: var(--bab-mint) !important;
  color: var(--bab-blue) !important;
  border: 2px solid var(--bab-blue);
}

/* === Callback page === */
.callback-screen { color: var(--bab-text-muted); }
.spinner-big {
  border-color: var(--bab-border);
  border-top-color: var(--bab-tangerine);
}

/* === Form labels === */
.form-label {
  color: var(--bab-blue);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.required { color: var(--bab-tangerine); }

/* === Product dropdown === */
.product-dropdown {
  border: 1px solid var(--bab-border);
  border-radius: 0 0 var(--radius-md, 10px) var(--radius-md, 10px);
  background: var(--bab-white);
}
.product-option:hover { background: rgba(255, 106, 57, 0.06); }
.product-option-custom { color: var(--bab-tangerine); }

/* === Progress bar === */
.progress-fill { background: var(--bab-tangerine); }

/* === OTP screen (auth.js creates inline) === */
#otp-screen h2 { color: var(--bab-blue); }
#otp-input {
  border: 2px solid var(--bab-border) !important;
  border-radius: var(--radius-lg, 12px) !important;
  font-weight: 700;
}
#otp-input:focus {
  border-color: var(--bab-tangerine) !important;
  box-shadow: 0 0 0 3px rgba(0, 61, 165, 0.12);
}

/* === Checkbox === */
.checkbox-label input[type="checkbox"] {
  accent-color: var(--bab-tangerine);
}

/* === Focus visible === */
.btn:focus-visible,
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible,
.btn-link:focus-visible {
  outline: 2px solid var(--bab-tangerine);
  outline-offset: 2px;
}

/* === Screen reader only === */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === Smooth page transitions === */
/* fadeInUp определён в base.css (translateY 12px) — дубликат удалён */
.container, .acc-main, .register-form-wrap {
  animation: fadeInUp 0.3s ease-out;
}