/* ── Shared confirm / notice dialog (pt-dialog.js) ───────────────────────────────────────────
   The in-page replacement for native alert() and confirm() across the whole site: address
   suggestions, delete confirmations, geolocation failures, gift-card errors, admin deletes.

   SELF-CONTAINED ON PURPOSE. It first lived on cart.css's .addr-overlay chrome, which was fine
   while only the cart used it — but _AdminLayout loads admin.css and _Layout loads site.css, and
   neither has ever seen cart.css. Reusing that class would have shipped an unstyled, unreadable
   dialog to every admin page. Nothing here depends on another stylesheet.

   z-index sits just above .addr-overlay (100050) so a question raised FROM one of the cart's
   address overlays paints over it rather than behind. */
.pt-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 100060;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.pt-dialog-overlay[hidden] { display: none !important; }

.pt-dialog-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
    font-family: inherit;
    color: #1f2430;
    /* The vh/dvh pair is deliberate — do NOT collapse it to one line. Safari older than 15.4 does
       not know dvh, and an unknown unit inside calc() invalidates the WHOLE declaration, leaving
       no cap at all and pushing the buttons off a position:fixed overlay that cannot scroll.
       vh first as the floor, dvh second so modern Safari gets the URL-bar-aware value. */
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
}

.pt-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pt-dialog-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.pt-dialog-close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 5px;
    border: 0;
    border-radius: 50%;
    background: var(--brand-red, #E21B22);
    color: #fff;
    cursor: pointer;
    line-height: 0;
}
.pt-dialog-close svg { width: 100%; height: 100%; }

.pt-dialog-reason { margin: 6px 0 14px; font-size: 0.875rem; line-height: 1.45; color: #6b5644; }

.pt-dialog-block { border: 1px solid #e6e0d8; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.pt-dialog-block--primary { border-color: var(--brand-red, #E21B22); background: var(--brand-red-tint, #fff6f6); }
.pt-dialog-block[hidden] { display: none !important; }
.pt-dialog-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b5644;
    margin-bottom: 3px;
}
.pt-dialog-block--primary .pt-dialog-label { color: var(--brand-red, #E21B22); }
/* overflow-wrap: a long single-token street, URL or postcode must not widen the card. */
.pt-dialog-text { margin: 0; font-size: 0.9rem; line-height: 1.4; overflow-wrap: anywhere; }

.pt-dialog-actions { display: flex; gap: 10px; margin-top: 14px; }
/* 44px floor: these are the only two ways out of a modal, so they stay thumb-sized. */
.pt-dialog-btn {
    flex: 1;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}
.pt-dialog-btn[hidden] { display: none !important; }
.pt-dialog-btn--ghost { background: #fff; border: 1px solid #e6e0d8; color: #1f2430; }
.pt-dialog-btn--primary { background: var(--brand-red, #E21B22); border: 1px solid var(--brand-red, #E21B22); color: #fff; }
/* Destructive confirm. Deliberately a DIFFERENT red from the brand CTA: brand red means
   "yes, continue" everywhere else, so reusing it would make the safe button and the
   irreversible one look identical. */
.pt-dialog-btn--danger { background: #b3141a; border-color: #b3141a; color: #fff; }