/* ===========================================================
   WERK v2 — ФЛОУ ЗАКАЗА (иммерсив, тёплое стекло)
   Клиент / Каталог / Товар / Корзина — точь-в-точь по макету.
   Каждый экран под своим флагом (v2.customer / v2.catalog / ...).

   ПОДХОД: переопределяем дизайн-токены (--bg-card, --border,
   --text-*, --bg-input) на ТЁПЛЫЕ под #screenId — и весь богатый
   контент (inline var() + классы из main.css) автоматически
   перекрашивается в тёплую тему. Плюс точечная полировка (стекло,
   скругления). v2-screens.css отключён → конфликта нет, бьём только
   базу, !important не нужен.
   =========================================================== */

/* убрать нативные стрелки у number-полей в новом дизайне (баг на десктопе) */
html[data-v2-flags] input[type="number"]::-webkit-inner-spin-button,
html[data-v2-flags] input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
html[data-v2-flags] input[type="number"] { -moz-appearance: textfield; }

/* ───────── общий тёплый набор токенов для экранов флоу ───────── */
html[data-v2-flags~="customer"] #customerScreen,
html[data-v2-flags~="catalog"]  #catalogScreen,
html[data-v2-flags~="cart"]     #cartScreen {
    --bg-primary:    #0c0805;
    --bg-secondary:  #1d1510;
    --bg-card:       rgba(54, 40, 26, 0.5);
    --bg-card-solid: #241a10;
    --bg-input:      rgba(255, 255, 255, 0.04);
    --text-primary:  #F5EFE3;
    --text-secondary:#C9AE8E;
    --text-muted:    #9a8f77;
    --border:        rgba(255, 214, 170, 0.18);
    --border-light:  rgba(255, 214, 170, 0.10);
    --accent-glow:   rgba(249, 115, 22, 0.16);
    background:
        radial-gradient(72% 40% at 22% 6%, rgba(249,140,60,.18), transparent 60%),
        radial-gradient(60% 40% at 86% 20%, rgba(150,110,200,.10), transparent 60%),
        linear-gradient(170deg, #1d1510, #0c0805);
}

/* шапка экранов флоу — тёплое стекло */
html[data-v2-flags~="customer"] #customerScreen .header,
html[data-v2-flags~="catalog"]  #catalogScreen .header,
html[data-v2-flags~="cart"]     #cartScreen .header {
    background: rgba(28,20,11,.55);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,214,170,.14);
}

/* ───── десктоп: центрируем колонку (макет mobile-first) ───── */
@media (min-width: 760px) {
    html[data-v2-flags~="customer"] #customerScreen .customer-content,
    html[data-v2-flags~="catalog"]  #catalogScreen .catalog-content,
    html[data-v2-flags~="cart"]     #cartScreen .cart-content,
    html[data-v2-flags~="cart"]     #cartScreen .cart-footer {
        max-width: 720px; margin-left: auto; margin-right: auto;
    }
    html[data-v2-flags~="customer"] #customerScreen .header > *,
    html[data-v2-flags~="catalog"]  #catalogScreen .header,
    html[data-v2-flags~="cart"]     #cartScreen .header {
        max-width: 720px; margin-left: auto; margin-right: auto;
    }
}

/* ═════════════════════ КЛИЕНТ ═════════════════════ */
/* поиск */
html[data-v2-flags~="customer"] #customerScreen .search-box {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,214,170,.16); border-radius: 14px;
}
/* карточка результата клиента — стекло */
html[data-v2-flags~="customer"] #customerScreen .customer-result {
    background: linear-gradient(150deg, rgba(54,40,26,.5), rgba(30,21,12,.55));
    border: 1px solid rgba(255,214,170,.16);
    border-radius: 18px;
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255,235,210,.16), 0 10px 26px rgba(0,0,0,.32);
}
html[data-v2-flags~="customer"] #customerScreen .c-avatar {
    background: linear-gradient(140deg, rgba(249,115,22,.25), rgba(194,65,12,.15)) !important;
    color: #FFD9A8 !important;
}
html[data-v2-flags~="customer"] #customerScreen .c-name { color: #fff; }
html[data-v2-flags~="customer"] #customerScreen .c-stat-value { font-family: 'JetBrains Mono', monospace; }
/* профиль клиента — карточки стекло */
html[data-v2-flags~="customer"] #customerScreen .cprof {
    background: linear-gradient(150deg, rgba(54,40,26,.45), rgba(30,21,12,.5));
    border: 1px solid rgba(255,214,170,.14);
    border-radius: 16px;
    backdrop-filter: blur(10px);
}
/* форма нового клиента / выбранный клиент — стекло */
html[data-v2-flags~="customer"] #customerScreen .form-section {
    background: linear-gradient(150deg, rgba(54,40,26,.5), rgba(30,21,12,.55));
    border: 1px solid rgba(255,214,170,.16);
    border-radius: 18px;
    backdrop-filter: blur(12px);
}
html[data-v2-flags~="customer"] #customerScreen .form-section-title { color: #FFD9A8; }
html[data-v2-flags~="customer"] #customerScreen .input {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,214,170,.18); color: #fff; border-radius: 12px;
}
html[data-v2-flags~="customer"] #customerScreen .radio-option {
    border: 1px solid rgba(255,214,170,.18); border-radius: 12px; color: #C9AE8E;
}
html[data-v2-flags~="customer"] #customerScreen .radio-option.selected {
    border-color: #F97316; background: rgba(249,115,22,.16); color: #FFD9A8;
}
/* розничный быстрый выбор + фильтры (инжектит v2-desktop-layout.js) */
html[data-v2-flags~="customer"] #customerScreen .v2c-retail-btn {
    display: flex; align-items: center; gap: 11px; width: 100%; padding: 14px 16px;
    background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.3); border-radius: 15px;
    color: #FFD9A8; font-weight: 700; font-size: 14px; cursor: pointer; margin-bottom: 12px;
}
html[data-v2-flags~="customer"] #customerScreen .v2c-filters {
    display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; scrollbar-width: none; padding-bottom: 2px;
}
html[data-v2-flags~="customer"] #customerScreen .v2c-filters::-webkit-scrollbar { display: none; }
html[data-v2-flags~="customer"] #customerScreen .v2c-filter {
    padding: 8px 15px; border-radius: 99px; font-size: 13px; font-weight: 600; color: #C9AE8E;
    border: 1px solid rgba(255,214,170,.16); background: rgba(255,255,255,.03); white-space: nowrap; cursor: pointer; flex: 0 0 auto;
}
html[data-v2-flags~="customer"] #customerScreen .v2c-filter.active {
    background: #F97316; color: #fff; border-color: #F97316;
}

/* кнопки primary в флоу — оранжевый градиент */
html[data-v2-flags~="customer"] #customerScreen .btn-primary {
    background: linear-gradient(120deg, #F97316, #FF8A3D, #C2410C); border: none; color: #fff;
    border-radius: 14px; font-weight: 800; box-shadow: 0 0 30px rgba(249,115,22,.45);
}