/**
 * Pricing layouts — shared machinery.
 *
 * Loaded after the design tokens and BEFORE each pricing-layoutN.css.
 * Everything here is driven by two inputs:
 *
 *   --ss-*   design tokens (Appearance settings — colors)
 *   --ssl-*  layout design settings (Pricing settings — chrome, printed
 *            inline by Subs_Sys_Layout_Settings::inline_css())
 *
 * Specificity contract (so the cascade stays predictable):
 *   (0,3,0)  shared base:      .subscription-pricing-plans.ss-responsive .x
 *   (0,3,0)  layout defaults:  .subscription-pricing-plans.layoutN .x   ← loads later, wins
 *   (0,4,0)  admin settings:   .subscription-pricing-plans.ss-responsive.<modifier> .x
 *   (0,5,0)+ layout specials:  layouts may go higher for their own signature
 *            pieces (e.g. layout2's inverted featured column).
 */

.subscription-pricing-plans.ss-responsive,
.subscription-pricing-plans.ss-responsive *,
.subscription-pricing-plans.ss-responsive *::before,
.subscription-pricing-plans.ss-responsive *::after {
    box-sizing: border-box;
}

/* ── Base card chrome from settings ─────────────────────────────────────── */

.subscription-pricing-plans.ss-responsive .ss-pricing-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--ssl-radius, 12px);
    border: var(--ssl-border-w, 1px) solid var(--ss-border);
    box-shadow: var(--ssl-shadow, 0 4px 14px rgba(17, 24, 39, 0.07));
    background: var(--ss-surface);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.subscription-pricing-plans.ss-responsive.ss-card-bg-tint .ss-pricing-plan {
    background: var(--ss-primary-tint);
}

.subscription-pricing-plans.ss-responsive.ss-card-bg-transparent .ss-pricing-plan {
    background: transparent;
}

/* The feature list absorbs spare height so every CTA shares a baseline. */
.subscription-pricing-plans.ss-responsive .ss-plan-features {
    flex: 1 1 auto;
}

.subscription-pricing-plans.ss-responsive .ss-plan-footer {
    margin-top: auto;
}

/* ── Hover effects ──────────────────────────────────────────────────────── */

.subscription-pricing-plans.ss-responsive.ss-hover-lift .ss-pricing-plan:hover {
    transform: translateY(-6px);
    box-shadow: var(--ssl-shadow-hover, 0 10px 24px rgba(17, 24, 39, 0.11));
}

.subscription-pricing-plans.ss-responsive.ss-hover-glow .ss-pricing-plan:hover {
    box-shadow: 0 0 0 3px var(--ss-primary-tint), var(--ssl-shadow-hover, 0 10px 24px rgba(17, 24, 39, 0.11));
    border-color: var(--ss-primary);
}

.subscription-pricing-plans.ss-responsive.ss-hover-scale .ss-pricing-plan:hover {
    transform: scale(1.025);
    box-shadow: var(--ssl-shadow-hover, 0 10px 24px rgba(17, 24, 39, 0.11));
}

@media (prefers-reduced-motion: reduce) {
    .subscription-pricing-plans.ss-responsive .ss-pricing-plan,
    .subscription-pricing-plans.ss-responsive .ss-button,
    .subscription-pricing-plans.ss-responsive .ss-pricing-button {
        transition: none !important;
    }
    .subscription-pricing-plans.ss-responsive .ss-pricing-plan:hover {
        transform: none !important;
    }
}

/* ── Alignment override (auto = each layout's own voice) ────────────────── */

.subscription-pricing-plans.ss-responsive.ss-align-center .ss-plan-header,
.subscription-pricing-plans.ss-responsive.ss-align-center .ss-plan-footer {
    text-align: center;
}

.subscription-pricing-plans.ss-responsive.ss-align-left .ss-plan-header,
.subscription-pricing-plans.ss-responsive.ss-align-left .ss-plan-footer {
    text-align: left;
}

.subscription-pricing-plans.ss-responsive.ss-align-center .ss-plan-features li {
    justify-content: center;
    text-align: left; /* multi-line feature text still ragged-right, centered as a block */
}

.subscription-pricing-plans.ss-responsive.ss-align-left .ss-plan-features li {
    justify-content: flex-start;
}

/* ── Feature list + icons ───────────────────────────────────────────────── */

.subscription-pricing-plans.ss-responsive .ss-plan-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.subscription-pricing-plans.ss-responsive .ss-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
    color: var(--ss-body);
    /* subscription-system-public.css rules every .ss-plan-features li for the
     * account page; the pricing cards draw their own dividers (or none). */
    border-bottom: none;
}

.subscription-pricing-plans.ss-responsive .ss-plan-features li::before {
    content: "\2713"; /* ✓ */
    flex: 0 0 auto;
    font-size: var(--ssl-icon-size, 17px);
    line-height: 1.35;
    font-weight: 700;
    color: var(--ss-primary);
}

