/* doc-project | projet/assets/css/express-estimate-modal.css | Styles dedies a la modale Estimation prix express harmonisee avec le configurateur principal, avec dialogue premium, bandeau hero commercial conserve, carte modele enrichie miniature hauteur prix d appel, progression visuelle compacte, cartes de choix plus lisibles sans icones decoratives, formulaires premium, sur-modale de selection visuelle des largeurs standard quand les piliers ne sont pas encore existants, saisie simplifiee du code postal, choix livraison a domicile ou retrait atelier avec adresse atelier visible, resultat budget interactif cochable transforme en synthese commerciale, responsive mobile desktop, centrage des boutons de validation du devis express et marge basse confortable pour eviter les CTA bloques contre le bas de page, etat de chargement robuste avec spinner HTML visible sur le CTA de reprise vers configurateur complet, correction du positionnement fixed des sur-modales imbriquees pour rester centrees sur la zone visible courante meme lorsque le devis express est deja scrolle, et centrage vertical du champ largeur sur-mesure quand il partage la ligne avec le bloc de choix standard plus haut. | Expose: classes express-estimate-* | Dépend de: variables et composants CSS front existants, media-frame.css, product-modal-delivery.css | Impacte: affichage premium de la simulation commerciale rapide, identification visuelle du modele estime, choix livraison ou retrait atelier en devis express, saisie code postal devis express seulement en livraison domicile, choix visible de la largeur standard sans piliers, alignement du champ largeur portail sur-mesure, positionnement visible des sur-modales internes, lisibilite des CTA de validation, choix express epures sans pictogrammes et feedback visuel du transfert vers configurateur complet | Tables: aucune */
.express-estimate-modal[hidden] {
    display: none !important;
}

.express-estimate-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 32px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.express-estimate-modal:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
}

.express-estimate-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 13, 10, 0.76);
    opacity: 0;
    backdrop-filter: blur(8px);
    transition: opacity 240ms ease;
}

.express-estimate-modal:not([hidden]) .express-estimate-modal__backdrop {
    opacity: 1;
}

.express-estimate-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(1040px, 100%);
    max-height: min(92vh, 980px);
    overflow: auto;
    padding: clamp(18px, 3vw, 32px) clamp(18px, 3vw, 32px) max(clamp(54px, 8vh, 96px), calc(54px + env(safe-area-inset-bottom, 0px)));
    border-radius: 30px;
    border: 1px solid rgba(138, 90, 43, 0.24);
    background:
        radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.82), transparent 30%),
        radial-gradient(circle at top right, rgba(246, 209, 167, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,1), rgba(248,243,236,0.98));
    box-shadow:
        0 34px 70px rgba(17, 13, 10, 0.32),
        inset 0 1px 0 rgba(255,255,255,0.88);
    opacity: 0;
    transition: opacity 260ms ease;
}

.express-estimate-modal:not([hidden]) .express-estimate-modal__dialog {
    opacity: 1;
}

.express-estimate-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: #f4ede3;
    color: var(--accent-dark);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    box-shadow:
        0 10px 24px rgba(31, 26, 23, 0.14),
        inset 0 1px 0 rgba(255,255,255,0.78);
}

.express-estimate-modal__close:hover,
.express-estimate-modal__close:focus-visible {
    background: #fff8ef;
    box-shadow:
        0 0 0 4px rgba(138, 90, 43, 0.14),
        0 12px 26px rgba(31, 26, 23, 0.16);
    outline: none;
}

.express-estimate-modal__header {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: clamp(16px, 3vw, 24px);
    align-items: stretch;
    margin: 0 50px 22px 0;
    padding: clamp(18px, 3vw, 26px);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(138, 90, 43, 0.20);
    border-radius: 26px;
    background:
        radial-gradient(circle at 100% 0%, rgba(246, 209, 167, 0.34), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,243,236,0.90));
    box-shadow:
        0 18px 42px rgba(31, 26, 23, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.84);
}

.express-estimate-modal__header::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 0;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(95, 60, 27, 0.94), rgba(194, 141, 89, 0.42), transparent);
}

.express-estimate-modal__header-copy {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    gap: 10px;
}

.express-estimate-modal__header h3 {
    margin: 0;
    color: var(--accent-dark);
    font-size: clamp(1.7rem, 4vw, 2.65rem);
    line-height: 1.08;
}

.express-estimate-modal__lead {
    max-width: 58ch;
    margin: 0;
    color: rgba(31, 26, 23, 0.78);
    font-size: clamp(1rem, 2vw, 1.08rem);
    line-height: 1.55;
}

