/* doc-project | projet/assets/css/product-configurator-v2/steps/delivery.css | Styles scopes de l etape delivery du configurateur V2 avec mise en avant premium du champ code postal, remplacement visuel du CTA d estimation par un statut dynamique avec spinner succes et erreur, mode de remise masque avant estimation, cards illustrees Livraison portail et Retrait atelier en ratio carre depuis les medias configurateur, classes pcv2 uniquement et sans effet de bord legacy. | Expose: pcv2-step--delivery, pcv2-delivery-postcode-card, pcv2-delivery-status, pcv2-delivery-mode-card, pcv2-delivery-mode-card__media | Dépend de: product-configurator-v2/base.css, media-frame.css | Impacte: affichage etape delivery V2, lisibilite de la saisie code postal, comprehension du calcul automatique des frais, choix mode de remise apres estimation | Tables: aucune */
.pcv2-step--delivery {
    scroll-margin-top: 24px
}

.pcv2-step--delivery .pcv2-summary {
    background: #fffdf8
}

.pcv2-step--delivery .pcv2-info {
    color: #5f4634
}

.pcv2-step--delivery .pcv2-delivery-postcode-card {
    display: grid;
    gap: 18px;
    margin-top: 16px;
    padding: 20px;
    border: 1px solid rgba(138,90,43,.18);
    border-radius: 24px;
    background: linear-gradient(145deg,#fffaf3,#f4e7d7);
    box-shadow: 0 18px 42px rgba(63,42,28,.1),inset 0 1px 0 rgba(255,255,255,.78)
}

.pcv2-step--delivery .pcv2-delivery-postcode-card__copy {
    display: grid;
    gap: 5px;
    text-align: center
}

.pcv2-step--delivery .pcv2-delivery-postcode-card__title {
    margin: 0;
    color: #2e1d13;
    font-size: 1.08rem;
    font-weight: 950
}

.pcv2-step--delivery .pcv2-delivery-postcode-card__hint {
    margin: 0;
    color: #6f5140;
    font-size: .94rem;
    line-height: 1.45
}

.pcv2-step--delivery .pcv2-delivery-postcode-card__actions {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 14px;
    align-items: end
}

.pcv2-step--delivery .pcv2-delivery-postcode-card__field {
    margin: 0
}

.pcv2-step--delivery .pcv2-delivery-postcode-card__field>span {
    color: #3f2a1c;
    font-size: .9rem;
    font-weight: 900
}

.pcv2-step--delivery .pcv2-delivery-postcode-input {
    min-height: 58px;
    border-width: 2px;
    border-color: rgba(138,90,43,.28);
    border-radius: 18px;
    background: #fff;
    color: #24170f;
    font-size: 1.35rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-align: center;
    box-shadow: 0 10px 24px rgba(95,60,27,.08)
}

.pcv2-step--delivery .pcv2-delivery-postcode-input:focus {
    border-color: rgba(138,90,43,.68);
    box-shadow: 0 0 0 4px rgba(138,90,43,.14),0 14px 30px rgba(95,60,27,.12);
    outline: 0
}

.pcv2-step--delivery .pcv2-delivery-estimate-button {
    display: none!important
}

.pcv2-step--delivery .pcv2-delivery-status {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 13px 16px;
    border: 1px solid rgba(138,90,43,.18);
    border-radius: 18px;
    background: rgba(255,255,255,.78);
    color: #3f2a1c;
    box-shadow: 0 10px 24px rgba(95,60,27,.08)
}

.pcv2-step--delivery .pcv2-delivery-status__icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(138,90,43,.12);
    color: #6f4320;
    font-weight: 950
}

.pcv2-step--delivery .pcv2-delivery-status__icon::before {
    content: "i";
    line-height: 1
}

.pcv2-step--delivery .pcv2-delivery-status__content {
    display: grid;
    gap: 2px;
    min-width: 0
}

.pcv2-step--delivery .pcv2-delivery-status__message {
    color: #2e1d13;
    font-size: .95rem;
    font-weight: 950
}

.pcv2-step--delivery .pcv2-delivery-status__detail {
    color: #6f5140;
    font-size: .84rem;
    line-height: 1.35
}

