/* ===========================================================
   WERK v2 — Открытый заказ (иммерсив, тёплое стекло)
   Только под флагом v2.order-detail
   (html[data-v2-flags~="order-detail"]).
   Контент генерит _v2odRenderContent() в public/core/order-detail.js.
   Кнопки действий — стандартные .order-action-btn, перекрашены ниже.
   =========================================================== */

html[data-v2-flags~="order-detail"] #orderDetailOverlay {
    background:
        radial-gradient(70% 45% at 22% 10%, rgba(249,140,60,.18), transparent 60%),
        radial-gradient(60% 45% at 85% 28%, rgba(150,110,200,.12), transparent 60%),
        linear-gradient(160deg, #1d1510, #0c0805);
}
/* существующие классы шапки — скоупим под #orderDetailOverlay + !important,
   чтобы победить старый v2-screens.css (#id+!important, 41 правило для этого флага) */
html[data-v2-flags~="order-detail"] #orderDetailOverlay .order-detail-header {
    background: rgba(28,20,11,.55) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,214,170,.14) !important;
}
html[data-v2-flags~="order-detail"] #orderDetailOverlay .order-detail-title h1 { color: #fff !important; }
html[data-v2-flags~="order-detail"] #orderDetailOverlay .order-detail-back,
html[data-v2-flags~="order-detail"] #orderDetailOverlay .order-detail-action-btn { color: #E8D9C6 !important; }
html[data-v2-flags~="order-detail"] #orderDetailOverlay #orderDetailContent { padding: 16px !important; }