.express-estimate-modal__trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.express-estimate-modal__trust-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid rgba(138, 90, 43, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--accent-dark);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
}

.express-estimate-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 18px;
}

.express-estimate-progress__step {
    flex: 1 1 126px;
    padding: 9px 10px;
    border: 1px solid rgba(138, 90, 43, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--accent-dark);
    font-size: 0.78rem;
    font-weight: 900;
    text-align: center;
}

.express-estimate-model-card {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(138, 90, 43, 0.18);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,243,236,0.90));
    box-shadow:
        0 12px 24px rgba(31, 26, 23, 0.07),
        inset 0 1px 0 rgba(255,255,255,0.76);
}

.express-estimate-model-card--result {
    border-color: rgba(95, 60, 27, 0.18);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,242,235,0.92));
}

.express-estimate-model-card__media {
    min-height: 72px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(244, 237, 227, 0.95);
}

.express-estimate-model-card--no-image .express-estimate-model-card__media {
    display: none;
}

.express-estimate-model-card--no-image {
    grid-template-columns: 1fr;
}

.express-estimate-model-card__body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.express-estimate-model-card__eyebrow {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.express-estimate-model-card strong {
    color: var(--accent-dark);
    font-size: clamp(1.02rem, 2.8vw, 1.28rem);
    line-height: 1.2;
}

.express-estimate-model-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.express-estimate-model-card__pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(138, 90, 43, 0.10);
    color: var(--accent-dark);
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1.2;
}

.express-estimate-model-card__pill[hidden] {
    display: none;
}

.express-estimate-form,
.express-estimate-result {
    display: grid;
    gap: 18px;
}

.express-estimate-step {
    display: grid;
    gap: 14px;
    padding: clamp(18px, 3vw, 22px);
    border: 1px solid rgba(138, 90, 43, 0.16);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,243,236,0.96));
    box-shadow:
        0 12px 28px rgba(31, 26, 23, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.78);
    position: relative;
    overflow: hidden;
}

.express-estimate-step::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(138, 90, 43, 0.9), rgba(194, 141, 89, 0.35));
}

.express-estimate-step h4,
.express-estimate-result h4 {
    margin: 0;
    color: var(--accent-dark);
    font-size: 1.02rem;
    line-height: 1.35;
}

.express-estimate-step__title-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.express-estimate-step__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(95, 60, 27, 0.96), rgba(74, 44, 26, 0.96));
    color: #fff8ef;
    font-size: 0.84rem;
    font-weight: 900;
    box-shadow:
        0 10px 20px rgba(31, 26, 23, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.express-estimate-step__hint,
.express-estimate-status,
.express-estimate-result__notice,
.express-estimate-result__distance {
    margin: 0;
    color: var(--muted);
    font-size: 0.93rem;
    line-height: 1.5;
}

.express-estimate-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.express-estimate-delivery-mode {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
}

.express-estimate-delivery-mode legend {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--accent-dark);
    font-weight: 800;
}

.express-estimate-delivery-mode-card {
    min-height: 132px;
}

.express-estimate-workshop-address {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid rgba(138, 90, 43, 0.18);
    border-radius: 16px;
    background: rgba(255, 248, 239, 0.86);
    color: var(--text);
    font-size: 0.94rem;
    line-height: 1.5;
}

.express-estimate-workshop-address[hidden] {
    display: none !important;
}

.express-estimate-workshop-address strong {
    color: var(--accent-dark);
}

.express-estimate-choice-card {
    position: relative;
    display: grid;
    gap: 10px;
    min-height: 100%;
    padding: 56px 16px 16px;
    border: 1px solid rgba(138, 90, 43, 0.18);
    border-radius: 20px;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,243,236,0.96));
    color: var(--text);
    text-align: center;
    box-shadow:
        0 12px 28px rgba(31, 26, 23, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.72);
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease,
        color 160ms ease;
}

.express-estimate-choice-card::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 14px;
    width: var(--selectable-card-indicator-size, 30px);
    height: var(--selectable-card-indicator-size, 30px);
    border: 2px solid var(--selectable-card-indicator-idle-dark, rgba(95, 60, 27, 0.92));
    border-radius: var(--selectable-card-indicator-radius, 9px);
    background: rgba(255,255,255,0.96);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);
    animation: sabatier-selectable-card-indicator-pulse 2.2s ease-in-out infinite;
}

