.profile-varification-status {
    border-radius: 8px;
    padding: 4px 6px 4px 26px;
    position: relative;
}

.profile-varification-status::after {
    position: absolute;
    left: 6px;
    top: 3px;
}

.profile-varification-status.pending {
    border: 1px solid var(--yellow);
}

.profile-varification-status.pending::after {
    content: url(../images/icons/info-orange.svg);
}

.profile-varification-status.pending span {
    color: var(--yellow);
}

.profile-varification-status.success {
    border: 1px solid var(--green);
}

.profile-varification-status.success span {
    color: var(--green);
}

.profile-varification-status.success::after {
    content: url(../images/icons/info-green.svg);
}

.profile-photo {
    max-width: 120px;
    max-height: 120px;
    min-width: 120px;
    min-height: 120px;
    border-radius: 1000px;
    overflow: hidden;
}

.profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-balls__count {
    padding: 8px 27px;
    border-radius: 8px;
    border: 1px solid var(--primary-red);
    font-size: 18px;
    font-weight: 600;
}

.edit-profile {
    width: 100%;
    max-width: 650px;
}

.edit-profile__photo {
    min-width: 72px;
    min-height: 72px;
    max-width: 72px;
    max-height: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 1000px;
}

.edit-profile__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.edit-profile__photo-icon {
    content: url(../images/icons/camera.svg);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.qr-img {
    max-width: 342px;
    border-radius: 12px;
}

@media (max-width: 767.98px) {
    .profile-photo {
        max-width: 78px;
        max-height: 78px;
        min-width: 78px;
        min-height: 78px;
    }

    .profile-top__content button {
        width: 100%;
    }

    .profile-balls__count {
        padding: 8px 12px;
    }
}

[data-theme="light"] .qr-img {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* =====================================================
   CABINET DASHBOARD — premium motorsport, dark by default
   Используется на /cabinet/orders/ (dashboard и деталка).
   Light тема — отдельным блоком ниже.
   ===================================================== */

.cab-dashboard {
    --cab-surface: #1c1e1f;
    --cab-surface-2: #232527;
    --cab-surface-3: #2a2d2f;
    --cab-border: rgba(255, 255, 255, 0.06);
    --cab-border-strong: rgba(255, 255, 255, 0.12);
    --cab-accent: var(--primary-red);
    --cab-text: var(--white);
    --cab-text-muted: var(--special-gray);
    --cab-text-dim: var(--light-gray);
    --cab-success: var(--green);
    --cab-warning: var(--yellow);
    --cab-glow: rgba(207, 9, 57, 0.18);

    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cab-dashboard .rounded-section-24 {
    background-color: var(--cab-surface);
    border: 1px solid var(--cab-border);
}

/* ---------- HERO ---------- */
.cab-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    padding: 28px 32px;
    position: relative;
    overflow: hidden;
  /*background: linear-gradient(135deg, #1c1e1f 0%, #1c1e1f 60%, #221316 100%);*/
}

.cab-hero::before {
    content: '';
    position: absolute;
    inset: -40% -20% auto auto;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, var(--cab-glow) 0%, transparent 70%);
    pointer-events: none;
}

.cab-hero__main {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.cab-hero__avatar {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cab-accent) 0%, #7d0820 100%);
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 28px var(--cab-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.cab-hero__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.cab-hero__greeting {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    color: var(--cab-text-muted);
    font-weight: 600;
}

.cab-hero__name {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--cab-text);
}

.cab-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    color: var(--cab-text-muted);
    font-size: 14px;
}

.cab-hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cab-hero__meta-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.cab-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.cab-hero__loyalty {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding: 18px 22px;
    min-width: 240px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(207, 9, 57, 0.16) 0%, rgba(28, 30, 31, 0.6) 100%);
    border: 1px solid rgba(207, 9, 57, 0.32);
}

.cab-hero__loyalty-label {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 11px;
    color: var(--cab-text-muted);
    font-weight: 600;
}

.cab-hero__loyalty-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--cab-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.cab-hero__loyalty-word {
    font-size: 13px;
    color: var(--cab-text-muted);
}

.cab-hero__loyalty-pending {
    font-size: 12px;
    color: var(--cab-warning);
    margin-top: 2px;
}

.cab-hero__loyalty-link {
    font-size: 12px;
    color: var(--cab-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-top: 4px;
}

.cab-hero__loyalty-link:hover {
    color: var(--btn-hover);
}

/* Кнопка «Редактировать профиль» в hero дашборда.
   Дублируем правило с :focus/:active, чтобы выиграть каскад у группового
   `.special-btn:focus, .special-btn { width: fit-content; padding: 12px }` из app.css
   (специфичность .2.0 у :focus превосходила одиночный .cab-hero__edit и приводила
   к «скачку размера» кнопки в момент клика). */
.cab-hero__edit,
.cab-hero__edit:focus,
.cab-hero__edit:active {
    margin-top: 10px;
    width: 100%;
    text-align: center;
}

/* ---------- CHIPS ---------- */
.cab-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--cab-border-strong);
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--cab-text-muted);
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.cab-chip:hover {
    color: var(--cab-text);
    border-color: var(--cab-border-strong);
}

.cab-chip__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

.cab-chip--warning {
    border-color: rgba(228, 149, 14, 0.45);
    color: var(--cab-warning);
    background-color: rgba(228, 149, 14, 0.08);
}

.cab-chip--success {
    border-color: rgba(24, 177, 77, 0.45);
    color: var(--cab-success);
    background-color: rgba(24, 177, 77, 0.08);
}

/* ---------- ACTION BANNER ---------- */
.cab-action {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 20px 24px;
    border-radius: 18px;
    background-color: var(--cab-surface);
    border: 1px solid var(--cab-border);
    position: relative;
    overflow: hidden;
}

.cab-action::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--cab-accent);
}

.cab-action--warning::before { background-color: var(--cab-warning); }
.cab-action--success::before { background-color: var(--cab-success); }
.cab-action--info::before { background-color: #3b82f6; }
.cab-action--idle::before { background-color: var(--cab-text-dim); }

.cab-action__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--cab-text);
}

.cab-action--warning .cab-action__icon { color: var(--cab-warning); background-color: rgba(228, 149, 14, 0.1); }
.cab-action--success .cab-action__icon { color: var(--cab-success); background-color: rgba(24, 177, 77, 0.1); }
.cab-action--info .cab-action__icon { color: #60a5fa; background-color: rgba(59, 130, 246, 0.1); }

.cab-action__title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--cab-text);
}

.cab-action__desc {
    margin: 0;
    font-size: 14px;
    color: var(--cab-text-muted);
}

.cab-action__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.cab-action__secondary {
    font-size: 12px;
    color: var(--cab-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cab-action__secondary:hover {
    color: var(--cab-text);
}

/* ---------- KPI ---------- */
.cab-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.cab-kpi {
    position: relative;
    padding: 20px 22px;
    border-radius: 18px;
    background-color: var(--cab-surface);
    border: 1px solid var(--cab-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.cab-kpi:hover {
    transform: translateY(-2px);
    border-color: var(--cab-border-strong);
}

.cab-kpi__label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
    color: var(--cab-text-muted);
    font-weight: 600;
}

.cab-kpi__value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--cab-text);
    font-variant-numeric: tabular-nums;
}

.cab-kpi__value--accent {
    color: var(--cab-accent);
}

.cab-kpi__currency {
    font-size: 18px;
    font-weight: 500;
    color: var(--cab-text-muted);
}

.cab-kpi__hint {
    font-size: 12px;
    color: var(--cab-text-dim);
}

/* ---------- GRID: ORDERS + ASIDE ---------- */
.cab-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
    gap: 18px;
}

.cab-orders {
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cab-orders__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.cab-orders__title h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--cab-text);
}

.cab-orders__sub {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
    color: var(--cab-text-muted);
}

.cab-tabs {
    display: inline-flex;
    padding: 4px;
    border-radius: 12px;
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border);
    gap: 2px;
}

