/* ============================================================
   Limelight Hawaii — website popups
   Loaded by includes/popups/render.php, and ONLY when a popup
   actually matched the current request.

   Brand values are read from main.css custom properties with a
   literal fallback, so a popup still looks right if this file is
   ever loaded on a page that hasn't loaded main.css yet.

   Per-popup values (width, padding, spacing, backdrop colour)
   arrive as inline --lhp-* custom properties from the renderer.
   ============================================================ */

.lh-popup {
    --lhp-accent: var(--primary-accent, #a5ce3c);
    --lhp-navy:   var(--dark-navy, #1a2b3a);
    --lhp-ink:    var(--off-black, #333333);
    --lhp-muted:  #6c757d;
    --lhp-radius: 12px;

    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    font-family: var(--font-primary, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}
.lh-popup[hidden] { display: none; }

/* The container itself must not eat clicks meant for the page behind a
   bar or slide-in. The backdrop and panel re-enable them. */
.lh-popup { pointer-events: none; }
.lh-popup__backdrop,
.lh-popup__panel { pointer-events: auto; }

.lh-popup__backdrop {
    position: absolute;
    inset: 0;
    background: var(--lhp-backdrop, rgba(0, 0, 0, 0.6));
    opacity: 0;
    transition: opacity 0.25s ease;
}
.lh-popup.is-open .lh-popup__backdrop { opacity: 1; }

.lh-popup__panel {
    position: relative;
    background: #fff;
    color: var(--lhp-ink);
    padding: var(--lhp-pad, 40px);
    width: var(--lhp-width, 560px);
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
    border-radius: var(--lhp-radius);
    opacity: 0;
    transition: opacity 0.28s ease, transform 0.28s ease;
}
.lh-popup.is-open .lh-popup__panel { opacity: 1; transform: none; }

.lh-popup__content {
    display: flex;
    flex-direction: column;
    gap: var(--lhp-gap, 20px);
}

/* ---- Theme ------------------------------------------------- */
.lh-popup--dark .lh-popup__panel { background: var(--lhp-navy); color: #f2f4f7; }
.lh-popup--dark .lh-popup-text a { color: var(--lhp-accent); }

/* ---- Close button ------------------------------------------ */
.lh-popup__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--lhp-close, #999);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    z-index: 2;
}
.lh-popup__close:hover { background: rgba(0, 0, 0, 0.07); }
.lh-popup--dark .lh-popup__close:hover { background: rgba(255, 255, 255, 0.12); }
.lh-popup__close:focus-visible { outline: 2px solid var(--lhp-accent); outline-offset: 2px; }

/* ============================================================
   Layout variants
   ============================================================ */

/* Modal: centred box. */
.lh-popup--modal { align-items: center; justify-content: center; padding: 16px; }
.lh-popup--modal .lh-popup__panel { transform: translateY(14px) scale(0.985); }

/* Panes: full-height column pinned to one side. */
.lh-popup--left-pane,
.lh-popup--right-pane { align-items: stretch; }
.lh-popup--left-pane  { justify-content: flex-start; }
.lh-popup--right-pane { justify-content: flex-end; }
.lh-popup--left-pane .lh-popup__panel,
.lh-popup--right-pane .lh-popup__panel {
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.lh-popup--left-pane  .lh-popup__panel { transform: translateX(-24px); }
.lh-popup--right-pane .lh-popup__panel { transform: translateX(24px); }

/* Slide-ins: small card in a bottom corner. */
.lh-popup--left-slide-in,
.lh-popup--right-slide-in { align-items: flex-end; padding: 20px; }
.lh-popup--left-slide-in  { justify-content: flex-start; }
.lh-popup--right-slide-in { justify-content: flex-end; }
.lh-popup--left-slide-in .lh-popup__panel,
.lh-popup--right-slide-in .lh-popup__panel { max-height: calc(100vh - 40px); }
.lh-popup--left-slide-in  .lh-popup__panel { transform: translateX(-24px); }
.lh-popup--right-slide-in .lh-popup__panel { transform: translateX(24px); }

/* Bars: full-width strip, no backdrop, page stays usable. */
.lh-popup--top-bar,
.lh-popup--bottom-bar {
    inset: auto 0 0 0;
    align-items: stretch;
    justify-content: center;
}
.lh-popup--top-bar { inset: 0 0 auto 0; }
.lh-popup--top-bar .lh-popup__panel,
.lh-popup--bottom-bar .lh-popup__panel {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    max-height: 60vh;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}
.lh-popup--top-bar .lh-popup__panel { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); }
.lh-popup--top-bar    .lh-popup__panel { transform: translateY(-100%); }
.lh-popup--bottom-bar .lh-popup__panel { transform: translateY(100%); }
.lh-popup--top-bar .lh-popup__content,
.lh-popup--bottom-bar .lh-popup__content {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Content alignment inside the panel. */
.lh-popup--align-left   .lh-popup__content { text-align: left; }
.lh-popup--align-center .lh-popup__content { text-align: center; }
.lh-popup--align-right  .lh-popup__content { text-align: right; }

/* ============================================================
   Elements
   ============================================================ */

.lh-popup-align-left   { text-align: left; }
.lh-popup-align-center { text-align: center; }
.lh-popup-align-right  { text-align: right; }

.lh-popup-heading {
    margin: 0;
    font-family: var(--font-secondary, "Montserrat", sans-serif);
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
}
h2.lh-popup-heading { font-size: clamp(1.4rem, 3.4vw, 1.9rem); }
h3.lh-popup-heading { font-size: clamp(1.2rem, 2.8vw, 1.45rem); }
h4.lh-popup-heading { font-size: clamp(1.02rem, 2.2vw, 1.15rem); }

.lh-popup-text { font-size: 0.98rem; line-height: 1.6; }
.lh-popup-text > *:first-child { margin-top: 0; }
.lh-popup-text > *:last-child  { margin-bottom: 0; }
.lh-popup-text img { max-width: 100%; height: auto; }

/* ---- Buttons ----------------------------------------------- */
.lh-popup-btn {
    display: inline-block;
    border: 2px solid transparent;
    border-radius: 50px;
    font-family: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.lh-popup-btn:hover { transform: translateY(-1px); text-decoration: none; }
.lh-popup-btn:focus-visible { outline: 2px solid var(--lhp-accent); outline-offset: 3px; }
.lh-popup-btn.is-full { display: block; width: 100%; }

.lh-popup-btn--small  { padding: 8px 22px;  font-size: 0.85rem; }
.lh-popup-btn--medium { padding: 12px 32px; font-size: 0.95rem; }
.lh-popup-btn--large  { padding: 15px 42px; font-size: 1.05rem; }

.lh-popup-btn--accent  { background: var(--lhp-accent); color: var(--lhp-navy); }
.lh-popup-btn--accent:hover { background: #94bb35; color: var(--lhp-navy); }
.lh-popup-btn--navy    { background: var(--lhp-navy); color: #fff; }
.lh-popup-btn--navy:hover { background: #0f1c28; color: #fff; }
.lh-popup-btn--white   { background: #fff; color: var(--lhp-navy); }
.lh-popup-btn--white:hover { background: #f1f3f5; color: var(--lhp-navy); }
.lh-popup-btn--outline { background: transparent; border-color: currentColor; color: inherit; }
.lh-popup-btn--outline:hover { background: rgba(0, 0, 0, 0.05); }
.lh-popup--dark .lh-popup-btn--outline:hover { background: rgba(255, 255, 255, 0.1); }

.lh-popup-link {
    color: var(--lhp-navy);
    text-decoration: underline;
    font-size: 0.92rem;
}
.lh-popup--dark .lh-popup-link { color: #dfe4ea; }

/* ---- Badge ------------------------------------------------- */
.lh-popup-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.lh-popup-badge--accent { background: var(--lhp-accent); color: var(--lhp-navy); }
.lh-popup-badge--navy   { background: var(--lhp-navy);   color: #fff; }
.lh-popup-badge--white  { background: #fff; color: var(--lhp-navy); border: 1px solid #e5e7eb; }
.lh-popup-badge--muted  { background: #eceff2; color: #55606b; }
.lh-popup-badge--danger { background: #c0392b; color: #fff; }

/* ---- Coupon ------------------------------------------------ */
.lh-popup-coupon { text-align: center; }
.lh-popup-coupon__caption {
    font-size: 0.82rem;
    color: var(--lhp-muted);
    margin-bottom: 6px;
}
.lh-popup--dark .lh-popup-coupon__caption { color: #b6bfc9; }
.lh-popup-coupon__code {
    display: block;
    width: 100%;
    border: 2px dashed currentColor;
    border-radius: 8px;
    background: transparent;
    padding: 12px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    color: inherit;
    transition: background 0.15s ease;
}
.lh-popup-coupon__code[data-lhp-copy]:hover { background: rgba(0, 0, 0, 0.04); }
.lh-popup--dark .lh-popup-coupon__code[data-lhp-copy]:hover { background: rgba(255, 255, 255, 0.08); }
.lh-popup-coupon--accent .lh-popup-coupon__code { color: #6e8c1e; }
.lh-popup--dark .lh-popup-coupon--accent .lh-popup-coupon__code { color: var(--lhp-accent); }
.lh-popup-coupon--navy   .lh-popup-coupon__code { color: var(--lhp-navy); }
.lh-popup-coupon--danger .lh-popup-coupon__code { color: #c0392b; }
.lh-popup-coupon__hint {
    display: block;
    font-family: var(--font-primary, sans-serif);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.65;
    margin-top: 4px;
}
.lh-popup-coupon__code.is-copied .lh-popup-coupon__hint::after { content: ' — copied'; }
.lh-popup-coupon__link {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.85rem;
    color: inherit;
}

/* ---- Timer ------------------------------------------------- */
.lh-popup-timer { text-align: center; }
.lh-popup-timer__caption {
    font-size: 0.82rem;
    color: var(--lhp-muted);
    margin-bottom: 8px;
}
.lh-popup--dark .lh-popup-timer__caption { color: #b6bfc9; }
.lh-popup-timer__clock {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.lh-popup-timer__unit {
    min-width: 58px;
    padding: 8px 6px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.05);
}
.lh-popup--dark .lh-popup-timer__unit { background: rgba(255, 255, 255, 0.08); }
.lh-popup-timer__unit span {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.lh-popup-timer__unit em {
    display: block;
    font-style: normal;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.65;
    margin-top: 2px;
}
.lh-popup-timer__clock.is-bare em { display: none; }
.lh-popup-timer--accent .lh-popup-timer__unit span { color: #6e8c1e; }
.lh-popup--dark .lh-popup-timer--accent .lh-popup-timer__unit span { color: var(--lhp-accent); }
.lh-popup-timer--danger .lh-popup-timer__unit span { color: #c0392b; }
.lh-popup-timer__expired { font-weight: 600; }

/* ---- Form -------------------------------------------------- */
.lh-popup-form__heading { font-weight: 600; margin-bottom: 8px; }
.lh-popup-form__sink { display: none; }
.lh-popup-form__hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lh-popup-form__label--sr {
    position: absolute; left: -9999px;
    width: 1px; height: 1px; overflow: hidden;
}
.lh-popup-form__label { display: block; font-size: 0.82rem; margin-bottom: 4px; }
.lh-popup-form__input {
    width: 100%;
    padding: 12px 18px;
    margin-bottom: 10px;
    border: 1px solid #d7dbe0;
    border-radius: 50px;
    font-family: inherit;
    font-size: 0.95rem;
    background: #fff;
    color: var(--lhp-ink);
}
.lh-popup-form__input:focus {
    outline: none;
    border-color: var(--lhp-accent);
    box-shadow: 0 0 0 3px rgba(165, 206, 60, 0.25);
}
.lh-popup-form__done {
    padding: 12px;
    font-weight: 600;
    text-align: center;
}

/* ---- Event card (live from tbl_events) --------------------- */
.lh-popup-event { text-align: left; }
.lh-popup-event__media {
    display: block;
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
}
/* Show the WHOLE event image, never a crop. Event artwork is often a portrait
   flyer, and cropping it to a 16:9 box cut the top and bottom off.
   max-width + max-height with auto dimensions makes the browser scale the
   image down to fit inside both bounds while keeping its aspect ratio, so
   nothing is lost and the popup cannot be blown out by a large file.
   Using max-width rather than width also stops a small image being upscaled
   into a blurry mess. Anyone wanting a closer look clicks through to the
   event page. */
.lh-popup-event__media img {
    display: block;
    margin: 0 auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 380px;
}
.lh-popup-event__title {
    font-family: var(--font-secondary, "Montserrat", sans-serif);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
}
.lh-popup-event__subtitle {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 2px;
}
.lh-popup-event__when {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 8px;
    font-size: 0.88rem;
}
.lh-popup-event__date { font-weight: 600; }
.lh-popup-event__time { opacity: 0.75; }
.lh-popup-event__cta { margin-top: 14px; }

/* Image beside the details, on wide-enough popups only. */
.lh-popup-event--side { display: flex; gap: 16px; align-items: flex-start; }
.lh-popup-event--side .lh-popup-event__media {
    flex: 0 0 40%;
    max-width: 40%;
    margin-bottom: 0;
}
.lh-popup-event--side .lh-popup-event__body { flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) {
    .lh-popup-event--side { display: block; }
    .lh-popup-event--side .lh-popup-event__media {
        max-width: 100%;
        margin-bottom: 12px;
    }
}

/* Centre-aligned popups should centre the card contents too. */
.lh-popup--align-center .lh-popup-event--stacked { text-align: center; }
.lh-popup--align-center .lh-popup-event--stacked .lh-popup-event__when { justify-content: center; }

/* ---- Media ------------------------------------------------- */
.lh-popup-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: inline-block;
}
.lh-popup-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 8px;
    overflow: hidden;
}
.lh-popup-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.lh-popup-iframe iframe {
    width: 100%;
    border: 0;
    border-radius: 8px;
    display: block;
}

/* Contains an unclosed tag from the HTML element so it cannot swallow the
   rest of the document (see plan §4.2). */
.lh-popup-html { min-width: 0; overflow-wrap: anywhere; }
.lh-popup-html img { max-width: 100%; height: auto; }

/* ---- Spacing / separator ----------------------------------- */
.lh-popup-spacer { height: var(--lhp-h, 20px); flex: 0 0 auto; }
.lh-popup-sep {
    border: 0;
    border-top: 1px solid currentColor;
    margin: 0;
    width: 100%;
}
.lh-popup-sep--dashed { border-top-style: dashed; }
.lh-popup-sep--dotted { border-top-style: dotted; }
.lh-popup-sep--accent { color: var(--lhp-accent); }
.lh-popup-sep--navy   { color: var(--lhp-navy); }
.lh-popup-sep--white  { color: #fff; }
.lh-popup-sep--muted  { color: rgba(0, 0, 0, 0.15); }
.lh-popup-sep--danger { color: #c0392b; }
.lh-popup--dark .lh-popup-sep--muted { color: rgba(255, 255, 255, 0.2); }

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 767px) {
    .lh-popup__panel {
        padding: var(--lhp-pad-m, 24px);
        max-width: 100%;
    }
    .lh-popup__content { gap: var(--lhp-gap-m, 16px); }
    .lh-popup-spacer { height: var(--lhp-hm, 16px); }
    .lh-popup-timer__unit { min-width: 48px; }
    .lh-popup-timer__unit span { font-size: 1.2rem; }

    /* Cap the event image against the viewport on phones, so a tall portrait
       flyer cannot push the title and button out of view. Still the whole
       image, just scaled to fit. */
    .lh-popup-event__media img { max-height: 38vh; }

    /* The mobile layout can differ from desktop. These override the desktop
       variant classes at phone widths. */
    .lh-popup--m-modal { align-items: center; justify-content: center; padding: 16px; inset: 0; }
    .lh-popup--m-modal .lh-popup__panel {
        width: var(--lhp-width, 560px);
        height: auto;
        max-height: calc(100vh - 32px);
        border-radius: var(--lhp-radius);
        transform: translateY(14px) scale(0.985);
    }

    .lh-popup--m-top-bar,
    .lh-popup--m-bottom-bar {
        align-items: stretch;
        justify-content: center;
        padding: 0;
    }
    .lh-popup--m-bottom-bar { inset: auto 0 0 0; }
    .lh-popup--m-top-bar    { inset: 0 0 auto 0; }
    .lh-popup--m-top-bar .lh-popup__panel,
    .lh-popup--m-bottom-bar .lh-popup__panel {
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: 0;
        max-height: 70vh;
    }
    .lh-popup--m-top-bar    .lh-popup__panel { transform: translateY(-100%); }
    .lh-popup--m-bottom-bar .lh-popup__panel { transform: translateY(100%); }

    .lh-popup--m-left-pane,
    .lh-popup--m-right-pane { inset: 0; align-items: stretch; padding: 0; }
    .lh-popup--m-left-pane  { justify-content: flex-start; }
    .lh-popup--m-right-pane { justify-content: flex-end; }
    .lh-popup--m-left-pane .lh-popup__panel,
    .lh-popup--m-right-pane .lh-popup__panel {
        width: min(var(--lhp-width, 560px), 88vw);
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    .lh-popup--m-left-pane  .lh-popup__panel { transform: translateX(-24px); }
    .lh-popup--m-right-pane .lh-popup__panel { transform: translateX(24px); }

    .lh-popup--m-left-slide-in,
    .lh-popup--m-right-slide-in {
        inset: 0;
        align-items: flex-end;
        justify-content: center;
        padding: 12px;
    }
    .lh-popup--m-left-slide-in .lh-popup__panel,
    .lh-popup--m-right-slide-in .lh-popup__panel {
        width: 100%;
        height: auto;
        max-height: calc(100vh - 24px);
        border-radius: var(--lhp-radius);
        transform: translateY(24px);
    }
}

/* ============================================================
   Reduced motion — no slide/scale, just a fade.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .lh-popup__panel,
    .lh-popup__backdrop { transition: opacity 0.01ms linear; }
    .lh-popup .lh-popup__panel { transform: none !important; }
    .lh-popup-btn:hover { transform: none; }
}