/**
 * Mobile cart / checkout polish
 * Loaded after cart-page.css. Keep phone layout full-width, centered, and touch-friendly.
 */

@media screen and (max-width: 768px) {
    /* ---- Page shell: use the phone width ---- */
    body.ff-cart-page .ff-cart-main {
        padding: 8px 0 36px;
    }

    body.ff-cart-page .ff-cart-main .container {
        max-width: 100%;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: auto;
        margin-right: auto;
    }

    body.ff-cart-page .pcs-container {
        width: 100%;
        max-width: 100%;
        margin: 6px auto 28px;
        padding: 12px 10px 18px;
        border-radius: 16px;
        box-sizing: border-box;
    }

    body.ff-cart-page .pcs-cart-header-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 12px;
        text-align: center;
        border-radius: 14px;
    }

    body.ff-cart-page .pcs-cart-header-row .pcs-cart-title {
        text-align: center;
        white-space: normal;
        font-size: 1.35rem;
        width: 100%;
    }

    body.ff-cart-page .pcs-cart-header-actions {
        justify-content: center;
        justify-self: stretch;
        width: 100%;
        gap: 8px;
    }

    body.ff-cart-page .pcs-cart-header-btn {
        flex: 1 1 auto;
        min-height: 40px;
        font-size: 0.78rem !important;
        padding: 8px 12px !important;
    }

    /* Columns already stack via cart-page @992; tighten gaps */
    body.ff-cart-page .pcs-cart-layout-flex-container {
        gap: 16px !important;
    }

    body.ff-cart-page .pcs-cart-summary-column {
        margin-top: 8px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    body.ff-cart-page .pcs-summary-checkout-row {
        gap: 14px !important;
        width: 100%;
    }

    body.ff-cart-page .pcs-summary-totals-panel,
    body.ff-cart-page .pcs-summary-payment-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Order summary card fills the column */
    body.ff-cart-page .pcs-summary-totals-panel.order-summary-container {
        padding: 16px 14px 14px !important;
        border-radius: 16px;
        width: 100%;
        box-sizing: border-box;
    }

    body.ff-cart-page .pcs-summary-totals-panel h2 {
        text-align: center;
        font-size: 1.05rem;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    body.ff-cart-page .pcs-summary-totals-panel .order-details > div {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    body.ff-cart-page .pcs-summary-totals-panel .order-details > .pcs-order-summary-total-row {
        padding: 14px 14px !important;
        border-radius: 12px;
        margin-top: 8px !important;
    }

    body.ff-cart-page .pcs-summary-totals-panel #pcs-order-summary-total {
        font-size: 1.25em !important;
    }

    /* Coupon: stack on phones for a clean centered block */
    body.ff-cart-page .pcs-coupon-block,
    body.ff-cart-page .pcs-summary-totals-panel .pcs-coupon-block {
        margin-top: 14px;
        text-align: center;
    }

    body.ff-cart-page .pcs-coupon-label {
        text-align: center;
        width: 100%;
    }

    body.ff-cart-page .pcs-coupon-field {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
    }

    body.ff-cart-page .pcs-coupon-input {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px;
        font-size: 16px;
        box-sizing: border-box;
        text-align: center;
    }

    body.ff-cart-page .pcs-coupon-apply-btn {
        width: 100%;
        min-height: 44px;
        font-size: 0.95rem;
    }

    /* Checkout panel */
    body.ff-cart-page .order-summary-payment-container {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 16px 14px 18px !important;
        border-radius: 16px;
        box-sizing: border-box;
    }

    body.ff-cart-page .order-summary-payment-container h2 {
        text-align: center;
        font-size: 1.05rem;
        margin-bottom: 14px;
        padding-bottom: 10px;
    }

    body.ff-cart-page #checkout-section {
        gap: 10px;
        width: 100%;
        align-items: stretch;
    }

    body.ff-cart-page #checkout-section .pcs-button,
    body.ff-cart-page #checkout-section button.pcs-button,
    body.ff-cart-page .pcs-checkout-button-login,
    body.ff-cart-page .pcs-checkout-button-guest,
    body.ff-cart-page .pcs-checkout-button-pay-later,
    body.ff-cart-page .pcs-checkout-button-pay-now {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
        border-radius: 12px !important;
        font-size: 0.95rem !important;
        letter-spacing: 0.01em;
    }

    /* Guest Pay Later / Pay Now stay in their own row containers; buttons themselves are side-by-side via checkout-panel.css */
    body.ff-cart-page .pcs-guest-pay-buttons,
    body.ff-cart-page #guest-pay-buttons,
    body.ff-cart-page .guest-pay-options {
        width: 100% !important;
    }

    body.ff-cart-page #logged-in-checkout-buttons-container,
    body.ff-cart-page #guest-checkout-buttons-container {
        width: 100%;
        align-items: stretch;
    }

    body.ff-cart-page .pcs-checkout-divider,
    body.ff-cart-page .pcs-checkout-divider--logged-in {
        margin: 10px 0 !important;
        width: 100%;
    }

    body.ff-cart-page .accepted-payments,
    body.ff-cart-page .pcs-accepted-payments-note {
        text-align: center;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Notes field */
    body.ff-cart-page .pcs-cart-actions--notes-only,
    body.ff-cart-page .pcs-notes-fieldset {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    body.ff-cart-page .pcs-notes-fieldset textarea,
    body.ff-cart-page #customer-notes,
    body.ff-cart-page textarea[name="customer_notes"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        min-height: 88px;
        font-size: 16px;
    }

    /* Cart table: keep readable, fill width */
    .pcs-cart-table {
        width: 100% !important;
        table-layout: auto !important;
    }

    .pcs-cart-table thead {
        display: table-header-group;
    }

    .pcs-cart-table tbody tr {
        display: table-row;
    }

    .pcs-cart-table td::before {
        display: none;
    }

    body.ff-cart-page .pcs-button {
        width: 100%;
    }
}

@media screen and (max-width: 520px) {
    body.ff-cart-page .ff-cart-main .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body.ff-cart-page .pcs-container {
        padding: 10px 8px 16px;
        border-radius: 14px;
        border-left: none;
        border-right: none;
        box-shadow: 0 4px 18px rgba(30, 41, 59, 0.07);
    }

    body.ff-cart-page .pcs-summary-totals-panel.order-summary-container,
    body.ff-cart-page .order-summary-payment-container {
        padding: 14px 12px 16px !important;
        border-radius: 14px;
    }

    body.ff-cart-page .pcs-cart-header-row {
        padding: 10px;
    }

    body.ff-cart-page .pcs-cart-header-row .pcs-cart-title {
        font-size: 1.2rem;
    }
}