.cab-tab {
    padding: 8px 14px;
    border-radius: 9px;
    color: var(--cab-text-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s, color 0.2s;
}

.cab-tab:hover {
    color: var(--cab-text);
}

.cab-tab.active {
    background-color: var(--cab-accent);
    color: #fff;
}

.cab-tab__count {
    background-color: rgba(0, 0, 0, 0.18);
    color: inherit;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.cab-tab:not(.active) .cab-tab__count {
    background-color: rgba(255, 255, 255, 0.06);
}

.cab-orders__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------- ORDER CARD ---------- */
.cab-order-card {
    padding: 18px 20px;
    border-radius: 16px;
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.2s, transform 0.2s;
}

.cab-order-card:hover {
    border-color: rgba(207, 9, 57, 0.32);
    transform: translateY(-1px);
}

.cab-order-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cab-order-card__num {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cab-order-card__num-link {
    color: var(--cab-text);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}

.cab-order-card__num-link:hover {
    color: var(--cab-accent);
}

.cab-order-card__date {
    font-size: 12px;
    color: var(--cab-text-muted);
}

.cab-order-card__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    padding: 12px 14px;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
}

.cab-order-card__meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cab-order-card__meta-label {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 10px;
    color: var(--cab-text-muted);
    font-weight: 600;
}

.cab-order-card__meta-value {
    font-size: 13px;
    color: var(--cab-text);
    overflow: hidden;
    text-overflow: ellipsis;
}

.cab-order-card__meta-value--mono {
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 12px;
}

.cab-order-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px dashed var(--cab-border-strong);
    padding-top: 14px;
}

.cab-order-card__total {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cab-order-card__total-label {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 11px;
    color: var(--cab-text-muted);
    font-weight: 600;
}

.cab-order-card__total-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--cab-text);
    font-variant-numeric: tabular-nums;
}

.cab-order-card__total-bonus {
    font-size: 12px;
    color: var(--cab-success);
    margin-top: 2px;
}

.cab-order-card__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---------- EMPTY ---------- */
.cab-empty {
    padding: 36px 24px;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--cab-border-strong);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.cab-empty__icon {
    color: var(--cab-text-muted);
}

.cab-empty h3 {
    margin: 0;
    font-size: 18px;
    color: var(--cab-text);
}

.cab-empty p {
    margin: 0;
    color: var(--cab-text-muted);
    max-width: 360px;
}

.cab-empty--compact {
    padding: 18px;
}

/* ---------- ASIDE ---------- */
.cab-aside {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cab-loyalty-card,
.cab-trend {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cab-loyalty-card__head,
.cab-trend__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.cab-loyalty-card__head h3,
.cab-trend__head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--cab-text);
}

.cab-loyalty-card__rules {
    color: var(--cab-accent);
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cab-loyalty-card__balance {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.cab-loyalty-card__balance-label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 10px;
    color: var(--cab-text-muted);
    font-weight: 600;
}

.cab-loyalty-card__balance-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--cab-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.cab-loyalty-card__balance-word {
    font-size: 12px;
    color: var(--cab-text-muted);
}

.cab-loyalty-card__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.cab-loyalty-card__stats > div {
    padding: 10px 12px;
    background-color: var(--cab-surface-2);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cab-loyalty-card__stats dt {
    font-size: 10px;
    color: var(--cab-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.cab-loyalty-card__stats dd {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--cab-text);
    font-variant-numeric: tabular-nums;
}

.cab-loyalty-card__pending {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--cab-border-strong);
    font-size: 12px;
}

/* ---------- TREND ---------- */
.cab-trend__total {
    font-size: 12px;
    color: var(--cab-text-muted);
}

.cab-trend__bars {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    height: 140px;
    align-items: end;
}

.cab-trend__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    min-width: 0;
}

.cab-trend__bar-wrap {
    width: 100%;
    height: 92px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.cab-trend__bar {
    width: 100%;
    max-width: 22px;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, var(--cab-accent) 0%, rgba(207, 9, 57, 0.35) 100%);
    transition: height 0.4s ease, background 0.2s;
    min-height: 2px;
}

.cab-trend__col.is-empty .cab-trend__bar {
    background: rgba(255, 255, 255, 0.08);
    height: 6px !important;
}

.cab-trend__col:hover .cab-trend__bar {
    filter: brightness(1.15);
}

.cab-trend__label {
    font-size: 10px;
    color: var(--cab-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cab-trend__count {
    font-size: 11px;
    color: var(--cab-text-dim);
    font-variant-numeric: tabular-nums;
}

/* ---------- LOYALTY HISTORY ---------- */
.cab-loyalty-history {
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cab-loyalty-history__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.cab-loyalty-history__head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--cab-text);
}

.cab-loyalty-history__sub {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--cab-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.cab-loyalty-history__totals {
    margin: 0;
    font-size: 13px;
    color: var(--cab-text-muted);
}

.cab-loyalty-history__sep {
    margin: 0 6px;
    color: var(--cab-text-dim);
}

.cab-loyalty-history__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cab-tx {
    display: grid;
    grid-template-columns: 160px 1fr 100px 160px auto;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border);
    border-radius: 12px;
    transition: border-color 0.2s;
}

.cab-tx:hover {
    border-color: var(--cab-border-strong);
}

.cab-tx__date {
    font-size: 12px;
    color: var(--cab-text-muted);
}

.cab-tx__event {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cab-tx__event-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--cab-text);
}

.cab-tx__reason {
    font-size: 12px;
    color: var(--cab-text-muted);
}

.cab-tx__delta {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.cab-tx--earn .cab-tx__delta {
    color: var(--cab-success);
}

.cab-tx--spend .cab-tx__delta {
    color: var(--cab-accent);
}

.cab-tx__balance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--cab-text-dim);
    font-variant-numeric: tabular-nums;
}

.cab-tx__balance-to {
    color: var(--cab-text);
    font-weight: 600;
}

.cab-tx__balance-arrow {
    color: var(--cab-text-muted);
}

.cab-tx__action {
    justify-self: end;
}

.cab-tx__order-btn {
    font-size: 12px;
    padding: 6px 12px;
}

/* =====================================================
   CABINET ORDER DETAIL
   ===================================================== */
.cab-order-detail {
    --cab-surface: #1c1e1f;
    --cab-surface-2: #232527;
    --cab-border: rgba(255, 255, 255, 0.06);
    --cab-border-strong: rgba(255, 255, 255, 0.12);
    --cab-accent: var(--primary-red);
    --cab-text: var(--white);
    --cab-text-muted: var(--special-gray);
    --cab-text-dim: var(--light-gray);
    --cab-success: var(--green);
    --cab-warning: var(--yellow);

    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cab-order-detail .rounded-section-24 {
    background-color: var(--cab-surface);
    border: 1px solid var(--cab-border);
}

.cab-order-detail__topbar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cab-order-detail__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    color: var(--cab-text-muted);
    font-size: 14px;
    font-weight: 500;
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border);
    transition: color 0.2s, border-color 0.2s;
    text-decoration: none;
}

.cab-order-detail__back:hover {
    color: var(--cab-text);
    border-color: var(--cab-border-strong);
}

.cab-order-detail__back--disabled {
    pointer-events: none;
    opacity: 0.6;
}

/* hero of detail */
.cab-order-detail__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    padding: 26px 30px;
    align-items: center;
}

.cab-order-detail__hero-left {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cab-order-detail__title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cab-order-detail__title h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--cab-text);
}

.cab-order-detail__num {
    color: var(--cab-accent);
}

.cab-order-detail__date {
    font-size: 14px;
    color: var(--cab-text-muted);
}

.cab-order-detail__status {
    display: flex;
    align-items: center;
}

/* Бейджи статусов приходят из common_products::statuslist / products_statuslist
   с инлайн color:white. В кабинете клиента поверх любых заливок ставим тёмный
   текст, чтобы читаемость не зависела от темы и яркости фона бейджа. */
.cab-dashboard .badge,
.cab-order-detail .badge {
    color: #1a1c1d !important;
    font-weight: 600;
}

