/* ============ CHECKOUT — LIVRAISON (step 3) ============
 * Lot 6 (2026-05-08) — feat/theme-v1
 * Step livraison : sélection carrier (cards), commentaire commande,
 * options recyclable/cadeau, gestion absence transporteur.
 * Loaded at priority 68 (after addresses=67, before account=70).
 */

/* ---------- Liste des transporteurs ---------- */
body#checkout .delivery-options-list {
    margin-top: 8px;
}

body#checkout .delivery-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 24px 0;
}

/* ---------- Card transporteur ---------- */
body#checkout .delivery-option {
    display: flex;
    align-items: stretch;
    margin: 0 !important;
    padding: 18px 20px;
    background-color: #ffffff;
    border: 1.5px solid var(--as-hairline);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease,
                box-shadow .15s ease;
}

body#checkout .delivery-option:hover {
    border-color: var(--as-grey-300);
    box-shadow: 0 2px 8px rgba(15, 15, 15, 0.04);
}

/* Card sélectionnée — has() sur radio checked */
body#checkout .delivery-option:has(input[type="radio"]:checked) {
    border: 2px solid var(--as-amaranth);
    background-color: rgba(230, 34, 73, 0.04);
    box-shadow: 0 0 0 1px var(--as-amaranth);
    padding: 17.5px 19.5px;
}

/* Radio col gauche */
body#checkout .delivery-option > .col-sm-1 {
    flex: 0 0 auto;
    width: 36px;
    padding: 0;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body#checkout .delivery-option .custom-radio {
    margin: 0;
}

/* Label = contenu carrier (logo + nom + délai + prix) */
body#checkout .delivery-option .delivery-option-2 {
    flex: 1 1 auto;
    width: auto;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

body#checkout .delivery-option .delivery-option-2 > .row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* keep name | delay | price on one row (price was wrapping below) */
    gap: 16px;
    margin: 0;
}

/* Desktop nowrap override (2026-06-26) — `theme.css` force flex-wrap:wrap sur
   `…delivery-option label > .row` ET `… .carrier` avec une spécificité (1,4,x)
   qui battait les règles de base (1,3,x) : en desktop le prix wrappait sous le
   nom (.row) ET le nom passait sous l'icône (.carrier), désalignant le prix.
   On ré-affirme nowrap à >=992px avec une spécificité supérieure (ajout de
   .delivery-option-2 → (1,5,2)) sur les DEUX rows imbriquées + on neutralise le
   `col-xs-12` (100%) du name-container. Résultat : icône·nom·délai·prix sur une
   ligne, prix aligné au nom (deltaY=0). Le wrap responsive <992px est préservé. */
@media (min-width: 992px) {
    body#checkout section.checkout-step .delivery-options .delivery-option .delivery-option-2 > .row {
        flex-wrap: nowrap;
        align-items: center;
    }

    body#checkout section.checkout-step .delivery-options .delivery-option .delivery-option-2 .carrier {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    body#checkout section.checkout-step .delivery-options .delivery-option .delivery-option-2 .carriere-name-container {
        width: auto;
        flex: 0 1 auto;
        min-width: 0;
    }
}

/* Logo + nom carrier */
body#checkout .delivery-option .col-sm-5 {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Bootstrap col-xs-12 on the name container forces width:100% (~450px),
   which pushed the price column to wrap onto a 2nd line — neutralise it. */
body#checkout .delivery-option .carriere-name-container {
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
}

body#checkout .delivery-option .carrier {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

body#checkout .delivery-option .carrier-logo {
    flex: 0 0 auto;
    padding: 0;
    width: 60px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--as-grey-100);
    border-radius: 6px;
    overflow: hidden;
}

body#checkout .delivery-option .carrier-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

body#checkout .delivery-option .carrier-name,
body#checkout .delivery-option .carriere-name-container .h6 {
    font-family: var(--as-font-family);
    font-size: 16px;
    font-weight: 600;
    color: var(--as-grey-900);
    margin: 0;
    line-height: 1.3;
}

/* Délai */
body#checkout .delivery-option .col-sm-4 {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

body#checkout .delivery-option .carrier-delay {
    color: var(--as-grey-500);
    font-size: 14px;
    line-height: 1.4;
}

/* Prix */
body#checkout .delivery-option .col-sm-3 {
    flex: 0 0 auto;
    margin-left: auto; /* flush price to the right edge of the tile */
    padding: 0;
    text-align: right;
}

body#checkout .delivery-option .carrier-price {
    font-family: var(--as-font-family);
    font-size: 17px;
    font-weight: 700;
    color: var(--as-grey-900);
    white-space: nowrap;
}

