/* ==========================================================================
   Preads product page
   --------------------------------------------------------------------------
   Page-specific styling for products/preads.blade.php. The reusable
   product-page components live in product-page.css, which this page loads
   first.

   Only two things are defined here now, because they are genuinely Preads-only:
   the integration code block and the network name list. A code sample and a list
   of 34 affiliate networks are not things a generic product page has.

   Six blocks used to be here and moved to product-page.css once VibeCash needed
   the same components: the hero and final-CTA overflow guard, the screenshot
   lightbox, the breakable inline code rule, the counted proof strip, the
   disclosure columns and the stack labels. A second copy of any of them would
   have drifted.

   Every colour is taken from the theme's custom properties, so the page follows
   light and dark mode without a second set of rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Integration code block
   --------------------------------------------------------------------------
   Real embed snippet. Monospace, horizontally scrollable rather than wrapping,
   because a wrapped <iframe> tag invites a copy-paste that silently breaks.
   -------------------------------------------------------------------------- */

.pd-code {
    margin: 0;
    /* max-width matters: without it the <pre> sizes to its longest line and
       pushes the card wider than the viewport on a phone. The block scrolls
       horizontally instead, which is the behaviour a code sample wants. */
    max-width: 100%;
    padding: 1.1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--hs-border, rgba(128, 128, 128, 0.22));
    background: rgba(127, 127, 127, 0.08);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pd-code code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--hs-text, inherit);
    white-space: pre;
}

.pd-code-tag {
    color: var(--hs-primary, currentColor);
}

.pd-code-attr {
    opacity: 0.85;
}

.pd-code-val {
    color: var(--hs-primary, currentColor);
}

/* --------------------------------------------------------------------------
   3. Network name list
   --------------------------------------------------------------------------
   32 adapters, named. A count alone asks the reader to trust; the names let a
   publisher find their own network in the list.
   -------------------------------------------------------------------------- */

.pd-networks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pd-networks li {
    /* max-width keeps a long network name from forcing the pill wider than a
       320px viewport; overflow-wrap lets it break only if it truly must. */
    max-width: 100%;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--hs-border, rgba(128, 128, 128, 0.22));
    background: rgba(127, 127, 127, 0.06);
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--hs-muted, inherit);
    white-space: nowrap;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   4. Learn-more cards
   -------------------------------------------------------------------------- */

.pd-learn-more {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease;
}

.pd-learn-more:hover {
    transform: translateY(-4px);
}

.pd-learn-more h3 {
    font-size: 1.02rem;
    line-height: 1.45;
}

.pd-learn-more .hs-fine-print {
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-size: 0.82rem;
}

@media (prefers-reduced-motion: reduce) {
    .pd-learn-more {
        transition: none;
    }

    .pd-learn-more:hover {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   5. Hero visuals: CTA pulse, mockup glow and floating proof stats
   --------------------------------------------------------------------------
   The hero already carries a browser-framed dashboard mockup; this layer gives
   it the "light spilling out of the window" wash the premium layer uses on
   other product pages, pins two proof figures to the frame, and makes the
   primary buy button pulse.

   The pulse only animates box-shadow, so the .hs-btn-premium hover colour and
   lift still apply while it runs.
   -------------------------------------------------------------------------- */

@keyframes pd-cta-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(109, 74, 255, 0.35); }
    70%  { box-shadow: 0 0 0 12px rgba(109, 74, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(109, 74, 255, 0); }
}

.hs-btn-premium.pd-cta-pulse {
    animation: pd-cta-pulse 2.4s ease-out infinite;
}

.pd-hero-visual {
    position: relative;
}

.pd-hero-visual::before {
    content: "";
    position: absolute;
    inset: 6% 4%;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(109, 74, 255, 0.22), transparent 68%);
    filter: blur(28px);
    pointer-events: none;
}

.pd-hero-visual .hs-product-frame {
    box-shadow:
        0 0 0 1px rgba(109, 74, 255, 0.16),
        0 20px 50px rgba(8, 112, 184, 0.2),
        0 30px 70px -34px rgba(109, 74, 255, 0.55);
}

/* Two proof figures pinned to the mockup, echoing the proof strip directly
   below the fold. Hidden below lg rather than stacked: on a phone the hero
   column is already the full width and the two would cover the screenshot.
   VibeCash carries the same component under the vc- prefix in vibecash.css;
   if a third product page needs it, it belongs in product-page.css instead
   of a third copy. */
