/* ==========================================================
   WeddingPart — Popup conseil "Plus confortable sur ordi"
   --------------------------------------------------------
   S'affiche une seule fois par outil/device, sur les outils
   legacy qui n'ont pas encore été ré-adaptés mobile (plan-de-
   table, plan-interactif, moodboard, retroplanning…).
   ========================================================== */

.idd-dh-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(29,24,25,0.55); /* TODO: tokenize — ink overlay */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-lg) var(--ease), visibility var(--duration-lg) var(--ease);
    padding: var(--space-5);
}
.idd-dh-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.idd-dh-card {
    background: var(--wp-surface);
    width: 100%;
    max-width: 440px; /* TODO: tokenize — max-width carte modal */
    border-radius: var(--radius-lg);
    padding: 28px 24px 20px; /* TODO: tokenize — padding modal asymétrique */
    box-shadow: 0 30px 80px -10px rgba(0,0,0,0.40); /* TODO: tokenize — ombre extra-large */
    transform: translateY(40px);
    transition: transform .3s cubic-bezier(.2,.8,.2,1); /* TODO: tokenize — easing custom snappy */
    text-align: center;
    margin-bottom: env(safe-area-inset-bottom, 0px);
}
.idd-dh-overlay.is-open .idd-dh-card {
    transform: translateY(0);
}

.idd-dh-emoji {
    font-size: 44px; /* TODO: tokenize — emoji size */
    line-height: 1;
    margin-bottom: 10px; /* TODO: tokenize — 10px hors scale */
    display: block;
}
.idd-dh-title {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--wp-ink);
    margin: 0 0 10px; /* TODO: tokenize — 10px hors scale */
    line-height: 1.2;
    letter-spacing: -.01em;
}
.idd-dh-message {
    color: var(--wp-soft);
    font-size: var(--text-sm);
    line-height: 1.55;
    margin: 0 0 var(--space-5);
}
.idd-dh-message strong {
    color: var(--wp-ink);
}

.idd-dh-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.idd-dh-actions button {
    appearance: none;
    border: 0;
    padding: 13px 18px; /* TODO: tokenize — padding bouton modal */
    border-radius: 12px; /* TODO: tokenize — entre radius-sm et radius-md */
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.idd-dh-actions button:active { transform: scale(.98); }

.idd-dh-actions .idd-dh-primary {
    background: var(--wp-brand);
    color: var(--wp-surface);
}
.idd-dh-actions .idd-dh-primary:hover { background: var(--wp-brand-dark); }
.idd-dh-actions .idd-dh-secondary {
    background: var(--wp-gold-light);
    color: var(--wp-ink);
}
.idd-dh-actions .idd-dh-secondary:hover { background: #EAE0CD; } /* TODO: tokenize — gold light hover */
.idd-dh-actions .idd-dh-ghost {
    background: transparent;
    color: var(--wp-soft);
    font-weight: 500;
    padding: 10px; /* TODO: tokenize — 10px hors scale */
}
.idd-dh-actions .idd-dh-ghost:hover { color: var(--wp-ink); }

@media (min-width: 600px) {
    .idd-dh-overlay { align-items: center; }
    .idd-dh-card { margin-bottom: 0; }
    .idd-dh-actions {
        flex-direction: row-reverse;
        justify-content: stretch;
    }
    .idd-dh-actions button { flex: 1; }
    .idd-dh-actions .idd-dh-ghost { flex: 0 0 auto; min-width: 80px; } /* TODO: tokenize — min-width */
}