/* ═══════════════════════════════════════════════════════════════════════
   Aifory — редизайн кабинета под мобильные макеты (пакет generated-visuals).
   Слой-переопределение: включается ТОЛЬКО бета-аккаунтам классом body.redesign
   (app.js по флагу promoBeta). Обычные клиенты видят кабинет без изменений.
   Работает за счёт переопределения дизайн-токенов + точечных правок shell/кнопок.
   Светлая/тёмная темы: тумблер ставит data-theme на body.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Токены: светлая тема (перебивают body.app-body, спец. 0,3,0) ── */
body.app-body.redesign {
  --gold:#6E3BEA; --gold-hover:#5E2ED6; --gold-light:#EDE7FF;
  --bg:#F1F0F6; --border:#ECEAF3; --card:#FFFFFF; --text:#191B2E; --muted:#797E96; --r:22px;
  --rd-accent2:#8B5CFF; --rd-field:#FBFAFE; --rd-shadow:0 12px 30px rgba(22,22,32,.08);
  --rd-shadow-sm:0 4px 14px rgba(22,22,32,.06);
  background:
    radial-gradient(1000px 520px at 76% -6%, color-mix(in srgb, var(--rd-accent2) 16%, transparent), transparent 60%),
    var(--bg);
  transition:background .3s, color .3s;
}
/* ── Тёмная тема ── */
body.app-body.redesign[data-theme="dark"] {
  --gold:#8B5CFF; --gold-hover:#7C4DFF; --gold-light:rgba(124,77,255,.20);
  --bg:#0A0A1E; --border:rgba(255,255,255,.09); --card:#15152B; --text:#F3F4FB; --muted:#969BB6;
  --rd-accent2:#9B72FF; --rd-field:#17172F; --rd-shadow:0 16px 40px rgba(0,0,0,.5); --rd-shadow-sm:0 6px 18px rgba(0,0,0,.4);
  background:
    radial-gradient(900px 460px at 78% -6%, color-mix(in srgb, #3a1f7a 55%, transparent), transparent 62%),
    var(--bg);
  color:var(--text);
}
/* до инициализации JS — уважаем системную тему */
@media (prefers-color-scheme: dark) {
  body.app-body.redesign:not([data-theme="light"]) {
    --gold:#8B5CFF; --gold-hover:#7C4DFF; --gold-light:rgba(124,77,255,.20);
    --bg:#0A0A1E; --border:rgba(255,255,255,.09); --card:#15152B; --text:#F3F4FB; --muted:#969BB6;
    --rd-accent2:#9B72FF; --rd-field:#17172F; --rd-shadow:0 16px 40px rgba(0,0,0,.5); --rd-shadow-sm:0 6px 18px rgba(0,0,0,.4);
  }
}

/* ── Верхняя панель ── */
.redesign .app-logo-text { color:var(--text); }
.redesign .app-logo-text span { color:var(--gold); }
.redesign .app-logo-icon { background:linear-gradient(135deg,#4C1D95,var(--gold)); }

/* Вкладки в шапке НЕ переопределяем: она должна выглядеть одинаково у всех клиентов,
   базовые стили лежат в app.css. Редизайн трогает только содержимое кабинета. */
.redesign .topnav-dot { background:#E23B3B; }
.redesign .app-logout { color:var(--muted); }
.redesign .app-logout:hover { color:var(--gold); }

/* Тумблер темы удалён — кабинет всегда светлый (app.js жёстко ставит data-theme="light").
   Правила тёмной темы ниже оставлены спящими: сработают, только если вернуть переключатель. */

/* ── Кнопки ── */
.redesign .btn-gold {
  background:linear-gradient(135deg,var(--rd-accent2),var(--gold)); border:none; color:#fff;
  box-shadow:0 8px 20px color-mix(in srgb,var(--gold) 24%, transparent);
}
.redesign .btn-gold:hover:not(:disabled) { filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 12px 24px color-mix(in srgb,var(--gold) 30%, transparent); }
.redesign .btn { border-radius:16px; }

/* ── Поля ввода ── */
.redesign .field input[type="email"],
.redesign .field input[type="text"],
.redesign .field input[type="number"] {
  border-radius:12px; background:var(--rd-field); border:1.5px solid var(--border); color:var(--text);
}
.redesign .field input::placeholder { color:var(--muted); }

/* ── Заголовки экранов ── */
.redesign .screen-title { font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.redesign .screen-sub { font-size:15px; }

/* ── Карточки/поверхности: мягкие тени под новый стиль ── */
.redesign .card,
.redesign .svc-hero, .redesign .svc-detail, .redesign .svc-prod,
.redesign .esim-detail { box-shadow:var(--rd-shadow); }
.redesign .svc-prod, .redesign .svc-sku { border-radius:16px; }

/* ── Тёмная тема: точечные фиксы для мест с захардкоженным светлым фоном ── */
body.app-body.redesign[data-theme="dark"] input,
body.app-body.redesign[data-theme="dark"] .field input { background:var(--rd-field); color:var(--text); }
body.app-body.redesign[data-theme="dark"] .app-modal,
body.app-body.redesign[data-theme="dark"] .auth-card { background:var(--card); color:var(--text); }
body.app-body.redesign[data-theme="dark"] .svc-prod__noimg,
body.app-body.redesign[data-theme="dark"] .svc-sku { background:var(--rd-field); }

/* аккуратные ссылки-акценты */
.redesign .link, .redesign a.link { color:var(--gold); }

/* ── Мобильный шелл: дизайн мобильный, поэтому кабинет в редизайне — центрированная
   колонка телефонной ширины (иначе на широком десктопе вёрстка «разъезжается»). ── */
.redesign .app-wrap { max-width:460px; margin:0 auto; }

/* ── Отели: применена присланная верстка hotels-mobile-page (scoped #tab-hotels) ── */
.redesign #tab-hotels .hx { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --hx-surface:rgba(255,255,255,.94);
  --hx-hero:linear-gradient(90deg, rgba(247,248,252,.98) 0%, rgba(247,248,252,.8) 43%, rgba(247,248,252,.08) 77%);
  display:block; padding:2px 16px 6px; }
body.app-body.redesign[data-theme="dark"] #tab-hotels .hx {
  --hx-surface:rgba(19,27,58,.88);
  --hx-hero:linear-gradient(90deg, #050b24 0%, rgba(5,11,36,.78) 44%, rgba(5,11,36,.05) 82%); }
.redesign #tab-hotels .hx svg { width:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.redesign #tab-hotels .hero { position:relative; min-height:360px; margin:8px -16px 0; padding:56px 22px 60px; display:flex; align-items:center;
  background-image:var(--hx-hero), url("assets/redesign/htl-hero.webp"); background-size:cover; background-position:67% center; isolation:isolate; }
.redesign #tab-hotels .hero::after { content:""; position:absolute; inset:auto 0 0; height:90px; background:linear-gradient(transparent, var(--bg)); z-index:-1; }
.redesign #tab-hotels .hero-copy { max-width:340px; }
.redesign #tab-hotels .hero h1 { margin:0; font-size:2.6rem; line-height:1.06; letter-spacing:-.055em; color:var(--text); font-weight:800; }
.redesign #tab-hotels .hero p { max-width:330px; margin:16px 0 0; color:var(--muted); font-size:1rem; line-height:1.6; }
.redesign #tab-hotels .search-card { position:relative; z-index:2; display:grid; gap:16px; margin:-104px 0 26px; padding:18px 14px;
  border:1px solid var(--border); border-radius:24px; background:var(--hx-surface); box-shadow:var(--rd-shadow); backdrop-filter:blur(26px); }
.redesign #tab-hotels .field { position:relative; min-width:0; display:grid; gap:10px; margin:0; padding:0; border:0; }
.redesign #tab-hotels .field > span:first-child, .redesign #tab-hotels .field legend { color:var(--muted); font-size:.82rem; font-weight:600; }
.redesign #tab-hotels .field legend { margin-bottom:10px; padding:0; }
.redesign #tab-hotels .field-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.redesign #tab-hotels .control { width:100%; min-height:58px; display:flex; align-items:center; gap:9px; padding:0 12px; border:1.5px solid var(--border); border-radius:16px; background:transparent; }
.redesign #tab-hotels .control > svg:first-child { flex:0 0 auto; color:var(--gold); }
.redesign #tab-hotels .control input { width:100%; min-width:0; border:0; outline:0; color:var(--text); background:transparent; font-weight:600; font-family:inherit; }
.redesign #tab-hotels .chevron { margin-left:auto; color:var(--muted); }
.redesign #tab-hotels .guest-control { justify-content:flex-start; gap:8px; cursor:pointer; color:var(--text); font-family:inherit; }
.redesign #tab-hotels .guest-control strong { white-space:nowrap; }
.redesign #tab-hotels .segmented { min-height:58px; display:grid; grid-template-columns:1fr 1fr; padding:3px; border:1.5px solid var(--border); border-radius:16px; }
.redesign #tab-hotels .segmented button { min-width:0; padding:0 4px; border:0; border-radius:12px; background:transparent; cursor:pointer; white-space:nowrap; font-size:.82rem; color:var(--text); font-family:inherit; font-weight:700; }
.redesign #tab-hotels .segmented button.selected { color:#fff; background:linear-gradient(135deg,var(--rd-accent2),var(--gold)); box-shadow:0 5px 14px color-mix(in srgb,var(--gold) 25%, transparent); }
.redesign #tab-hotels .primary-button { min-height:62px; display:flex; align-items:center; justify-content:center; gap:14px; border:0; border-radius:16px; color:#fff;
  background:linear-gradient(100deg,var(--rd-accent2),var(--gold)); font-size:1rem; font-weight:700; box-shadow:0 14px 30px color-mix(in srgb,var(--gold) 25%, transparent); cursor:pointer; width:100%; font-family:inherit; transition:filter .15s, transform .12s; }
.redesign #tab-hotels .primary-button:hover { filter:brightness(1.06); transform:translateY(-1px); }
.redesign #tab-hotels .primary-button:active { transform:translateY(1px) scale(.99); }
.redesign #tab-hotels .primary-button svg { width:24px; }
.redesign #tab-hotels .form-message { min-height:0; margin:-8px 0 0; color:var(--gold); text-align:center; font-weight:600; font-size:.9rem; }
.redesign #tab-hotels .destinations { margin-top:24px; }
.redesign #tab-hotels .section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:16px; }
.redesign #tab-hotels .section-heading h2 { margin:0; font-size:1.28rem; letter-spacing:-.035em; color:var(--text); font-weight:800; }
.redesign #tab-hotels .section-heading span { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; }
.redesign #tab-hotels .destination-track { display:grid; grid-auto-flow:column; grid-auto-columns:44%; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:none; }
.redesign #tab-hotels .destination-track::-webkit-scrollbar { display:none; }
.redesign #tab-hotels .destination-card { scroll-snap-align:start; aspect-ratio:1/1.05; padding:0; border:1px solid var(--border); border-radius:18px; overflow:hidden; background:var(--card); cursor:pointer; box-shadow:var(--rd-shadow-sm); }
.redesign #tab-hotels .destination-card img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .45s ease; }
.redesign #tab-hotels .destination-card:hover img { transform:scale(1.04); }
/* выпадашка подсказок направления — под полем «Куда едем» */
.redesign #tab-hotels .field .htl-hints__list { position:absolute; z-index:20; left:0; right:0; top:calc(100% + 6px);
  background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--rd-shadow); }

/* ── Панель промокода на странице выпуска (бета) ── */
.redesign .pay-panel { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:20px 18px; margin:16px 0 18px; box-shadow:var(--rd-shadow-sm); }
/* Акцент панели промокода повторяем и здесь: правило .redesign .pay-panel специфичнее
   .pay-panel--promo из app.css и без этой пары гасило бы фон и рамку обратно в белое. */
.redesign .pay-panel--promo { border-color:var(--gold); background:linear-gradient(180deg, var(--gold-light), var(--card) 60%);
  box-shadow:0 6px 20px rgba(110, 59, 234, .12); }
.redesign .pp-field { background:var(--rd-field); }
/* тёмная тема спит (переключатель убран), но зелёный по тёмному фону держим читаемым */
body.app-body.redesign[data-theme="dark"] .pp-note.ok,
body.app-body.redesign[data-theme="dark"] .pp-badge.ok { color:#34D07A; }