/* Welcome popup (2026-10-20). Native <dialog>: Esc, focus trap and backdrop come free. */
.wr-pop { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0;
    border-radius: 14px; overflow: hidden; background: #fff; color: #16202C; font-family: 'Inter', system-ui, sans-serif; box-shadow: 0 30px 80px rgba(6,15,27,.45); }
.wr-pop[open] { display: flex; flex-direction: column; animation: wr-pop-in .25s ease-out; }
.wr-pop::backdrop { background: rgba(6,15,27,.62); }
@keyframes wr-pop-in { from { opacity: 0; transform: translateY(12px); } }
.wr-pop-media { flex: 0 0 auto; background: #0A1626; }
/* 2026-10-21: the picture sits on top at its own shape, so nothing in it is cut off. */
.wr-pop-media > img:first-child { display: block; width: 100%; height: auto; max-height: 36vh; object-fit: cover; }
.wr-pop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* not positioned: the close button sits on the dialog's corner */
.wr-pop-form, .wr-pop-done { padding: 28px 32px 26px; display: flex; flex-direction: column; gap: 14px; }
.wr-pop-form[hidden], .wr-pop-done[hidden] { display: none; }
.wr-pop-x { position: absolute; top: 12px; right: 12px; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.92); color: #0A1626; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wr-pop-x:hover { background: #fff; }
.wr-pop-label { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #84682E; }
.wr-pop-ok { color: #1E6B45; }
.wr-pop-title { margin: 0; font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.3rem); line-height: 1.02; letter-spacing: -.01em; color: #0A1626; }
.wr-pop .wr-pop-title:focus, .wr-pop .wr-pop-title:focus-visible { outline: none; }
.wr-pop-text { margin: 0; font-size: 15px; line-height: 1.55; color: #3E4855; }
.wr-pop-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.wr-pop-field input { height: 48px; padding: 0 14px; border: 1px solid #C9CED6; border-radius: 8px; font: inherit; font-size: 16px; font-weight: 400; color: #16202C; }
.wr-pop-field input:focus { border-color: #0A1626; outline: 2px solid var(--gold, #C9962F); outline-offset: 1px; }
.wr-pop-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: #3E4855; cursor: pointer; }
.wr-pop-consent input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: #0A1626; }
.wr-pop a:not(.wr-pop-btn) { color: #84682E; text-decoration: underline; }
.wr-pop-error { margin: 0; padding: 10px 12px; border-radius: 8px; background: #FDECEC; color: #9B1C1C; font-size: 14px; }
.wr-pop-btn { height: 52px; border: 1px solid #1C3B60; border-radius: 8px; background: #1C3B60; color: #fff; font: inherit; font-size: 16px; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background .2s, box-shadow .2s; }
/* Same look as the store's Buy Now button. */
.wr-pop-btn:hover { background: #16304F; border-color: #16304F; color: #fff; box-shadow: 0 6px 18px -6px rgba(28,59,96,.55); }
.wr-pop-btn:focus-visible { outline: 2px solid #C4A159; outline-offset: 2px; }
.wr-pop-btn[disabled] { opacity: .6; cursor: progress; }
.wr-pop-link { align-self: center; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: #58626E; font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.wr-pop-link:hover { color: #0A1626; }
.wr-pop-fine, .wr-pop-hint { margin: 0; font-size: 12px; line-height: 1.45; color: #6B7480; text-align: center; }
.wr-pop-hint { text-align: left; font-size: 13px; }
.wr-pop-icon { width: 52px; height: 52px; border-radius: 50%; background: #F7EDD8; color: #84682E; display: flex; align-items: center; justify-content: center; }
.wr-pop-actions { display: flex; justify-content: center; flex-wrap: wrap; }
.wr-pop-status { margin: 0; min-height: 1em; font-size: 13px; color: #1E6B45; text-align: center; }

/* Phones: bottom sheet with a photo banner. */
@media (max-width: 720px) {
    .wr-pop { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
    .wr-pop[open] { animation-name: wr-pop-up; }
    @keyframes wr-pop-up { from { transform: translateY(40px); opacity: 0; } }
    .wr-pop-media > img:first-child { max-height: 30vh; }
    .wr-pop-form, .wr-pop-done { padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .wr-pop[open] { animation: none; } }