.express-estimate-choice-card::after {
    content: "✓";
    position: absolute;
    top: 14px;
    left: 14px;
    width: var(--selectable-card-indicator-size, 30px);
    height: var(--selectable-card-indicator-size, 30px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    opacity: 0;
    transform: scale(0.82);
    transition: opacity 160ms ease, transform 160ms ease, color 160ms ease;
}

.express-estimate-choice-card.is-selected {
    border-width: 2px;
    border-color: var(--selected-border-strong);
    background: var(--selected-surface);
    box-shadow: var(--selected-shadow);
}

.express-estimate-choice-card.is-selected::before {
    border-color: var(--selected-border-strong);
    background: linear-gradient(180deg, rgba(255,251,245,1), rgba(244,230,209,0.98));
    box-shadow:
        0 0 0 3px var(--selectable-card-indicator-selected-ring, rgba(138, 90, 43, 0.14)),
        inset 0 1px 0 rgba(255,255,255,0.92);
    animation: none;
}

.express-estimate-choice-card.is-selected::after {
    color: var(--accent-dark);
    opacity: 1;
    transform: scale(1);
}

.express-estimate-choice-card:hover,
.express-estimate-choice-card:focus-within {
    border-color: rgba(138, 90, 43, 0.54);
    box-shadow:
        0 0 0 3px rgba(138, 90, 43, 0.16),
        0 18px 34px rgba(31, 26, 23, 0.12);
    outline: none;
}

.express-estimate-choice-card input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.express-estimate-choice-card span {
    display: block;
    width: 100%;
    color: var(--accent-dark);
    font-size: var(--selectable-card-title-font-size, 1.08rem);
    font-weight: 800;
    line-height: var(--selectable-card-title-line-height, 1.3);
}

.express-estimate-choice-card small,
.express-estimate-field .field-help {
    opacity: 0.76;
}

.express-estimate-conditional,
.express-estimate-address-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.express-estimate-conditional[hidden],
.express-estimate-field[hidden] {
    display: none !important;
}

.express-estimate-field {
    display: grid;
    gap: 6px;
}

#express-estimate-custom-length-field {
    min-height: 100%;
    align-content: center;
}

.express-estimate-field.product-modal-address-autocomplete {
    position: relative;
}

.express-estimate-field .product-modal-address-autocomplete__panel {
    z-index: 45;
}

.express-estimate-field--wide {
    grid-column: 1 / -1;
}

.express-estimate-field label {
    font-weight: 700;
    color: var(--accent-dark);
}

.express-estimate-field input,
.express-estimate-field select {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(138, 90, 43, 0.22);
    border-radius: 14px;
    padding: 10px 12px;
    font: inherit;
    background: rgba(255,255,255,0.96);
    color: var(--text);
}

.express-estimate-field input:focus,
.express-estimate-field select:focus {
    border-color: rgba(138, 90, 43, 0.54);
    box-shadow: 0 0 0 3px rgba(138, 90, 43, 0.14);
    outline: none;
}

.express-estimate-standard-picker-open {
    justify-self: start;
    margin-top: 4px;
}

.express-estimate-standard-picker[hidden] {
    display: none !important;
}

.express-estimate-standard-picker {
    position: fixed;
    inset: 0;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 4vw, 34px);
}

.express-estimate-standard-picker__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 13, 10, 0.72);
    backdrop-filter: blur(7px);
}

.express-estimate-standard-picker__dialog {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: min(88vh, 760px);
    overflow: auto;
    display: grid;
    gap: 14px;
    padding: clamp(18px, 4vw, 30px);
    border-radius: 24px;
    border: 1px solid rgba(138, 90, 43, 0.22);
    background:
        radial-gradient(circle at top right, rgba(246, 209, 167, 0.20), transparent 35%),
        linear-gradient(180deg, rgba(255,255,255,1), rgba(248,243,236,0.98));
    box-shadow:
        0 28px 60px rgba(17, 13, 10, 0.34),
        inset 0 1px 0 rgba(255,255,255,0.88);
}

.express-estimate-standard-picker__dialog h5,
.express-estimate-standard-picker__help,
.express-estimate-standard-picker__empty {
    margin: 0;
}

.express-estimate-standard-picker__dialog h5 {
    color: var(--accent-dark);
    font-size: clamp(1.35rem, 4vw, 2rem);
    line-height: 1.12;
}

.express-estimate-standard-picker__help,
.express-estimate-standard-picker__empty {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.express-estimate-standard-picker__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: #f4ede3;
    color: var(--accent-dark);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}

