/* Pos.SharedUI — checkout cart, rail, retail/restaurant browse, and related primitives.
   Loaded after pos-tokens.css + pos-app-theme.css. Uses --pos-checkout-* tokens from pos-tokens.css (:root). */

.pos-checkout-ref__header-center {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.pos-checkout-ref__clock {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.9rem;
}

.pos-checkout-ref__cart-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    gap: 0.45rem;
}

.pos-checkout-ref__cart-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding-inline: 0.05rem;
    flex: 1 1 auto;
}

/* Cart scroll height contracts — driven by CartPanel.CartHasLines (no :has). */
.pos-checkout-ref__cart-scroll--empty {
    flex: 1 1 auto;
    min-height: 5.5rem;
    max-height: none;
}

.pos-checkout-ref__cart-scroll--lines {
    flex: 1 1 auto;
    min-height: 3.5rem;
    max-height: none;
}

.pos-checkout-ref__cart-footer {
    flex-shrink: 0;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(226, 232, 240, 0.95);
}

.pos-checkout-ref__cart-footer--sticky-checkout {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 0.25rem;
    padding-bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, var(--pos-checkout-card, #fff) 28%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.06);
    border-radius: 0 0 var(--pos-checkout-radius, 12px) var(--pos-checkout-radius, 12px);
}

.pos-checkout-ref__cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}

.checkout-cart-title {
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.15;
    color: #0f172a;
}

.touch-target-btn.mud-button-root {
    min-height: 46px !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}

.touch-target-icon.mud-icon-button {
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
}

.checkout-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.95rem 0.75rem 1rem;
    gap: 0.4rem;
    border-radius: var(--pos-radius-md, 12px);
    border: 1px dashed rgba(148, 163, 184, 0.42);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 18px rgba(15, 23, 42, 0.04);
}