.pcv2-step--delivery .pcv2-delivery-status--loading {
    border-color: rgba(138,90,43,.3);
    background: linear-gradient(145deg,#fffaf3,#fff)
}

.pcv2-step--delivery .pcv2-delivery-status--loading .pcv2-delivery-status__icon {
    border: 3px solid rgba(138,90,43,.18);
    border-top-color: rgba(138,90,43,.78);
    background: transparent;
    animation: pcv2-delivery-spin .8s linear infinite
}

.pcv2-step--delivery .pcv2-delivery-status--loading .pcv2-delivery-status__icon::before {
    content: ""
}

.pcv2-step--delivery .pcv2-delivery-status--success {
    border-color: rgba(48,120,78,.28);
    background: linear-gradient(145deg,#f5fff8,#fff)
}

.pcv2-step--delivery .pcv2-delivery-status--success .pcv2-delivery-status__icon {
    background: rgba(48,120,78,.14);
    color: #21633f
}

.pcv2-step--delivery .pcv2-delivery-status--success .pcv2-delivery-status__icon::before {
    content: "✓"
}

.pcv2-step--delivery .pcv2-delivery-status--error {
    border-color: rgba(180,62,45,.3);
    background: linear-gradient(145deg,#fff6f2,#fff)
}

.pcv2-step--delivery .pcv2-delivery-status--error .pcv2-delivery-status__icon {
    background: rgba(180,62,45,.13);
    color: #963321
}

.pcv2-step--delivery .pcv2-delivery-status--error .pcv2-delivery-status__icon::before {
    content: "!"
}

@keyframes pcv2-delivery-spin {
    to {
        transform: rotate(360deg)
    }
}

.pcv2-step--delivery .pcv2-choice-grid--palette {
    grid-template-columns: repeat(auto-fit,minmax(130px,1fr));
    max-height: 260px;
    overflow: auto
}

.pcv2-step--delivery .pcv2-option-card {
    border: 1px solid rgba(82,54,34,.14);
    border-radius: 18px;
    background: #fff;
    padding: 14px;
    display: grid;
    gap: 10px
}

.pcv2-step--delivery .pcv2-option-card__select {
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    font-weight: 800;
    color: #3f2a1c;
    cursor: pointer
}

.pcv2-step--delivery .pcv2-info__image {
    display: block;
    max-width: 100%;
    border-radius: 14px;
    margin-bottom: 10px
}

.pcv2-step--delivery .pcv2-choice-card__image {
    width: 100%;
    border-radius: 12px;
    aspect-ratio: 4/3;
    object-fit: cover;
    background: #efe2d2
}

.pcv2-step--delivery .pcv2-fieldset+.pcv2-fieldset,.pcv2-step--delivery .pcv2-fieldset+.pcv2-field {
    margin-top: 12px
}
.pcv2-step--delivery [data-pcv2-delivery-mode-fieldset][hidden] {
    display: none!important
}
.pcv2-step--delivery .pcv2-choice-grid--delivery-mode {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}

.pcv2-step--delivery .pcv2-help {
    margin: .65rem 0 0;
    color: #6f655e;
    font-size: .92rem
}

.pcv2-step--delivery .pcv2-delivery-mode-card {
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0;
    padding: 14px;
    text-align: center
}

.pcv2-step--delivery .pcv2-delivery-mode-card__media {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    border: 1px solid rgba(138,90,43,.16);
    border-radius: 18px;
    background: linear-gradient(145deg,#f7efe4,#eadbc8);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72)
}

.pcv2-step--delivery .pcv2-delivery-mode-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.pcv2-step--delivery .pcv2-delivery-mode-card__fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 18px;
    color: #7a5637;
    font-size: .94rem;
    font-weight: 900;
    text-align: center
}

.pcv2-step--delivery .pcv2-delivery-mode-card__label {
    display: block;
    margin: 0;
    text-align: center;
    font-weight: 900;
    color: #24170f
}

.pcv2-step--delivery .pcv2-delivery-mode-card__price {
    display: block;
    margin: 0;
    text-align: center;
    color: #5f3c1b;
    font-size: .92rem;
    font-weight: 900
}

.pcv2-step--delivery .pcv2-delivery-mode-card:hover .pcv2-delivery-mode-card__media,.pcv2-step--delivery .pcv2-delivery-mode-card:focus-visible .pcv2-delivery-mode-card__media,.pcv2-step--delivery .pcv2-delivery-mode-card.pcv2-is-selected .pcv2-delivery-mode-card__media,.pcv2-step--delivery .pcv2-delivery-mode-card[aria-checked="true"] .pcv2-delivery-mode-card__media,.pcv2-step--delivery .pcv2-delivery-mode-card[aria-pressed="true"] .pcv2-delivery-mode-card__media {
    border-color: rgba(138,90,43,.38);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78),0 12px 26px rgba(95,60,27,.12)
}

@media (max-width:620px) {
    .pcv2-step--delivery .pcv2-delivery-postcode-card {
        padding: 16px;
        border-radius: 20px
    }

    .pcv2-step--delivery .pcv2-delivery-postcode-card__actions {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .pcv2-step--delivery .pcv2-delivery-estimate-button {
        width: 100%
    }

    .pcv2-step--delivery .pcv2-delivery-status {
        align-items: start;
        min-height: 0
    }}

@media (max-width:420px) {
    .pcv2-step--delivery .pcv2-choice-grid--delivery-mode {
        gap: 8px
    }

    .pcv2-step--delivery .pcv2-delivery-mode-card {
        gap: 8px;
        padding: 9px
    }

    .pcv2-step--delivery .pcv2-delivery-mode-card__media {
        border-radius: 14px
    }

    .pcv2-step--delivery .pcv2-delivery-mode-card__label {
        font-size: .86rem;
        line-height: 1.15
    }

    .pcv2-step--delivery .pcv2-delivery-mode-card__price {
        font-size: .84rem
    }

    .pcv2-step--delivery .pcv2-delivery-mode-card__fallback {
        padding: 10px;
        font-size: .78rem
    }}

@media (max-width:340px) {
    .pcv2-step--delivery .pcv2-choice-grid--delivery-mode {
        gap: 6px
    }

    .pcv2-step--delivery .pcv2-delivery-mode-card {
        padding: 7px
    }

    .pcv2-step--delivery .pcv2-delivery-mode-card__label {
        font-size: .78rem
    }

    .pcv2-step--delivery .pcv2-delivery-mode-card__price {
        font-size: .78rem
    }}