.pd-float-stat {
    position: absolute;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--hs-radius-md);
    border: 1px solid var(--hs-border);
    background: var(--hs-surface);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--hs-shadow-md);
    font-size: 13px;
    white-space: nowrap;
}

.pd-float-stat b {
    font-family: var(--font-heading);
    font-size: 15px;
    color: var(--hs-heading);
}

.pd-float-stat span {
    color: var(--hs-muted);
}

.pd-float-stat i {
    color: var(--hs-primary);
    font-size: 16px;
}

.pd-float-stat--a {
    top: -18px;
    left: -26px;
}

.pd-float-stat--b {
    bottom: -18px;
    right: -18px;
}

@media (max-width: 1199.98px) {
    .pd-float-stat--a { left: -8px; }
    .pd-float-stat--b { right: -6px; }
}

@media (max-width: 991.98px) {
    .pd-float-stat { display: none; }
}

/* --------------------------------------------------------------------------
   6. Audience tabs (Advertisers vs Publishers)
   --------------------------------------------------------------------------
   Mirrors the tabbed showcase VibeCash ships, renamed to the pd- prefix.
   Progressive enhancement: no panel is hidden until the script marks the root
   [data-pd-tabs-ready], so the section stays readable with scripting off.
   -------------------------------------------------------------------------- */

.pd-tablist {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.pd-tablist::-webkit-scrollbar {
    display: none;
}

.pd-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid var(--hs-border);
    background: var(--hs-surface);
    color: var(--hs-muted);
    font: 600 14px/1.2 var(--font-body);
    white-space: nowrap;
    min-height: 44px;
    justify-content: center;
    transition:
        color var(--hs-transition),
        border-color var(--hs-transition),
        background-color var(--hs-transition),
        transform var(--hs-transition);
}

@media (hover: hover) and (pointer: fine) {
    .pd-tab {
        min-height: 0;
    }
}

.pd-tab i {
    font-size: 16px;
    color: var(--hs-primary);
}

@media (hover: hover) {
    .pd-tab:hover {
        color: var(--hs-heading);
        border-color: rgba(109, 74, 255, 0.3);
        transform: translateY(-1px);
    }
}

.pd-tab[aria-selected="true"] {
    color: #fff;
    border-color: transparent;
    background-image: var(--hs-grad-primary);
    box-shadow: var(--hs-shadow-sm);
}

.pd-tab[aria-selected="true"] i {
    color: #fff;
}

.pd-tab:focus-visible {
    outline: 2px solid var(--hs-primary);
    outline-offset: 3px;
}

.pd-tab-panel {
    animation: pd-panel-in 260ms ease-out;
}

@keyframes pd-panel-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

[data-pd-tabs-ready] .pd-tab-panel {
    display: none;
}

[data-pd-tabs-ready] .pd-tab-panel.is-active {
    display: block;
}

.pd-tab-intro {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    padding: 18px 20px;
    border: 1px solid var(--hs-border);
    border-left: 3px solid var(--hs-primary);
    border-radius: var(--hs-radius-md);
    background: var(--hs-surface);
}

.pd-tab-intro i {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--hs-primary);
    margin-top: 2px;
}

.pd-tab-intro p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--hs-muted);
}

@media (prefers-reduced-motion: reduce) {
    .hs-btn-premium.pd-cta-pulse,
    .pd-tab-panel {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   7. Copy to clipboard: code-bar button and quick-access card
   --------------------------------------------------------------------------
   The page ships no default credentials (the installer creates the first
   admin account on site), so the "quick access" card copies what a buyer
   actually uses: the demo URL, the documentation URL and the wall iframe
   snippet. The button flips to a green checked state on success.
   -------------------------------------------------------------------------- */

.pd-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--hs-border);
    background: var(--hs-surface);
    color: var(--hs-muted);
    font: 600 12px/1 var(--font-body);
    cursor: pointer;
    transition:
        color var(--hs-transition),
        border-color var(--hs-transition),
        background-color var(--hs-transition);
}

.pd-copy-btn i {
    font-size: 13px;
    color: var(--hs-primary);
}

.pd-copy-btn:hover {
    color: var(--hs-heading);
    border-color: rgba(109, 74, 255, 0.35);
}

.pd-copy-btn.is-copied {
    color: #16a34a;
    border-color: rgba(22, 163, 74, 0.4);
    background: rgba(22, 163, 74, 0.06);
}

