/**
 * ============================================================================
 * MUAADH CHECKOUT — Single source of truth for the checkout flow
 * ============================================================================
 *
 * Owns:
 *   - .muaadh-checkout (root section wrapper)
 *   - .muaadh-checkout__steps (step indicator: address → shipping → payment)
 *   - .muaadh-checkout__layout (2-col grid: main + sticky sidebar summary)
 *   - .muaadh-checkout__section* (the per-step panels inside main)
 *   - .muaadh-checkout__map-trigger / __location-success (address step)
 *   - .muaadh-checkout__address-recap (delivery recap card on shipping/payment)
 *   - .muaadh-checkout__option-trigger / __option / __option--selected
 *     (replaces legacy .provider-action / .courier-option / .muaadh-shipping-option)
 *   - .muaadh-checkout__route-info / __option-logo (tryoto fragment)
 *   - .muaadh-checkout__payment-grid / __payment-tile / __payment-form
 *   - .muaadh-checkout__summary* (sidebar — mirrors muaadh-cart__summary pattern)
 *   - .muaadh-checkout__result* (success / failed / cancelled return page)
 *
 * Rebuilt 2026-05-20 to align with Phase H11 (`.muaadh-pageframe` root)
 * and unified-identity (zero library residue, BEM all the way). The old
 * scope `.muaadh-checkout-wrapper` was dropped from the blades but the
 * CSS was never re-namespaced — leaving every rule orphaned. This file
 * replaces the entire flat CSS surface with a single BEM tree under
 * `.muaadh-checkout`, mirroring the `.muaadh-cart` pattern.
 *
 * Loaded via layout-customer.blade.php (public-facing pages only).
 * ============================================================================
 */


/* ============================================================================
 * SECTION 1 — ROOT
 * ============================================================================ */

.muaadh-checkout {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}


/* ============================================================================
 * SECTION 2 — STEP INDICATOR
 *   3 numbered circles connected by a dashed track. The active steps fill
 *   a solid progress line on top of the track. Markers swap to a check
 *   icon once the step is done (rendered by the blade as <x-icon name="check"/>).
 * ============================================================================ */

.muaadh-checkout__steps {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 var(--space-4);
    margin-bottom: var(--space-4);
}

.muaadh-checkout__steps-track,
.muaadh-checkout__steps-progress {
    position: absolute;
    top: 24px;     /* vertical centre of the 48px marker */
    height: 0;
    z-index: 1;
}

.muaadh-checkout__steps-track {
    left: calc(var(--space-4) + 24px);
    right: calc(var(--space-4) + 24px);
    border-top: var(--chassis-border-thin) dashed var(--border-default);
}

.muaadh-checkout__steps-progress {
    left: calc(var(--space-4) + 24px);
    width: 0;
    border-top: var(--chassis-border-thin) solid var(--theme-primary);
    transition: width var(--chassis-duration-normal) ease;
    z-index: 2;
}

/* Two progress widths — half (1 step done) and full (2 steps done). The
   blade picks the right one with --half / --full modifiers. */
.muaadh-checkout__steps-progress--half { width: calc(50% - var(--space-4) - 24px); }
.muaadh-checkout__steps-progress--full { width: calc(100% - 2 * (var(--space-4) + 24px)); }

.muaadh-checkout__step {
    position: relative;
    z-index: 3;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
}

.muaadh-checkout__step-marker {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--chassis-radius-circle);
    background-color: var(--theme-bg-light, var(--border-light));
    color: var(--theme-text-muted, var(--text-muted));
    font-size: var(--text-xl);
    font-weight: var(--theme-font-medium);
    line-height: 1;
}

.muaadh-checkout__step-label {
    color: var(--theme-text-muted, var(--text-muted));
    font-size: var(--text-xs);
    font-weight: var(--theme-font-medium);
    text-align: center;
    line-height: 1.3;
}