/* Вторичные кнопки (.special-btn) в кабинете получают красный 1px-бордер для
   акцента в premium motorsport палитре. Базовый .special-btn в app.css имеет
   border:none, поэтому overrides только тут. */
.cab-dashboard .btn.special-btn,
.cab-order-detail .btn.special-btn {
    border: 1px solid var(--primary-red);
}

.cab-dashboard .btn.special-btn:hover,
.cab-order-detail .btn.special-btn:hover {
    border-color: var(--btn-hover);
}

/* =====================================================
   CABINET PROFILE EDIT — premium motorsport карточки форм
   ===================================================== */
.cab-profile {
    --cab-surface: #1c1e1f;
    --cab-surface-2: #232527;
    --cab-surface-3: #2a2d2f;
    --cab-border: rgba(255, 255, 255, 0.06);
    --cab-border-strong: rgba(255, 255, 255, 0.12);
    --cab-accent: var(--primary-red);
    --cab-text: var(--white);
    --cab-text-muted: var(--special-gray);
    --cab-text-dim: var(--light-gray);
    --cab-success: var(--green);
    --cab-warning: var(--yellow);
    --cab-danger: #ef4444;

    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cab-profile__topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cab-profile__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    color: var(--cab-text-muted);
    font-size: 14px;
    font-weight: 500;
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border);
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
}

.cab-profile__back:hover {
    color: var(--cab-text);
    border-color: var(--cab-border-strong);
}

.cab-profile__title {
    min-width: 0;
}

.cab-profile__title h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--cab-text);
    line-height: 1.2;
}

.cab-profile__title p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--cab-text-muted);
    max-width: 720px;
}

.cab-profile__card {
    padding: 24px 26px;
    border-radius: 24px;
    background-color: var(--cab-surface);
    border: 1px solid var(--cab-border);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cab-profile__card--alert {
    border-color: rgba(228, 149, 14, 0.45);
    background: linear-gradient(135deg, rgba(228, 149, 14, 0.06) 0%, rgba(28, 30, 31, 0.6) 100%);
}

.cab-profile__card-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.cab-profile__card-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--cab-text);
    line-height: 1.2;
}

.cab-profile__card-head p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--cab-text-muted);
    line-height: 1.45;
}

.cab-profile__card-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    padding: 8px;
    border-radius: 10px;
    background-color: rgba(207, 9, 57, 0.12);
    color: var(--cab-accent);
}

.cab-profile__card--alert .cab-profile__card-icon {
    background-color: rgba(228, 149, 14, 0.12);
    color: var(--cab-warning);
}

.cab-profile__lead {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--cab-text-muted);
}

.cab-profile__lead b {
    color: var(--cab-text);
}

.cab-profile__form {
    display: flex;
    flex-direction: column;
}

.cab-profile__hint {
    display: block;
    font-size: 12px;
    color: var(--cab-text-muted);
    margin-top: 6px;
}

.cab-profile__hint b {
    color: var(--cab-text);
}

/* ---------- Form controls (overrides for cabinet) ---------- */
.cab-profile .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.cab-profile .col-form-label {
    padding: 0;
    color: var(--cab-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 11px !important;
    font-weight: 600;
}

.cab-profile .form-control,
.cab-profile .form-control:has(input:focus) {
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
}

.cab-profile .form-control input,
.cab-profile .form-control input[type="text"],
.cab-profile .form-control input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border-strong);
    color: var(--cab-text);
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.cab-profile .form-control input::placeholder {
    color: var(--cab-text-dim);
}

.cab-profile .form-control input:focus {
    border-color: var(--cab-accent);
    box-shadow: 0 0 0 3px rgba(207, 9, 57, 0.18);
    background-color: var(--cab-surface);
}

/* ---------- Radio group ---------- */
.cab-profile__radio-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.cab-profile__radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border-strong);
    cursor: pointer;
    color: var(--cab-text-muted);
    font-size: 14px;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
    margin: 0;
}

.cab-profile__radio input[type="radio"] {
    accent-color: var(--cab-accent);
    margin: 0;
    cursor: pointer;
}

.cab-profile__radio:has(input[type="radio"]:checked) {
    border-color: var(--cab-accent);
    color: var(--cab-text);
    background-color: rgba(207, 9, 57, 0.08);
}

.cab-profile__radio:hover {
    color: var(--cab-text);
}

/* ---------- Phone confirmation ---------- */
.cab-profile__phone-current {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 12px;
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border-strong);
}

.cab-profile__phone-label {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 11px;
    color: var(--cab-text-muted);
    font-weight: 600;
}

.cab-profile__phone-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--cab-text);
    font-variant-numeric: tabular-nums;
}

.cab-profile__code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: end;
}

.cab-profile__code-timer {
    text-align: right;
    color: var(--cab-text-muted);
    font-size: 13px;
}

.cab-profile__code-timer small {
    display: inline-block;
}

/* ---------- Phone country dropdown ---------- */
.cab-profile .input-group {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--cab-border-strong);
}

.cab-profile .input-group-text {
    background-color: var(--cab-surface-3);
    color: var(--cab-text);
    border: none;
    border-right: 1px solid var(--cab-border-strong);
    font-size: 14px;
    padding: 0 14px;
}

.cab-profile .input-group .form-control {
    background-color: var(--cab-surface-2);
    color: var(--cab-text);
    border: none;
    padding: 12px 14px;
    font-size: 14px;
}

.cab-profile .input-group .form-control:focus {
    background-color: var(--cab-surface);
    box-shadow: inset 0 0 0 1px var(--cab-accent);
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

/* ---------- Alerts ---------- */
.cab-alert {
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--cab-border-strong);
    font-size: 14px;
    color: var(--cab-text);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cab-alert strong {
    color: var(--cab-text);
    font-weight: 600;
}

.cab-alert ul {
    margin: 4px 0 0 18px;
    padding: 0;
    font-size: 13px;
    color: var(--cab-text-muted);
}

.cab-alert--success {
    background-color: rgba(24, 177, 77, 0.1);
    border-color: rgba(24, 177, 77, 0.4);
    color: var(--cab-success);
}

.cab-alert--warning {
    background-color: rgba(228, 149, 14, 0.08);
    border-color: rgba(228, 149, 14, 0.4);
    color: var(--cab-warning);
}

.cab-alert--danger {
    background-color: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.4);
    color: var(--cab-danger);
}

.cab-alert--danger ul,
.cab-alert--warning ul,
.cab-alert--success ul {
    color: inherit;
    opacity: 0.85;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
    .cab-profile__card {
        padding: 20px 18px;
    }

    .cab-profile__title h1 {
        font-size: 20px;
    }

    .cab-profile__code-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cab-profile__code-timer {
        text-align: left;
    }
}

/* ---------- LIGHT THEME ---------- */
[data-theme="light"] .cab-profile {
    --cab-surface: #ffffff;
    --cab-surface-2: #f5f5f7;
    --cab-surface-3: #ececef;
    --cab-border: rgba(15, 17, 19, 0.08);
    --cab-border-strong: rgba(15, 17, 19, 0.14);
    --cab-text: #1a1c1d;
    --cab-text-muted: #6e6f70;
    --cab-text-dim: #9a9b9c;
}

[data-theme="light"] .cab-profile__card,
[data-theme="light"] .cab-profile__back {
    box-shadow: 0 1px 4px rgba(15, 17, 19, 0.05);
}

[data-theme="light"] .cab-profile .form-control input,
[data-theme="light"] .cab-profile .form-control input[type="text"],
[data-theme="light"] .cab-profile .form-control input[type="password"] {
    background-color: #ffffff;
    border-color: var(--cab-border-strong);
}

[data-theme="light"] .cab-profile .form-control input:focus {
    background-color: #ffffff;
}

[data-theme="light"] .cab-profile__radio {
    background-color: #ffffff;
}

[data-theme="light"] .cab-profile__radio:has(input[type="radio"]:checked) {
    background-color: rgba(207, 9, 57, 0.06);
}

[data-theme="light"] .cab-profile__phone-current {
    background-color: #ffffff;
}