.pd-copy-btn.is-copied i {
    color: #16a34a;
}

.pd-copy-btn:focus-visible {
    outline: 2px solid var(--hs-primary);
    outline-offset: 3px;
}

.pd-code-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.pd-code-bar > span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hs-muted);
}

.pd-copy-card {
    border-radius: var(--hs-radius-lg);
    border: 1px solid var(--hs-border);
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: var(--hs-shadow-md);
    padding: 1.5rem;
}

[data-theme="dark"] .pd-copy-card {
    background: rgba(23, 26, 33, 0.6);
}

.pd-copy-card h3 {
    font-size: 1.05rem;
    margin: 0 0 0.25rem;
}

.pd-copy-card-note {
    color: var(--hs-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.pd-copy-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 0.85rem 0;
    border-top: 1px solid var(--hs-border);
}

.pd-copy-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hs-muted);
}

.pd-copy-value {
    display: block;
    margin-top: 0.2rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--hs-text);
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .pd-copy-row {
        grid-template-columns: 1fr;
    }

    .pd-copy-row .pd-copy-btn {
        justify-self: start;
    }
}

.pd-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1200;
    transform: translate(-50%, 16px);
    opacity: 0;
    pointer-events: none;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--hs-border);
    background: var(--hs-surface);
    box-shadow: var(--hs-shadow-md);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--hs-heading);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.pd-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   8. Technical strip: stack badges and payment-gateway tiles
   -------------------------------------------------------------------------- */

.pd-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pd-badges li {
    max-width: 100%;
    padding: 0.45rem 0.95rem;
    border-radius: 12px;
    border: 1px solid var(--hs-border);
    background: var(--hs-primary-light);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--hs-text);
    white-space: nowrap;
}

.pd-badges li i {
    color: var(--hs-primary);
    margin-right: 0.4rem;
}

.pd-gateway {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
    padding: 1.1rem 1.2rem;
    border-radius: var(--hs-radius-md);
    border: 1px solid var(--hs-border);
    background: var(--hs-surface);
    box-shadow: var(--hs-shadow-sm);
    transition:
        transform var(--hs-card-transition),
        border-color var(--hs-card-transition),
        box-shadow var(--hs-card-transition);
}

.pd-gateway i {
    font-size: 20px;
    color: var(--hs-primary);
}

.pd-gateway strong {
    font-size: 0.95rem;
    color: var(--hs-heading);
}

.pd-gateway span {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--hs-muted);
}

@media (hover: hover) {
    .pd-gateway:hover {
        transform: translateY(-2px);
        border-color: rgba(109, 74, 255, 0.3);
        box-shadow: var(--hs-shadow-md);
    }
}

/* --------------------------------------------------------------------------
   9. Pricing card highlight
   --------------------------------------------------------------------------
   The store sells one licence type at one price, so the single card is
   promoted rather than split into invented tiers: a floating chip, a gradient
   top accent, a stronger shadow and a slight scale on desktop. The has-price
   check icons flip green so an included item reads as a check at a glance.
   -------------------------------------------------------------------------- */

.pd-price-wrap {
    position: relative;
}

.pd-price-chip {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    padding: 6px 14px;
    border-radius: 999px;
    background-image: var(--hs-grad-primary);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: var(--hs-shadow-sm);
    white-space: nowrap;
}

.pd-price-feature {
    position: relative;
    border-color: rgba(109, 74, 255, 0.45);
    box-shadow:
        0 0 0 1px rgba(109, 74, 255, 0.18),
        0 30px 70px -30px rgba(109, 74, 255, 0.5);
}

.pd-price-feature::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 20px 20px 0 0;
    background-image: var(--hs-grad-primary);
    z-index: 2;
}

.pd-price-feature .hs-price-includes i,
.pd-quote-card .hs-price-includes i {
    color: #16a34a;
}

/* Quote cards (customization / new project): no price, same card language,
   quiet hover lift to match the other pricing-tier cards. */
.pd-quote-card {
    transition: transform .3s ease, box-shadow .3s ease;
}

.pd-quote-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -34px rgba(109, 74, 255, 0.45);
}

