/**
 * Rhino Promo Banner: "bar" strip/card and "popup" modal.
 * Colour presets only set the --p-* variables below; every value resolves to a
 * theme token, so there is no raw hex in this file.
 *
 * @author Salama Malek
 */

/* ---------- presets ---------- */
.nm-promo {
    --p-bg: linear-gradient(90deg, var(--pastel-green-100), var(--teal-100) 55%, var(--cyan-100));
    --p-ink: var(--gray-950);
    --p-muted: var(--gray-700);
    --p-accent: var(--brand-700);
    --p-cta-bg: var(--gray-950);
    --p-cta-ink: var(--base-white);
    --p-chip-bg: var(--base-white-60);
    --p-chip-line: var(--base-black-20);
    --p-close: var(--gray-700);
    --p-border: transparent;

    font-family: var(--body-font);
    color: var(--p-ink);
    box-sizing: border-box;
}

.nm-promo *,
.nm-promo *::before,
.nm-promo *::after {
    box-sizing: border-box;
}

.nm-promo--pastel {
    --p-bg: linear-gradient(90deg, var(--blue-200), var(--brand-300) 30%, var(--rose-200) 68%, var(--warning-100));
    --p-accent: var(--rose-700);
}

.nm-promo--sky {
    --p-bg: linear-gradient(90deg, var(--brand-50), var(--brand-200) 50%, var(--brand-400));
    --p-accent: var(--brand-700);
}

.nm-promo--violet {
    --p-bg: linear-gradient(90deg, var(--brand-600), var(--rose-400));
    --p-ink: var(--base-white);
    --p-muted: var(--base-white-80);
    --p-accent: var(--warning-100);
    --p-cta-bg: var(--base-white);
    --p-cta-ink: var(--brand-900);
    --p-chip-bg: var(--base-white-10);
    --p-chip-line: var(--base-white-60);
    --p-close: var(--base-white);
}

.nm-promo--brand {
    --p-bg: linear-gradient(150deg, var(--brand-950), var(--brand-700) 52%, var(--brand-500));
    --p-ink: var(--base-white);
    --p-muted: var(--base-white-80);
    --p-accent: var(--green-400);
    --p-cta-bg: var(--green-400);
    --p-cta-ink: var(--gray-950);
    --p-chip-bg: var(--base-white-10);
    --p-chip-line: var(--base-white-50);
    --p-close: var(--base-white);
}

.nm-promo--light {
    --p-bg: var(--base-white);
    --p-accent: var(--brand-600);
    --p-chip-bg: var(--gray-50);
    --p-chip-line: var(--gray-300);
    --p-border: var(--gray-200);
}

.nm-promo[hidden] {
    display: none !important;
}

/* ---------- shared pieces ---------- */
.nm-promo__title {
    margin: 0;
    color: var(--p-ink);
}

.nm-promo__title strong,
.nm-promo__title b {
    color: var(--p-accent);
    font-weight: 700;
}

.nm-promo__desc {
    margin: 0;
    color: var(--p-muted);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.nm-promo__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nm-promo__code-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.nm-promo__code-label {
    color: var(--p-muted);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

/* two classes: beats the theme's global button styles */
.nm-promo .nm-promo__code {
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    margin: 0;
    padding: 6px 12px 6px 14px;
    font: 700 14px/20px var(--body-font);
    letter-spacing: .04em;
    text-transform: none;
    color: var(--p-ink);
    background: var(--p-chip-bg);
    border: 1px dashed var(--p-chip-line);
    border-radius: 999px;
    box-shadow: none;
    cursor: pointer;
    transition: background .3s var(--easing), border-color .3s var(--easing);
}

.nm-promo .nm-promo__code:hover {
    border-style: solid;
}

.nm-promo__code-icon {
    display: inline-flex;
    opacity: .7;
}

.nm-promo__copied {
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: 0;
}

.nm-promo__code.is-copied .nm-promo__code-icon {
    display: none;
}

.nm-promo .nm-promo__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 20px;
    font: 600 14px/20px var(--body-font);
    color: var(--p-cta-ink);
    background: var(--p-cta-bg);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .3s var(--easing), transform .3s var(--easing);
}

.nm-promo .nm-promo__cta:hover {
    opacity: .88;
    color: var(--p-cta-ink);
}

.nm-promo .nm-promo__cta:active {
    transform: scale(.99);
}

.nm-promo .nm-promo__close {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    min-height: 0;
    margin: 0;
    padding: 0;
    color: var(--p-close);
    background: transparent;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    cursor: pointer;
    transition: background .3s var(--easing);
}

.nm-promo .nm-promo__close:hover {
    background: var(--base-black-10);
}

.nm-promo .nm-promo__code:focus-visible,
.nm-promo .nm-promo__cta:focus-visible,
.nm-promo .nm-promo__close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--base-white), 0 0 0 4px var(--brand-600);
}