.subscription-pricing-plans.ss-responsive.ss-icon-arrow .ss-plan-features li::before { content: "\2192"; } /* → */
.subscription-pricing-plans.ss-responsive.ss-icon-star  .ss-plan-features li::before { content: "\2605"; } /* ★ */
.subscription-pricing-plans.ss-responsive.ss-icon-dot   .ss-plan-features li::before { content: "\2022"; } /* • */
.subscription-pricing-plans.ss-responsive.ss-icon-none  .ss-plan-features li::before { content: none; }

.subscription-pricing-plans.ss-responsive.ss-icon-pos-right .ss-plan-features li {
    flex-direction: row-reverse;
    justify-content: space-between;
}

/* ── Featured badge ─────────────────────────────────────────────────────── */

.subscription-pricing-plans.ss-responsive .ss-plan-badge {
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ssl-badge-bg, var(--ss-accent));
    white-space: nowrap;
}

/* Pill: floats through the card's top edge. (badge_style: pill, and the
 * per-layout "auto" default for layout 1.) */
.subscription-pricing-plans.ss-responsive.ss-badge-pill .ss-plan-badge,
.subscription-pricing-plans.ss-responsive.ss-badge-auto.layout1 .ss-plan-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 16px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.18);
}

/* Ribbon: rotated corner sash. (badge_style: ribbon; "auto" for layout 3.) */
.subscription-pricing-plans.ss-responsive.ss-badge-ribbon .ss-featured,
.subscription-pricing-plans.ss-responsive.ss-badge-auto.layout3 .ss-featured {
    overflow: hidden;
}

.subscription-pricing-plans.ss-responsive.ss-badge-ribbon .ss-plan-badge,
.subscription-pricing-plans.ss-responsive.ss-badge-auto.layout3 .ss-plan-badge {
    position: absolute;
    top: 18px;
    right: -34px;
    transform: rotate(45deg);
    padding: 5px 40px;
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.2);
}

/* Stripe: full-width band across the card's top edge. */
.subscription-pricing-plans.ss-responsive.ss-badge-stripe .ss-featured {
    overflow: hidden;
}

.subscription-pricing-plans.ss-responsive.ss-badge-stripe .ss-plan-badge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 7px 12px;
    text-align: center;
}

.subscription-pricing-plans.ss-responsive.ss-badge-stripe .ss-featured .ss-plan-header {
    padding-top: calc(var(--ssl-pad, 24px) + 20px);
}

/* Tag: inline chip inside the header row — layout 2's "auto" voice. */
.subscription-pricing-plans.ss-responsive.ss-badge-auto.layout2 .ss-plan-badge {
    position: static;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
    align-self: flex-start;
}

/* ── Subscribe button variants ──────────────────────────────────────────── */