@media (min-width: 992px) {
    .pd-price-feature {
        transform: scale(1.02);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd-gateway,
    .pd-copy-btn {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   10. Responsive and interaction polish
   --------------------------------------------------------------------------
   Measured in a headless render at 1440 / 1024 / 768 / 390 / 360 px:

   - The two audience tabs are 335 px wide together, so below ~420 px the
     tabbar clipped the second pill. Tabs now share the bar equally on the
     smallest screens (scroll remains as a safe fallback).
   - The embed `<pre>` is white-space: pre, which forced a ~350 px horizontal
     swipe on phones. It soft-wraps below 768 px and drops to 13 px between
     768-1200 px so long lines fit on laptops too.
   - Copy buttons measured 27 px tall on touch screens; they now get a 40 px
     tall hit area wherever the pointer is coarse (phones and touch tablets).
   - The code-bar label + button wrap on very narrow screens instead of
     cramping.
   - The toast keeps a max width on phones so a long message cannot run off
     the right edge.
   -------------------------------------------------------------------------- */

@media (max-width: 419.98px) {
    .pd-tablist {
        justify-content: space-between;
    }

    .pd-tab {
        flex: 1 1 0%;
        min-width: 0;
        padding: 11px 10px;
        font-size: 13px;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .pd-code,
    .pd-code code,
    .pd-code span {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .pd-code {
        font-size: 13px;
        overflow-x: hidden;
    }
}

@media (max-width: 767.98px) {
    .pd-code,
    .pd-code code,
    .pd-code span {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .pd-code {
        font-size: 13px;
        overflow-x: hidden;
    }

    .pd-copy-btn {
        min-height: 40px;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* 16px larger hit area on touch screens (phones and touch tablets alike) */
@media (pointer: coarse) {
    .pd-copy-btn {
        min-height: 40px;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 575.98px) {
    .pd-code-bar {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .pd-toast {
        max-width: calc(100vw - 32px);
        white-space: normal;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   11. Sticky buy bar
   --------------------------------------------------------------------------
   Appears once the hero buttons have scrolled away and stands down again over
   the pricing section, so the sticky bar and the real price card never compete
   for the same pixel. Hidden until JavaScript marks it visible, because a fixed
   bar that ships visible would cover the cookie notice on first paint.
   -------------------------------------------------------------------------- */

.pd-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    border-top: 1px solid var(--hs-border);
    background: color-mix(in srgb, var(--hs-surface) 92%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 -12px 32px -24px rgba(15, 17, 23, 0.6);
    transform: translateY(110%);
    visibility: hidden;
    transition:
        transform var(--hs-card-transition),
        visibility var(--hs-card-transition);
}

.pd-sticky-cta.is-visible {
    transform: translateY(0);
    visibility: visible;
}

.pd-sticky-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-block: 12px;
}

.pd-sticky-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-right: auto;
}

.pd-sticky-meta strong {
    font-family: var(--font-heading);
    font-size: 15px;
    line-height: 1.3;
    color: var(--hs-heading);
    white-space: nowrap;
}

.pd-sticky-meta span {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--hs-muted);
    white-space: nowrap;
}

.pd-sticky-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* The cookie notice is fixed to the same corner at z-index 9999. Lifting the
   bar above it keeps the Accept/Decline buttons clickable, which is the whole
   point of a sticky bar; the theme already relies on :has() for the navigation
   drawer, so the support floor is the same. */
body:has(.cookie-notice.is-visible) .pd-sticky-cta {
    bottom: 108px;
}

/* The copy toast sits at bottom: 24px. When the bar is visible the toast would
   be half hidden under it, so float it above the bar. */
body:has(.pd-sticky-cta.is-visible) .pd-toast {
    bottom: 84px;
}

@media (max-width: 575.98px) {
    .pd-sticky-inner {
        gap: 10px;
    }

    .pd-sticky-meta span {
        display: none;
    }

    .pd-sticky-actions .btn {
        padding-inline: 16px;
    }

    /* The demo link is a duplicate of the hero and pricing links, so it is the
       first thing to go when the bar is down to two buttons on a 320px screen. */
    .pd-sticky-actions .btn-outline {
        display: none;
    }

    body:has(.cookie-notice.is-visible) .pd-sticky-cta {
        bottom: 150px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd-sticky-cta {
        transition: none;
    }
}

/* The sticky bar's buttons are .btn-sm, which caps at 40px. That clears the
   24px WCAG minimum but is tight for a thumb on the one control that is meant
   to stay reachable while scrolling, so touch devices get more height. */
@media (hover: none), (pointer: coarse) {
    .pd-sticky-actions .btn-sm {
        min-height: 44px;
    }
}