/* hero */
html[data-v2-flags~="order-detail"] .v2od-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(150deg, rgba(54,40,26,.5), rgba(30,21,12,.55));
    border: 1px solid rgba(255,214,170,.18);
    border-radius: 22px; padding: 18px 20px; margin-bottom: 16px;
    box-shadow: inset 0 1px 0 rgba(255,235,210,.2), 0 14px 36px rgba(0,0,0,.4);
}
html[data-v2-flags~="order-detail"] .v2od-hero::before {
    content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px;
    border-radius: 50%; background: radial-gradient(circle, rgba(249,115,22,.22), transparent 70%); pointer-events: none;
}
html[data-v2-flags~="order-detail"] .v2od-hero-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
html[data-v2-flags~="order-detail"] .v2od-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; padding: 6px 13px; border-radius: 99px; white-space: nowrap; }
html[data-v2-flags~="order-detail"] .v2od-pill.reserve { background: rgba(249,115,22,.16); border: 1px solid rgba(249,115,22,.4); color: #FFD9A8; }
html[data-v2-flags~="order-detail"] .v2od-pill.paid,
html[data-v2-flags~="order-detail"] .v2od-pill.done2 { background: rgba(34,197,94,.18); border: 1px solid rgba(34,197,94,.45); color: #86efac; }
html[data-v2-flags~="order-detail"] .v2od-date { font-size: 12px; color: #9a8f77; text-align: right; }
html[data-v2-flags~="order-detail"] .v2od-amount {
    font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 38px; letter-spacing: -1px;
    background: linear-gradient(180deg, #fff, #FFE0B8); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-v2-flags~="order-detail"] .v2od-sub { font-size: 12.5px; color: #9a8f77; margin-top: 8px; }
html[data-v2-flags~="order-detail"] .v2od-sub b { color: #FBBF24; }

/* степпер */
html[data-v2-flags~="order-detail"] .v2od-stepper { display: flex; align-items: flex-start; justify-content: space-between; padding: 4px 6px 0; margin-bottom: 18px; }
html[data-v2-flags~="order-detail"] .v2od-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; width: 58px; }
html[data-v2-flags~="order-detail"] .v2od-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 800; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.12); color: #9a8f77; }
html[data-v2-flags~="order-detail"] .v2od-step.done .v2od-dot { background: rgba(34,197,94,.16); border-color: #22C55E; color: #22C55E; }
html[data-v2-flags~="order-detail"] .v2od-step.active .v2od-dot { background: rgba(249,115,22,.18); border-color: #F97316; color: #FFD9A8; }
html[data-v2-flags~="order-detail"] .v2od-lbl { font-size: 10.5px; font-weight: 600; color: #9a8f77; }
html[data-v2-flags~="order-detail"] .v2od-step.done .v2od-lbl { color: #86efac; }
html[data-v2-flags~="order-detail"] .v2od-step.active .v2od-lbl { color: #FFD9A8; }
html[data-v2-flags~="order-detail"] .v2od-line { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.1); margin-top: 17px; }
html[data-v2-flags~="order-detail"] .v2od-line.done { background: #22C55E; }

/* карточки */
html[data-v2-flags~="order-detail"] .v2od-card {
    background: linear-gradient(150deg, rgba(54,40,26,.5), rgba(30,21,12,.55));
    border: 1px solid rgba(255,214,170,.18); border-radius: 22px; padding: 18px;
    box-shadow: inset 0 1px 0 rgba(255,235,210,.2), 0 14px 36px rgba(0,0,0,.4); margin-bottom: 14px;
}
html[data-v2-flags~="order-detail"] .v2od-title { font-size: 14px; font-weight: 700; margin-bottom: 13px; color: #fff; }

/* клиент */
html[data-v2-flags~="order-detail"] .v2od-client { display: flex; align-items: center; gap: 13px; }
html[data-v2-flags~="order-detail"] .v2od-av { width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(140deg, rgba(249,115,22,.25), rgba(194,65,12,.15)); display: grid; place-items: center; font-size: 24px; flex: 0 0 auto; }
html[data-v2-flags~="order-detail"] .v2od-cl-body { flex: 1; min-width: 0; }
html[data-v2-flags~="order-detail"] .v2od-cl-name { font-size: 15.5px; font-weight: 700; color: #fff; }
html[data-v2-flags~="order-detail"] .v2od-cl-meta { font-size: 11.5px; color: #9a8f77; margin-top: 2px; }
html[data-v2-flags~="order-detail"] .v2od-cl-acts { display: flex; gap: 8px; flex: 0 0 auto; }
html[data-v2-flags~="order-detail"] .v2od-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 17px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,214,170,.16); text-decoration: none; }

/* инфо-сетка */
html[data-v2-flags~="order-detail"] .v2od-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html[data-v2-flags~="order-detail"] .v2od-fact { background: rgba(255,255,255,.03); border: 1px solid rgba(255,214,170,.1); border-radius: 12px; padding: 10px 12px; }
html[data-v2-flags~="order-detail"] .v2od-fact span { display: block; font-size: 10.5px; color: #9a8f77; text-transform: uppercase; letter-spacing: .3px; }
html[data-v2-flags~="order-detail"] .v2od-fact b { font-size: 13.5px; font-weight: 600; margin-top: 3px; display: block; color: #E8D9C6; }
html[data-v2-flags~="order-detail"] .v2od-payrow { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,214,170,.1); font-size: 13px; }
html[data-v2-flags~="order-detail"] .v2od-payrow span { color: #9a8f77; }
html[data-v2-flags~="order-detail"] .v2od-payrow b { color: #E8D9C6; font-weight: 700; text-align: right; }
html[data-v2-flags~="order-detail"] .v2od-payrow.paid b { color: #86efac; }
html[data-v2-flags~="order-detail"] .v2od-payrow.partial b { color: #F97316; }
html[data-v2-flags~="order-detail"] .v2od-payrow.real b { color: #86efac; }

/* комментарий */
html[data-v2-flags~="order-detail"] .v2od-comment-t { font-size: 13px; color: #C9AE8E; line-height: 1.5; }

/* товары (SKU primary) */
html[data-v2-flags~="order-detail"] .v2od-itemscard { padding: 4px 16px; }
html[data-v2-flags~="order-detail"] .v2od-items-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 2px; border-bottom: 1px solid rgba(255,220,180,.1); }
html[data-v2-flags~="order-detail"] .v2od-items-head b { font-size: 14px; color: #fff; }
html[data-v2-flags~="order-detail"] .v2od-items-head span { font-size: 11px; color: #9a8f77; }
html[data-v2-flags~="order-detail"] .v2od-itemscroll { max-height: 340px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
html[data-v2-flags~="order-detail"] .v2od-itemscroll::-webkit-scrollbar { width: 5px; }
html[data-v2-flags~="order-detail"] .v2od-itemscroll::-webkit-scrollbar-thumb { background: rgba(249,115,22,.4); border-radius: 99px; }
html[data-v2-flags~="order-detail"] .v2od-item { display: flex; align-items: center; gap: 11px; padding: 12px 2px; border-bottom: 1px solid rgba(255,220,180,.07); }
html[data-v2-flags~="order-detail"] .v2od-item:last-child { border-bottom: none; }
html[data-v2-flags~="order-detail"] .v2od-it-idx { width: 20px; text-align: center; font-size: 12px; font-weight: 700; color: #9a8f77; flex: 0 0 auto; }
html[data-v2-flags~="order-detail"] .v2od-it-info { flex: 1; min-width: 0; }
html[data-v2-flags~="order-detail"] .v2od-it-sku { font-family: 'JetBrains Mono', monospace; font-size: 13.5px; font-weight: 700; color: #E8D9C6; }
html[data-v2-flags~="order-detail"] .v2od-it-name { font-size: 11.5px; font-weight: 500; color: #9a8f77; margin-top: 2px; line-height: 1.25; }
html[data-v2-flags~="order-detail"] .v2od-it-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #9a8f77; margin-top: 3px; }
html[data-v2-flags~="order-detail"] .v2od-it-sum { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13.5px; text-align: right; flex: 0 0 auto; color: #fff; }
html[data-v2-flags~="order-detail"] .v2od-total { display: flex; justify-content: space-between; align-items: center; padding: 14px 2px 4px; margin-top: 2px; border-top: 1px solid rgba(255,220,180,.12); }
html[data-v2-flags~="order-detail"] .v2od-total span { font-size: 15px; font-weight: 600; color: #fff; }
html[data-v2-flags~="order-detail"] .v2od-total b { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 800; color: #fff; }

/* кнопки действий (стандартный .order-action-btn) — перекраска в иммерсив.
   #orderDetailOverlay + !important чтобы победить старый v2-screens.css */
html[data-v2-flags~="order-detail"] #orderDetailOverlay .order-inline-actions { margin-top: 4px; }
html[data-v2-flags~="order-detail"] #orderDetailOverlay .order-action-btn {
    border-radius: 13px !important; font-weight: 700; padding: 13px 8px; border: 1px solid rgba(255,214,170,.2) !important;
    background: rgba(255,255,255,.03) !important; color: #E8D9C6 !important;
}
html[data-v2-flags~="order-detail"] #orderDetailOverlay .order-action-btn.danger { color: #F87171 !important; border-color: rgba(248,113,113,.35) !important; background: rgba(248,113,113,.08) !important; }
html[data-v2-flags~="order-detail"] #orderDetailOverlay .order-action-btn.success { color: #fff !important; border: none !important; background: linear-gradient(120deg, #22C55E, #15803D) !important; box-shadow: 0 0 24px rgba(34,197,94,.35) !important; }
html[data-v2-flags~="order-detail"] #orderDetailOverlay .order-action-btn.primary { color: #fff !important; border: none !important; background: linear-gradient(120deg, #F97316, #FF8A3D, #C2410C) !important; box-shadow: 0 0 28px rgba(249,115,22,.45) !important; }
html[data-v2-flags~="order-detail"] #orderDetailOverlay .order-action-btn.confirming { background: linear-gradient(120deg, #FBBF24, #D97706) !important; color: #1a120a !important; }