.muaadh-checkout__step--active > .muaadh-checkout__step-marker,
.muaadh-checkout__step--done   > .muaadh-checkout__step-marker {
    background-color: var(--theme-primary);
    color: var(--theme-text-white, #fff);
}

.muaadh-checkout__step--active > .muaadh-checkout__step-label,
.muaadh-checkout__step--done   > .muaadh-checkout__step-label {
    color: var(--theme-primary);
}


/* ============================================================================
 * SECTION 3 — LAYOUT (main + sticky sidebar)
 *   On wide screens: a 2-col grid (form 8fr / sidebar 4fr).
 *   On narrow screens: stacked, sidebar drops below main.
 * ============================================================================ */

.muaadh-checkout__layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.muaadh-checkout__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.muaadh-checkout__sidebar {
    position: sticky;
    top: var(--space-4);
    align-self: start;
}

@media (max-width: 991.98px) {
    .muaadh-checkout__layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .muaadh-checkout__sidebar {
        position: static;
    }
}


/* ============================================================================
 * SECTION 4 — SECTION CARD (per-step content panel)
 *   Same surface treatment as muaadh-cart__branch-section: a card with
 *   a soft header bar and padded body. Pure layout, no decoration overlap
 *   with .muaadh-panel (which is the admin panel primitive — checkout has
 *   its own visual rhythm).
 * ============================================================================ */

.muaadh-checkout__section {
    background: var(--surface-card);
    border: var(--chassis-border-thin) solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.muaadh-checkout__section-header {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--chassis-border-thin) solid var(--border-light);
    background: var(--surface-elevated);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.muaadh-checkout__section-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--theme-font-semibold);
    color: var(--text-primary);
}

.muaadh-checkout__section-body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}


/* ============================================================================
 * SECTION 5 — ADDRESS STEP (map trigger + selection feedback + note input)
 * ============================================================================ */

.muaadh-checkout__map-trigger {
    width: 100%;
    /* Inherits .muaadh-action--primary look from chassis; here we only
       size and align — keeping a single source of truth for the button
       primitive. */
}

.muaadh-checkout__location-success {
    /* Wrapped notice that appears once the user confirms a pin. The
       blade adds .muaadh-display-none until the JS removes it. */
}

.muaadh-checkout__note-input {
    width: 100%;
}


/* ============================================================================
 * SECTION 6 — ADDRESS RECAP (shown on shipping + payment steps)
 *   A compact "Delivering to: name / address / phone / email" card with
 *   an Edit pill linking back to the address step.
 * ============================================================================ */

.muaadh-checkout__address-recap {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.muaadh-checkout__address-recap-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.muaadh-checkout__address-recap-row > .muaadh-icon {
    color: var(--text-muted);
    flex-shrink: 0;
    margin-top: 2px;
}


/* ============================================================================
 * SECTION 7 — OPTION TRIGGER (the picker buttons on the shipping step)
 *   Each row is a button that opens a modal. The right side either says
 *   "Select" or shows the picked option name + price.
 * ============================================================================ */

.muaadh-checkout__option-triggers {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.muaadh-checkout__option-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-primary);
    color: var(--text-primary);
    border: var(--chassis-border-thin) solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--chassis-duration-quick) ease,
                background-color var(--chassis-duration-quick) ease;
    font: inherit;
    text-align: start;
}

.muaadh-checkout__option-trigger:hover {
    border-color: var(--action-primary, var(--theme-primary));
    background-color: var(--surface-secondary);
}

.muaadh-checkout__option-trigger-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--theme-font-medium);
}

.muaadh-checkout__option-trigger-value {
    font-size: var(--text-sm);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.muaadh-checkout__option-trigger--selected {
    border-color: var(--action-success, var(--theme-success));
    background-color: var(--theme-success-light, rgba(34, 197, 94, 0.08));
    color: var(--action-success, var(--theme-success));
}

.muaadh-checkout__option-trigger--selected .muaadh-checkout__option-trigger-value {
    color: var(--action-success, var(--theme-success));
    font-weight: var(--theme-font-medium);
}


/* ============================================================================
 * SECTION 8 — OPTION (radio cards inside the picker modals)
 *   One visual contract for both shipping methods and couriers. The
 *   hidden radio drives the state via class flips from JS.
 * ============================================================================ */

.muaadh-checkout__options-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    /* Floating-element sizing rule (CLAUDE.md): subtract the topbar so
       the list can scroll without disappearing behind it. The dvh
       declaration is a mobile-aware fallback the browser picks when
       supported. */
    max-height: calc(var(--m-safe-vh)  - var(--space-6));
    max-height: calc(var(--m-safe-dvh) - var(--space-6));
    overflow-y: auto;
}