[data-theme="light"] .cab-profile .input-group-text {
    background-color: #ececef;
}

[data-theme="light"] .cab-profile .input-group .form-control {
    background-color: #ffffff;
}

.cab-order-detail__track {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border-strong);
    font-size: 13px;
    width: max-content;
    max-width: 100%;
}

.cab-order-detail__track-label {
    color: var(--cab-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
    font-weight: 600;
}

.cab-order-detail__track-value {
    color: var(--cab-text);
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    word-break: break-all;
}

.cab-order-detail__hero-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
    min-width: 240px;
}

.cab-order-detail__total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.cab-order-detail__total-label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
    color: var(--cab-text-muted);
    font-weight: 600;
}

.cab-order-detail__total-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--cab-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.cab-order-detail__total-currency {
    font-size: 18px;
    color: var(--cab-text-muted);
    font-weight: 500;
}

.cab-order-detail__total-hint {
    font-size: 12px;
    color: var(--cab-text-muted);
}

/* Кнопка «Оплатить заказ» в hero детали заказа. Дублируем правило с :focus/:active,
   чтобы выиграть каскад у `.primary-btn:focus, .primary-btn { padding: 10px 11px; width: fit-content }`
   из app.css (.2.0 у :focus переопределяла одиночный .cab-order-detail__pay и сжимала
   кнопку по горизонтали в момент клика). */
.cab-order-detail__pay,
.cab-order-detail__pay:focus,
.cab-order-detail__pay:active {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-inline: 22px;
    height: 44px;
}

.cab-order-detail__paid {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cab-order-detail__paid-label {
    color: var(--cab-success);
    font-weight: 600;
    font-size: 14px;
}

.cab-order-detail__paid-date {
    font-size: 12px;
    color: var(--cab-text-muted);
}

.cab-order-detail__paid-method {
    font-size: 12px;
    color: var(--cab-text);
}

/* ---------- TIMELINE ---------- */
.cab-timeline {
    list-style: none;
    margin: 0;
    padding: 14px 24px;
    display: grid;
    /* Фиксированная ширина последней колонки (--cab-timeline-last-w) нужна для двух вещей:
       1) Точка 5 прижимается к правому краю контейнера через align-items: flex-end.
       2) Соединитель предпоследнего шага расширяется ровно на эту величину, чтобы дотянуться
          до точки 5 (см. правило `:nth-last-child(2)::before` ниже). */
    --cab-timeline-last-w: 110px;
    grid-template-columns: repeat(4, 1fr) var(--cab-timeline-last-w);
    gap: 0;
    background-color: var(--cab-surface);
    border: 1px solid var(--cab-border);
    border-radius: 18px;
    position: relative;
}

.cab-timeline__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 12px 10px 0;
    min-width: 0;
}

.cab-timeline__step:last-child {
    align-items: flex-end;
    padding-right: 0;
    padding-left: 14px;
}

.cab-timeline__step:last-child .cab-timeline__label,
.cab-timeline__step:last-child .cab-timeline__hint {
    text-align: right;
}

.cab-timeline__step::before {
    content: '';
    position: absolute;
    top: 17px;
    left: 18px;
    right: 0;
    height: 2px;
    background-color: var(--cab-border-strong);
    z-index: 0;
}

/* Соединитель шага 4 дотягивается через всю auto-колонку до центра точки 5
   (которая выровнена flex-end в правом крае последней колонки). */
.cab-timeline__step:nth-last-child(2)::before {
    right: calc(-1 * var(--cab-timeline-last-w) + 7px);
}

.cab-timeline__step:last-child::before {
    display: none;
}

.cab-timeline__step.is-passed::before,
.cab-timeline__step.is-line-passed::before {
    background-color: var(--cab-accent);
}

.cab-timeline__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--cab-surface-2);
    border: 2px solid var(--cab-border-strong);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.cab-timeline__step.is-passed .cab-timeline__dot {
    background-color: var(--cab-accent);
    border-color: var(--cab-accent);
}

.cab-timeline__step.is-current .cab-timeline__dot {
    box-shadow: 0 0 0 4px rgba(207, 9, 57, 0.22);
}

.cab-timeline__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--cab-text);
}

.cab-timeline__step:not(.is-passed) .cab-timeline__label {
    color: var(--cab-text-muted);
}

.cab-timeline__hint {
    font-size: 11px;
    color: var(--cab-text-dim);
}

.cab-timeline--terminal {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cab-timeline__terminal-icon {
    color: var(--cab-accent);
}

.cab-timeline__terminal-hint {
    display: block;
    font-size: 12px;
    color: var(--cab-text-muted);
    margin-top: 4px;
}

/* ---------- FACTS ---------- */
.cab-order-detail__facts {
    padding: 20px 26px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px 32px;
}

.cab-fact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cab-fact__label {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 10px;
    color: var(--cab-text-muted);
    font-weight: 600;
}

.cab-fact__value {
    font-size: 14px;
    color: var(--cab-text);
    word-break: break-word;
}

.cab-fact__value--mono {
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 13px;
}

.cab-fact--accent .cab-fact__value {
    color: var(--cab-success);
    font-weight: 600;
}

/* ---------- PRODUCTS ---------- */
.cab-order-detail__products {
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cab-order-detail__products-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.cab-order-detail__products-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--cab-text);
}

.cab-order-detail__products-sub {
    font-size: 12px;
    color: var(--cab-text-muted);
}

.cab-product-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cab-product {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) 80px 120px;
    gap: 16px;
    padding: 12px;
    align-items: center;
    border-radius: 12px;
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border);
}

.cab-product__photo {
    display: block;
    width: 88px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--cab-surface);
}

.cab-product__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cab-product__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cab-product__title {
    color: var(--cab-text);
    font-size: 14px;
    line-height: 1.4;
    display: block;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cab-product__title:hover {
    color: var(--cab-accent);
}

.cab-product__meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--cab-text-muted);
}

.cab-product__sku b {
    color: var(--cab-text);
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-weight: 600;
    font-size: 12px;
}

.cab-product__qty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.cab-product__qty-num {
    font-size: 18px;
    font-weight: 700;
    color: var(--cab-text);
    font-variant-numeric: tabular-nums;
}

.cab-product__qty-word {
    font-size: 11px;
    color: var(--cab-text-muted);
}

.cab-product__price {
    text-align: right;
}

.cab-product__price-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--cab-text);
    font-variant-numeric: tabular-nums;
}

.cab-order-detail__products-foot {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 18px;
    border-radius: 12px;
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border);
}

.cab-order-detail__sumrow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
    color: var(--cab-text-muted);
}

.cab-order-detail__sumrow span:last-child {
    color: var(--cab-text);
    font-variant-numeric: tabular-nums;
}

.cab-order-detail__sumrow--discount span:last-child {
    color: var(--cab-success);
}

.cab-order-detail__sumrow--total {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--cab-border-strong);
    font-size: 16px;
    color: var(--cab-text);
    font-weight: 600;
}

.cab-order-detail__sumrow--total span:last-child {
    font-size: 22px;
    font-weight: 700;
}