.checkout-cart-empty__visual {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 14px;
    background: linear-gradient(145deg, #eef2ff 0%, #e2e8f0 100%);
    border: 1px solid rgba(148, 163, 184, 0.35);
    position: relative;
    opacity: 0.95;
}

.checkout-cart-empty__visual::after {
    content: "";
    position: absolute;
    inset: 22% 18% 18% 18%;
    border: 2px solid rgba(61, 78, 129, 0.35);
    border-radius: 6px 6px 10px 10px;
    border-top-color: transparent;
}

.checkout-cart-empty__title {
    font-weight: 900;
    font-size: 1.05rem;
    color: #0f172a;
}

.checkout-cart-empty__hint {
    max-width: 16rem;
    line-height: 1.45;
    font-size: 0.88rem;
}

.checkout-cart-lines {
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    flex: 1;
    min-height: 0;
    padding-bottom: 0.35rem;
}

/* Legacy card-style cart line (overridden when .cart-row-modern is present) */
.checkout-cart-line--premium {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.78rem 0.85rem;
    border-radius: var(--pos-radius-md, 12px);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(226, 232, 240, 0.98);
    box-shadow: var(--pos-shadow-card, 0 1px 2px rgba(15, 23, 42, 0.06)), 0 4px 14px rgba(15, 23, 42, 0.045);
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.checkout-cart-line__name {
    font-weight: 800;
    font-size: 0.98rem;
    line-height: 1.35;
    min-width: 0;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #0f172a;
}

.checkout-cart-line__row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: nowrap;
}

.checkout-cart-line__total {
    font-weight: 900;
    font-size: 1.06rem;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
    flex: 1;
    text-align: start;
    letter-spacing: -0.02em;
}

.checkout-cart-line__qty {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0.08rem 0.15rem;
    border-radius: 999px;
    background: #eef2ff;
    border: 1px solid rgba(99, 102, 241, 0.22);
}

.checkout-cart-line__qty-btn.mud-icon-button {
    flex-shrink: 0;
}

.checkout-cart-line__qty-val {
    min-width: 1.75rem;
    text-align: center;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    padding: 0 0.05rem;
}

.checkout-cart-line__remove-icon {
    flex-shrink: 0;
    margin-inline-start: auto;
}

/* ——— Compact row cart (Checkout · Retail · Restaurant) ——— */
.cart-row-modern.checkout-cart-line--premium {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    align-items: center;
    gap: 0.35rem 0.35rem;
    min-height: 44px;
    padding: calc(0.28rem - 2px) 0.4rem;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: none;
    flex-direction: unset;
}

.cart-row-modern.checkout-cart-line--premium .checkout-cart-line__body {
    grid-column: 1;
    min-width: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0.1rem 0.15rem;
    margin: -0.1rem -0.15rem;
    border-radius: 6px;
    cursor: pointer;
}

.cart-row-modern.checkout-cart-line--premium .checkout-cart-line__body:focus-visible {
    outline: 2px solid rgba(0, 139, 125, 0.45);
    outline-offset: 1px;
}

.cart-row-modern.checkout-cart-line--premium .checkout-cart-line__title-stack {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.06rem;
}

.cart-row-modern.checkout-cart-line--premium .checkout-cart-line__name {
    grid-column: unset;
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1.2;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-row-modern.checkout-cart-line--premium .checkout-cart-line__caption {
    font-size: 0.72rem;
    line-height: 1.2;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-row-modern.checkout-cart-line--premium .checkout-cart-line__qty {
    grid-column: 2;
    justify-self: center;
}

.cart-row-modern.checkout-cart-line--premium .checkout-cart-line__total {
    grid-column: 3;
    flex: unset;
    font-weight: 800;
    font-size: 0.92rem;
    color: #475569;
    text-align: center;
    white-space: nowrap;
}

.cart-row-modern.checkout-cart-line--premium .checkout-cart-line__edit {
    grid-column: 4;
    justify-self: center;
    display: flex;
    align-items: center;
}

.cart-row-modern.checkout-cart-line--premium .checkout-cart-line__edit-icon.mud-icon-button {
    padding: 4px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
}

.cart-row-modern.checkout-cart-line--premium .cart-row-modern__del {
    grid-column: 5;
    justify-self: end;
    display: flex;
    align-items: center;
}

.cart-row-modern.checkout-cart-line--premium .checkout-cart-line__remove-icon {
    margin-inline-start: 0;
}

.cart-row-modern__icon-btn.mud-icon-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 6px !important;
}

.cart-row-modern.retail-line,
.cart-row-modern.restaurant-mode__line {
    padding: 0.28rem 0.4rem !important;
    margin-bottom: 0.35rem !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    min-height: 44px;
}

.cart-row-modern.retail-line {
    margin-bottom: 0.35rem;
}

.cart-row-modern__primary-row,
.retail-cart-row__row,
.restaurant-cart-row__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(100px, 1.15fr) minmax(4.5rem, auto) auto;
    align-items: center;
    gap: 0.3rem 0.45rem;
    min-height: 44px;
    width: 100%;
}

.cart-row-modern__name.retail-line__name {
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1.25;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cart-row-modern__controls-retail {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.cart-row-modern__controls-retail .mud-select {
    margin-top: 0 !important;
}

.cart-row-modern__controls-retail .retail-line__qty {
    margin-top: 0 !important;
    gap: 0.15rem;
}

.cart-row-modern__price.retail-cart-row__price {
    text-align: center;
    min-width: 0;
}

.cart-row-modern__caption-text {
    display: block;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 28vw;
}

.cart-row-modern.restaurant-mode__line .cart-row-modern__primary-row {
    grid-template-columns: minmax(0, 1fr) auto minmax(3.5rem, auto) auto;
}

.cart-row-modern__name-col {
    min-width: 0;
}

.cart-row-modern__name-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
}

.cart-row-modern__title-text {
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
}

.cart-row-modern__restaurant-qty {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.05rem;
    margin-top: 0 !important;
}

.cart-row-modern__note-slot {
    display: inline-flex;
    align-items: center;
}

.restaurant-mode__line-price .cart-row-modern__price-text {
    font-weight: 700;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    color: #64748b;
}

.cart-row-modern__extras {
    padding: 0.15rem 0.15rem 0 0;
    margin-top: 0.1rem;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--mud-palette-primary);
}

.cart-row-modern__extras:empty {
    display: none;
}

@media (max-width: 520px) {
    /* Checkout: اسم بالأعلى، صف ثانٍ للكمية والسعر والتعديل والحذف */
    .cart-row-modern.checkout-cart-line--premium {
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        grid-template-rows: auto auto;
    }

    .cart-row-modern.checkout-cart-line--premium .checkout-cart-line__body {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .cart-row-modern.checkout-cart-line--premium .checkout-cart-line__qty {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .cart-row-modern.checkout-cart-line--premium .checkout-cart-line__total {
        grid-column: 2;
        grid-row: 2;
    }

    .cart-row-modern.checkout-cart-line--premium .checkout-cart-line__edit {
        grid-column: 3;
        grid-row: 2;
    }

    .cart-row-modern.checkout-cart-line--premium .cart-row-modern__del {
        grid-column: 4;
        grid-row: 2;
        justify-self: end;
    }

    /* Retail */
    .cart-row-modern.retail-line .retail-cart-row__row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
    }

    .cart-row-modern.retail-line .cart-row-modern__name.retail-line__name {
        grid-column: 1 / -1;
    }

    .cart-row-modern.retail-line .cart-row-modern__controls-retail {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .cart-row-modern.retail-line .cart-row-modern__price.retail-cart-row__price {
        grid-column: 1;
        justify-self: start;
        text-align: start;
    }

    .cart-row-modern.retail-line .cart-row-modern__del {
        grid-column: 2;
        justify-self: end;
        align-self: center;
    }

    /* Restaurant: لف مرن بدون تضارب أعمدة */
    .cart-row-modern.restaurant-mode__line .restaurant-cart-row__row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.3rem 0.45rem;
        min-height: 44px;
    }

    .cart-row-modern.restaurant-mode__line .cart-row-modern__name-col {
        flex: 1 1 100%;
        min-width: 0;
    }

    .cart-row-modern.restaurant-mode__line .cart-row-modern__restaurant-qty {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: wrap;
    }

    .cart-row-modern.restaurant-mode__line .restaurant-mode__line-price {
        flex: 0 0 auto;
        margin-inline-end: auto;
    }

    .cart-row-modern.restaurant-mode__line .cart-row-modern__del {
        flex: 0 0 auto;
        margin-inline-start: auto;
    }

    .cart-row-modern__caption-text {
        max-width: none;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

.checkout-cart-summary {
    margin-top: 0;
    padding-top: 0.2rem;
    border-top: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.checkout-cart-summary__breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
    padding: 0.55rem 0.6rem;
    border-radius: var(--pos-radius-md, 12px);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(241, 245, 249, 0.72) 100%);
    border: 1px solid rgba(148, 163, 184, 0.26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.checkout-cart-summary__line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.65rem;
}

.checkout-cart-summary__line-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    line-height: 1.35;
}

.checkout-cart-summary__line-value {
    font-size: 0.88rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #334155;
}

/* الإجمالي = أهم رقم للكاشير: بند مميّز بخلفية نيلية ناعمة وحدّ، يبرز فوراً تحت الضغط. */
.checkout-cart-summary__total-panel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    margin-top: 0.2rem;
    border: 1px solid rgba(61, 78, 129, 0.18);
    border-radius: var(--pos-radius-md, 12px);
    background: var(--pos-checkout-primary-soft, #eef1f8);
}

.checkout-cart-summary__total-label {
    font-size: 1.02rem;
    font-weight: 900;
    color: var(--pos-checkout-primary-strong, #2f3d68);
    letter-spacing: -0.02em;
}

.checkout-cart-summary__total-value {
    font-size: 1.85rem;
    font-weight: 900;
    color: var(--pos-checkout-primary-strong, #2f3d68);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.checkout-cart-summary--action-bar {
    gap: 0.45rem;
    padding-top: 0;
}

.checkout-cart-summary--action-bar .checkout-cart-summary__breakdown {
    padding: 0.42rem 0.5rem;
}

.checkout-cart-summary--action-bar .checkout-cart-summary__line-label {
    font-size: 0.74rem;
}

.checkout-cart-summary--action-bar .checkout-cart-summary__line-value {
    font-size: 0.82rem;
}

.checkout-cart-summary--action-bar .checkout-cart-summary__total-value {
    font-size: 1.7rem;
    color: var(--pos-checkout-primary-strong, #2f3d68);
}

/* Shift badge — مرجع POS: خلفية خضراء باهتة (#E8F5E9)، نقطة حالة، بدون تدرج صاخب */
.pos-shift-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08rem;
    padding: 0.32rem 0.62rem 0.34rem;
    border-radius: 999px;
    line-height: 1.15;
    max-width: min(42vw, 9.5rem);
}

.pos-shift-chip__head {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.pos-shift-chip__dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex-shrink: 0;
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
}

.pos-shift-chip__dot--off {
    background: #cbd5e1;
    box-shadow: none;
}

.pos-shift-chip--open {
    background: #e8f5e9;
    border: 1px solid rgba(76, 175, 80, 0.35);
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.08);
}

.pos-shift-chip--closed {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.45);
    color: #64748b;
}

.pos-shift-chip__title {
    font-size: 0.74rem;
    font-weight: 800;
    color: #1b5e20;
}

.pos-shift-chip--closed .pos-shift-chip__title {
    color: #64748b;
    font-size: 0.74rem;
}

.pos-shift-chip__code {
    font-size: 0.66rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #2e7d32;
    padding-inline-start: 1.05rem;
}

/* Checkout — six secondary ops + full-width pay */
.checkout-ops-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
    margin-top: 0.35rem;
}

.checkout-ops-grid__btn.mud-button-root {
    min-height: 48px !important;
    text-transform: none !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    padding: 0.25rem 0.4rem !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
}

.checkout-ops-grid__label {
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
}

.checkout-ops-grid__btn--danger.mud-button-root {
    border-color: rgba(220, 38, 38, 0.55) !important;
    color: #b91c1c !important;
}

.checkout-ops-grid__btn--muted.mud-button-root {
    opacity: 0.78;
}

.checkout-action-bar-modern__pay--full {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
    margin-top: 0.45rem;
}

.checkout-action-bar-modern__pay--full .mud-button-root {
    width: 100%;
}

.checkout-cart-summary--action-bar .checkout-cart-summary__total-label {
    font-size: 0.84rem;
}

.checkout-cart-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.65rem;
    direction: rtl;
}

.checkout-cart-actions__half {
    flex: 1;
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 600 !important;
}

.checkout-cart-actions__single {
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 600 !important;
}

.checkout-pay-btn {
    margin-top: 0.85rem !important;
    border-radius: 14px !important;
    min-height: 56px !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
}

.checkout-pay-btn--hero {
    background: var(--pos-checkout-cta) !important;
    color: #ecfeff !important;
    box-shadow: var(--pos-checkout-cta-shadow), 0 2px 0 rgba(255, 255, 255, 0.12) inset !important;
    border: none !important;
    min-height: 72px !important;
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
}

.checkout-pay-btn--hero:hover:not(:disabled) {
    filter: brightness(1.06);
    box-shadow: 0 22px 52px rgba(13, 148, 136, 0.48) !important;
}

.checkout-pay-btn--hero:active:not(:disabled) {
    transform: translateY(1px);
}

.checkout-pay-btn--hero .mud-button-label {
    width: 100%;
}

.checkout-pay-btn__stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    width: 100%;
    text-align: center;
}