.express-estimate-standard-picker__close:hover,
.express-estimate-standard-picker__close:focus-visible {
    background: #fff8ef;
    box-shadow: 0 0 0 4px rgba(138, 90, 43, 0.14);
    outline: none;
}

.express-estimate-standard-picker__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.express-estimate-standard-picker-card {
    position: relative;
    display: grid;
    gap: 8px;
    min-height: 112px;
    padding: 18px 16px 16px 58px;
    border: 1px solid rgba(138, 90, 43, 0.18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,243,236,0.96));
    color: var(--text);
    text-align: left;
    cursor: pointer;
    box-shadow:
        0 12px 28px rgba(31, 26, 23, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.72);
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.express-estimate-standard-picker-card::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 16px;
    width: var(--selectable-card-indicator-size, 30px);
    height: var(--selectable-card-indicator-size, 30px);
    border: 2px solid var(--selectable-card-indicator-idle-dark, rgba(95, 60, 27, 0.92));
    border-radius: var(--selectable-card-indicator-radius, 9px);
    background: rgba(255,255,255,0.96);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);
    animation: sabatier-selectable-card-indicator-pulse 2.2s ease-in-out infinite;
}

.express-estimate-standard-picker-card::after {
    content: "✓";
    position: absolute;
    top: 18px;
    left: 16px;
    width: var(--selectable-card-indicator-size, 30px);
    height: var(--selectable-card-indicator-size, 30px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 14px;
    font-weight: 900;
    opacity: 0;
    transform: scale(0.82);
    transition: opacity 160ms ease, transform 160ms ease, color 160ms ease;
}

.express-estimate-standard-picker-card:hover,
.express-estimate-standard-picker-card:focus-visible {
    border-color: rgba(138, 90, 43, 0.54);
    box-shadow:
        0 0 0 3px rgba(138, 90, 43, 0.16),
        0 18px 34px rgba(31, 26, 23, 0.12);
    outline: none;
}

.express-estimate-standard-picker-card.is-selected {
    border-width: 2px;
    border-color: var(--selected-border-strong);
    background: var(--selected-surface);
    box-shadow: var(--selected-shadow);
}

.express-estimate-standard-picker-card.is-selected::before {
    border-color: var(--selected-border-strong);
    background: linear-gradient(180deg, rgba(255,251,245,1), rgba(244,230,209,0.98));
    box-shadow:
        0 0 0 3px var(--selectable-card-indicator-selected-ring, rgba(138, 90, 43, 0.14)),
        inset 0 1px 0 rgba(255,255,255,0.92);
    animation: none;
}

.express-estimate-standard-picker-card.is-selected::after {
    color: var(--accent-dark);
    opacity: 1;
    transform: scale(1);
}

.express-estimate-standard-picker-card__title {
    color: var(--accent-dark);
    font-size: 1.12rem;
    font-weight: 900;
    line-height: 1.18;
}

.express-estimate-standard-picker-card__detail {
    color: rgba(17, 14, 12, 0.74);
    font-size: 0.9rem;
    line-height: 1.42;
}

.express-estimate-actions {
    display: grid;
    gap: 10px;
    justify-items: center;
    padding: clamp(18px, 3vw, 24px);
    border: 1px solid rgba(138, 90, 43, 0.20);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,243,236,0.90));
    text-align: center;
}

.express-estimate-actions .button {
    justify-content: center;
    margin-top: 0;
    min-width: min(100%, 280px);
}

.express-estimate-status.is-error {
    color: var(--error);
    font-weight: 700;
}

.express-estimate-status.is-success {
    color: var(--success);
    font-weight: 700;
}

.express-estimate-result {
    margin-top: 6px;
    padding: clamp(18px, 3vw, 26px);
    border: 1px solid rgba(95, 60, 27, 0.24);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(246, 209, 167, 0.22), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,243,236,0.95));
    box-shadow:
        0 24px 52px rgba(31, 26, 23, 0.14),
        inset 0 1px 0 rgba(255,255,255,0.80);
}

.express-estimate-result[hidden] {
    display: none !important;
}

.express-estimate-result__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(138, 90, 43, 0.12);
}

.express-estimate-result__badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(47, 125, 75, 0.12);
    color: var(--success);
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.express-estimate-result__summary {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(138, 90, 43, 0.14);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
}

.express-estimate-result__notice {
    padding: 13px 15px;
    border: 1px dashed rgba(138, 90, 43, 0.22);
    border-radius: 16px;
    background: rgba(255, 251, 245, 0.78);
    color: rgba(31, 26, 23, 0.78);
    font-weight: 700;
}