.muaadh-checkout__option {
    position: relative;
    display: block;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-primary);
    border: var(--chassis-border-thin) solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--chassis-duration-quick) ease,
                background-color var(--chassis-duration-quick) ease,
                box-shadow      var(--chassis-duration-quick) ease;
}

.muaadh-checkout__option:hover {
    border-color: var(--action-primary, var(--theme-primary));
    background-color: var(--surface-secondary);
}

.muaadh-checkout__option--selected {
    border-color: var(--action-primary, var(--theme-primary));
    background-color: var(--theme-success-light, rgba(34, 197, 94, 0.08));
    box-shadow: 0 0 0 1px var(--action-primary, var(--theme-primary));
}

.muaadh-checkout__option--free {
    border-color: var(--action-success, var(--theme-success));
}

/* The radio is the source of truth but is visually hidden — the whole
   card is the click target (delegated handler in JS). */
.muaadh-checkout__option-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.muaadh-checkout__option-label {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    cursor: pointer;
    margin: 0;
}

.muaadh-checkout__option-main {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.muaadh-checkout__option-name {
    font-weight: var(--theme-font-semibold);
    color: var(--text-primary);
}

.muaadh-checkout__option-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.muaadh-checkout__option-meta--cod {
    color: var(--theme-warning, #f59e0b);
}

.muaadh-checkout__option-price {
    text-align: end;
    font-weight: var(--theme-font-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.muaadh-checkout__option-price--strike {
    text-decoration: line-through;
    color: var(--text-muted);
    font-weight: var(--theme-font-normal);
    margin-inline-end: var(--space-1);
}

.muaadh-checkout__courier-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--chassis-radius-circle);
    flex-shrink: 0;
    object-fit: cover;
    background: var(--surface-elevated);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}


/* ============================================================================
 * SECTION 9 — TRYOTO API FRAGMENT (route info + logo)
 *   The blade fragment _tryoto-options.blade.php uses these to render the
 *   "origin → destination" header and per-company logos.
 * ============================================================================ */

.muaadh-checkout__route-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--surface-elevated);
    border: var(--chassis-border-thin) solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.muaadh-checkout__option-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--surface-elevated);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}


/* ============================================================================
 * SECTION 10 — PAYMENT STEP (delivery summary + tile grid + form area)
 * ============================================================================ */

.muaadh-checkout__delivery-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 575.98px) {
    .muaadh-checkout__delivery-summary {
        grid-template-columns: 1fr;
    }
}

.muaadh-checkout__delivery-summary-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.muaadh-checkout__delivery-summary-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.muaadh-checkout__delivery-summary-value {
    font-weight: var(--theme-font-semibold);
    color: var(--text-primary);
}

.muaadh-checkout__delivery-summary-extra {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.muaadh-checkout__payment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-3);
}

.muaadh-checkout__payment-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--surface-primary);
    border: var(--chassis-border-thin) solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--chassis-duration-quick) ease,
                background-color var(--chassis-duration-quick) ease,
                box-shadow      var(--chassis-duration-quick) ease;
}

.muaadh-checkout__payment-tile:hover {
    border-color: var(--action-primary, var(--theme-primary));
    background-color: var(--surface-secondary);
}

.muaadh-checkout__payment-tile--selected {
    border-color: var(--action-primary, var(--theme-primary));
    background-color: var(--theme-success-light, rgba(34, 197, 94, 0.08));
    box-shadow: 0 0 0 1px var(--action-primary, var(--theme-primary));
}

.muaadh-checkout__payment-tile-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.muaadh-checkout__payment-tile-icon {
    font-size: 2rem;
    color: var(--text-muted);
    line-height: 1;
}

.muaadh-checkout__payment-tile--selected .muaadh-checkout__payment-tile-icon {
    color: var(--action-primary, var(--theme-primary));
}

.muaadh-checkout__payment-tile-name {
    font-size: var(--text-sm);
    font-weight: var(--theme-font-medium);
    color: var(--text-primary);
}

.muaadh-checkout__payment-form {
    margin-top: var(--space-4);
}


/* ============================================================================
 * SECTION 11 — SUMMARY SIDEBAR
 *   Mirrors the cart's .muaadh-cart__summary BEM tree exactly so the two
 *   surfaces feel like one family. Sticky on wide viewports (handled at
 *   the layout level via .muaadh-checkout__sidebar).
 * ============================================================================ */