.checkout-pay-btn__primary {
    font-size: 1.18rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.checkout-pay-btn__amount {
    font-size: 1.05rem;
    font-weight: 800;
    opacity: 0.95;
    font-variant-numeric: tabular-nums;
}

/* شريط دفع مرجعي: مبلغ يسار — عنوان — أيقونة بطاقة يمين (LTR) */
.checkout-pay-btn--ref-bar.mud-button-root {
    padding-inline: 0.9rem !important;
}

.checkout-pay-btn--ref-bar .mud-button-label {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: stretch;
}

.checkout-pay-btn__ref-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
}

.checkout-pay-btn__ref-title {
    flex: 1 1 auto;
    text-align: center;
    font-size: 1.24rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: inherit;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.checkout-pay-btn__ref-amt {
    font-size: 1.12rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    min-width: 4.4rem;
    text-align: start;
    opacity: 1;
    color: inherit;
}

.checkout-pay-btn__ref-pay-ico {
    font-size: 1.45rem !important;
    width: 1.45rem !important;
    height: 1.45rem !important;
    opacity: 0.95;
    color: inherit !important;
}

.checkout-pay-btn--action-bar.checkout-pay-btn--hero {
    min-height: 56px !important;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}

.checkout-pay-btn--ref-bar.checkout-pay-btn--hero {
    min-height: 68px !important;
    padding-top: 0.52rem !important;
    padding-bottom: 0.52rem !important;
}

.checkout-pay-btn--action-bar:not(.checkout-pay-btn--hero) {
    min-height: 52px !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
}

/* Phase 5 — compact sticky checkout / payment action bar */
.checkout-action-bar-modern {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
    direction: rtl;
}

.checkout-action-bar-modern__summary {
    flex-shrink: 0;
    width: 100%;
    min-width: 0;
}

.payment-action-bar-root {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
}

.checkout-action-bar-modern__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
}

.checkout-action-bar-modern__meta .checkout-shift-hint-inline {
    padding-top: 0;
}

.checkout-action-bar-modern__meta .checkout-last-receipt-btn {
    margin-top: 0 !important;
}

.checkout-action-bar-modern__actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.6rem;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
}

.checkout-action-bar-modern__secondary {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex: 1 1 auto;
    gap: 0.5rem;
    min-width: 0;
}

.checkout-action-bar-modern__secondary .checkout-action-bar-modern__sec.mud-button-root {
    text-transform: none !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    border-radius: 12px !important;
    padding-inline: 0.55rem !important;
    min-height: 48px !important;
}

.checkout-action-bar-modern__sec-label {
    font-size: 0.72rem;
    font-weight: 800;
}

.checkout-action-bar-modern__pay {
    flex: 1 1 12rem;
    min-width: min(100%, 10.5rem);
    display: flex;
    align-items: stretch;
}

.checkout-action-bar-modern__pay .mud-button-root {
    width: 100%;
}

.checkout-action-bar-modern--retail .checkout-action-bar-modern__actions,
.checkout-action-bar-modern--restaurant .checkout-action-bar-modern__actions {
    align-items: stretch;
}

.checkout-action-bar-modern__actions--restaurant {
    gap: 0.5rem;
}

.checkout-action-bar-modern--restaurant .checkout-action-bar-modern__secondary {
    flex: 0 0 auto;
}

.checkout-action-bar-modern--restaurant .checkout-action-bar-modern__pay {
    flex: 1 1 65%;
    min-width: min(100%, 11rem);
}

@media (max-width: 419.98px) {
    .checkout-action-bar-modern__sec-label {
        display: none;
    }

    .checkout-action-bar-modern__secondary .checkout-action-bar-modern__sec.mud-button-root {
        padding-inline: 0.28rem !important;
        min-width: 44px;
        justify-content: center;
    }

    .checkout-action-bar-modern__secondary .checkout-action-bar-modern__sec .mud-button-start-icon {
        margin-inline: 0 !important;
    }
}

@media (max-width: 699.98px) {
    .checkout-action-bar-modern__actions:not(.checkout-action-bar-modern__actions--restaurant) {
        flex-direction: column;
        align-items: stretch;
        row-gap: 0.55rem;
    }

    .checkout-action-bar-modern__secondary {
        flex: 1 1 auto;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.6rem;
        order: 2;
    }

    .checkout-action-bar-modern__pay {
        flex: 1 1 auto;
        order: 1;
        min-width: 0;
        max-width: none;
    }
}

@media (min-width: 700px) {
    .checkout-action-bar-modern__actions:not(.checkout-action-bar-modern__actions--restaurant) {
        flex-wrap: nowrap;
        flex-direction: row;
    }

    .checkout-action-bar-modern__secondary {
        order: 0;
    }

    .checkout-action-bar-modern__pay {
        order: 0;
    }
}

@media (min-width: 900px) {
    .checkout-action-bar-modern__pay {
        flex: 1 1 56%;
        max-width: 22rem;
        margin-inline-start: auto;
    }
}

/* Retail cart footer — comfortable touch targets between secondary actions */
.pos-checkout-ref__cart-footer .checkout-action-bar-modern__secondary {
    gap: 0.65rem;
}

.pos-checkout-ref__cart-footer .checkout-action-bar-modern__secondary .checkout-action-bar-modern__sec.mud-button-root {
    min-height: 52px !important;
    min-width: 52px;
    padding-inline: 0.62rem !important;
}

@keyframes checkout-cart-pop {
    0% {
        transform: scale(1);
        background-color: #ecfdf5;
        border-color: #34d399;
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
    }
    45% {
        transform: scale(1.02);
        background-color: #ccfbf1;
        border-color: #14b8a6;
        box-shadow: 0 8px 28px rgba(13, 148, 136, 0.38);
    }
    100% {
        transform: scale(1);
        background: #f8fafc;
        border-color: rgba(226, 232, 240, 0.95);
        box-shadow: none;
    }
}