.express-estimate-lines {
    display: grid;
    gap: 10px;
}

.express-estimate-line {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(95, 60, 27, 0.12);
    cursor: pointer;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.express-estimate-line:hover,
.express-estimate-line:focus-within {
    border-color: rgba(138, 90, 43, 0.34);
    box-shadow:
        0 12px 24px rgba(31, 26, 23, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.82);
}

.express-estimate-line.is-checked {
    border-color: rgba(111, 67, 31, 0.30);
    background: var(--selected-surface);
    box-shadow:
        0 0 0 3px rgba(138, 90, 43, 0.10),
        0 12px 26px rgba(31, 26, 23, 0.08);
}

.express-estimate-line.is-locked {
    cursor: default;
}

.express-estimate-line.is-quote-only {
    border-style: dashed;
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(247,242,235,0.88));
}

.express-estimate-line input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent-dark);
}

.express-estimate-line__copy {
    display: grid;
    gap: 3px;
}

.express-estimate-line__label {
    color: var(--accent-dark);
    font-weight: 800;
}

.express-estimate-line__description {
    font-size: 0.92rem;
    opacity: 0.72;
}

.express-estimate-line__amount {
    color: var(--accent-dark);
    font-weight: 900;
    white-space: nowrap;
}

.express-estimate-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border: 1px solid rgba(95, 60, 27, 0.16);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(95, 60, 27, 0.96), rgba(138, 90, 43, 0.88));
    box-shadow: 0 16px 32px rgba(95, 60, 27, 0.18);
}

.express-estimate-total span {
    color: rgba(255, 248, 239, 0.82);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.express-estimate-total strong {
    color: #fff8ef;
    font-size: clamp(2rem, 8vw, 3.4rem);
    font-weight: 900;
    line-height: 1;
}

.express-estimate-result__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: 0.5rem;
    margin-top: 0;
    min-width: min(100%, 360px);
    min-height: 54px;
    text-align: center;
}

.express-estimate-result__cta-spinner {
    display: none;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
}

.express-estimate-result__cta.is-loading,
.express-estimate-result__cta[aria-busy="true"] {
    pointer-events: none;
    opacity: 0.82;
    cursor: wait;
}

.express-estimate-result__cta.is-loading .express-estimate-result__cta-spinner,
.express-estimate-result__cta[aria-busy="true"] .express-estimate-result__cta-spinner {
    display: inline-block;
    animation: express-estimate-spin 0.8s linear infinite;
}

@keyframes express-estimate-spin {
    to {
        transform: rotate(360deg);
    }
}

body.has-express-estimate-modal-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .express-estimate-modal,
    .express-estimate-modal__backdrop,
    .express-estimate-modal__dialog,
    .express-estimate-choice-card,
    .express-estimate-line {
        transition: none;
    }

    .express-estimate-choice-card::before,
    .express-estimate-standard-picker-card::before,
    .express-estimate-result__cta-spinner {
        animation: none;
    }
}

@media (max-width: 720px) {
    .express-estimate-modal {
        align-items: stretch;
        padding: 0;
    }

    .express-estimate-modal__dialog {
        width: 100%;
        max-height: 100vh;
        min-height: 100vh;
        border-radius: 0;
        padding: 20px 16px max(72px, calc(72px + env(safe-area-inset-bottom, 0px)));
    }

    .express-estimate-modal__header {
        margin-right: 48px;
    }

    .express-estimate-modal__header {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .express-estimate-model-card {
        grid-template-columns: 84px minmax(0, 1fr);
    }

    .express-estimate-model-card__media {
        min-height: 58px;
    }

    .express-estimate-progress {
        display: none;
    }

    .express-estimate-choice-grid,
    .express-estimate-delivery-mode,
    .express-estimate-conditional,
    .express-estimate-address-grid,
    .express-estimate-standard-picker__cards {
        grid-template-columns: 1fr;
    }

    .express-estimate-standard-picker {
        align-items: stretch;
        padding: 0;
    }

    .express-estimate-standard-picker__dialog {
        width: 100%;
        max-height: 100vh;
        min-height: 100vh;
        border-radius: 0;
        padding: 22px 16px 30px;
    }

    .express-estimate-result__header,
    .express-estimate-total {
        display: grid;
    }

    .express-estimate-line {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .express-estimate-line__amount {
        grid-column: 2;
        justify-self: end;
    }

    .express-estimate-actions .button,
    .express-estimate-result__cta {
        width: min(100%, 360px);
    }

    .express-estimate-status {
        width: 100%;
    }
}