/* Promo popup on the customer menu (2026-10-08). Self-contained: the same card on
   all 22 designs, light or dark, so it never inherits a skin's text colour onto
   its own white card. Above the action launcher and sheets (1190-1220), below the
   cookie banner (1230+), so consent stays reachable. */
.ym-promo { position: fixed; inset: 0; z-index: 1225; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ym-promo[hidden] { display: none; }
.ym-promo-backdrop { position: absolute; inset: 0; background: rgba(10, 10, 12, .55); opacity: 0; transition: opacity .2s ease; }
.ym-promo-card {
    position: relative; width: 100%; max-width: 400px; max-height: calc(100dvh - 32px); overflow-y: auto;
    background: #ffffff; color: #1d1d1f; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    transform: translateY(12px) scale(.98); opacity: 0; transition: transform .22s ease, opacity .22s ease;
    font-size: 16px; line-height: 1.45; letter-spacing: normal; text-align: start;
}
.ym-promo.is-open .ym-promo-backdrop { opacity: 1; }
.ym-promo.is-open .ym-promo-card { transform: none; opacity: 1; }
.ym-promo-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px 18px 0 0; background: #f1f1f3; }
.ym-promo-body { padding: 20px 20px 22px; }
/* Video file and YouTube: 16:9 (YouTube Shorts 9:16, capped so the text still fits). */
.ym-promo-media { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 18px 18px 0 0; background: #111111; overflow: hidden; }
video.ym-promo-media { object-fit: cover; }
.ym-promo-yt.is-tall { aspect-ratio: 9 / 16; max-height: 62dvh; width: auto; margin: 0 auto; }
.ym-promo-yt iframe { display: block; width: 100%; height: 100%; border: 0; }
.ym-promo-play { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: linear-gradient(135deg, #2a2a30, #0f0f12); cursor: pointer; }
.ym-promo-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ym-promo-play-icon {
    position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .62); color: #ffffff;
}
.ym-promo-play-icon i { font-size: 40px; line-height: 1; margin-left: 4px; }
.ym-promo-play-note { position: absolute; left: 12px; bottom: 10px; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, .62); color: #ffffff; font-size: 12px; font-weight: 600; letter-spacing: normal; }
.ym-promo-title { margin: 0 0 8px; font-size: 21px; line-height: 1.25; font-weight: 700; color: #111111; overflow-wrap: anywhere; letter-spacing: normal; text-transform: none; }
.ym-promo-text { margin: 0; color: #3a3a3f; white-space: pre-line; overflow-wrap: anywhere; }
.ym-promo-btn {
    display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 18px; padding: 10px 18px;
    border-radius: 12px; background: var(--ym-promo-btn, #ff6b35); color: var(--ym-promo-btn-ink, #ffffff);
    font-weight: 700; font-size: 16px; text-decoration: none; text-align: center; letter-spacing: normal; text-transform: none;
}
.ym-promo-close {
    position: absolute; top: 10px; inset-inline-end: 10px; z-index: 1; width: 40px; height: 40px; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .92); color: #111111;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18); cursor: pointer; padding: 0;
}
.ym-promo-close i { font-size: 24px; line-height: 1; }
/* Without a picture the close button sits over the text: keep the title clear of it. */
.ym-promo-card--noimg .ym-promo-body { padding-top: 22px; }
.ym-promo-card--noimg .ym-promo-title, .ym-promo-card--noimg .ym-promo-text:first-child { padding-inline-end: 40px; }
.ym-promo-btn:focus-visible, .ym-promo-close:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
@media (max-width: 480px) {
    .ym-promo { align-items: flex-end; padding: 12px; }
    .ym-promo-card { max-height: calc(100dvh - 24px); }
}
@media (prefers-reduced-motion: reduce) {
    .ym-promo-backdrop, .ym-promo-card { transition: none; }
}