.checkout-cart-line--pop {
    animation: checkout-cart-pop 0.48s cubic-bezier(0.22, 1, 0.36, 1) 1;
}

@keyframes checkout-pay-success-flash {
    0% {
        box-shadow: inset 0 0 0 0 rgba(13, 148, 136, 0);
        border-radius: var(--pos-checkout-radius, 12px);
    }
    28% {
        box-shadow:
            inset 0 0 0 4px rgba(13, 148, 136, 0.75),
            0 0 44px rgba(13, 148, 136, 0.45),
            0 12px 40px rgba(13, 148, 136, 0.2);
    }
    100% {
        box-shadow: inset 0 0 0 0 rgba(13, 148, 136, 0);
    }
}

.pos-checkout-ref__cart-inner--pay-success {
    animation: checkout-pay-success-flash 1.15s cubic-bezier(0.22, 1, 0.36, 1) 1;
}

/* Category rail */
.checkout-rail {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    row-gap: 0.65rem;
    column-gap: 0.65rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.checkout-rail__btn {
    border-radius: 10px !important;
    justify-content: flex-start !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
    min-height: 44px !important;
    padding-inline: 0.65rem !important;
    box-shadow: none !important;
}

.checkout-rail__btn--active {
    background: var(--pos-checkout-primary, #3d4e81) !important;
    color: #fff !important;
    border: 1px solid rgba(61, 78, 129, 0.35) !important;
    box-shadow: 0 8px 20px rgba(61, 78, 129, 0.22) !important;
}

.checkout-rail__btn--active .mud-button-label,
.checkout-rail__btn--active .mud-icon-root {
    color: #fff !important;
}

.checkout-rail__btn:not(.checkout-rail__btn--active) {
    background: #fff !important;
    border: 1px solid rgba(148, 163, 184, 0.45) !important;
    color: #0f172a !important;
}

.checkout-rail__btn-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    justify-content: flex-start;
}

.checkout-rail__emoji {
    font-size: 1.05rem;
    line-height: 1;
}

.checkout-rail__name {
    font-weight: 800;
}

.checkout-product-grid-more {
    display: flex;
    justify-content: center;
    padding: 0.65rem 0 0.25rem;
}

/* ─── Unified sales workspace (Retail + Restaurant) ─── */
.pos-sales-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    height: 100%;
    --pos-sales-workspace-gap: 0.85rem;
    --pos-sales-workspace-pad: 0.75rem;
    --pos-sales-panel-radius: var(--pos-checkout-radius, 12px);
    --pos-sales-panel-border: 1px solid rgba(148, 163, 184, 0.18);
    --pos-sales-panel-bg: var(--pos-checkout-card, #fff);
    --pos-sales-panel-shadow: var(--pos-checkout-shadow);
}

.pos-sales-shell--retail {
    font-size: 1.05rem;
}

.pos-sales-split {
    gap: var(--pos-sales-workspace-gap, 0.85rem);
    padding: var(--pos-sales-workspace-pad, 0.75rem);
    padding-bottom: max(var(--pos-sales-workspace-pad, 0.75rem), env(safe-area-inset-bottom, 0px));
}

.retail-grid.pos-sales-split,
.pos-sales-split--retail {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 960px) {
    .retail-grid.pos-sales-split,
    .pos-sales-split--retail {
        grid-template-columns: 1fr;
    }
}

.pos-sales-pane--catalog,
.pos-sales-pane--smart-entry {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.pos-sales-pane--cart {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.pos-sales-catalog-surface {
    background: var(--pos-sales-panel-bg);
    border: var(--pos-sales-panel-border);
    border-radius: var(--pos-sales-panel-radius);
    box-shadow: var(--pos-sales-panel-shadow);
    padding: 0.85rem 1rem 1rem;
}

.pos-sales-catalog-surface--retail {
    flex: 1;
    min-height: min(46vh, 520px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.pos-sales-catalog-surface--restaurant {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    overflow: hidden;
    padding-bottom: 0.65rem;
}

.pos-sales-catalog-surface--restaurant > .restaurant-mode__center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(42vh, 360px);
}

.pos-sales-catalog-surface--restaurant .category-rail-chips-modern {
    flex-shrink: 0;
}

.pos-sales-catalog-surface--restaurant .hx-products-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-inline: 0.05rem;
}

.pos-sales-cart-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: var(--pos-sales-panel-bg);
    border: var(--pos-sales-panel-border);
    border-radius: var(--pos-sales-panel-radius);
    box-shadow: var(--pos-sales-panel-shadow);
    padding: 0.65rem 0.75rem 0.55rem;
}

.pos-sales-cart-panel .retail-cart-list,
.pos-sales-cart-panel .restaurant-mode__cart-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.pos-sales-checkout-slot {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 4;
    padding-top: 0.45rem;
    margin-top: 0.15rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--pos-sales-panel-bg) 42%);
}