.subscription-pricing-plans.ss-responsive .ss-button,
.subscription-pricing-plans.ss-responsive .ss-pricing-button {
    display: inline-block;
    padding: var(--ssl-btn-pad, 12px 26px);
    font-size: var(--ssl-btn-font, 14px);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    border-radius: var(--ssl-btn-radius, 999px);
    border: 2px solid var(--ss-primary);
    background: var(--ss-primary);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.subscription-pricing-plans.ss-responsive .ss-button:hover,
.subscription-pricing-plans.ss-responsive .ss-pricing-button:hover {
    background: var(--ss-primary-dark);
    border-color: var(--ss-primary-dark);
    color: #fff;
    transform: translateY(-1px);
}

.subscription-pricing-plans.ss-responsive.ss-btn-outline .ss-button,
.subscription-pricing-plans.ss-responsive.ss-btn-outline .ss-pricing-button {
    background: transparent;
    color: var(--ss-primary);
}

.subscription-pricing-plans.ss-responsive.ss-btn-outline .ss-button:hover,
.subscription-pricing-plans.ss-responsive.ss-btn-outline .ss-pricing-button:hover {
    background: var(--ss-primary);
    color: #fff;
    border-color: var(--ss-primary);
}

.subscription-pricing-plans.ss-responsive.ss-btn-soft .ss-button,
.subscription-pricing-plans.ss-responsive.ss-btn-soft .ss-pricing-button {
    background: var(--ss-primary-tint);
    border-color: var(--ss-primary-tint);
    color: var(--ss-primary);
}

.subscription-pricing-plans.ss-responsive.ss-btn-soft .ss-button:hover,
.subscription-pricing-plans.ss-responsive.ss-btn-soft .ss-pricing-button:hover {
    background: var(--ss-primary);
    border-color: var(--ss-primary);
    color: #fff;
}

.subscription-pricing-plans.ss-responsive.ss-btn-full .ss-button,
.subscription-pricing-plans.ss-responsive.ss-btn-full .ss-pricing-button {
    display: block;
    width: 100%;
}

/* Owned ("Current Plan") state wins over every variant. */
.subscription-pricing-plans.ss-responsive .ss-button--owned,
.subscription-pricing-plans.ss-responsive .ss-button--owned:hover {
    background: var(--ss-success-tint, #D8F2E0) !important;
    color: var(--ss-success, #14603A) !important;
    border-color: var(--ss-success, #86C9A3) !important;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}

/* ── Display behaviors ──────────────────────────────────────────────────── */

/* The track: each layout gives it a default grid; behaviors reshape it.
 * width:100% guards against older global styles (subscription-system-public.css
 * makes .ss-pricing-container a centered flex row, which would shrink-wrap a
 * grid child to one column). */
.subscription-pricing-plans.ss-responsive .ss-pricing-plans {
    gap: var(--ssl-gap, 24px);
    width: 100%;
}

/* Vertical / stacked. */
.subscription-pricing-plans.ss-responsive.ss-behave-vertical .ss-pricing-plans {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 480px;
    margin: 0 auto;
}

.subscription-pricing-plans.ss-responsive.ss-behave-vertical .ss-pricing-plan {
    width: 100%;
    max-width: none;
}

/* Horizontal: one row, always. Overflows into a scroll rather than breaking. */
.subscription-pricing-plans.ss-responsive.ss-behave-horizontal .ss-pricing-plans {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    padding: 20px 4px;
    -webkit-overflow-scrolling: touch;
}

.subscription-pricing-plans.ss-responsive.ss-behave-horizontal .ss-pricing-plan {
    flex: 1 0 clamp(240px, 30%, 360px);
    max-width: none;
}

/* Scrollable strip with snap points. */
.subscription-pricing-plans.ss-responsive.ss-behave-scroll .ss-pricing-plans {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 24px;
    padding: 20px 4px 26px;
    -webkit-overflow-scrolling: touch;
}

.subscription-pricing-plans.ss-responsive.ss-behave-scroll .ss-pricing-plan {
    flex: 0 0 min(88%, 320px);
    scroll-snap-align: center;
    max-width: none;
}

.subscription-pricing-plans.ss-responsive.ss-behave-scroll .ss-pricing-plans::-webkit-scrollbar,
.subscription-pricing-plans.ss-responsive.ss-behave-horizontal .ss-pricing-plans::-webkit-scrollbar {
    height: 8px;
}

.subscription-pricing-plans.ss-responsive.ss-behave-scroll .ss-pricing-plans::-webkit-scrollbar-thumb,
.subscription-pricing-plans.ss-responsive.ss-behave-horizontal .ss-pricing-plans::-webkit-scrollbar-thumb {
    background: var(--ss-border);
    border-radius: 999px;
}

/* Auto: the layout's own grid on wide screens; on small screens the row
 * becomes a swipeable snap strip instead of squeezing three cards into
 * one phone width. */
@media (max-width: 767px) {
    .subscription-pricing-plans.ss-responsive.ss-behave-auto .ss-pricing-plans {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 16px;
        padding: 16px 4px 22px;
        -webkit-overflow-scrolling: touch;
    }

    .subscription-pricing-plans.ss-responsive.ss-behave-auto .ss-pricing-plan {
        flex: 0 0 min(86%, 320px);
        scroll-snap-align: center;
        max-width: none;
    }
}

/* ── Carousel chrome (structure built by ss-carousel.js) ────────────────── */

.subscription-pricing-plans.ss-responsive.ss-behave-carousel .ss-pricing-container {
    position: relative;
}

.subscription-pricing-plans.ss-responsive.ss-behave-carousel .ss-car-viewport {
    overflow: hidden;
    /* Room for shadows + the lifted featured card without clipping. */
    padding: 24px 4px;
    margin: -24px -4px;
}

.subscription-pricing-plans.ss-responsive.ss-behave-carousel .ss-pricing-plans {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
    touch-action: pan-y;
}

.subscription-pricing-plans.ss-responsive.ss-behave-carousel .ss-pricing-plan {
    flex-shrink: 0;
    max-width: none;
}

.subscription-pricing-plans.ss-responsive.ss-behave-carousel.ss-car-dragging .ss-pricing-plans {
    transition: none;
    cursor: grabbing;
}

.subscription-pricing-plans.ss-responsive .ss-car-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--ss-border) !important;
    background: var(--ss-surface) !important;
    color: var(--ss-ink) !important;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.14);
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.subscription-pricing-plans.ss-responsive .ss-car-arrow:hover {
    background: var(--ss-primary) !important;
    border-color: var(--ss-primary) !important;
    color: #fff !important;
}

.subscription-pricing-plans.ss-responsive .ss-car-arrow[disabled] {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.subscription-pricing-plans.ss-responsive .ss-car-arrow--prev { left: -8px; }
.subscription-pricing-plans.ss-responsive .ss-car-arrow--next { right: -8px; }

.subscription-pricing-plans.ss-responsive .ss-car-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.subscription-pricing-plans.ss-responsive .ss-car-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    border: none !important;
    background: var(--ss-border) !important;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.subscription-pricing-plans.ss-responsive .ss-car-dot.is-active {
    background: var(--ss-primary) !important;
    transform: scale(1.3);
}

/* ── Shared bits ────────────────────────────────────────────────────────── */

.subscription-pricing-plans.ss-responsive .no-plans {
    text-align: center;
    color: var(--ss-muted);
    padding: 30px 0;
}