/* sg-dialog.css — ONE unified modal dialog (see sg-dialog.js). Two surfaces (parchment / night)
   and config-driven content: destructive confirm, info/blocked, upgrade, prompt-with-input, milestone.
   Replaces the legacy .yp-modal, .album-modal and .sg-map-disabled-modal — and is skinned to MATCH them
   (parchment = the album-book modal, centred; night = the Your-Photos modal, left-aligned). The component
   is unified; the look is the original. */

.sg-dlg-scrim {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 7, 24, .62);
    opacity: 0;
    transition: opacity .18s ease;
}
.sg-dlg-scrim.is-in { opacity: 1; }
/* The night modal sat on a darker, blurred scrim (faithful to .yp-modal). */
.sg-dlg-scrim:has(.sg-dlg--night) {
    background: rgba(8, 5, 16, .7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.sg-dlg-card {
    width: 100%;
    max-width: 440px;
    padding: 28px;
    transform: translateY(10px) scale(.985);
    transition: transform .2s ease;
}
.sg-dlg-scrim.is-in .sg-dlg-card { transform: none; }

/* ---- Parchment surface = the old .album-modal (warm book, centred, serif) ---- */
.sg-dlg--parchment {
    max-width: 26rem;
    width: calc(100% - 2rem);
    background: var(--bg-parch);
    color: var(--ink);
    border: 1px solid var(--gold-bronze);
    border-radius: var(--r-parch);
    box-shadow: var(--shadow-parch);
    font-family: var(--serif, 'Playfair Display', Georgia, serif);
    padding: var(--s-8, 32px);
    text-align: center;
}
.sg-dlg--parchment .sg-dlg-buttons { justify-content: center; }
.sg-dlg--parchment .sg-dlg-badge { margin-left: auto; margin-right: auto; }

/* ---- Night surface = the old .yp-modal (dark glass, left-aligned, buttons right) ---- */
.sg-dlg--night {
    background: linear-gradient(180deg, rgba(34, 22, 58, .96), rgba(18, 11, 34, .96));
    border: 1px solid rgba(243, 201, 105, .3);
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
    font-family: var(--sans, 'Inter', sans-serif);
}

/* Night surface is CENTRED everywhere (Tobias 2026-07-01) — title/subject/body/buttons/badge all centre,
   matching the parchment treatment. (Override the night defaults of left-align + buttons-right.) */
.sg-dlg--night { text-align: center; }
.sg-dlg--night .sg-dlg-buttons { justify-content: center; }
.sg-dlg--night .sg-dlg-badge { margin-left: auto; margin-right: auto; }

/* Explicit centred layout (milestone) — wins over the per-surface default. */
.sg-dlg-card--center { text-align: center; }
.sg-dlg-card--center .sg-dlg-buttons { justify-content: center; }
.sg-dlg-card--center .sg-dlg-badge { margin-left: auto; margin-right: auto; }

/* ---- optional icon badge ---- */
.sg-dlg-badge { display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.sg-dlg-badge svg { width: 22px; height: 22px; }
.sg-dlg-badge--soft { width: 44px; height: 44px; border-radius: 999px; background: rgba(138, 106, 48, .14); color: var(--ink-muted, #6b5024); }
.sg-dlg--night .sg-dlg-badge--soft { background: rgba(243, 201, 105, .14); color: var(--gold, #f3c969); }
.sg-dlg-badge--gold { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--gold-bright, #fff4c2), var(--gold, #f3c969) 60%, var(--gold-bronze, #b9914f)); color: var(--ink-on-gold, #2a1c08); box-shadow: 0 0 24px rgba(243, 201, 105, .5); }
.sg-dlg-badge--gold svg { width: 24px; height: 24px; }
.sg-dlg-badge--glow { width: 64px; height: 64px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-bright, #fff4c2), var(--gold, #f3c969) 60%, var(--gold-bronze, #b9914f)); color: var(--ink-on-gold, #2a1c08); box-shadow: 0 0 36px rgba(243, 201, 105, .7), 0 0 70px rgba(243, 201, 105, .3); margin-bottom: 20px; }
.sg-dlg-badge--glow svg { width: 30px; height: 30px; }

/* ---- title ---- */
.sg-dlg-title { margin: 0; letter-spacing: -.01em; }
.sg-dlg--parchment .sg-dlg-title { font-family: var(--serif, 'Playfair Display', serif); font-weight: 600; font-size: 1.4rem; color: var(--ink, #3b2a12); }
.sg-dlg--night .sg-dlg-title { font: 500 22px var(--serif, 'Playfair Display', serif); color: rgb(var(--cream, 243, 228, 192)); }

/* ---- subject (the album NAME line) ---- */
.sg-dlg-subject { word-break: break-word; }
.sg-dlg--parchment .sg-dlg-subject { margin-top: var(--s-3, 12px); font-size: 1.1rem; font-weight: 700; color: var(--ink-muted, #6b5024); }
.sg-dlg--night .sg-dlg-subject { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--gold, #f3c969); }

/* ---- body copy ---- */
.sg-dlg-body { margin: 10px 0 0; }
.sg-dlg--parchment .sg-dlg-body { font-size: .95rem; line-height: 1.45; color: var(--ink-soft, #8a6a30); }
.sg-dlg--night .sg-dlg-body { font: 400 14px var(--sans, 'Inter', sans-serif); line-height: 1.6; color: rgba(var(--cream, 243, 228, 192), .7); }

/* ---- input (prompt) ---- */
.sg-dlg-input {
    width: 100%;
    margin-top: 16px;
    padding: 11px 14px;
    border-radius: 12px;
    font: 400 14px var(--sans, 'Inter', sans-serif);
    outline: none;
    box-sizing: border-box;
    text-align: left;
    background: rgba(10, 7, 20, .45);
    border: 1px solid rgba(243, 201, 105, .3);
    color: #f3e4c0;
}
.sg-dlg--parchment .sg-dlg-input { background: rgba(255, 255, 255, .5); border-color: rgba(138, 106, 48, .35); color: var(--ink, #3b2a12); }
.sg-dlg-input:focus { border-color: rgba(243, 201, 105, .6); }

/* ---- buttons ---- */
.sg-dlg-buttons { display: flex; justify-content: flex-end; gap: 12px; margin-top: 28px; }

.sg-dlg-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding: 10px 20px;
    border-radius: var(--r-pill, 999px);
    cursor: pointer;
    border: 1px solid transparent;
    font: 500 12px var(--sans, 'Inter', sans-serif);
    letter-spacing: .06em;
    transition: filter .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.sg-dlg-btn svg { width: 15px; height: 15px; flex: none; }
/* Parchment buttons read a touch larger and un-tracked (faithful to .album-modal). */
.sg-dlg--parchment .sg-dlg-btn { font: 600 .92rem var(--sans, 'Inter', sans-serif); letter-spacing: normal; padding: .55rem 1.4rem; }
/* Night buttons match the /account CTA exactly (13px / .04em / 12px 22px). */
.sg-dlg--night .sg-dlg-btn { font: 500 13px var(--sans, 'Inter', sans-serif); letter-spacing: .04em; padding: 12px 22px; }

/* ghost = outlined cancel, per surface */
.sg-dlg-btn--ghost { background: transparent; }
.sg-dlg--parchment .sg-dlg-btn--ghost { border-color: var(--gold-bronze, #b9914f); color: var(--ink-muted, #6b5024); }
.sg-dlg--parchment .sg-dlg-btn--ghost:hover { background: rgba(110, 47, 18, .08); }
.sg-dlg--night .sg-dlg-btn--ghost { border-color: rgba(var(--cream, 243, 228, 192), .2); color: rgba(var(--cream, 243, 228, 192), .75); }
.sg-dlg--night .sg-dlg-btn--ghost:hover { background: rgba(255, 255, 255, .05); }

/* gold = the brand CTA (shared) — identical tokens to the /account upgrade button (grad + glow). */
.sg-dlg-btn--gold {
    background: var(--grad-gold-cta, linear-gradient(135deg, #ffe9a3, #f3c969 60%, #b9914f));
    color: var(--ink-on-gold, #2a1c08);
    box-shadow: var(--glow-cta, 0 0 24px rgba(243, 201, 105, .6), inset 0 1px 0 rgba(255, 255, 255, .4));
}
.sg-dlg-btn--gold:hover { filter: brightness(1.08); }

/* red = destructive, skinned per surface (parchment = flat brick; night = gradient + glow) */
.sg-dlg--parchment .sg-dlg-btn--red { background: #b3261e; color: #fff; border-color: #8c1d17; }
.sg-dlg--parchment .sg-dlg-btn--red:hover { background: #c62f26; }
.sg-dlg--night .sg-dlg-btn--red {
    background: linear-gradient(135deg, #c94a4a, #b53a3a);
    color: #fbe5e5;
    box-shadow: 0 0 18px rgba(181, 58, 58, .45);
}
.sg-dlg--night .sg-dlg-btn--red:hover { filter: brightness(1.1); }

@media (prefers-reduced-motion: reduce) {
    .sg-dlg-scrim, .sg-dlg-card { transition: opacity .18s ease; }
    .sg-dlg-card { transform: none; }
}