.pos-sales-header {
    flex-shrink: 0;
    align-items: center;
    padding: 0.55rem 0.85rem !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

.pos-sales-pane--cart .cart-row-modern__extras {
    max-width: 100%;
}

.pos-sales-pane--cart .restaurant-mode__mod {
    overflow-wrap: anywhere;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pos-sales-pane--cart .cart-row-modern__extras .mud-typography-caption {
    overflow-wrap: anywhere;
}

/* ═══ Phase 12C — Sales modes cart line cards (retail / restaurant vertical layout) ═══ */
.pos-sales-pane--cart .cart-line.cart-line--retail,
.pos-sales-pane--cart .cart-line.cart-line--restaurant {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0.7rem 0.85rem !important;
    margin-bottom: 0.65rem !important;
    border-radius: 14px !important;
    min-width: 0;
    line-height: 1.45;
    border: 1px solid rgba(148, 163, 184, 0.38) !important;
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.pos-sales-pane--cart .cart-line.cart-line--retail:active,
.pos-sales-pane--cart .cart-line.cart-line--restaurant:active {
    transform: scale(0.995);
}

.pos-sales-pane--cart .cart-line__title {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.pos-sales-pane--cart .cart-line__title-text {
    font-weight: 900;
    font-size: 0.95rem;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pos-sales-pane--cart .cart-line__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.28rem;
    min-width: 0;
}

.pos-sales-pane--cart .cart-line__caption {
    margin: 0 !important;
    line-height: 1.35 !important;
}

.pos-sales-pane--cart .cart-line__options {
    min-width: 0;
}

.pos-sales-pane--cart .cart-line__options .mud-select {
    margin-top: 0 !important;
}

.pos-sales-pane--cart .cart-line__price {
    font-weight: 900;
    font-size: 1.02rem;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.pos-sales-pane--cart .cart-line__price-value {
    font-weight: 900;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
}

.pos-sales-pane--cart .cart-line.cart-line--restaurant .restaurant-mode__line-price {
    text-align: start;
    padding-top: 0.1rem;
}

.pos-sales-pane--cart .cart-line__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.55rem;
    justify-content: space-between;
    padding-top: 0.15rem;
    border-top: 1px solid rgba(226, 232, 240, 0.95);
    margin-top: 0.05rem;
}

.pos-sales-pane--cart .cart-line__qty-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
}

.pos-sales-pane--cart .cart-line__qty-cluster .retail-line__qty {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0 !important;
}

.pos-sales-pane--cart .cart-line__note {
    flex: 0 0 auto;
}

.pos-sales-pane--cart .cart-line__remove {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.pos-sales-pane--cart .cart-line__qty-btn.mud-icon-button,
.pos-sales-pane--cart .cart-line__remove-btn.mud-icon-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
}

.pos-sales-pane--cart .cart-line.cart-line--restaurant .cart-line__actions {
    justify-content: flex-start;
}

.pos-sales-pane--cart .cart-line.cart-line--restaurant .cart-line__remove {
    margin-inline-start: auto;
}

.pos-sales-pane--cart .cart-line__extras:not(:empty) {
    padding: 0.2rem 0.05rem 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: #475569;
}

.pos-sales-pane--cart .cart-line__extras:empty {
    display: none !important;
}

/* Retail POS mode — macro column layout is MudStack/SaleModeShell; shell scroll lock is hx-pos-scroll-lock on app shell. */
.retail-shell {
    font-size: 1.05rem;
}

.retail-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.retail-header__title {
    font-weight: 800;
}

.retail-grid:not(.pos-sales-split) {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 0.75rem;
}

@media (max-width: 960px) {
    .retail-grid:not(.pos-sales-split) {
        grid-template-columns: 1fr;
    }
}

.retail-pane {
    min-height: 0;
    overflow: auto;
    padding: 0.5rem;
}

.retail-pane.pos-sales-pane--smart-entry,
.retail-pane.pos-sales-pane--cart {
    overflow: hidden;
    padding: 0;
}

.retail-pane__label {
    font-weight: 700;
}

.retail-barcode-field input {
    font-size: 1.35rem !important;
    font-weight: 700;
}

.retail-barcode-field--large .mud-input-slot,
.retail-barcode-field--large input {
    font-size: 1.65rem !important;
    min-height: 3rem;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.retail-search-results {
    max-height: 280px;
    overflow: auto;
}

.retail-search-dropdown-modern.retail-search-results {
    border-radius: 10px !important;
    border-color: rgba(13, 148, 136, 0.28) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08) !important;
    max-height: min(52vh, 300px);
}

.retail-search-dropdown-modern .retail-search-row {
    border-radius: 8px;
    margin: 0.12rem 0.15rem;
    padding: 0.48rem 0.55rem;
    transition: background 0.1s ease;
}

.retail-search-dropdown-modern .retail-search-row--hi {
    background: rgba(13, 148, 136, 0.14);
}

.retail-smart-entry-pane__primary .mud-input-root,
.retail-smart-entry-pane__search .mud-input-root {
    border-radius: 12px !important;
}

.retail-smart-entry-pane__title {
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

.retail-search-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    cursor: pointer;
}

.retail-search-row--hi {
    background: rgba(59, 130, 246, 0.12);
}

.retail-cart-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.retail-cart-total {
    font-weight: 900;
}

.retail-cart-list {
    max-height: min(70dvh, calc(100dvh - 220px));
    overflow: auto;
}

.pos-sales-cart-panel > .retail-cart-list {
    max-height: none;
}

.retail-line {
    padding: 0.65rem;
    margin-bottom: 0.5rem;
}

.retail-line--focus {
    border-color: var(--mud-palette-primary) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

.retail-line__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.35rem;
}

.retail-line__name {
    font-weight: 700;
}

.retail-line__qty {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.35rem;
}

.retail-qty-field {
    max-width: 120px;
}

.retail-pay-btn {
    flex: 1;
    font-weight: 800;
    font-size: 1.1rem !important;
}

/* Restaurant mode */
.restaurant-mode__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 70%, transparent);
}

.restaurant-mode__titles {
    display: flex;
    flex-direction: column;
}

.restaurant-mode__main:not(.pos-sales-split) {
    display: grid;
    grid-template-columns: 1fr min(380px, 38vw);
    gap: 0.75rem;
    padding: 0.75rem;
    min-height: 0;
    flex: 1;
}

.restaurant-mode__main.pos-sales-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(400px, 36vw);
    gap: var(--pos-sales-workspace-gap, 0.85rem);
    padding: var(--pos-sales-workspace-pad, 0.75rem);
    padding-bottom: max(var(--pos-sales-workspace-pad, 0.75rem), env(safe-area-inset-bottom, 0px));
    min-height: 0;
    flex: 1;
}

@media (max-width: 960px) {
    .restaurant-mode__main.pos-sales-split {
        grid-template-columns: 1fr;
    }
}

.restaurant-mode__catalog {
    min-height: 0;
    overflow: auto;
}

.restaurant-mode__catalog.pos-sales-pane--catalog {
    overflow: hidden;
    padding: 0;
}

.restaurant-mode__cat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
}

/* Horizontally scrollable category chips (restaurant) */
.restaurant-mode__cat-tabs.category-rail-chips-modern {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.45rem;
    padding: 0.15rem 0.1rem 0.45rem;
    margin-inline: -0.15rem;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.restaurant-mode__cat-tabs.category-rail-chips-modern > * {
    flex-shrink: 0;
    scroll-snap-align: start;
}

.restaurant-mode__cat-chip {
    font-weight: 700 !important;
}

.restaurant-mode__cart {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.restaurant-mode__cart:not(.pos-sales-pane--cart) {
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 70%, transparent);
    border-radius: 12px;
    padding: 0.65rem;
    background: color-mix(in srgb, var(--mud-palette-surface) 96%, transparent);
}

.restaurant-mode__cart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.restaurant-mode__cart-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    margin-bottom: 0.5rem;
}

.restaurant-mode__line-top {
    display: flex;
    justify-content: space-between;
    gap: 0.35rem;
}

.restaurant-mode__mod {
    font-size: 0.85rem;
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.restaurant-mode__line-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-top: 0.35rem;
}

.restaurant-mode__cart-actions {
    margin-top: auto;
}

.restaurant-mode__pay {
    font-weight: 900 !important;
    font-size: 1.05rem !important;
}

.restaurant-mode__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.restaurant-mode__mod-picker {
    display: flex;
    flex-wrap: wrap;
}

/* SalesExperienceShell — match prior SaleSplitLayout + SaleModeShell column flow */
.retail-shell.pos-sales-shell .sales-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.retail-shell.pos-sales-shell .sales-shell__header,
.retail-shell.pos-sales-shell .sales-shell__footer {
    flex-shrink: 0;
}

/* Macro columns: MudGrid inside SalesExperienceShell; keep workspace padding only. */
.retail-shell.pos-sales-shell .sales-shell__body {
    flex: 1;
    min-height: 0;
    padding: var(--pos-sales-workspace-pad, 0.75rem);
    padding-bottom: max(var(--pos-sales-workspace-pad, 0.75rem), env(safe-area-inset-bottom, 0px));
}

.restaurant-mode.pos-main-checkout-shell .sales-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.restaurant-mode.pos-main-checkout-shell .sales-shell__header {
    flex-shrink: 0;
}