/* ---------- HELP ---------- */
.cab-order-detail__help {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.cab-order-detail__help-card {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 14px;
    background-color: var(--cab-surface);
    border: 1px solid var(--cab-border);
    color: var(--cab-text-muted);
    align-items: flex-start;
}

.cab-order-detail__help-card svg {
    color: var(--cab-accent);
    flex-shrink: 0;
    margin-top: 2px;
}

.cab-order-detail__help-card strong {
    color: var(--cab-text);
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.cab-order-detail__help-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1199.98px) {
    .cab-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cab-grid { grid-template-columns: minmax(0, 1fr); }
    .cab-hero { grid-template-columns: minmax(0, 1fr); }
    .cab-hero__loyalty {
        align-items: flex-start;
        width: 100%;
        min-width: 0;
    }
    .cab-hero__edit,
    .cab-hero__edit:focus,
    .cab-hero__edit:active { width: max-content; }
}

@media (max-width: 767.98px) {
    .cab-hero {
        padding: 22px 18px;
        gap: 20px;
    }
    .cab-hero__main { gap: 14px; }
    .cab-hero__avatar { width: 56px; height: 56px; font-size: 22px; }
    .cab-hero__name { font-size: 22px; }

    .cab-action {
        grid-template-columns: auto 1fr;
        padding: 18px 18px 18px 22px;
        gap: 14px;
    }
    .cab-action__cta {
        grid-column: 1 / -1;
        align-items: stretch;
    }
    .cab-action__cta .btn { width: 100%; }
    .cab-action__cta a.btn { text-align: center; }

    .cab-kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .cab-kpi { padding: 16px 18px; }
    .cab-kpi__value { font-size: 26px; }

    .cab-orders { padding: 18px 16px; }
    .cab-orders__head { align-items: stretch; }
    .cab-tabs { width: 100%; justify-content: stretch; }
    .cab-tab { flex: 1 1 auto; justify-content: center; }

    .cab-order-card { padding: 14px 14px; }
    .cab-order-card__meta { grid-template-columns: 1fr 1fr; padding: 10px; gap: 8px; }
    .cab-order-card__footer { flex-direction: column; align-items: stretch; }
    .cab-order-card__actions { width: 100%; }
    .cab-order-card__actions .btn { flex: 1 1 auto; text-align: center; }

    .cab-tx {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }
    .cab-tx__date { grid-column: 1; }
    .cab-tx__delta { grid-column: 2; text-align: right; }
    .cab-tx__event { grid-column: 1 / -1; order: 3; }
    .cab-tx__balance { grid-column: 1 / -1; order: 4; }
    .cab-tx__action { grid-column: 1 / -1; order: 5; justify-self: stretch; }
    .cab-tx__action .btn { width: 100%; text-align: center; }

    /* Order detail */
    .cab-order-detail__hero {
        grid-template-columns: 1fr;
        padding: 22px 18px;
        gap: 18px;
    }
    .cab-order-detail__hero-right {
        align-items: flex-start;
        min-width: 0;
    }
    .cab-order-detail__total { align-items: flex-start; }
    .cab-order-detail__paid { text-align: left; align-items: flex-start; }
    .cab-order-detail__pay,
    .cab-order-detail__pay:focus,
    .cab-order-detail__pay:active { width: 100%; justify-content: center; }

    .cab-timeline {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 14px;
    }
    .cab-timeline__step,
    .cab-timeline__step:last-child {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 6px 4px;
    }
    .cab-timeline__step:last-child .cab-timeline__label,
    .cab-timeline__step:last-child .cab-timeline__hint {
        text-align: left;
    }
    .cab-timeline__step::before,
    .cab-timeline__step:nth-last-child(2)::before {
        top: 18px;
        left: 10px;
        right: auto;
        width: 2px;
        height: calc(100% - 8px);
    }
    .cab-timeline__step:last-child::before { display: none; }
    .cab-timeline__hint { display: none; }

    .cab-product {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        gap: 12px;
    }
    .cab-product__photo { width: 64px; height: 56px; }
    .cab-product__qty {
        grid-column: 2;
        grid-row: 2;
        flex-direction: row;
        align-items: baseline;
        gap: 4px;
        justify-content: flex-start;
    }
    .cab-product__qty-num { font-size: 14px; }
    .cab-product__price {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
    }
}

/* =====================================================
   LIGHT THEME — cabinet dashboard
   ===================================================== */
[data-theme="light"] .cab-dashboard,
[data-theme="light"] .cab-order-detail {
    --cab-surface: #ffffff;
    --cab-surface-2: #f5f5f7;
    --cab-surface-3: #ececef;
    --cab-border: rgba(15, 17, 19, 0.08);
    --cab-border-strong: rgba(15, 17, 19, 0.14);
    --cab-text: #1a1c1d;
    --cab-text-muted: #6e6f70;
    --cab-text-dim: #9a9b9c;
    --cab-glow: rgba(207, 9, 57, 0.14);
}

[data-theme="light"] .cab-dashboard .rounded-section-24,
[data-theme="light"] .cab-order-detail .rounded-section-24 {
    background-color: var(--cab-surface);
    box-shadow: 0 1px 4px rgba(15, 17, 19, 0.05);
}


[data-theme="light"] .cab-hero__loyalty {
    background: linear-gradient(135deg, rgba(207, 9, 57, 0.08) 0%, rgba(255, 255, 255, 0.6) 100%);
    border-color: rgba(207, 9, 57, 0.22);
}

[data-theme="light"] .cab-chip {
    background-color: #f5f5f7;
}

[data-theme="light"] .cab-action {
    box-shadow: 0 1px 4px rgba(15, 17, 19, 0.04);
}

[data-theme="light"] .cab-action__icon {
    background-color: #f1f2f4;
}

[data-theme="light"] .cab-kpi,
[data-theme="light"] .cab-order-card,
[data-theme="light"] .cab-loyalty-card__stats > div,
[data-theme="light"] .cab-product,
[data-theme="light"] .cab-tx,
[data-theme="light"] .cab-order-detail__products-foot,
[data-theme="light"] .cab-order-detail__back {
    background-color: var(--cab-surface);
    border-color: var(--cab-border);
    box-shadow: 0 1px 3px rgba(15, 17, 19, 0.04);
}

[data-theme="light"] .cab-tabs {
    background-color: #f1f2f4;
    border-color: var(--cab-border);
}

[data-theme="light"] .cab-tab:not(.active) .cab-tab__count {
    background-color: rgba(15, 17, 19, 0.06);
}

[data-theme="light"] .cab-order-card__meta {
    background-color: #f7f7f8;
}

[data-theme="light"] .cab-empty {
    background-color: #fafafb;
}

[data-theme="light"] .cab-timeline,
[data-theme="light"] .cab-order-detail__hero {
    box-shadow: 0 1px 4px rgba(15, 17, 19, 0.04);
}

[data-theme="light"] .cab-timeline__dot {
    background-color: #f1f2f4;
}

[data-theme="light"] .cab-order-detail__track {
    background-color: #f7f7f8;
}

[data-theme="light"] .cab-order-detail__help-card {
    box-shadow: 0 1px 4px rgba(15, 17, 19, 0.04);
}

[data-theme="light"] .cab-trend__bar {
    background: linear-gradient(180deg, var(--cab-accent) 0%, rgba(207, 9, 57, 0.45) 100%);
}

[data-theme="light"] .cab-trend__col.is-empty .cab-trend__bar {
    background: rgba(15, 17, 19, 0.08);
}

/* =====================================================
   CAB-FORM — shared wrapper for guest checkout, delivery
   selection and registration. Reuses .cab-profile visual
   language (cards, form-control, alerts) with a couple of
   layout helpers (__layout, __aside, __expand, sticky-bar).
   Dark by default, [data-theme="light"] overrides at bottom.
   ===================================================== */

.cab-form {
    --cab-surface: #1c1e1f;
    --cab-surface-2: #232527;
    --cab-surface-3: #2a2d2f;
    --cab-border: rgba(255, 255, 255, 0.06);
    --cab-border-strong: rgba(255, 255, 255, 0.12);
    --cab-accent: var(--primary-red);
    --cab-text: var(--white);
    --cab-text-muted: var(--special-gray);
    --cab-text-dim: var(--light-gray);
    --cab-success: var(--green);
    --cab-warning: var(--yellow);
    --cab-danger: #ef4444;

    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- TOPBAR ---------- */
.cab-form__topbar {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.cab-form__title-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 360px;
}

.cab-form__title-block h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--cab-text);
    line-height: 1.2;
}

.cab-form__title-block p {
    margin: 0;
    font-size: 13px;
    color: var(--cab-text-muted);
}

.cab-form__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    color: var(--cab-text-muted);
    font-size: 14px;
    font-weight: 500;
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border);
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
}

.cab-form__back:hover {
    color: var(--cab-text);
    border-color: var(--cab-border-strong);
    text-decoration: none;
}