.muaadh-checkout__summary {
    background: var(--surface-card);
    border: var(--chassis-border-thin) solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.muaadh-checkout__summary-title {
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-3);
    border-bottom: var(--chassis-border-thin) solid var(--border-light);
    font-size: var(--text-lg);
    font-weight: var(--theme-font-semibold);
    color: var(--text-primary);
}

.muaadh-checkout__summary-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.muaadh-checkout__summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.muaadh-checkout__summary-label {
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.muaadh-checkout__summary-label-sub {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.muaadh-checkout__summary-value {
    font-weight: var(--theme-font-medium);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.muaadh-checkout__summary-divider {
    margin: var(--space-2) 0;
    border: 0;
    border-top: var(--chassis-border-thin) solid var(--border-light);
}

.muaadh-checkout__summary-row--total {
    padding-top: var(--space-2);
    font-size: var(--text-base);
}

.muaadh-checkout__summary-row--total .muaadh-checkout__summary-label {
    color: var(--text-primary);
    font-weight: var(--theme-font-semibold);
}

.muaadh-checkout__summary-value--total {
    color: var(--theme-primary);
    font-size: var(--text-xl);
    font-weight: var(--theme-font-bold);
}

.muaadh-checkout__summary-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--chassis-border-thin) solid var(--border-light);
}

.muaadh-checkout__summary-secure {
    margin: var(--space-3) 0 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    width: 100%;
}


/* ============================================================================
 * SECTION 12 — MAP MODAL HELPERS
 *   The map container + loading overlay used by the address step. The
 *   modal chrome itself comes from <x-muaadh-dialog>; these are the
 *   inner content tweaks.
 * ============================================================================ */

.muaadh-checkout__map-wrapper {
    position: relative;
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.muaadh-checkout__map-canvas {
    width: 100%;
    height: 420px;
    background: var(--surface-elevated);
}

.muaadh-checkout__map-search {
    position: absolute;
    top: var(--space-2);
    inset-inline-start: var(--space-2);
    inset-inline-end: var(--space-2);
    z-index: 5;
}

.muaadh-checkout__map-loader {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    z-index: 10;
}

.muaadh-checkout__map-loader.active {
    display: flex;
}

.muaadh-checkout__map-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-elevated);
    border-radius: var(--radius-md);
}

.muaadh-checkout__map-coords {
    flex: 1 1 auto;
    min-width: 0;
}

.muaadh-checkout__map-coords-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: 2px;
}

.muaadh-checkout__map-coords-value {
    font-weight: var(--theme-font-semibold);
    color: var(--text-primary);
    word-break: break-word;
}

.muaadh-checkout__map-buttons {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}


/* ============================================================================
 * SECTION 13 — RETURN PAGE (success / failed / cancelled / pending)
 * ============================================================================ */

.muaadh-checkout__result {
    background: var(--surface-card);
    border: var(--chassis-border-thin) solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    max-width: 720px;
    margin-inline: auto;
}

.muaadh-checkout__result-icon {
    font-size: 4rem;
    line-height: 1;
}

.muaadh-checkout__result-icon--success { color: var(--theme-success); }
.muaadh-checkout__result-icon--failed  { color: var(--theme-danger); }
.muaadh-checkout__result-icon--cancelled { color: var(--theme-warning); }
.muaadh-checkout__result-icon--pending { color: var(--theme-info); }

.muaadh-checkout__result-title {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--theme-font-semibold);
    color: var(--text-primary);
}

.muaadh-checkout__result-title--failed { color: var(--theme-danger); }

.muaadh-checkout__result-message {
    margin: 0;
    color: var(--text-muted);
    max-width: 480px;
}

.muaadh-checkout__result-details {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-elevated);
    border-radius: var(--radius-md);
}

@media (max-width: 575.98px) {
    .muaadh-checkout__result-details {
        grid-template-columns: 1fr 1fr;
    }
}

.muaadh-checkout__result-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: start;
}

.muaadh-checkout__result-detail-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.muaadh-checkout__result-detail-value {
    font-weight: var(--theme-font-semibold);
    color: var(--text-primary);
    word-break: break-word;
}

.muaadh-checkout__result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

.muaadh-checkout__result-extra {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: var(--chassis-border-thin) solid var(--border-light);
}