.restaurant-mode.pos-main-checkout-shell .sales-shell__body {
    flex: 1;
    min-height: 0;
    padding: var(--pos-sales-workspace-pad, 0.75rem);
    padding-bottom: max(var(--pos-sales-workspace-pad, 0.75rem), env(safe-area-inset-bottom, 0px));
}

/* Centered empty / loading shells inside checkout product rail — polish without changing layout flex contract */
.pos-centered-empty.pos-checkout-ref__center-msg {
    max-width: 22rem;
    padding: 1.75rem 1.35rem;
    border-radius: var(--pos-checkout-radius, 16px);
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.92) 100%);
    box-shadow: var(--pos-checkout-shadow, 0 4px 24px rgba(15, 23, 42, 0.06));
}

.pos-centered-empty.pos-checkout-ref__center-msg .mud-typography-h6 {
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    color: #0f172a !important;
}

.pos-centered-empty.pos-checkout-ref__center-msg .mud-typography-body1.mud-text-secondary {
    line-height: 1.55 !important;
}

/* ═══ Dialogs · mobile overflow · safe-area (SharedUI — loaded by SalesApp index) ═══ */
/* Dialog chrome: scope to hx-pos-dialog / hx-admin-dialog (no global #app .mud-dialog-container overrides). */
.mud-dialog.hx-pos-dialog,
.mud-dialog.hx-admin-dialog {
    margin: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)) !important;
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box;
}

/* Narrow checkout dialogs: overrides the shell max-width above when DialogOptions use Small/Medium caps. */
.mud-dialog.hx-pos-dialog.pos-checkout-dialog-max-sm {
    max-width: min(420px, calc(100vw - 16px)) !important;
}

.mud-dialog.hx-pos-dialog.pos-checkout-dialog-max-md {
    max-width: min(560px, calc(100vw - 16px)) !important;
}

.mud-dialog.hx-pos-dialog .mud-dialog-content,
.mud-dialog.hx-admin-dialog .mud-dialog-content {
    overflow-x: hidden !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    flex: 1 1 auto;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
}

.mud-dialog.hx-pos-dialog .mud-dialog-title,
.mud-dialog.hx-admin-dialog .mud-dialog-title {
    flex-shrink: 0;
}

/* RTL dialog chrome: the leading icon + title must read from the right in Arabic.
   The app is not wrapped in a global MudRtlProvider, so dialog titles inherit LTR
   and a dir="rtl" on an inner stack is unreliable — force the title (and its action
   row) to RTL here so every dialog's icon sits at the start (right). */
.mud-dialog.hx-pos-dialog .mud-dialog-title {
    direction: rtl;
    text-align: right;
}
.mud-dialog.hx-pos-dialog .mud-dialog-actions {
    direction: rtl;
}

.mud-dialog.hx-pos-dialog .mud-dialog-actions,
.mud-dialog.hx-admin-dialog .mud-dialog-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
    padding: 0.5rem 1rem max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
}

.mud-dialog.hx-pos-dialog.pos-dialog-phase8 .mud-dialog-actions .mud-button-root {
    min-height: 44px;
}

@media (max-width: 480px) {
    .mud-dialog.hx-pos-dialog.pos-dialog-phase8 .mud-dialog-actions {
        flex-direction: column-reverse;
    }

    .mud-dialog.hx-pos-dialog.pos-dialog-phase8 .mud-dialog-actions .mud-button-root {
        width: 100%;
        justify-content: center;
    }
}

.checkout-dialog-premium.pos-dialog-phase8.hx-pos-dialog .mud-dialog-content,
.restaurant-dialog.pos-dialog-phase8.hx-pos-dialog .mud-dialog-content {
    background: #fff;
}

.pos-dialog-surface {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Optional body wrapper — cooperates with MudDialog content scroll; no nested max-height traps */
.hx-dialog-body {
    min-width: 0;
    min-height: 0;
}

.checkout-pay-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    max-width: 100%;
    box-sizing: border-box;
}

.checkout-pay-chip-row .mud-button-root {
    flex: 1 1 calc(50% - 0.2rem);
    min-width: min(100%, 5.25rem);
    justify-content: center;
}

@media (max-width: 360px) {
    .checkout-pay-chip-row .mud-button-root {
        flex: 1 1 100%;
    }
}

.restaurant-dialog--modifier .restaurant-mode__mod-picker {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    max-width: 100%;
}

.restaurant-dialog--modifier .restaurant-mode__mod-picker .mud-chip {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    white-space: normal;
    height: auto;
    min-height: 44px;
}

.restaurant-modifier-dialog {
    max-height: min(65dvh, 520px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0.15rem 0;
}

.restaurant-payment-dialog .checkout-pay-methods-row {
    margin-bottom: 0.75rem;
}

.restaurant-payment-dialog .checkout-payment-total-amount {
    text-align: center;
    display: block;
    width: 100%;
    padding: 0.5rem 0 0.25rem;
    font-size: 1.5rem !important;
    line-height: 1.2;
}

.retail-payment-dialog .mud-radio-group {
    width: 100%;
}

.retail-payment-dialog .mud-radio {
    width: 100%;
    margin: 0 0 0.35rem;
    padding: 0.45rem 0.5rem;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-sizing: border-box;
}

.retail-payment-dialog .mud-typography-h5 {
    font-weight: 900 !important;
    text-align: center;
    padding: 0.35rem 0 0.15rem;
}

/* Hub body: prevent flex children from forcing horizontal scroll */
#app.hx-pos-app .pos-app-body-wrap--page {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Checkout grid: leave vertical room for sticky cart footer + status strip on narrow screens */
@media (max-width: 960px) {
    .pos-checkout-ref .sales-shell__body {
        padding-bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
    }

    .pos-checkout-ref__products-stack {
        min-width: 0;
    }
}

/* ═══ Phase 12C FIX — hub status in header, category chips, cart density ═══ */
.pos-checkout-ref__header.pos-top-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.pos-top-bar__hub-status {
    flex-shrink: 0;
    width: 100%;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, #ffffff 100%);
}

.pos-checkout-footer-strip--header {
    margin: 0;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.4rem 0.65rem 0.45rem !important;
    background: transparent !important;
}

.pos-checkout-footer-strip--header .pos-checkout-footer-strip__row {
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
}

.pos-checkout-footer-strip--header .pos-checkout-footer-strip__pull.mud-button-root {
    min-height: 44px !important;
}

/* Phase 12D — compact checkout header + dense hub strip */
.pos-checkout-header--compact12d.pos-checkout-ref__header.pos-shell-header {
    gap: 0.28rem !important;
    padding: 0.42rem 0.85rem 0.48rem !important;
    margin-bottom: 0.35rem !important;
}

.pos-checkout-header--compact12d .pos-shell-header__primary.pos-top-bar__inner {
    min-height: 38px;
    gap: 0.35rem !important;
}

.pos-checkout-header--compact12d .pos-top-bar__device-icon {
    width: 34px;
    height: 34px;
}

.pos-checkout-header--compact12d .pos-top-bar__device-code {
    font-size: 0.85rem;
}

.pos-checkout-header--compact12d .pos-top-bar__device-sub {
    font-size: 0.68rem;
}

.pos-checkout-header--compact12d .pos-top-bar__clock {
    padding: 0.15rem 0.38rem;
}

.pos-checkout-header--compact12d .pos-top-bar__clock-date--compact-hide {
    display: none !important;
}

/* Phase 12E — single-row checkout header: no second strip; tighter vertical rhythm */
.pos-checkout-header--phase12e.pos-checkout-ref__header.pos-shell-header {
    padding: 0.28rem 0.65rem 0.32rem !important;
    margin-bottom: 0.2rem !important;
    gap: 0 !important;
}

.pos-checkout-header--phase12e .pos-shell-header__primary.pos-top-bar__inner {
    min-height: 34px;
}

.pos-checkout-quick-menu .checkout-quick-menu__status .mud-typography-body2 {
    white-space: normal;
    line-height: 1.25;
}

.pos-checkout-footer-strip--dense.pos-checkout-footer-strip--header {
    padding: 0.28rem 0.5rem 0.32rem !important;
}

.pos-checkout-footer-strip--dense .pos-checkout-footer-strip__row {
    gap: 0.28rem 0.45rem !important;
}

.pos-checkout-footer-strip--dense .pos-checkout-footer-strip__meta {
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
}

.pos-checkout-footer-strip--dense .pos-checkout-footer-strip__label {
    font-size: 0.72rem !important;
}

.pos-checkout-footer-strip--dense .pos-checkout-footer-strip__pull.mud-button-root {
    min-height: 38px !important;
    font-size: 0.78rem !important;
}

.pos-checkout-ref__products-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    gap: 0.45rem;
}

