/* OnlyTicket (2026-11-05): floating "Promo code" tab + pop-up (Views/Partials/_PromoTab.cshtml).
   Tab: a coupon-style pill on the right edge, a little below the middle (the bottom corners, the Book now / pay bars and the
   toasts are already used). While the page scrolls it shrinks to a small voucher icon, and opens up again when scrolling
   stops (js/promo-tab.js, .is-compact; web and phones).
   Pop-up: coupon card with the site's orange-red gradient; on phones a bottom sheet that slides up. */

/* ---------- floating tab ---------- */
.ot-promo-tab {
    position: fixed;
    right: 0;
    top: 58%;
    z-index: 1020;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 11px 16px 11px 22px;
    min-height: 48px;
    border: 0;
    border-radius: 14px 0 0 14px;
    background: var(--ot-grad, linear-gradient(135deg, #ff6a3d, #e31e24));
    color: #fff;
    font-family: var(--ot-font, 'Segoe UI', system-ui, sans-serif);
    text-align: left;
    text-decoration: none;
    line-height: 1.1;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(227, 30, 36, .28);
    transition: transform .25s ease, box-shadow .25s ease, padding .25s ease;
}
.ot-promo-tab-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 180px;
    overflow: hidden;
    transition: max-width .25s ease, opacity .2s ease;
}
/* voucher icon: only while the page scrolls (.is-compact, set by js/promo-tab.js) */
.ot-promo-tab-icon {
    display: inline-flex;
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: width .25s ease, opacity .2s ease;
}
.ot-promo-tab-icon svg { flex: 0 0 22px; }
.ot-promo-tab.is-compact { padding: 11px 12px 11px 13px; }
.ot-promo-tab.is-compact::before { opacity: 0; }
/* staged so text and icon never show at the same time: text fades first, then the icon (and the other way round) */
.ot-promo-tab-text { transition: max-width .25s ease .1s, opacity .12s ease .15s; }
.ot-promo-tab-icon { transition: width .25s ease, opacity .1s ease; }
.ot-promo-tab.is-compact .ot-promo-tab-text { max-width: 0; opacity: 0; transition: max-width .25s ease, opacity .1s ease; }
.ot-promo-tab.is-compact .ot-promo-tab-icon { width: 22px; opacity: 1; transition: width .25s ease, opacity .15s ease .15s; }
/* desktop: pointing at the small tab opens it up again */
@media (hover: hover) {
    .ot-promo-tab.is-compact:hover { padding: 11px 16px 11px 22px; }
    .ot-promo-tab.is-compact:hover::before { opacity: 1; }
    .ot-promo-tab.is-compact:hover .ot-promo-tab-text { max-width: 180px; opacity: 1; }
    .ot-promo-tab.is-compact:hover .ot-promo-tab-icon { width: 0; opacity: 0; }
}
/* perforation, like the tear-off edge of a ticket */
.ot-promo-tab::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 9px;
    bottom: 9px;
    border-left: 2px dashed rgba(255, 255, 255, .55);
    transition: opacity .2s ease;
}
.ot-promo-tab-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .9;
}
.ot-promo-tab-main {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}
.ot-promo-tab:hover,
.ot-promo-tab:focus-visible {
    color: #fff;
    transform: translateX(-6px);
    box-shadow: 0 12px 28px rgba(227, 30, 36, .38);
}
.ot-promo-tab:focus-visible { outline: 3px solid var(--ot-ink, #1e2130); outline-offset: 2px; }

.ot-promo-tab.is-applied {
    background: linear-gradient(135deg, #2e9b47, #1f6b2a);
    box-shadow: 0 8px 22px rgba(31, 107, 42, .28);
}
.ot-promo-tab.is-applied .ot-promo-tab-main { letter-spacing: .08em; }

/* a short slide-out a few seconds after the page opens, once per visit (js adds .is-nudge) */
@keyframes ot-promo-nudge {
    0%, 100% { transform: translateX(0); }
    30%, 60% { transform: translateX(-10px); }
}
.ot-promo-tab.is-nudge { animation: ot-promo-nudge 1.2s ease 1; }

@media (max-width: 991.98px) {
    .ot-promo-tab.is-away { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (max-width: 767.98px) {
    .ot-promo-tab {
        top: 62%;
        padding: 9px 12px 9px 18px;
        min-height: 44px;
    }
    .ot-promo-tab::before { left: 7px; top: 8px; bottom: 8px; }
    .ot-promo-tab-label { display: none; }
    .ot-promo-tab-main { font-size: 13px; }
    .ot-promo-tab.is-applied .ot-promo-tab-main::before { content: "Promo: "; letter-spacing: normal; font-weight: 600; }
    .ot-promo-tab.is-compact { padding: 10px 10px 10px 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .ot-promo-tab, .ot-promo-tab-text, .ot-promo-tab-icon, .ot-promo-sheet .modal-dialog { transition: none !important; }
    .ot-promo-tab.is-nudge { animation: none; }
}

/* ---------- pop-up ---------- */
.ot-promo-sheet .modal-dialog { max-width: 420px; }
.ot-promo-modal {
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    font-family: var(--ot-font, 'Segoe UI', system-ui, sans-serif);
    box-shadow: 0 24px 60px rgba(30, 33, 48, .28);
}
.ot-promo-modal-head {
    position: relative;
    background: var(--ot-grad, linear-gradient(135deg, #ff6a3d, #e31e24));
    color: #fff;
    padding: 26px 24px 22px;
}
.ot-promo-close { position: absolute; top: 16px; right: 16px; opacity: .85; }
.ot-promo-close:hover { opacity: 1; }
.ot-promo-eyebrow {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .85;
}
.ot-promo-title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; color: #fff; }
.ot-promo-sub { margin: 6px 0 0; font-size: 14px; opacity: .92; }

/* tear-off line between the coloured top and the white body */
.ot-promo-perforation {
    height: 0;
    border-top: 2px dashed var(--ot-line, #e6e8f0);
    margin: 0 18px;
}
/* the two notches of a ticket: real holes, so the page behind shows through */
@media (min-width: 576px) {
    .ot-promo-modal { background: transparent; }
    .ot-promo-perforation { margin: -1px 22px; position: relative; z-index: 1; }
    .ot-promo-modal-head {
        -webkit-mask: radial-gradient(circle 11px at 0 100%, transparent 10.5px, #000 11px) left / 51% 100% no-repeat,
                      radial-gradient(circle 11px at 100% 100%, transparent 10.5px, #000 11px) right / 51% 100% no-repeat;
                mask: radial-gradient(circle 11px at 0 100%, transparent 10.5px, #000 11px) left / 51% 100% no-repeat,
                      radial-gradient(circle 11px at 100% 100%, transparent 10.5px, #000 11px) right / 51% 100% no-repeat;
    }
    .ot-promo-modal-body {
        -webkit-mask: radial-gradient(circle 11px at 0 0, transparent 10.5px, #000 11px) left / 51% 100% no-repeat,
                      radial-gradient(circle 11px at 100% 0, transparent 10.5px, #000 11px) right / 51% 100% no-repeat;
                mask: radial-gradient(circle 11px at 0 0, transparent 10.5px, #000 11px) left / 51% 100% no-repeat,
                      radial-gradient(circle 11px at 100% 0, transparent 10.5px, #000 11px) right / 51% 100% no-repeat;
    }
}

.ot-promo-modal-body { padding: 20px 24px 24px; background: #fff; }
.ot-promo-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ot-ink, #1e2130);
}
.ot-promo-input {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 2px solid var(--ot-line, #e6e8f0);
    border-radius: 12px;
    background: var(--ot-bg, #f5f6fa);
    color: var(--ot-ink, #1e2130);
    font-size: 18px;      /* 16px or more: phones do not zoom in on focus */
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ot-promo-input::placeholder { color: #a4a8b8; font-weight: 500; letter-spacing: .04em; text-transform: none; }
.ot-promo-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--ot-brand, #e31e24);
    box-shadow: 0 0 0 4px var(--ot-brand-light, #fdecec);
}
.ot-promo-input.is-invalid { border-color: var(--ot-danger, #e5484d); }

.ot-promo-error {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 4px solid var(--ot-danger, #e5484d);
    border-radius: 8px;
    background: #fdecec;
    color: #8a1c1c;
    font-size: 14px;
}
.ot-promo-login { margin-left: 4px; color: inherit; font-weight: 700; text-decoration: underline; }

.ot-promo-apply {
    display: block;
    width: 100%;
    height: 52px;
    margin-top: 16px;
    border: 0;
    border-radius: 12px;
    background: var(--ot-grad, linear-gradient(135deg, #ff6a3d, #e31e24));
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 8px 18px rgba(227, 30, 36, .25);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.ot-promo-apply:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(227, 30, 36, .32); }
.ot-promo-apply:disabled { opacity: .7; transform: none; cursor: progress; }
.ot-promo-apply.is-done { background: linear-gradient(135deg, #2e9b47, #1f6b2a); box-shadow: none; opacity: 1; }
.ot-promo-hint { margin: 12px 0 0; font-size: 12px; color: var(--ot-muted, #6b7084); text-align: center; }

/* 2026-11-07: checking a code - box locked, spinner, changing words, moving dots, a light sweep over the button */
.ot-promo-apply { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; }
.is-checking .ot-promo-apply:disabled { opacity: 1; cursor: progress; }
.is-checking .ot-promo-apply::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -40%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    animation: otPromoSweep 1.4s ease-in-out infinite;
}
@keyframes otPromoSweep { to { left: 120%; } }
.is-checking .ot-promo-input { background: #fff; color: var(--ot-muted, #6b7084); border-color: var(--ot-line, #e6e8f0); }
.ot-promo-spin {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: otPromoSpin .8s linear infinite;
}
.ot-promo-apply.is-done .ot-promo-spin { border-color: #fff; border-right-color: transparent; }
@keyframes otPromoSpin { to { transform: rotate(360deg); } }
.ot-promo-word { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: otPromoWord .35s ease; }
@keyframes otPromoWord { from { opacity: 0; transform: translateY(6px); } }
.ot-promo-dots { display: inline-flex; gap: 3px; margin-left: -4px; align-self: flex-end; padding-bottom: 17px; }
.ot-promo-dots i { width: 4px; height: 4px; border-radius: 50%; background: #fff; animation: otPromoDot 1.1s ease-in-out infinite; }
.ot-promo-dots i:nth-child(2) { animation-delay: .15s; }
.ot-promo-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes otPromoDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

/* 2026-11-07: "Congratulations" card on the page after a good code (_PromoUnlocked.cshtml) */
html.ot-unlock-open { overflow: hidden; }
.ot-unlock {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(30, 33, 48, .55);
    font-family: var(--ot-font, 'Segoe UI', system-ui, sans-serif);
    animation: otUnlockFade .25s ease;
}
.ot-unlock.is-closing { opacity: 0; transition: opacity .25s ease; }
@keyframes otUnlockFade { from { opacity: 0; } }
.ot-unlock-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 60px rgba(30, 33, 48, .3);
    text-align: center;
    animation: otUnlockPop .5s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes otUnlockPop { from { opacity: 0; transform: scale(.85) translateY(20px); } }
.ot-unlock-head { padding: 28px 24px 22px; background: var(--ot-grad, linear-gradient(135deg, #ff6a3d, #e31e24)); color: #fff; }
.ot-unlock-title { margin: 0; font-size: 28px; font-weight: 800; color: #fff; }
.ot-unlock-sub { margin: 6px 0 0; font-size: 15px; opacity: .95; }
.ot-unlock-body { padding: 20px 24px 24px; }
.ot-unlock-product { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--ot-ink, #1e2130); }
.ot-unlock-code { margin: 0; font-size: 13px; color: var(--ot-muted, #6b7084); }
.ot-unlock-code span {
    display: inline-block;
    margin-left: 6px;
    padding: 4px 10px;
    border: 1.5px dashed #e31e24;
    border-radius: 8px;
    background: #fff4f0;
    color: #c8161c;
    font-weight: 700;
    letter-spacing: .06em;
}
.ot-unlock-note { margin: 12px 0 0; font-size: 13px; color: var(--ot-muted, #6b7084); }
.ot-unlock-go { margin-top: 18px; }
.ot-unlock-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ot-unlock-confetti i {
    position: absolute;
    top: -12px;
    left: calc(var(--i) * 4.2%);
    width: 8px;
    height: 14px;
    border-radius: 2px;
    background: #ff6a3d;
    opacity: 0;
    animation: otConfetti 2.6s cubic-bezier(.2, .6, .4, 1) calc(var(--i) * 45ms) 1 forwards;
}
.ot-unlock-confetti i:nth-child(3n) { background: #ffc46e; width: 6px; height: 10px; }
.ot-unlock-confetti i:nth-child(3n+1) { background: #e31e24; }
.ot-unlock-confetti i:nth-child(4n) { background: #fff; }
@keyframes otConfetti {
    0% { opacity: 1; transform: translateY(0) rotate(0); }
    100% { opacity: 0; transform: translateY(105vh) rotate(540deg); }
}
@media (max-width: 575.98px) { .ot-unlock-title { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) {
    .ot-unlock-confetti { display: none; }
    .ot-unlock, .ot-unlock-card, .ot-promo-word { animation: none; }
    .ot-promo-spin, .ot-promo-dots i, .is-checking .ot-promo-apply::after { animation: none; }
}

.ot-promo-grip { display: none; }

/* ---------- phones: bottom sheet that slides up ---------- */
@media (max-width: 575.98px) {
    .ot-promo-sheet .modal-dialog,
    .ot-promo-sheet .modal-dialog.modal-dialog-centered {
        max-width: none;
        min-height: 100%;
        margin: 0;
        align-items: flex-end;
    }
    .ot-promo-sheet.fade .modal-dialog { transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
    .ot-promo-sheet.show .modal-dialog { transform: none; }
    .ot-promo-modal { border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(30, 33, 48, .25); }
    .ot-promo-modal-head { padding: 22px 20px 20px; }
    .ot-promo-grip {
        display: block;
        width: 44px;
        height: 5px;
        margin: -10px auto 12px;
        border-radius: 3px;
        background: rgba(255, 255, 255, .6);
    }
    .ot-promo-close { top: 14px; right: 14px; }
    .ot-promo-title { font-size: 20px; }
    .ot-promo-modal-body { padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); }
}