.cab-form__quick-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.cab-form__quick-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border);
    color: var(--cab-text-muted);
    font-size: 12px;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.cab-form__quick-link svg {
    flex-shrink: 0;
}

.cab-form__quick-link:hover {
    color: var(--cab-accent);
    border-color: rgba(207, 9, 57, 0.4);
    background-color: rgba(207, 9, 57, 0.06);
    text-decoration: none;
}

/* ---------- LAYOUT ---------- */
.cab-form__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.cab-form__main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.cab-form__aside {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 24px;
}

/* ---------- CARDS ---------- */
.cab-form__card {
    padding: 24px 26px;
    border-radius: 24px;
    background-color: var(--cab-surface);
    border: 1px solid var(--cab-border);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cab-form__card--soft {
    background-color: var(--cab-surface-2);
}

.cab-form__card-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.cab-form__card-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--cab-text);
    line-height: 1.2;
}

.cab-form__card-head p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--cab-text-muted);
    line-height: 1.45;
}

.cab-form__card-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    padding: 8px;
    border-radius: 10px;
    background-color: rgba(207, 9, 57, 0.12);
    color: var(--cab-accent);
}

.cab-form__expand {
    padding: 16px 18px;
    border-radius: 14px;
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border-strong);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cab-form__expand h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--cab-text);
}

.cab-form__lead {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--cab-text-muted);
}

.cab-form__lead b {
    color: var(--cab-text);
}

/* ---------- FORM CONTROLS ---------- */
.cab-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.cab-form .form-group + .form-group {
    margin-top: 10px;
}

.cab-form .col-form-label {
    padding: 0;
    color: var(--cab-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 11px !important;
    font-weight: 600;
}

.cab-form .form-control,
.cab-form .form-control:has(input:focus) {
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
}

.cab-form .form-control input[type="text"],
.cab-form .form-control input[type="email"],
.cab-form .form-control input[type="password"],
.cab-form input.form-control[type="text"],
.cab-form input.form-control[type="email"],
.cab-form input.form-control[type="password"] {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border-strong);
    color: var(--cab-text);
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.cab-form .form-control input::placeholder,
.cab-form input.form-control::placeholder {
    color: var(--cab-text-dim);
}

.cab-form .form-control input:focus,
.cab-form input.form-control:focus {
    border-color: var(--cab-accent);
    box-shadow: 0 0 0 3px rgba(207, 9, 57, 0.18);
    background-color: var(--cab-surface);
}

.cab-form .form-text,
.cab-form small.text-muted,
.cab-form small.d-block,
.cab-form .cab-form__hint {
    display: block;
    font-size: 12px;
    color: var(--cab-text-muted);
    margin-top: -4px;
    line-height: 1.45;
}

.cab-form .cab-form__hint b,
.cab-form small.text-muted b {
    color: var(--cab-text);
}

.cab-form textarea.form-control,
.cab-form .form-control textarea {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border-strong);
    color: var(--cab-text);
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.cab-form textarea.form-control:focus,
.cab-form .form-control textarea:focus {
    border-color: var(--cab-accent);
    box-shadow: 0 0 0 3px rgba(207, 9, 57, 0.18);
    background-color: var(--cab-surface);
}

/* ---------- PHONE INPUT-GROUP ---------- */
.cab-form .input-group {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--cab-border-strong);
    background-color: var(--cab-surface-2);
}

.cab-form .input-group:focus-within {
    border-color: var(--cab-accent);
    box-shadow: 0 0 0 3px rgba(207, 9, 57, 0.18);
}

.cab-form .input-group-text {
    background-color: var(--cab-surface-3);
    color: var(--cab-text);
    border: none;
    border-right: 1px solid var(--cab-border-strong);
    font-size: 14px;
    padding: 0 14px;
    cursor: pointer;
}

.cab-form .input-group .form-control,
.cab-form .input-group input.form-control {
    background-color: transparent;
    color: var(--cab-text);
    border: none;
    padding: 12px 14px;
    font-size: 14px;
    box-shadow: none;
    /* Возвращаем BS5-поведение, чтобы input в input-group не выталкивал
       префикс на новую строку (наш .cab-form .form-control input[type="text"]
       селектор иначе ставит width: 100% и ломает flex-row layout). */
    width: 1%;
    min-width: 0;
    flex: 1 1 auto;
}

.cab-form .input-group .form-control:focus,
.cab-form .input-group input.form-control:focus {
    background-color: transparent;
    box-shadow: none;
    border-color: transparent;
}

.cab-form .phoneformatted-dropdown.dropdown-menu {
    background-color: var(--cab-surface-3);
    border-color: var(--cab-border-strong);
}

.cab-form .phoneformatted-dropdown.dropdown-menu .dropdown-item {
    color: var(--cab-text);
}

.cab-form .phoneformatted-dropdown.dropdown-menu .dropdown-item:hover {
    background-color: var(--cab-surface-2);
    color: var(--cab-accent);
}

/* ---------- RADIO ROW (gender etc.) ---------- */
.cab-form__radio-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.cab-form__radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border-strong);
    cursor: pointer;
    color: var(--cab-text-muted);
    font-size: 14px;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
    margin: 0;
}

.cab-form__radio input[type="radio"] {
    accent-color: var(--cab-accent);
    margin: 0;
    cursor: pointer;
}

.cab-form__radio:has(input[type="radio"]:checked) {
    border-color: var(--cab-accent);
    color: var(--cab-text);
    background-color: rgba(207, 9, 57, 0.08);
}

.cab-form__radio:hover {
    color: var(--cab-text);
}

/* ---------- POLICY CHECKBOX ---------- */
.cab-form .form-check {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.cab-form .form-check-input {
    margin: 2px 0 0 0;
    width: 18px;
    height: 18px;
    accent-color: var(--cab-accent);
    flex-shrink: 0;
    cursor: pointer;
}

.cab-form .form-check-label {
    margin: 0;
    color: var(--cab-text-muted);
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
}

.cab-form .form-check-label a {
    color: var(--cab-accent);
    text-decoration: none;
}

.cab-form .form-check-label a:hover {
    text-decoration: underline;
}

/* ---------- ALERTS (reused .cab-alert from .cab-profile section) ---------- */
.cab-form .cab-alert {
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--cab-border-strong);
    font-size: 14px;
    color: var(--cab-text);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cab-form .cab-alert ul {
    margin: 4px 0 0 18px;
    padding: 0;
    font-size: 13px;
    color: inherit;
    opacity: 0.85;
}

.cab-form .cab-alert--success {
    background-color: rgba(24, 177, 77, 0.1);
    border-color: rgba(24, 177, 77, 0.4);
    color: var(--cab-success);
}

.cab-form .cab-alert--warning {
    background-color: rgba(228, 149, 14, 0.08);
    border-color: rgba(228, 149, 14, 0.4);
    color: var(--cab-warning);
}

.cab-form .cab-alert--danger {
    background-color: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.4);
    color: var(--cab-danger);
}

/* ---------- ASIDE / SUMMARY ---------- */
.cab-form__summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--cab-text-muted);
}

.cab-form__summary-row + .cab-form__summary-row {
    margin-top: 8px;
}

.cab-form__summary-value {
    color: var(--cab-text);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

.cab-form__summary-edit {
    font-size: 12px;
    color: var(--cab-text-muted);
}

.cab-form__summary-edit a {
    color: var(--cab-accent);
    text-decoration: none;
}

.cab-form__summary-edit a:hover {
    text-decoration: underline;
}

.cab-form__legal {
    font-size: 12px;
    color: var(--cab-text-muted);
    line-height: 1.55;
    margin: 0;
}

.cab-form__legal a {
    color: var(--cab-accent);
    text-decoration: none;
}

.cab-form__legal a:hover {
    text-decoration: underline;
}

/* ---------- CTA SECONDARY (border like .cab-* .special-btn) ---------- */
.cab-form .btn.special-btn {
    border: 1px solid var(--cab-accent);
}

.cab-form .btn.special-btn:hover {
    border-color: var(--btn-hover);
}

/* ---------- CHECKOUT — delivery & payment lists (override .delivery/payment-select-group) ---------- */
.cab-checkout .delivery-select-group,
.cab-checkout .payment-select-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cab-checkout .delivery-select-group__item,
.cab-checkout .payment-select-group__item {
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border-strong);
    border-radius: 14px;
    padding: 16px 18px;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
    position: relative;
    cursor: pointer;
}