.pos-checkout-ref__category-bar {
    flex-shrink: 0;
}

.pos-category-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    padding: 0.15rem 0.05rem 0.35rem;
    margin: 0 -0.1rem;
}

.pos-category-scroll__inner {
    width: 100%;
}

.pos-category-scroll__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    width: max-content;
    min-width: 100%;
    padding-bottom: 0.1rem;
}

.checkout-cat-chip.mud-chip {
    flex: 0 0 auto;
    max-width: 11.5rem;
    font-weight: 800 !important;
}

.pos-checkout-ref__products-stack {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ═══ Phase 12K.1 — checkout products column / white panel fill body height when a category has few tiles ═══ */
.pos-checkout-ref.checkout-screen .pos-checkout-ref__products.products-panel.pos-checkout-ref__products-column {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    align-self: stretch;
}

.pos-checkout-ref.checkout-screen .pos-checkout-ref__products-stack > .hx-products-panel {
    flex: 1 1 auto;
    min-height: 0;
    align-self: stretch;
}

.pos-checkout-ref.checkout-screen .hx-products-scroll {
    flex: 1;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Checkout POS — cart column fills body height; only .cart-lines scrolls */
.pos-checkout-ref .pos-checkout-ref__cart-panel.cart-panel {
    min-height: 0;
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pos-checkout-ref .cart-lines.pos-checkout-ref__cart-scroll,
.pos-checkout-ref .pos-checkout-ref__cart-scroll.cart-lines {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.pos-checkout-ref .pos-checkout-ref__cart-footer {
    flex-shrink: 0;
}

.pos-checkout-ref .cart-panel .pos-checkout-ref__cart-footer--sticky-checkout {
    position: relative;
    bottom: auto;
    z-index: 1;
    margin-top: 0.35rem;
    padding-bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
    background: var(--pos-checkout-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-radius: 0;
}

.pos-checkout-ref__cart-inner .pos-checkout-ref__cart-scroll {
    flex: 1 1 auto;
    min-height: 0;
}

/* ═══ Phase 12I — checkout header: white card, one row, bolt quick actions, truncation ═══ */
.pos-checkout-ref.checkout-screen .pos-checkout-header--phase12i.pos-checkout-ref__header.pos-shell-header {
    gap: 0 !important;
    padding: 0.45rem 0.65rem !important;
    margin-bottom: 0.45rem !important;
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    box-shadow:
        0 4px 18px rgba(15, 23, 42, 0.06),
        0 1px 3px rgba(15, 23, 42, 0.04) !important;
    max-height: 64px;
    min-height: 56px;
    box-sizing: border-box;
    overflow: hidden;
}

.pos-checkout-ref.checkout-screen .pos-checkout-header--phase12i .pos-shell-header__primary.pos-top-bar__inner {
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: 44px !important;
    max-height: 52px !important;
    gap: 0.4rem !important;
    row-gap: 0 !important;
}

.pos-checkout-header--phase12i .pos-top-bar__zone {
    min-width: 0;
}

.pos-checkout-header--phase12i .pos-top-bar__zone--start {
    flex: 0 1 auto;
    max-width: 42%;
}

.pos-checkout-header--phase12i .pos-top-bar__zone--mid {
    flex: 0 1 auto;
    justify-content: center;
    flex-wrap: nowrap !important;
}

.pos-checkout-header--phase12i .pos-top-bar__zone--end {
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
    gap: 0.3rem !important;
}

.pos-checkout-header--phase12i .pos-top-bar__device.pos-top-bar__device--phase12i {
    gap: 0.35rem;
    padding-inline: 0;
    min-width: 0;
    flex: 1 1 auto;
}

.pos-checkout-header--phase12i .pos-top-bar__device-text {
    min-width: 0;
    flex: 1 1 auto;
}

.pos-checkout-header--phase12i .pos-top-bar__device-code {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.86rem;
    font-weight: 800;
}

.pos-checkout-header--phase12i .pos-top-bar__device-icon--compact {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 9px;
    background: rgba(241, 245, 249, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.28);
}

.pos-checkout-header--phase12i .pos-top-bar__device-icon--compact .mud-icon-root {
    font-size: 1.05rem !important;
}

.pos-checkout-header--phase12i .pos-top-bar__branch--phase12i {
    max-width: min(36vw, 14rem) !important;
    min-width: 0;
    flex: 0 1 auto;
}

.pos-checkout-header--phase12i .pos-top-bar__branch-text {
    min-width: 0;
}

.pos-checkout-header--phase12i .pos-checkout-header__shift {
    flex-shrink: 0;
}

.pos-checkout-header--phase12i .pos-shell-header__menu-btn.mud-icon-button,
.pos-checkout-header--phase12i .pos-shell-header__icon-btn.mud-icon-button:not(.pos-checkout-quick-actions-btn) {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
}

.pos-checkout-header--phase12i .pos-checkout-quick-actions-btn--bolt.mud-icon-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: rgba(61, 78, 129, 0.07) !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.pos-checkout-header--phase12i .pos-checkout-quick-actions-btn--bolt.mud-icon-button:hover,
.pos-checkout-header--phase12i .pos-checkout-quick-actions-btn--bolt.mud-icon-button:focus-visible {
    background: rgba(61, 78, 129, 0.15) !important;
    box-shadow: 0 2px 8px rgba(61, 78, 129, 0.12);
}

.pos-checkout-header--phase12i .pos-checkout-quick-actions-btn--bolt.mud-icon-button:active {
    background: rgba(61, 78, 129, 0.2) !important;
}

.pos-checkout-header--phase12i .pos-checkout-quick-actions-btn--bolt .mud-icon-root {
    font-size: 22px !important;
    width: 22px !important;
    height: 22px !important;
    color: #3d4e81 !important;
}

@media (max-width: 720px) {
    .pos-checkout-header--phase12i .pos-top-bar__zone--start {
        max-width: 46%;
    }

    .pos-checkout-header--phase12i .pos-top-bar__branch--phase12i {
        max-width: min(28vw, 9rem) !important;
    }
}

/* ═══ Phase 12J — payment CTA (cart footer): solid primary teal, Hexaom-aligned ═══ */
.checkout-pay-btn--phase12j.checkout-pay-btn--hero.checkout-pay-btn--action-bar.checkout-pay-btn--ref-bar.mud-button-root {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    border-radius: 14px !important;
    padding-block: 0 !important;
    padding-inline: 1rem !important;
    background: #14b8a6 !important;
    box-shadow: 0 10px 28px rgba(13, 148, 136, 0.28) !important;
    color: #ffffff !important;
}

.checkout-pay-btn--phase12j.checkout-pay-btn--hero.checkout-pay-btn--action-bar.checkout-pay-btn--ref-bar.mud-button-root:disabled {
    opacity: 0.55 !important;
    filter: none;
    box-shadow: none !important;
}

.checkout-pay-btn--phase12j .checkout-pay-btn__ref-title {
    font-size: 1.06rem !important;
    text-shadow: none !important;
}

.checkout-pay-btn--phase12j .checkout-pay-btn__ref-amt {
    font-size: 1rem !important;
    font-weight: 900 !important;
}

.checkout-pay-btn--phase12j .checkout-pay-btn__ref-pay-ico {
    font-size: 22px !important;
    width: 22px !important;
    height: 22px !important;
}

/* Customer picker: kill outer dialog-content scroll — single list scroll lives in sales-customers.css */
.mud-dialog.checkout-customer-pick-dialog.hx-pos-dialog {
    max-width: min(92vw, 480px) !important;
    max-height: min(86dvh, 720px) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Beat global `.mud-dialog-content { overflow-y: auto }` — picker uses ONE inner scroll only */
.mud-dialog.checkout-customer-pick-dialog.hx-pos-dialog .mud-dialog-content {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ═══ Checkout — classic product options (quantity-capable add-ons) ═══ */
.mud-dialog.classic-options-dialog.hx-pos-dialog {
    width: 100% !important;
    max-width: min(560px, calc(100vw - 2rem)) !important;
    max-height: min(90dvh, 800px) !important;
    margin-inline: auto !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Inner scroll only — avoids double scroll with global `.mud-dialog-content` */
.mud-dialog.classic-options-dialog.hx-pos-dialog .mud-dialog-content {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
}

.classic-options-dialog.mud-dialog-root .mud-dialog-title {
    padding: 0.5rem 0.65rem 0.3rem !important;
}

.classic-options-dialog__title-bar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
}

.classic-options-dialog__title {
    flex: 1;
    text-align: center;
    font-weight: 800 !important;
    margin: 0 !important;
}

.classic-options-dialog__title-spacer {
    width: 36px;
    flex-shrink: 0;
}

.classic-options-dialog__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.3rem 0.65rem 0.65rem;
}

.classic-options-dialog__product {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.45rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}

.classic-options-dialog__product-name {
    font-weight: 800 !important;
    margin: 0 !important;
}

.classic-options-dialog__badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    white-space: nowrap;
}

.classic-options-dialog__group {
    margin-top: 0.7rem;
}

.classic-options-dialog__group-head {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    margin-bottom: 0.38rem;
}

.classic-options-dialog__group-label {
    font-weight: 800 !important;
    margin: 0 !important;
}

.classic-options-dialog__req {
    color: #dc2626;
    font-weight: 900;
    margin-inline-start: 0.15rem;
}

.classic-options-dialog__segments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
}

.classic-opt-segment {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    min-width: 5.5rem;
    padding: 0.55rem 0.65rem 0.45rem;
    border-radius: 12px;
    border: 1px solid rgba(226, 232, 240, 0.98);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    text-align: center;
    font: inherit;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.classic-opt-segment:hover {
    border-color: rgba(20, 184, 166, 0.45);
}

.classic-opt-segment--selected {
    border-color: #14b8a6;
    box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.35);
    background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
}

.classic-opt-segment__name {
    font-weight: 800;
    font-size: 0.88rem;
    line-height: 1.2;
}

.classic-opt-segment__price {
    font-size: 0.78rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.classic-opt-segment__check {
    position: absolute;
    top: 0.35rem;
    inset-inline-end: 0.35rem;
    color: #14b8a6 !important;
}

.classic-options-dialog__addon-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.classic-addon-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.45rem;
    border-radius: 10px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: #fafafa;
}

.classic-addon-row__meta {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    min-width: 0;
    flex: 1;
}

.classic-addon-row__name {
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.2;
}

.classic-addon-row__delta {
    font-size: 0.78rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.classic-addon-row__stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.05rem;
    flex-shrink: 0;
}

.classic-addon-row__qty {
    min-width: 1.5rem;
    text-align: center;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem;
}

.classic-addon-row__step-btn.mud-icon-button {
    padding: 4px !important;
}

.classic-options-dialog__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.55rem;
    margin-top: 0.85rem;
    padding: 0.65rem 0.55rem;
    border-radius: 12px;
    background: #f1f5f9;
    border: 1px solid rgba(226, 232, 240, 0.95);
}

.classic-options-dialog__summary-rows {
    flex: 1 1 min(100%, 15rem);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.classic-options-dialog__summary-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: #334155;
}

.classic-options-dialog__summary-row span:last-child {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.classic-options-dialog__summary-total-block {
    flex: 1 1 min(100%, 10rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.05rem;
    padding-inline-start: 0.35rem;
    border-inline-start: 1px solid rgba(148, 163, 184, 0.35);
}

/* When summary stacks on very narrow viewports, separate total cleanly */
@media (max-width: 420px) {
    .classic-options-dialog__summary-total-block {
        padding-inline-start: 0;
        padding-top: 0.45rem;
        margin-top: 0.15rem;
        border-inline-start: none;
        border-top: 1px solid rgba(148, 163, 184, 0.35);
        width: 100%;
    }
}

.classic-options-dialog__grand-total {
    color: #0d9488 !important;
    font-weight: 900 !important;
    margin: 0 !important;
}

.mud-dialog.classic-options-dialog.hx-pos-dialog .mud-dialog-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.45rem 0.65rem 0.75rem !important;
}

.classic-options-dialog__footer-inner {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
}

.classic-options-dialog__tip {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0.35rem !important;
}

.classic-options-dialog__tip-icon {
    margin-top: 0.1rem;
    color: #64748b !important;
    flex-shrink: 0;
}

.classic-options-dialog__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.classic-options-dialog__primary.mud-button-root {
    min-width: 9rem;
    border-radius: 12px !important;
    font-weight: 800 !important;
    background: #14b8a6 !important;
}