/* ==========================================================================
   Mobile Checkout Modal
   ========================================================================== */

@media (max-width: 600px) {
/* Order modal - mobile-only sizing. Keep this separate from desktop CSS. */
    .modal-overlay {
        padding: 12px !important;
    }

    .modal-container.order-modal-shell {
        width: min(100%, 390px);
        max-width: 390px !important;
        max-height: calc(100dvh - 20px);
        height: auto;                     /* Reset desktop height */
        min-height: initial;              /* Reset desktop min-height */
        border-radius: 22px !important;
        padding: 20px 20px 24px !important;
        overflow: hidden !important;
    }

    .order-modal-shell .order-modal-topbar {
        height: 28px;
    }

    .order-modal-shell .order-modal-close {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 1.15rem;
    }

    .order-back-btn {
        font-size: 0.9rem;
        gap: 6px;
    }

    .order-back-btn i {
        font-size: 1.15rem;
    }

    .order-summary-panel {
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 16px;
        margin-top: 18px;
    }

    .order-summary-image {
        width: 100px;
        height: 100px;
        border-radius: 12px;
    }

    .order-summary-copy h3 {
        font-size: 1.1rem;
        margin-bottom: 8px;
    }

    .order-price-list {
        gap: 6px;
    }

    .order-price-list li {
        gap: 6px;
        font-size: 0.82rem;
    }

    .price-dot {
        width: 5px;
        height: 5px;
    }

    .order-price-value {
        font-size: 0.92rem;
        min-width: 30px;
    }

    .order-divider {
        margin: 16px 0 20px;
    }

    .order-modal-shell .payment-method-title {
        font-size: 1.35rem;
        margin-bottom: 18px;
    }

    .order-modal-shell .payment-options-list {
        gap: 12px;
    }

    .order-modal-shell .payment-opt-btn {
        height: 54px;
        border-radius: 11px;
    }

    .order-modal-shell .syriatel-mtn .syriatel-side {
        padding-left: 12px;
    }

    .order-modal-shell .syriatel-mtn .mtn-side {
        padding-right: 14px;
    }

    .order-modal-shell .syriatel-mtn .syriatel-side img {
        width: 105px;
    }

    .order-modal-shell .syriatel-mtn .mtn-side img {
        width: 70px;
    }

    .order-modal-shell .payment-opt-btn.card-option {
        gap: 10px;
        padding: 0 16px;
    }

    .order-modal-shell .payment-opt-btn.card-option > span:not(.credit-card-stack) {
        font-size: 1.12rem;
        white-space: nowrap;
    }

    .credit-card-stack {
        flex-basis: 44px;
        height: 40px;
        transform: scale(0.62);
    }

    .order-modal-shell .payment-opt-btn.sham-option {
        padding: 0 16px;
    }

    .order-modal-shell .payment-opt-btn.sham-option img {
        width: 38px;
        height: 38px;
        border-radius: 8px;
    }

    .order-modal-shell .payment-opt-btn.sham-option span {
        font-size: 1.22rem;
    }
}