/* Backdrop masqué : overlay + flou + halo portés par le modal lui-même */
body:has(.commercify-modal.show) .modal-backdrop {
    display: none !important;
}

/* Overlay plein écran avec halo radial (même esprit que .swal-container-custom) */
.commercify-modal,
.modal.commercify-modal,
.modal.fade.commercify-modal,
.modal.show.commercify-modal,
.modal.fade.show.commercify-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    margin: 0 !important;
    padding: 1rem !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    background:
        radial-gradient(circle at 50% 35%, rgba(37, 99, 235, 0.16), transparent 60%),
        rgba(3, 7, 14, 0.66) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    overflow: hidden !important;
}

.commercify-modal:not(.show),
.commercify-modal.fade:not(.show) {
    display: none !important;
}

.commercify-modal.show,
.commercify-modal.fade.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Boîte centrée, largeur confortable plutôt qu'un pourcentage de viewport brut */
.commercify-modal .modal-dialog {
    margin: auto !important;
    max-width: min(92vw, 30rem) !important;
    width: 100% !important;
    max-height: calc(100vh - 2rem) !important;
    z-index: 999999 !important;
}

.commercify-modal .modal-content.commercify-modal-content {
    overflow: hidden !important;
    border: 1px solid var(--hp-accent, #2563eb) !important;
    border-radius: 0 !important;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.55) !important;
    background: var(--hp-modal-surface, #0e1a2b) !important;
    color: var(--hp-modal-text, #eaf1fb) !important;
    min-height: 120px !important;
    max-height: calc(100vh - 2rem) !important;
    display: flex !important;
    flex-direction: column !important;
    animation: commercifyModalPop 0.18s ease !important;
}

@keyframes commercifyModalPop {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

/* Header une ligne, fondu dans la surface (pas de bandeau plat séparé) */
.commercify-modal .modal-header.commercify-modal-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 1.1rem 3.5rem 0.9rem 1.5rem !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-shrink: 0 !important;
}

.commercify-modal .modal-title.commercify-modal-title {
    margin: 0 !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--hp-modal-text, #eaf1fb) !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* Bouton fermer — rond, discret, s'illumine à l'accent au survol */
.commercify-modal .commercify-modal-close {
    position: absolute !important;
    top: 50% !important;
    right: 1rem !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 0 !important;
    color: var(--hp-modal-text, #eaf1fb) !important;
    cursor: pointer !important;
    transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease !important;
    z-index: 10 !important;
}

.commercify-modal .commercify-modal-close:hover {
    background: var(--hp-accent, #2563eb) !important;
    border-color: var(--hp-accent, #2563eb) !important;
    color: #ffffff !important;
    transform: translateY(-50%) scale(1.06) !important;
}

.commercify-modal .commercify-modal-close:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--hp-accent-tint, rgba(37, 99, 235, 0.2)) !important;
}

.commercify-modal .commercify-modal-close svg {
    width: 18px !important;
    height: 18px !important;
}

/* Body */
.commercify-modal .modal-body.commercify-modal-body {
    padding: 1.1rem 1.5rem 1.25rem !important;
    background: transparent !important;
    color: var(--hp-modal-text, #eaf1fb) !important;
    flex: 1 !important;
    overflow-y: auto !important;
}

.commercify-modal .modal-body .text-muted {
    color: rgba(234, 241, 251, 0.7) !important;
}

.commercify-modal .modal-body .text-warning {
    color: #fbbf24 !important;
}

.commercify-modal .modal-body .h5 {
    color: var(--hp-modal-text, #eaf1fb) !important;
}

/* Footer */
.commercify-modal .modal-footer.commercify-modal-footer {
    padding: 1.1rem 1.5rem !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    gap: 0.6rem !important;
}

/* Grille d'actions : jusqu'à 3 boutons d'action + "Fermer" (toujours en dernier dans le
   tableau PHP), présentés en grille 2 colonnes plutôt qu'en ligne compressée — "Fermer"
   (dernier enfant) prend toute la largeur pour bien le distinguer des actions réelles. */
.commercify-modal .modal-footer.commercify-modal-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.6rem !important;
}

.commercify-modal .modal-footer.commercify-modal-actions > .btn,
.commercify-modal .modal-footer.commercify-modal-actions > a.btn {
    width: 100% !important;
    margin-left: 0 !important;
    text-align: center !important;
}

.commercify-modal .modal-footer.commercify-modal-actions > *:last-child {
    grid-column: 1 / -1 !important;
}

@media (max-width: 560px) {
    .commercify-modal .modal-footer.commercify-modal-actions {
        grid-template-columns: 1fr !important;
    }
    .commercify-modal .modal-footer.commercify-modal-actions > *:last-child {
        grid-column: 1 !important;
    }
}

/* Boutons — mêmes intentions que la grille d'icônes de la page (bleu/vert/rouge/slate),
   coins arrondis cohérents avec .cfy-ad-action-btn (8px) et les prompts PIN (0.375rem). */
.commercify-modal .btn-cfy-primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border: 1px solid #2563eb !important;
}
.commercify-modal .btn-cfy-primary:hover,
.commercify-modal .btn-cfy-primary:focus {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.commercify-modal .btn-cfy-accent {
    background: var(--hp-accent, #2563eb) !important;
    color: #ffffff !important;
    border: 1px solid var(--hp-accent, #2563eb) !important;
}
.commercify-modal .btn-cfy-accent:hover,
.commercify-modal .btn-cfy-accent:focus {
    background: var(--hp-accent-strong, #1d4ed8) !important;
    border-color: var(--hp-accent-strong, #1d4ed8) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.commercify-modal .btn-cfy-danger {
    background: #ef4444 !important;
    color: #ffffff !important;
    border: 1px solid #ef4444 !important;
}
.commercify-modal .btn-cfy-danger:hover,
.commercify-modal .btn-cfy-danger:focus {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* État courant (déjà actif) : contour accent sur fond teinté, ni plein ni neutre */
.commercify-modal .btn-cfy-outline {
    background: var(--hp-accent-tint, rgba(37, 99, 235, 0.14)) !important;
    color: var(--hp-modal-text, #eaf1fb) !important;
    border: 1px solid var(--hp-accent, #2563eb) !important;
}
.commercify-modal .btn-cfy-outline:hover,
.commercify-modal .btn-cfy-outline:focus {
    background: var(--hp-accent-tint, rgba(37, 99, 235, 0.22)) !important;
    color: var(--hp-modal-text, #eaf1fb) !important;
    border-color: var(--hp-accent, #2563eb) !important;
}

.commercify-modal .btn-cfy-ghost {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--hp-modal-text, #eaf1fb) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
}
.commercify-modal .btn-cfy-ghost:hover,
.commercify-modal .btn-cfy-ghost:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: var(--hp-modal-text, #eaf1fb) !important;
    transform: translateY(-1px) !important;
}

/* État déjà actif rendu <button disabled> (2026-09-14) : aucune interaction possible tant
   que l'état reste actif — pas d'effet de survol/focus, curseur explicite. */
.commercify-modal .btn:disabled,
.commercify-modal .btn[disabled] {
    cursor: not-allowed !important;
    opacity: 0.85 !important;
    pointer-events: none !important;
    transform: none !important;
}

.commercify-modal .btn {
    padding: 0.55rem 1.1rem !important;
    border-radius: 0 !important;
    font-weight: 500 !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease !important;
}
.commercify-modal .btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--hp-accent-tint, rgba(37, 99, 235, 0.2)) !important;
}
.commercify-modal .modal-footer:not(.commercify-modal-actions) .btn + .btn {
    margin-left: 0.4rem !important;
}

/* Score details modal — listes et valeurs */
.commercify-modal .commercify-modal-body-intro {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: rgba(234, 241, 251, 0.7) !important;
    margin-bottom: 1rem !important;
}

.commercify-modal .commercify-modal-score-list {
    padding-left: 1.5rem !important;
    margin: 0 0 1rem !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    color: var(--hp-modal-text, #eaf1fb) !important;
}

.commercify-modal .commercify-modal-score-list li {
    margin-bottom: 0.35rem !important;
}

.commercify-modal .commercify-score-value {
    color: var(--hp-accent, #2563eb) !important;
    font-weight: 600 !important;
}

.commercify-modal .commercify-score-value--danger {
    color: #ef4444 !important;
}

.commercify-modal .commercify-modal-score-list li.commercify-score-negative {
    color: rgba(239, 68, 68, 0.95) !important;
}

.commercify-modal .commercify-modal-score-calc {
    margin-top: 0.75rem !important;
    padding: 0.65rem 0.75rem !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 0 !important;
    color: rgba(234, 241, 251, 0.7) !important;
    list-style: none !important;
    padding-left: 0.75rem !important;
}

/* ═══ THÈME CLAIR (body.light-mode) — Dash light ═══ */
body.light-mode .commercify-modal .modal-content.commercify-modal-content {
    background: #f5f6f8 !important;
    color: #1a1d21 !important;
    border-color: #2563eb !important;
}

body.light-mode .commercify-modal .modal-header.commercify-modal-header {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .commercify-modal .modal-title.commercify-modal-title {
    color: #1a1d21 !important;
}

body.light-mode .commercify-modal .commercify-modal-close {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #1a1d21 !important;
}

body.light-mode .commercify-modal .commercify-modal-close:hover {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

body.light-mode .commercify-modal .modal-body.commercify-modal-body {
    color: #1a1d21 !important;
}

body.light-mode .commercify-modal .modal-footer.commercify-modal-footer {
    background: rgba(0, 0, 0, 0.02) !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
}

body.light-mode .commercify-modal .btn-cfy-outline {
    background: rgba(37, 99, 235, 0.1) !important;
    color: #1a1d21 !important;
    border-color: #2563eb !important;
}

body.light-mode .commercify-modal .btn-cfy-outline:hover,
body.light-mode .commercify-modal .btn-cfy-outline:focus {
    background: rgba(37, 99, 235, 0.16) !important;
    color: #1a1d21 !important;
}

body.light-mode .commercify-modal .btn-cfy-ghost {
    background: #ffffff !important;
    color: #1a1d21 !important;
    border-color: rgba(0, 0, 0, 0.14) !important;
}

body.light-mode .commercify-modal .btn-cfy-ghost:hover,
body.light-mode .commercify-modal .btn-cfy-ghost:focus {
    background: #eef0f3 !important;
    border-color: rgba(0, 0, 0, 0.24) !important;
}

body.light-mode .commercify-modal .commercify-modal-body-intro {
    color: #4a5568 !important;
}

body.light-mode .commercify-modal .commercify-modal-score-list {
    color: #1a1d21 !important;
}

body.light-mode .commercify-modal .commercify-score-value {
    color: #1d4ed8 !important;
}

body.light-mode .commercify-modal .commercify-score-value--danger {
    color: #dc2626 !important;
}

body.light-mode .commercify-modal .commercify-modal-score-list li.commercify-score-negative {
    color: #dc2626 !important;
}

body.light-mode .commercify-modal .commercify-modal-score-calc {
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #4a5568 !important;
}

/* Contenu générique body (textes, liens) en light */
body.light-mode .commercify-modal .modal-body .text-muted {
    color: #6b7280 !important;
}

body.light-mode .commercify-modal .modal-body .text-warning {
    color: #b8860b !important;
}

body.light-mode .commercify-modal .modal-body .h5 {
    color: #1a1d21 !important;
}

/* Variante large (2026-10-08) : « Signaler une annonce frauduleuse » (fiche annonce + verso des vignettes). */
.commercify-modal .modal-dialog.cfy-modal-wide {
    max-width: min(96vw, 68rem) !important;
}
.commercify-modal .cfy-report {
    padding: 1rem !important;
}
.commercify-modal .cfy-report__intro {
    margin: 0 0 1rem !important;
}
.commercify-modal .cfy-report__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    align-items: stretch !important;
}
@media (max-width: 991.98px) {
    .commercify-modal .cfy-report__grid {
        grid-template-columns: 1fr !important;
    }
}
.commercify-modal .cfy-report-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    margin: 0 !important;
    padding: 1rem !important;
    border-radius: 0 !important;
}
.commercify-modal .cfy-report-card__title {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
}
.commercify-modal .cfy-report-card__text {
    margin: 0 !important;
}
.commercify-modal .cfy-report-steps {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
}
.commercify-modal .cfy-report-step {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
}
.commercify-modal .cfy-report-step__num {
    flex: 0 0 1.6rem !important;
    height: 1.6rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
}
.commercify-modal .cfy-report-force .cfy-report-force__hint {
    margin-top: auto !important;
}

/* Score annonce (2026-10-08) : résultat du calcul en évidence + rappel en fin de modale. */
.commercify-modal .commercify-score-calc-result {
    display: inline-block !important;
    padding: 0 0.4rem !important;
}
.commercify-modal .commercify-score-result {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0 !important;
}