/*
 * Product-page COD form — POPUP DISPLAY MODE.
 *
 * Loaded only when Customizer → CASABLANCA - Checkout Form → "Checkout Form
 * Display" is set to Popup (see inc/woocommerce/checkout/init.php). An inline
 * store never receives this file, which is what guarantees the inline form
 * cannot have been touched by it.
 *
 * SCOPE
 * -----
 * Every selector here is either `.casablanca-cod-modal…` (the shell) or
 * `.casablanca-cod-popup-trigger` (the opener). Nothing in this sheet selects a
 * form element, a field, a button inside the form, the cart drawer, the
 * header, the footer, the WooCommerce checkout, or any other modal. The form
 * inside the shell keeps every rule it already had, from cod-form.css and
 * checkout.css, untouched.
 *
 * WIDTH
 * -----
 * .casablanca-modular-checkout-wrapper is `width: 100%` with no max-width of its
 * own: inline, its width comes entirely from the product summary column. The
 * shell therefore has to supply the same number, or the form would render at a
 * different size in the popup — which is the one thing this mode must not do.
 *
 *     container inner   1200 - 80 (page padding)   = 1120
 *     minus column gap  1120 - 40                  = 1080
 *     gallery (45%)     0.45 * 1120                =  504
 *     summary column    1080 - 504                 =  576
 *     minus its padding 576 - 20                   =  556px
 *
 * so the dialog is 556px and the body has NO horizontal padding, letting the
 * wrapper occupy exactly those 556px — the width it has inline today.
 *
 * Below the desktop layout the product page is a single column and the form is
 * viewport-width minus the summary column's 10px each side, so the shell's
 * padding drops to 10px and the dialog's max-width: 100% reproduces it.
 */

.casablanca-cod-modal {
    position: fixed;
    inset: 0;
    z-index: 100002;

    /*
     * The OVERLAY scrolls, not the dialog. A tall form (offers, variations,
     * coupon, summary) would otherwise need `overflow-y: auto` on the dialog,
     * and on a classic-scrollbar desktop that internal bar would eat ~15px off
     * the 556px and reflow every field inside the form.
     */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    display: flex;
    padding: 24px 10px;
}

/* The element is served with the `hidden` attribute so it is closed before any
   CSS or JS arrives. `display: flex` above would defeat that on its own. */
.casablanca-cod-modal[hidden] {
    display: none;
}

.casablanca-cod-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.55);
}

.casablanca-cod-modal-dialog {
    /*
     * `margin: auto` inside a flex container centres on both axes AND, unlike
     * align-items: center, never clips the top of a dialog taller than the
     * viewport — the overlay just scrolls to it.
     */
    margin: auto;
    position: relative;
    width: 556px;
    max-width: 100%;
    min-width: 0;
}

.casablanca-cod-modal-head {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}

.casablanca-cod-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--casablanca-text-primary, #111);
    cursor: pointer;
    box-shadow: none;
}

.casablanca-cod-modal-close svg {
    width: var(--casablanca-icon-size-xl);
    height: var(--casablanca-icon-size-xl);
}

.casablanca-cod-modal-close:focus-visible {
    outline: 2px solid var(--casablanca-brand, #531628);
    outline-offset: 2px;
}

/*
 * No horizontal padding: the wrapper is width:100%, so any padding here would
 * subtract from the 556px the form is supposed to have.
 */
.casablanca-cod-modal-body {
    position: relative;
}

/* In the popup the form's box IS the dialog, so it must never be see-through:
   Form Style → Background Opacity would otherwise show the page and the
   backdrop through the fields. The chosen colour is painted as a layer over a
   solid white base, so lowering the opacity fades the colour towards white
   instead. One element, so the base follows the border and radius exactly.
   Unset, both layers are white — the same form as before. */
.casablanca-cod-modal-body .casablanca-modular-checkout-wrapper {
    background:
        linear-gradient(var(--casablanca-checkout-bg, #fff), var(--casablanca-checkout-bg, #fff)),
        #fff;
}

/* The trigger is the existing CTA component — .casablanca-confirm-checkout-btn
   already carries its appearance from base.css and its inner layout from
   cod-form.css. The only thing added here is the disabled treatment, because
   the form's own out-of-stock rule in checkout.css is scoped under
   .casablanca-modular-checkout-wrapper and the trigger sits outside it. Values are
   copied from that rule so the two states look the same. */
.casablanca-cod-popup-trigger.is-permanently-disabled {
    background-color: #9ca3af !important;
    border-color: color-mix(in srgb, #9ca3af 70%, transparent) !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

@media (max-width: 991px) {
    /* Single-column product page: reproduce the summary column's 10px gutter
       so the form keeps the width it has inline at this breakpoint. */
    .casablanca-cod-modal {
        padding: 16px 10px;
    }
}



/* ── Preselect state ───────────────────────────────────────────────────────
 *
 * While the form sits on the page (before the popup is opened) it shows ONLY
 * its quantity-offer / variation selectors. Everything else — the header, the
 * customer fields, the coupon, the summary, the CTA — is hidden until the
 * form is moved into the modal.
 *
 * This is a visibility state, not a second layout: the form is the same node
 * with the same children in the same order, and `display: none` does not stop
 * an input being submitted, so the hidden fields (product_id, variation_id,
 * variation_attributes_json, quantity, selected_offer_index) still travel with
 * FormData exactly as they do inline.
 *
 * The `:not()` rule is deliberately open-ended rather than a list of the
 * sections to hide: a section added to the form later is hidden here by
 * default instead of silently leaking onto the product page.
 *
 * Nothing in this block can reach inline mode — the whole stylesheet is only
 * enqueued when the display mode is Popup.
 */

.casablanca-cod-preselect[hidden] {
    display: none;
}

/* The form's own box is the popup's box. On the page it must not draw a
   border, a background or padding around a bare set of swatches. */
.casablanca-modular-checkout-wrapper.is-cod-preselect {
    margin-top: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: none;
    /* Customizer → Checkout Form → Form Style → Shadow belongs to the form's
       box, which here is the popup — never to the bare swatches on the page. */
    box-shadow: none;
}

.casablanca-modular-checkout-wrapper.is-cod-preselect > .casablanca-checkout-header,
.casablanca-modular-checkout-wrapper.is-cod-preselect > .casablanca-quick-checkout-form > *:not(.casablanca-product-variations-wrapper) {
    display: none !important;
}

/* The selectors keep their own spacing from checkout.css; the wrapper's 5px
   margins are the form's internal rhythm and are not wanted on the page, where
   .product-summary's own flex gap already separates this from the CTA. */
.casablanca-modular-checkout-wrapper.is-cod-preselect .casablanca-product-variations-wrapper {
    margin: 0;
}