/* ---------- bar ---------- */
.nm-promo--bar {
    position: relative;
    width: 100%;
    background: var(--p-bg);
    border: 1px solid var(--p-border);
}

.nm-promo--bar .nm-promo__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 44px 10px 12px;
}

.nm-promo--bar .nm-promo__icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.nm-promo--bar .nm-promo__img {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.nm-promo--bar .nm-promo__text {
    display: grid;
    gap: 2px;
    flex: 1 1 0;
    min-width: 0;
}

.nm-promo--bar .nm-promo__title {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.nm-promo--bar .nm-promo__desc {
    font-size: 12px;
    line-height: 18px;
}

.nm-promo--bar .nm-promo__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    flex: 1 0 100%;
}

.nm-promo--bar .nm-promo__close {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* card shape: rounded, a bit bigger title */
.nm-promo--card {
    border-radius: 20px;
    overflow: hidden;
}

/* floating at the bottom: keep clear of the Intercom launcher (bottom-right) */
.nm-promo--float {
    position: fixed;
    z-index: 9990;
    left: 12px;
    right: 84px;
    bottom: 12px;
    width: auto;
    border-radius: 20px;
    box-shadow: 0 12px 32px var(--base-black-20);
    animation: nm-promo-rise .4s var(--easing) both;
}

@media (min-width: 681px) {
    .nm-promo--bar .nm-promo__inner {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 16px;
        padding: 10px 56px;
    }

    .nm-promo--bar .nm-promo__img {
        width: 40px;
        height: 40px;
    }

    .nm-promo--bar .nm-promo__text {
        flex: 0 1 auto;
    }

    .nm-promo--bar .nm-promo__title {
        font-size: 16px;
        line-height: 24px;
    }

    .nm-promo--bar .nm-promo__desc {
        font-size: 14px;
        line-height: 20px;
    }

    .nm-promo--bar .nm-promo__actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

    .nm-promo--bar .nm-promo__close {
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
    }

    .nm-promo--card .nm-promo__inner {
        justify-content: space-between;
        padding: 16px 64px 16px 24px;
        min-height: 88px;
    }

    .nm-promo--card .nm-promo__text {
        flex: 1 1 auto;
    }

    .nm-promo--card .nm-promo__title {
        font-size: 20px;
        line-height: 28px;
        font-weight: 700;
    }

    .nm-promo--card .nm-promo__img {
        width: 56px;
        height: 56px;
    }

    .nm-promo--float {
        left: 50%;
        right: auto;
        bottom: 24px;
        width: min(1100px, calc(100% - 192px));
        transform: translateX(-50%);
        animation-name: nm-promo-rise-center;
    }
}

@media (min-width: 1081px) {
    .nm-promo--card .nm-promo__inner {
        padding: 18px 72px 18px 32px;
    }

    .nm-promo--card .nm-promo__title {
        font-size: 24px;
        line-height: 32px;
    }
}

/* ---------- popup ---------- */
.nm-promo--popup {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.nm-promo__backdrop {
    position: absolute;
    inset: 0;
    background: var(--base-black-50);
    animation: nm-promo-fade .3s var(--easing) both;
}

.nm-promo__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 88vh;
    overflow: auto;
    background: var(--p-bg);
    border: 1px solid var(--p-border);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 24px 64px var(--base-black-30);
    outline: none;
    animation: nm-promo-rise .4s var(--easing) both;
}

.nm-promo__media picture {
    display: block;
}

.nm-promo__media .nm-promo__img {
    display: block;
    width: 100%;
    height: auto;
}

.nm-promo--popup .nm-promo__body {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 24px 20px 4px;
    text-align: center;
}

.nm-promo--popup .nm-promo__title {
    font-family: var(--body-font-alt);
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
}

.nm-promo--popup .nm-promo__desc {
    font-size: 16px;
    line-height: 24px;
}

.nm-promo--popup .nm-promo__code-wrap {
    justify-content: center;
}

.nm-promo .nm-promo__cta--block {
    min-height: 52px;
    margin: 16px 20px 20px;
    font-size: 16px;
    line-height: 24px;
    border-radius: 16px;
}

.nm-promo .nm-promo__close--popup {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    color: var(--base-white);
    background: var(--base-black-40);
}

.nm-promo .nm-promo__close--popup:hover {
    background: var(--base-black-60);
}

/* artwork-only popup: image is the whole card, button becomes the bottom bar.
   The preset background shows through transparent artwork. */
.nm-promo--art .nm-promo__dialog {
    border: 0;
}

.nm-promo--art .nm-promo__cta--block {
    margin: 0;
    border-radius: 0;
    min-height: 60px;
    font-size: 18px;
    font-weight: 700;
}

@media (min-width: 681px) {
    .nm-promo--popup {
        align-items: center;
        padding: 24px;
    }

    .nm-promo__dialog {
        width: min(480px, 100%);
        border-radius: 28px;
        animation-name: nm-promo-pop;
    }

    .nm-promo--art .nm-promo__dialog {
        width: min(720px, 100%);
    }

    .nm-promo--popup .nm-promo__body {
        padding: 28px 32px 4px;
    }

    .nm-promo--popup .nm-promo__title {
        font-size: 28px;
        line-height: 32px;
    }

    .nm-promo .nm-promo__cta--block {
        margin: 20px 32px 32px;
    }

    .nm-promo--art .nm-promo__cta--block {
        margin: 0;
    }
}

/* no page scroll behind an open popup */
html.nm-promo-lock,
html.nm-promo-lock body {
    overflow: hidden;
}

/* CJK ink sits higher than Latin cap height; give pill text room */
.nm-promo:lang(zh) .nm-promo__code,
.nm-promo:lang(zh) .nm-promo__cta {
    line-height: 1.6;
}

@keyframes nm-promo-fade {
    from { opacity: 0; }
}

@keyframes nm-promo-rise {
    from { opacity: 0; transform: translateY(16px); }
}

@keyframes nm-promo-rise-center {
    from { opacity: 0; transform: translate(-50%, 16px); }
    to { transform: translate(-50%, 0); }
}

@keyframes nm-promo-pop {
    from { opacity: 0; transform: scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
    .nm-promo--float,
    .nm-promo__backdrop,
    .nm-promo__dialog {
        animation: none;
    }
}

/* Paired Black Friday marquee: campaign artwork adapted to the site tokens. */
.nm-bf{font-family:var(--body-font);color:var(--base-white);line-height:1.3}
.nm-bf[hidden]{display:none!important}
.nm-bf__top{display:flex;align-items:center;height:48px;background:var(--gray-950);overflow:hidden}
.nm-bf__viewport{flex:1;min-width:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,var(--base-black) 4%,var(--base-black) 96%,transparent)}
.nm-bf__track{display:flex;width:max-content;animation:nm-bf-left 32s linear infinite}
.nm-bf__track--reverse{animation:nm-bf-right 40s linear infinite}
.nm-bf__group{display:flex;flex:none;align-items:center;gap:28px;padding-right:28px;white-space:nowrap}
.nm-bf__logo{display:block;height:22px;width:auto;max-width:none}
.nm-bf__headline{font-size:16px;font-weight:600;color:var(--green-400)}
.nm-bf__text{font-size:16px;font-weight:400;color:var(--base-white)}
.nm-bf__code{font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--gray-950);background:linear-gradient(90deg,var(--brand-500),var(--green-400));padding:4px 10px;border-radius:7px}
.nm-bf__actions{display:flex;flex:none;align-items:center;gap:12px;padding:0 20px 0 12px;background:var(--gray-950)}
.nm-bf__button{display:inline-flex;align-items:center;background:var(--green-400);color:var(--gray-950);font-size:14px;font-weight:600;line-height:1;padding:9px 16px;border-radius:999px;text-decoration:none;white-space:nowrap}
.nm-bf__button:hover,.nm-bf__button:visited{color:var(--gray-950)}
.nm-bf__close,.nm-bf__pause{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;color:var(--base-white);font:600 16px/1 var(--body-font)}
.nm-bf__bottom{position:fixed;left:0;right:0;bottom:0;z-index:998;display:flex;align-items:center;height:calc(40px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--green-400);overflow:hidden;text-decoration:none;color:var(--gray-950)}
.nm-bf__bottom:hover,.nm-bf__bottom:visited{color:var(--gray-950);text-decoration:none}
.nm-bf__bottom .nm-bf__headline{font-size:15px;font-weight:700;color:var(--gray-950);text-transform:uppercase;letter-spacing:.04em}
.nm-bf__bottom .nm-bf__text{font-size:15px;font-weight:500;color:var(--gray-950)}
.nm-bf__bottom .nm-bf__code{background:var(--gray-950);padding:3px 9px;border-radius:6px}
.nm-bf__bottom .nm-bf__code span{background:linear-gradient(90deg,var(--brand-500),var(--green-400));background-clip:text;color:transparent}
.nm-bf:hover .nm-bf__track,.nm-bf:focus-within .nm-bf__track,.nm-bf.is-paused .nm-bf__track{animation-play-state:paused}
.nm-bf a:focus-visible,.nm-bf button:focus-visible{outline:2px solid var(--brand-600);outline-offset:-3px}
html.nm-bf-active body{padding-bottom:var(--nm-bf-bottom-h,0px)}
html.nm-bf-active{scroll-padding-bottom:var(--nm-bf-bottom-h,0px)}
/* Keep existing floating banners clear of the paired campaign's bottom strip. */
html.nm-bf-active .nm-promo--float{bottom:calc(24px + var(--nm-bf-bottom-h,0px))}
.nmpb-stage .nm-bf__bottom{position:relative;inset:auto;margin-top:12px}
.nmpb-stage .nm-bf a,.nmpb-stage .nm-bf button{pointer-events:none}
@keyframes nm-bf-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes nm-bf-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(max-width:767px){
.nm-bf__top{height:44px}.nm-bf__viewport{mask-image:none}.nm-bf__actions{gap:6px;padding:0 8px}.nm-bf__track{animation-duration:26s}.nm-bf__track--reverse{animation-duration:30s}
.nm-bf__group{gap:20px;padding-right:20px}.nm-bf__logo{height:20px}.nm-bf__headline,.nm-bf__text{font-size:14px}.nm-bf__code{font-size:13px;padding:3px 8px;border-radius:6px}
.nm-bf__button{font-size:13px;padding:8px 12px}.nm-bf__bottom{height:calc(36px + env(safe-area-inset-bottom,0px))}.nm-bf__bottom .nm-bf__headline{font-size:13px}.nm-bf__bottom .nm-bf__text{display:none}.nm-bf__bottom .nm-bf__code{font-size:13px;padding:2px 8px;border-radius:5px}
}
@media(prefers-reduced-motion:reduce){.nm-bf__track{animation:none}}

html.nm-bf-active .cookies{bottom:calc(20px + var(--nm-bf-bottom-h,0px))}
@media(min-width:1081px){html.nm-bf-active .cookies{bottom:calc(50px + var(--nm-bf-bottom-h,0px))}}
html.nm-bf-active .intercom-lightweight-app-launcher,html.nm-bf-active .intercom-launcher-frame{bottom:calc(20px + var(--nm-bf-bottom-h,0px))!important}

.nm-bf__actions .nmpb-cd{margin:0;font-size:12px;line-height:16px;color:var(--base-white)}
.nm-bf__actions .nmpb-cd__time{background:var(--base-white-20)}
@media(max-width:767px){.nm-bf__actions .nmpb-cd{gap:0}.nm-bf__actions .nmpb-cd__label{display:none}}