.cab-checkout .delivery-select-group__item:hover,
.cab-checkout .payment-select-group__item:hover {
    border-color: var(--cab-border-strong);
    background-color: var(--cab-surface-3);
}

.cab-checkout .delivery-select-group__item:has(input[type="radio"]:checked),
.cab-checkout .payment-select-group__item:has(input[type="radio"]:checked) {
    border-color: var(--cab-accent);
    background-color: rgba(207, 9, 57, 0.06);
    box-shadow: 0 0 0 1px var(--cab-accent);
}

.cab-checkout .delivery-select-group__item p,
.cab-checkout .payment-select-group__item p {
    margin: 0;
    color: var(--cab-text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.cab-checkout .delivery-select-group__item p:first-of-type,
.cab-checkout .payment-select-group__item p:first-of-type {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cab-checkout .delivery-select-group__item label,
.cab-checkout .payment-select-group__item label {
    font-size: 15px;
    font-weight: 600;
    color: var(--cab-text);
    margin: 0;
    cursor: pointer;
}

.cab-checkout .delivery-select-group__item input[type="radio"],
.cab-checkout .payment-select-group__item input[type="radio"] {
    accent-color: var(--cab-accent);
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.cab-checkout .delivery-select-group__item p + p,
.cab-checkout .payment-select-group__item p + p {
    margin-top: 6px;
}

.cab-checkout .delivery-select-group__item .white-text,
.cab-checkout .payment-select-group__item .white-text {
    color: var(--cab-text) !important;
    font-weight: 500;
}

.cab-checkout .delivery-select-group__item .red-text,
.cab-checkout .payment-select-group__item .red-text {
    color: var(--cab-accent);
}

.cab-checkout .delivery-select-group__item .custom-tooltip {
    position: absolute;
    top: 14px;
    right: 14px;
}

.cab-checkout .payment-select-group__item b.red-text {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
}

/* ---------- CHECKOUT — CDEK / insurance / delivery extras ---------- */
.cab-checkout #cdek_insurance,
.cab-checkout #cdek_office,
.cab-checkout #cdek_container {
    margin-top: 12px;
    padding: 16px 18px;
    border-radius: 14px;
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border-strong) !important;
}

.cab-checkout #cdek_container h5,
.cab-checkout #delivery_block label {
    color: var(--cab-text);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.cab-checkout #cdek_insurance .form-check-label {
    color: var(--cab-text);
    font-size: 14px;
    font-weight: 500;
}

.cab-checkout #cdek_office a {
    color: var(--cab-accent);
    border-bottom: 1px dotted var(--cab-accent) !important;
    text-decoration: none;
}

.cab-checkout .form-select {
    background-color: var(--cab-surface);
    color: var(--cab-text);
    border: 1px solid var(--cab-border-strong);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
}

.cab-checkout .form-select:focus {
    border-color: var(--cab-accent);
    box-shadow: 0 0 0 3px rgba(207, 9, 57, 0.18);
}

.cab-checkout #delivery_block textarea {
    min-height: 140px;
}

/* ---------- REGISTER — phone+button row ---------- */
.cab-register .cab-form__phone-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(140px, 1fr);
    gap: 12px;
    align-items: stretch;
}

.cab-register .cab-form__phone-row .btn {
    height: 100%;
    min-height: 46px;
    white-space: normal;
    line-height: 1.2;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991.98px) {
    .cab-form__layout {
        grid-template-columns: 1fr;
    }

    .cab-form__aside {
        position: static;
        top: auto;
    }
}

@media (max-width: 767.98px) {
    .cab-form__card {
        padding: 20px 18px;
    }

    .cab-form__title-block h1 {
        font-size: 20px;
    }

    .cab-form__topbar {
        flex-direction: column;
        align-items: stretch;
    }

    /* На мобиле, когда topbar — flex column, flex-basis из flex-shorthand
       трактуется как высота. Сбрасываем flex, чтобы дети занимали
       только свой контент. */
    .cab-form__title-block,
    .cab-form__quick-links {
        flex: 0 1 auto;
    }

    .cab-form__quick-links {
        align-items: stretch;
    }

    .cab-form__quick-link {
        justify-content: center;
    }

    .cab-register .cab-form__phone-row {
        grid-template-columns: 1fr;
    }

    .cab-checkout .delivery-select-group__item .custom-tooltip {
        position: static;
        margin-top: 8px;
    }
}

/* ---------- LIGHT THEME ---------- */
[data-theme="light"] .cab-form {
    --cab-surface: #ffffff;
    --cab-surface-2: #f5f5f7;
    --cab-surface-3: #ececef;
    --cab-border: rgba(15, 17, 19, 0.08);
    --cab-border-strong: rgba(15, 17, 19, 0.14);
    --cab-text: #1a1c1d;
    --cab-text-muted: #6e6f70;
    --cab-text-dim: #9a9b9c;
}

[data-theme="light"] .cab-form__card {
    box-shadow: 0 1px 4px rgba(15, 17, 19, 0.05);
}

[data-theme="light"] .cab-form .form-control input,
[data-theme="light"] .cab-form input.form-control,
[data-theme="light"] .cab-form textarea.form-control,
[data-theme="light"] .cab-form .form-control textarea {
    background-color: #ffffff;
    border-color: var(--cab-border-strong);
}

[data-theme="light"] .cab-form .form-control input:focus,
[data-theme="light"] .cab-form input.form-control:focus,
[data-theme="light"] .cab-form textarea.form-control:focus,
[data-theme="light"] .cab-form .form-control textarea:focus {
    background-color: #ffffff;
}

[data-theme="light"] .cab-form .input-group {
    background-color: #ffffff;
}

[data-theme="light"] .cab-form .input-group-text {
    background-color: #ececef;
}

[data-theme="light"] .cab-form .form-select {
    background-color: #ffffff;
}

[data-theme="light"] .cab-form__back,
[data-theme="light"] .cab-form__quick-link {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 17, 19, 0.04);
}

[data-theme="light"] .cab-form__radio,
[data-theme="light"] .cab-checkout .delivery-select-group__item,
[data-theme="light"] .cab-checkout .payment-select-group__item,
[data-theme="light"] .cab-form__expand,
[data-theme="light"] .cab-checkout #cdek_insurance,
[data-theme="light"] .cab-checkout #cdek_office,
[data-theme="light"] .cab-checkout #cdek_container {
    background-color: #ffffff;
    border-color: var(--cab-border-strong) !important;
}

[data-theme="light"] .cab-checkout .delivery-select-group__item:has(input[type="radio"]:checked),
[data-theme="light"] .cab-checkout .payment-select-group__item:has(input[type="radio"]:checked),
[data-theme="light"] .cab-form__radio:has(input[type="radio"]:checked) {
    background-color: rgba(207, 9, 57, 0.06);
}

/* =====================================================
   CAB-CHECKOUT --compact — узкая центрированная форма
   для guest checkout без правого aside и тяжёлых
   card-head с описаниями. Цель: минимум кликов и скролла.
   ===================================================== */

.cab-checkout--compact {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    gap: 14px;
}

.cab-form__topbar--tight {
    gap: 8px 16px;
    align-items: center;
}

.cab-form__topbar--tight .cab-form__title-block h1 {
    font-size: 22px;
}

.cab-form__topbar--tight .cab-form__title-block p {
    font-size: 12px;
    margin: 2px 0 0;
}

.cab-form__quick-links--inline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.cab-form__card--tight {
    padding: 20px 22px;
    gap: 14px;
}

.cab-form__card--tight .form-group {
    margin-bottom: 0;
}

.cab-form__card--tight .col-form-label {
    padding-bottom: 4px;
}

