/*
 * Habillage Phidias des fenêtres Switch-to-Live (jQuery UI 1.12 dialog).
 *
 * aMember charge le thème jQuery UI par défaut (clair) : sur un site en dark navy, la
 * fenêtre sortait grise et hors charte. On ne touche PAS `.ui-dialog` globalement — tout
 * est porté par la classe `phidias-stl-dialog` posée par script.js (option `classes`),
 * donc les autres dialogues du site restent inchangés.
 *
 * Jetons repris de themes/phidias/public/css/style.css (:root) avec repli en dur, pour que
 * la fenêtre reste correcte même si elle s'ouvre sur une page qui ne charge pas le thème.
 */

/* ── Voile de fond ───────────────────────────────────────────────────────
 * Le thème jQuery UI livré par aMember pose un overlay à `opacity:.003` : la
 * fenêtre modale ne grisait donc RIEN. On rétablit un vrai voile, mais seulement
 * pendant qu'une de nos fenêtres est ouverte (classe posée sur <body> par
 * script.js) — les autres modales du site gardent leur comportement.
 */
body.phidias-stl-open .ui-widget-overlay {
    background: #04080f;
    opacity: .72;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.ui-dialog.phidias-stl-dialog {
    padding: 0;
    font-family: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    color: var(--pure-white, #F5F2EB);
    background: linear-gradient(180deg, var(--medium-navy, #0c1628) 0%, var(--deep-navy, #081020) 100%);
    border: 1px solid var(--glass-border, rgba(211, 181, 116, .12));
    border-radius: var(--border-radius, 16px);
    box-shadow: 0 32px 80px rgba(0, 0, 0, .55);
    max-width: calc(100vw - 32px);
}

/* ── En-tête ─────────────────────────────────────────────────────────── */
.ui-dialog.phidias-stl-dialog .ui-dialog-titlebar {
    padding: 20px 24px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--glass-border, rgba(211, 181, 116, .12));
    border-radius: var(--border-radius, 16px) var(--border-radius, 16px) 0 0;
}

.ui-dialog.phidias-stl-dialog .ui-dialog-title {
    float: none;
    display: block;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--pure-white, #F5F2EB);
    white-space: normal;
}

.ui-dialog.phidias-stl-dialog .ui-dialog-titlebar-close {
    right: 16px;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--glass-border, rgba(211, 181, 116, .12));
    border-radius: 10px;
    transition: background-color .2s ease, border-color .2s ease;
}

.ui-dialog.phidias-stl-dialog .ui-dialog-titlebar-close:hover {
    background: var(--gold-dim, rgba(211, 181, 116, .08));
    border-color: var(--classic-gold, #D3B574);
}

/* La croix jQuery UI est une sprite claire : on la remplace par un glyphe net. */
.ui-dialog.phidias-stl-dialog .ui-dialog-titlebar-close .ui-icon {
    background: none;
    text-indent: 0;
    overflow: visible;
    width: auto;
    height: auto;
    margin: -9px 0 0 -6px;
    font-size: 15px;
    line-height: 1;
    color: var(--cool-grey, #DDD9D0);
}

.ui-dialog.phidias-stl-dialog .ui-dialog-titlebar-close .ui-icon:before { content: '\2715'; }

/* ── Contenu ─────────────────────────────────────────────────────────── */
.ui-dialog.phidias-stl-dialog .ui-dialog-content {
    padding: 22px 24px;
    color: var(--cool-grey, #DDD9D0);
    background: transparent;
    font-size: .95rem;
    line-height: 1.55;
}

.ui-dialog.phidias-stl-dialog .ui-dialog-content h2,
.ui-dialog.phidias-stl-dialog .ui-dialog-content h3 {
    color: var(--pure-white, #F5F2EB);
}

.ui-dialog.phidias-stl-dialog .ui-dialog-content a {
    color: var(--classic-gold, #D3B574);
    font-weight: 600;
}

.ui-dialog.phidias-stl-dialog .am-info,
.ui-dialog.phidias-stl-dialog .am-error {
    padding: 12px 14px;
    border-radius: var(--border-radius-xs, 8px);
    border: 1px solid transparent;
}

.ui-dialog.phidias-stl-dialog .am-info {
    color: var(--pure-white, #F5F2EB);
    background: var(--gold-dim, rgba(211, 181, 116, .08));
    border-color: var(--glass-border, rgba(211, 181, 116, .12));
}

.ui-dialog.phidias-stl-dialog .am-error {
    color: #ffd9d4;
    background: rgba(231, 76, 60, .1);
    border-color: rgba(231, 76, 60, .35);
}

/* ── Boutons ─────────────────────────────────────────────────────────── */
.ui-dialog.phidias-stl-dialog .ui-dialog-buttonpane {
    margin: 0;
    padding: 16px 24px 20px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--glass-border, rgba(211, 181, 116, .12));
}

.ui-dialog.phidias-stl-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.ui-dialog.phidias-stl-dialog .ui-dialog-buttonpane button {
    margin: 0;
    padding: 11px 22px;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--pure-white, #F5F2EB);
    background: transparent;
    border: 1px solid var(--glass-border, rgba(211, 181, 116, .12));
    border-radius: var(--border-radius-sm, 10px);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.ui-dialog.phidias-stl-dialog .ui-dialog-buttonpane button:hover {
    background: var(--gold-dim, rgba(211, 181, 116, .08));
    border-color: var(--classic-gold, #D3B574);
}

/* Bouton principal = le dernier ajouté par jQuery UI est le premier déclaré : on cible
   explicitement celui que script.js marque comme principal. */
.ui-dialog.phidias-stl-dialog .ui-dialog-buttonpane button.stl-btn-primary {
    color: var(--deep-navy, #081020);
    background: linear-gradient(135deg, var(--classic-gold, #D3B574), var(--light-gold, #E2C985));
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(211, 181, 116, .25);
}

.ui-dialog.phidias-stl-dialog .ui-dialog-buttonpane button.stl-btn-primary:hover {
    box-shadow: 0 6px 22px rgba(211, 181, 116, .35);
}

/* ── Choix du broker ─────────────────────────────────────────────────── */
.stl-intro {
    margin: 0 0 16px;
    color: var(--cool-grey, #DDD9D0);
}

.stl-opt {
    display: block;
    margin-bottom: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--glass-border, rgba(211, 181, 116, .12));
    border-radius: var(--border-radius-sm, 10px);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.stl-opt:last-child { margin-bottom: 0; }

.stl-opt:hover { background: var(--gold-dim, rgba(211, 181, 116, .08)); }

/* État sélectionné — :has() couvre les navigateurs récents, .is-selected est posé par
   script.js pour tous les autres. */
.stl-opt.is-selected,
.stl-opt:has(input:checked) {
    background: var(--gold-dim, rgba(211, 181, 116, .08));
    border-color: var(--classic-gold, #D3B574);
    box-shadow: 0 0 0 1px var(--classic-gold, #D3B574) inset;
}

.stl-opt-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stl-opt-head input[type=radio] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--classic-gold, #D3B574);
    flex: 0 0 auto;
}

.stl-opt-name {
    font-size: .975rem;
    font-weight: 700;
    color: var(--pure-white, #F5F2EB);
}

.stl-badge {
    margin-left: auto;
    padding: 3px 10px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    border-radius: 100px;
    white-space: nowrap;
}

.stl-badge-cost {
    color: var(--warning-orange, #f59e0b);
    background: rgba(245, 158, 11, .12);
    border: 1px solid rgba(245, 158, 11, .3);
}

.stl-badge-free {
    color: var(--emerald-green, #27AE60);
    background: rgba(39, 174, 96, .12);
    border: 1px solid rgba(39, 174, 96, .3);
}

.stl-opt-desc {
    display: block;
    margin-top: 8px;
    padding-left: 26px;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--cool-grey, #DDD9D0);
    opacity: .85;
}

/* ── Checklist des prérequis (même fenêtre, autre contenu) ───────────── */
.ui-dialog.phidias-stl-dialog .precondition-list li { padding: .3em 0; }

@media (max-width: 480px) {
    .ui-dialog.phidias-stl-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { flex-direction: column-reverse; }
    .ui-dialog.phidias-stl-dialog .ui-dialog-buttonpane button { width: 100%; }
}