/* Carrier extra content (e.g. relay points selector) */
body#checkout .carrier-extra-content {
    margin: 8px 0 12px 0;
    padding: 16px 20px;
    background-color: var(--as-grey-100);
    border-radius: 8px;
    font-size: 14px;
}

/* ---------- Options commande : commentaire / recyclable / cadeau ---------- */
body#checkout .order-options {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--as-hairline);
}

body#checkout #delivery {
    margin-bottom: 20px;
}

body#checkout #delivery label[for="delivery_message"] {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--as-grey-700);
}

body#checkout #delivery textarea#delivery_message {
    margin: 0;
    min-height: 80px;
}

/* Checkboxes recyclable / cadeau — wrap */
body#checkout .order-options .custom-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
}

body#checkout .order-options .custom-checkbox label {
    margin: 0;
    font-weight: 400;
    color: var(--as-grey-900);
    font-size: 15px;
    cursor: pointer;
}

/* Gift collapse / message */
body#checkout #gift {
    margin-top: 12px;
    padding: 16px 18px;
    background-color: var(--as-grey-100);
    border-radius: 8px;
    border-left: 3px solid var(--as-amaranth);
}

body#checkout #gift label[for="gift_message"] {
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--as-grey-700);
}

body#checkout #gift textarea#gift_message {
    margin: 0;
    background-color: #ffffff !important;
}

/* ---------- Submit container ---------- */
body#checkout .delivery-options-list .keep-going-container {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

/* ---------- Pas de transporteur disponible ---------- */
body#checkout .delivery-options-list > .alert-danger {
    margin: 0;
}

/* ---------- Hooks before/after carrier ---------- */
body#checkout #hook-display-before-carrier:not(:empty),
body#checkout #hook-display-after-carrier:not(:empty),
body#checkout #extra_carrier:not(:empty) {
    margin: 16px 0;
}

/* ---------- Mobile (≤ 575px) ---------- */
@media (max-width: 575.98px) {
    body#checkout .delivery-option {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 14px 16px;
    }

    body#checkout .delivery-option:has(input[type="radio"]:checked) {
        padding: 13.5px 15.5px;
    }

    body#checkout .delivery-option .delivery-option-2 > .row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }

    body#checkout .delivery-option .col-sm-5 {
        width: 100%;
    }

    body#checkout .delivery-option .col-sm-4 {
        width: 100%;
    }

    body#checkout .delivery-option .col-sm-3 {
        width: 100%;
        text-align: left;
    }

    body#checkout .delivery-option .carrier-price {
        font-size: 18px;
        color: var(--as-amaranth);
    }

    body#checkout .delivery-options-list .keep-going-container .btn-primary {
        width: 100%;
    }
}

/* ---------- Tablet (576-991px) ---------- */
@media (min-width: 576px) and (max-width: 991.98px) {
    body#checkout .delivery-option {
        padding: 16px 18px;
    }

    body#checkout .delivery-option .delivery-option-2 > .row {
        flex-wrap: wrap;
    }

    body#checkout .delivery-option .col-sm-5 {
        flex: 1 1 100%;
        margin-bottom: 6px;
    }
}

/* ============ Lot I P1-a (2026-05-31) — alignement design Claude V1 ============
 * Icône mono par transporteur (fallback quand le carrier n'a pas de logo,
 * ex. Click & Collect), correction du nom tronqué, prix « offerte » en vert.
 */

/* ---------- Icône mono carrier (truck / bolt / store) ---------- */
body#checkout .delivery-option .carrier-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--as-grey-100);
    border-radius: 8px;
    color: var(--as-grey-900);
}

body#checkout .delivery-option .carrier-icon svg {
    width: 22px;
    height: 22px;
}

body#checkout .delivery-option:has(input[type="radio"]:checked) .carrier-icon {
    background-color: var(--as-amaranth-soft);
    color: var(--as-amaranth);
}

/* ---------- Nom transporteur sur une ligne, collé à l'icône ----------
 * `.carrier` hérite justify-content:space-between de la classe `.row` (PS),
 * ce qui écartait l'icône et le nom. flex-start les rapproche.
 */
body#checkout .delivery-option .carrier {
    justify-content: flex-start;
    min-width: 0;
}

body#checkout .delivery-option .carriere-name-container {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0;
}

body#checkout .delivery-option .carrier-name {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

/* ---------- Prix « offerte » / gratuit en vert success ---------- */
body#checkout .delivery-option .carrier-price--free {
    color: var(--as-success-fg);
}