.cab-form__card--tight .form-check {
    margin-top: 2px;
}

.cab-form__card--tight .g-recaptcha {
    transform-origin: 0 0;
}

/* Крупная submit-кнопка для форм cab-form (регистрация и т.п.).
   Свой класс, чтобы не зависеть от утилит .py-3 / .btn-lg, которые
   в проекте перебиты глобальным `.py-3 { padding: 0 !important }`. */
.cab-form .btn.cab-form__submit-lg {
    padding: 14px 18px;
    font-size: 16px;
    line-height: 1.25;
    border-radius: 10px;
    font-weight: 600;
}

/* =====================================================
   CAB-CONFIRM — страница успешного оформления заказа.
   Шапка с success-иконкой, hero-номер заказа, баллы,
   CTA-кнопки. Используется внутри .cab-form .cab-checkout
   ===================================================== */

.cab-confirm__card {
    gap: 18px;
}

.cab-confirm__success {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cab-confirm__success-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(34, 197, 94, 0.14);
    color: #22c55e;
}

.cab-confirm__success-text h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--cab-text);
    line-height: 1.2;
}

.cab-confirm__success-text p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--cab-text-muted);
    line-height: 1.45;
}

.cab-confirm__summary {
    margin: 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--cab-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cab-confirm__summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
}

.cab-confirm__summary-row dt {
    margin: 0;
    font-size: 13px;
    color: var(--cab-text-muted);
    font-weight: 400;
}

.cab-confirm__summary-row dd {
    margin: 0;
    font-size: 15px;
    color: var(--cab-text);
    font-weight: 500;
    text-align: right;
}

.cab-confirm__summary-row--hero dd {
    font-size: 22px;
    font-weight: 700;
    color: var(--cab-accent);
    letter-spacing: 0.5px;
}

.cab-confirm__summary-row--bonus dd {
    color: #22c55e;
    font-weight: 600;
}

.cab-confirm__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}

.cab-confirm__actions > .btn {
    flex: 1 1 200px;
    text-align: center;
}

.cab-form .btn.cab-confirm__btn-secondary {
    padding: 14px 18px;
    font-size: 15px;
    border-radius: 10px;
    font-weight: 500;
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border-strong);
    color: var(--cab-text);
}

.cab-form .btn.cab-confirm__btn-secondary:hover {
    border-color: var(--cab-accent);
    color: var(--cab-accent);
}

.cab-confirm__thanks {
    margin: 0;
    text-align: center;
    font-size: 12px;
    color: var(--cab-text-muted);
    font-style: italic;
}

@media (max-width: 575.98px) {
    .cab-confirm__success {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .cab-confirm__summary-row--hero dd {
        font-size: 20px;
    }
}

[data-theme="light"] .cab-confirm__success-badge {
    background-color: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

[data-theme="light"] .cab-confirm__summary-row--bonus dd {
    color: #16a34a;
}

[data-theme="light"] .cab-form .btn.cab-confirm__btn-secondary {
    background-color: #ffffff;
    border-color: var(--cab-border-strong);
}

/* 2-колоночная сетка для парных полей (email/город).
   align-items: start — иначе grid stretches items до высоты ряда,
   и при разной длине лейблов поля могут «плыть» по вертикали.
   Сами form-group превращаем в flex-column, чтобы лейбл/инпут
   занимали ровно столько, сколько им нужно. */
.cab-form__grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

.cab-form__grid-2 > .form-group,
.cab-form__grid-2 > .form-group + .form-group {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.cab-form__grid-2 > .form-group > .col-form-label {
    padding-top: 0;
    padding-bottom: 4px;
    line-height: 1.2;
}

@media (max-width: 575.98px) {
    .cab-form__grid-2 {
        grid-template-columns: 1fr;
    }

    .cab-checkout--compact .cab-form__topbar--tight {
        flex-direction: column;
        align-items: stretch;
    }

    .cab-form__card--tight {
        padding: 18px 16px;
    }
}

/* =====================================================
   AUTH PAGE (/auth/) + МОДАЛКА #authorization.
   Двухколоночная сетка для двух способов входа, общий
   стиль табов "По паролю / По SMS" внутри модалки.
   ===================================================== */

/* Сетка из двух независимых карточек входа: email/password и phone. */
.cab-form__auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}

@media (max-width: 767.98px) {
    .cab-form__auth-grid {
        grid-template-columns: 1fr;
    }
}

/* Pill-табы "По паролю / По SMS". Опираются на существующие
   классы .auth-toggler / .sub-control из app.js (JS-контракт). */
.cab-form .auth-toggler {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    background-color: var(--cab-surface-2);
    border: 1px solid var(--cab-border);
    border-radius: 12px;
    flex-wrap: wrap;
}

.cab-form .auth-toggler .sub-control {
    padding: 7px 14px;
    border-radius: 8px;
    color: var(--cab-text-muted);
    font-size: 13px;
    font-weight: 500;
    background-color: transparent;
    border: 1px solid transparent;
    text-decoration: none;
    transition: color .2s, background-color .2s, border-color .2s;
}

/* :hover применяем ТОЛЬКО к неактивным табам — иначе light-override
   фона #ffffff из :hover конфликтует с красным фоном .active. Так же
   нужен !important на color: в app.css есть глобал
   `[data-theme="light"] .sub-control:hover { color: #ffffff !important }`,
   который побеждает по !important независимо от specificity. */
.cab-form .auth-toggler .sub-control:not(.active):hover {
    color: var(--cab-text) !important;
    background-color: var(--cab-surface);
    border-color: var(--cab-border);
    box-shadow: none;
}

.cab-form .auth-toggler .sub-control.active {
    color: #ffffff !important;
    background-color: var(--cab-accent);
    border-color: var(--cab-accent);
    box-shadow: none;
}

[data-theme="light"] .cab-form .auth-toggler .sub-control:not(.active):hover {
    background-color: #ffffff;
}

/* Контейнеры табов внутри модалки. JS управляет display через .show()/.hide(),
   поэтому никаких !important и [hidden] правил — просто базовое flex-column,
   когда видим. */
.cab-form .auth-toggle {
    display: none;
    flex-direction: column;
    gap: 14px;
}

/* JS показывает через .show() (inline-style), мы лишь даём дефолтное оформление
   контента; селектор по style не нужен. */

/* Inline-строка submit + второстепенная ссылка (например "Забыли пароль?"). */
.cab-form__inline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cab-form__forgot-link {
    color: var(--cab-text-muted);
    font-size: 13px;
    text-decoration: none;
    transition: color .2s;
}

.cab-form__forgot-link:hover {
    color: var(--cab-accent);
    text-decoration: none;
}

/* ----- МОДАЛКА #authorization (cab-form внутри .modal) ----- */

.cab-form--modal {
    gap: 16px;
    padding: 24px 24px 22px;
    border-radius: 18px;
    background-color: var(--cab-surface);
    border: 1px solid var(--cab-border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.cab-form--modal .cab-form__modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cab-form--modal .cab-form__modal-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--cab-text);
    line-height: 1.2;
}

.cab-form--modal .cab-form__modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background-color: transparent;
    color: var(--cab-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color .2s, color .2s;
    padding: 0;
}

.cab-form--modal .cab-form__modal-close:hover {
    color: var(--cab-text);
    background-color: var(--cab-surface-2);
}

.cab-form--modal .cab-form__modal-foot {
    text-align: center;
    font-size: 13px;
    color: var(--cab-text-muted);
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--cab-border);
}

.cab-form--modal .cab-form__modal-foot a {
    color: var(--cab-text);
    font-weight: 600;
    text-decoration: none;
}

.cab-form--modal .cab-form__modal-foot a:hover {
    color: var(--cab-accent);
}

/* Bootstrap modal-content reset: убираем дефолтный фон/рамку BS,
   рисуем своё через .cab-form--modal. */
.modal-content:has(> .cab-form--modal),
#authorization .modal-content {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

[data-theme="light"] .cab-form--modal {
    background-color: #ffffff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}