/* pricing-page.css
 *
 * What both public pricing pages share and Tailwind cannot express: the interval toggle, the rolling
 * digits of pricing-page.js and the accordion icon. Loaded by the LeadWin pricing page on the LeadWin
 * host and by the Feedbax pricing page on the app hosts; outside the Tailwind pipeline, so colours are
 * tokens or literals, never theme().
 */

/* ---------- interval toggle ---------- */

.pp-toggle {
    display: inline-flex;
    gap: 4px;
    border-radius: 9999px;
    padding: 4px;
    background: #f4f4f5;
}

.dark .pp-toggle { background: #27272a; }

.pp-pill {
    cursor: pointer;
    font-family: inherit;
    border: 0;
    border-radius: 9999px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    color: var(--primary);
    transition: background .25s, color .25s, box-shadow .25s;
}

.pp-pill.pp-active {
    background: #18181b;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 2px rgb(0 0 0 / .12);
}

.dark .pp-pill.pp-active {
    background: #f4f4f5;
    color: #18181b;
}

/* The saving inside the yearly option's label ("Jährlich (bis 25 % sparen)"): green, so it reads as the reason
   to pick that option, and a shade lighter or darker on the filled active pill so it stays legible there. */
.pp-save {
    font-size: .88em;
    font-weight: 600;
    color: #047857;
}

.pp-pill.pp-active .pp-save { color: #6ee7b7; }
.dark .pp-save { color: #6ee7b7; }
.dark .pp-pill.pp-active .pp-save { color: #047857; }

/* On a phone "Vierteljährlich | Jährlich (bis 33 % sparen)" is wider than the screen; the saving then takes its
   own line under "Jährlich" instead of pushing the toggle out of the page. */
@media (max-width: 480px) {
    .pp-save {
        display: block;
        font-size: .8em;
        line-height: 1.2;
    }
}

/* The compact toggle of a card billed on its own (the tender access), below the page's main toggle. */
.pp-toggle-sm { padding: 3px; }

.pp-toggle-sm .pp-pill {
    padding: 6px 13px;
    font-size: 13px;
}

/* ---------- sticky plan name ---------- */

/* A plan card is taller than the screen, and halfway down its feature list nobody knows any more which plan
   they are reading. The name stays pinned under the site header until the card has scrolled past. It reaches
   out to the card's edges with the card's own background, so the list slides under it, and stops short of an
   inset ring by the ring's width so the ring stays drawn. --pp-pad is the card's padding (28px), --pp-ring its
   ring (1px); a card that differs sets them on the head. Fallbacks, not declarations here: this sheet is
   unlayered and would beat the utility that sets them.
   At the very top on the app hosts, whose header only shows in chat and brief and never on this page; below
   the LeadWin host's 68px sticky header there. */
.pp-card-head {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: -12px calc(var(--pp-ring, 1px) - var(--pp-pad, 28px)) 0;
    padding: 12px calc(var(--pp-pad, 28px) - var(--pp-ring, 1px));
    transition: box-shadow .2s;
}

/* The card's background only while pinned: in place, the square head reached into the card's rounded top
   corners and painted over a sliver of a highlighted card's ring there, and in place nothing scrolls under it. */
.pp-card-head.is-stuck { background: inherit; }

.la-page .pp-card-head { top: 68px; }

/* The app's base styles give every paragraph a bottom margin, which made the pinned bar a line taller there.
   Only the bottom one: the tagline inside the entry cards' head keeps its top margin. */
.pp-card-head p { margin-bottom: 0; }

/* Set by pricing-page.js while the name is pinned: a hairline so the list reads as sliding under it. */
.pp-card-head.is-stuck { box-shadow: 0 1px 0 var(--border); }

/* The price beside the pinned name. Unpinned, the full price sits right below the head, so this one only
   fades in once the head is pinned; it keeps its space either way, so nothing shifts when it appears. */
.pp-head-price {
    opacity: 0;
    transition: opacity .2s;
}

.pp-card-head.is-stuck .pp-head-price { opacity: 1; }

/* The plan names above the comparison table stay pinned while its rows scroll past, at the same offset as
   the card heads. It only pins from md: below, the table scrolls sideways inside its own box, and a sticky
   element can pin to nothing but that box. */
.pp-table-head {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
}

.la-page .pp-table-head { top: 68px; }

/* ---------- rolling digits ---------- */

/* Every character of a rolling price sits in a box one line tall, so digits and currency stay on one
   baseline while the strips move. Tabular figures keep the width steady between two prices. */
[data-pricing-amount] { font-variant-numeric: tabular-nums; }

.pp-roll-line {
    display: inline-flex;
    white-space: pre;
}

.pp-roll,
.pp-roll-char,
.pp-roll-strip > span {
    display: block;
    height: 1.1em;
    line-height: 1.1em;
}

.pp-roll { overflow: hidden; }

.pp-roll-strip {
    display: flex;
    flex-direction: column;
    transition: transform .65s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}

/* ---------- interval swap ---------- */

/* What the toggle shows in place of the other interval (billing note, booking button) fades up into
   place, so the line changes along with the rolling price instead of jumping. */
.pp-swap-in { animation: pp-swap-in .35s cubic-bezier(.2, .8, .2, 1) both; }

@keyframes pp-swap-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

/* ---------- accordion (native details/summary, animated by pricing-page.js) ---------- */

.pp-acc details > summary {
    list-style: none;
    cursor: pointer;
}

.pp-acc details > summary::-webkit-details-marker { display: none; }

.pp-acc-icon {
    position: relative;
    display: inline-flex;
    height: 16px;
    width: 16px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--brand);
}

.pp-acc-icon::before,
.pp-acc-icon::after {
    content: "";
    position: absolute;
    border-radius: 2px;
    background: currentColor;
}

.pp-acc-icon::before {
    height: 2px;
    width: 100%;
}

.pp-acc-icon::after {
    height: 100%;
    width: 2px;
    transition: transform .25s, opacity .25s;
}

/* A closing details keeps its open flag until the slide has finished; the icon turns at once. */
.pp-acc details[open]:not(.is-closing) > summary .pp-acc-icon::after {
    transform: scaleY(0);
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .pp-pill,
    .pp-roll-strip,
    .pp-card-head,
    .pp-head-price,
    .pp-acc-icon::after { transition: none; }

    .pp-swap-in { animation: none; }
}