/* Click-out capture surfaces — the inline value-exchange block and the
   post-click origin-tab panel on affiliate event pages. Colour accents come
   exclusively from the --rave-* tokens in store/css/components/variables.css;
   Arial per the design lock. Mobile-first: full-width vertical stack, 44px tap
   targets throughout. Neither surface obstructs page content (no full-screen
   overlay) — the post-click panel is a fixed bottom card the visitor dismisses. */

/* ── Shared form bits (both surfaces) ─────────────────────────────────────── */
.crm-clickout__form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
}

.crm-clickout__label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: left;
    margin-bottom: -0.35rem;
    font-family: Arial, Helvetica, sans-serif;
}

.crm-clickout__input {
    width: 100%;
    min-height: 44px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.95);
    padding: 0.6rem 0.9rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
}

.crm-clickout__input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.crm-clickout__input:focus {
    outline: none;
    border-color: var(--rave-primary);
    box-shadow: 0 0 10px var(--rave-glow-soft);
}

/* Off-screen decoy field; not part of the visible form. */
.crm-clickout__extra {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.crm-clickout__submit {
    width: 100%;
    min-height: 44px;
}

.crm-clickout__disclosure {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.4;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
}

/* ── Inline value-exchange block ──────────────────────────────────────────── */
.crm-clickout-inline {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin-top: 1rem;
    padding: 1rem;
    background: var(--rave-notice-bg);
    border: 1px solid rgba(255, 0, 255, 0.25);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.crm-clickout-inline__lead {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.4;
}

/* Mutual exclusion: clickout-capture.js adds this when the post-click panel
   reveals, so the inline widget and the panel are never on screen at once. */
.crm-clickout-inline--suppressed {
    display: none;
}

/* ── Post-click origin-tab panel ──────────────────────────────────────────── */
/* Fixed bottom sheet — visible only when the JS adds .is-visible after a real
   buy-click gesture (the [hidden] attribute holds it dark before that). It does
   NOT cover the page content; it is a dismissible strip anchored to the bottom.
   Position-fixed and [hidden]->display:none, so it overlays without reflowing
   the page: zero layout shift (CLS) on reveal. On mobile it is a flush-bottom
   sheet (the inline widget is hidden while it shows, so the page is not crowded);
   on desktop it becomes a corner card (see the min-width media query). */
.crm-clickout-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    display: flex;
    justify-content: center;
    padding: 0;
    pointer-events: none;
}

.crm-clickout-panel[hidden] {
    display: none;
}

.crm-clickout-panel.is-visible {
    animation: crm-clickout-rise 0.25s ease-out;
}

@keyframes crm-clickout-rise {
    from { transform: translateY(110%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.crm-clickout-panel__inner {
    position: relative;
    pointer-events: auto;
    width: 100%;
    max-width: 480px;
    background: linear-gradient(135deg, var(--rave-dark), #2a0044);
    border: 1px solid var(--rave-primary);
    /* Mobile bottom sheet: rounded top corners, flush to the bottom edge. The
       desktop media query restores an all-round corner card. */
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(255, 0, 255, 0.25);
    /* Plain fallback first: a browser without env() support drops the next
       declaration entirely and keeps this one. */
    padding: 1.1rem 1.1rem 1rem;
    padding: 1.1rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    /* Never let the sheet grow taller than the viewport. On a short screen (a
       small phone, or a browser whose address bar shrinks the usable height)
       the content scrolls inside the sheet instead of spilling off the top or
       bottom edge, so the headline, form and close button always stay reachable.
       The plain vh line is the fallback; 100dvh tracks the dynamic viewport on
       browsers that support it. Tall content is rare, so the scrollbar only
       appears when it is genuinely needed. */
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
}

.crm-clickout-panel__close {
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.crm-clickout-panel__close:hover,
.crm-clickout-panel__close:focus {
    color: #fff;
    outline: none;
}

.crm-clickout-panel__headline {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    padding-right: 2.5rem;
}

.crm-clickout-panel__lead {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .crm-clickout-panel {
        justify-content: flex-end;
        padding: 1.25rem;
    }

    /* Desktop: a floating corner card rather than a flush bottom sheet. */
    .crm-clickout-panel__inner {
        border-bottom: 1px solid var(--rave-primary);
        border-radius: 14px;
        box-shadow: 0 0 24px rgba(255, 0, 255, 0.25);
        padding: 1.1rem 1.1rem 1rem;
    }
}