/*
 * Product Pricing Table – front-end styles
 *
 * Layout: flat CSS Grid.
 *   Columns: [label 180px] [tier 0 1fr] … [tier N 1fr]   → --ppt-tier-count tiers
 *   Rows:    [header] [feature 0] … [feature M]           → auto-sized
 *
 * Because every grid row spans ALL columns, labels and values always align.
 */

/* ================================================================
   Custom properties
   ================================================================ */

/* ================================================================
   Theme-proof resets
   -----------------------------------------------------------------
   Some themes (e.g. Enfold) inject global rules like:
     th, td { text-transform: uppercase; border: ...; padding: ... }
     table { display: table; }
   that clobber our CSS-grid-on-<table> layout. We use !important on
   the structural properties that MUST win for the layout to work.
   Appearance properties (font-size, colors) use normal specificity.
   ================================================================ */

/* Hide utility. Raised specificity to beat .ppt-wrapper .ppt-table which
   also uses !important for its display:grid layout. */
.ppt-hidden,
.ppt-wrapper .ppt-hidden,
.ppt-wrapper .ppt-table.ppt-hidden,
.ppt-wrapper .ppt-mobile-cards.ppt-hidden,
.ppt-wrapper .ppt-currency-switcher.ppt-hidden {
    display: none !important;
}

/* Neutralize common theme overrides within our containers */
.ppt-wrapper,
.ppt-wrapper *,
.ppt-selector,
.ppt-selector * {
    text-transform: none;
    letter-spacing: normal;
    box-sizing: border-box;
}

.ppt-wrapper,
.ppt-selector {
    --ppt-accent:      #e63329;
    --ppt-accent-dark: #c02820;
    --ppt-border:      #dde1e7;
    --ppt-bg-alt:      #f6f7f8;
    --ppt-row-min-h:   44px;

    /* Typography inherits from the theme (color, font-family, line-height).
       We no longer force font-size or color so the host theme's body styles
       come through naturally. */
    max-width: 100%;
    margin: 0 auto;
}

/* ================================================================
   Product Selector
   ================================================================ */

.ppt-product-selector {
    margin-bottom: 32px;
}

/* Space below the pill toggle. The element below (ALB info card, or whatever
   the page author places between the selector and the table) often renders
   flush against the pills, which looks cramped. */
.ppt-selector {
    margin-bottom: 32px;
}

/* Hide the actual radio inputs — themes often style them as visible bullets,
   so we force them off the page with !important. */
.ppt-selector .ppt-product-radio,
.ppt-wrapper  .ppt-product-radio {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Pill toggle row ── */

.ppt-product-toggle {
    display: flex;
    justify-content: center;
    background: var(--ppt-bg-alt);
    border: 1px solid var(--ppt-border);
    border-radius: 50px;
    padding: 4px;
    gap: 2px;
    max-width: fit-content;
    margin: 0 auto 0;
}

.ppt-toggle-pill {
    text-align: center;
    padding: 9px 22px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    transition: background 0.18s, color 0.18s, opacity 0.18s, width 0.25s, padding 0.25s;
    white-space: nowrap;
    user-select: none;
}

.ppt-toggle-pill:hover {
    color: var(--ppt-accent);
}

.ppt-toggle-pill.active {
    background: var(--ppt-accent);
    color: #fff;
}

.ppt-toggle-pill.active:hover {
    color: #fff;
}

/* "Please select" prompt pill — muted when active, hidden once a product is chosen */
.ppt-toggle-pill--prompt.active {
    background: #bcc0c4;
    color: #fff;
}

.ppt-toggle-pill--prompt.active:hover {
    color: #fff;
}

.ppt-toggle-pill--prompt.ppt-toggle-pill--dismissed {
    display: none;
}


/* ================================================================
   Flat Grid Table
   ================================================================ */

.ppt-wrapper .ppt-table {
    display: grid !important;
    /* Enfold and other themes paint <table> with a default gray background
       (e.g. rgb(245,245,245)); this shows through the transparent top-left
       spacer cell. Force transparent so the spacer stays invisible. */
    background: transparent !important;
    /* Label column: min 120px, grows to max-content of longest label.
       Tier columns: minmax(0, 1fr) so they can shrink below content min — this
       prevents a single wide tier (large price number etc.) from blowing the
       total grid width past the container and clipping the last column. */
    grid-template-columns: minmax(120px, max-content) repeat( var(--ppt-tier-count, 3), minmax(0, 1fr) ) !important;
    border: 1px solid var(--ppt-border);
    border-radius: 8px;
    overflow: hidden;
    /* Reset table defaults so it behaves as a CSS grid */
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Promote thead/tbody/tr children directly into the grid.
   !important because themes commonly force display:table-header-group etc. */
.ppt-wrapper .ppt-table thead,
.ppt-wrapper .ppt-table tbody,
.ppt-wrapper .ppt-table tr {
    display: contents !important;
}

/* Reset default th/td styling (we use our own classes).
   Note: no `background: transparent` here — that would kill the
   feature-label and alt-row stripe backgrounds set by more specific
   rules below. Themes that inject a th/td background would need to be
   defeated by a targeted override, not a blanket reset. */
.ppt-wrapper .ppt-table th,
.ppt-wrapper .ppt-table td {
    font-weight: inherit;
    text-align: inherit;
    vertical-align: inherit;
    border: 0;
    text-transform: none;
    letter-spacing: normal;
}

/* Screen-reader-only utility for semantic labels */
.ppt-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Header row ── */

.ppt-label-spacer {
    /* Top-left corner of the grid: stays transparent even though the
       rest of the label column is shaded. */
    background: transparent !important;
}

.ppt-tier-header {
    padding: 20px 16px 24px;
    background: #fff;
    border-bottom: 1px solid var(--ppt-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

/* Spacing between tier columns (not between label and first tier).
   Uses transparent border-left so grid cells stay adjacent. */
.ppt-tier-header + .ppt-tier-header,
.ppt-feature-value + .ppt-feature-value {
    border-left: var(--ppt-tier-gap, 12px) solid transparent;
}

.ppt-tier-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--ppt-accent);
}

.ppt-tier-subtitle {
    font-size: 12px;
    color: #777;
    line-height: 1.4;
    flex-grow: 1; /* absorb extra space so price/buttons stay bottom-aligned */
}

/* Pricing */
.ppt-pricing {
    margin: 8px 0 4px;
}

.ppt-price {
    margin: 0;
    font-size: 15px;
    line-height: 1.2;
}

.ppt-currency {
    font-size: 20px;
    font-weight: 700;
    vertical-align: top;
    line-height: 1.6;
}

.ppt-amount {
    /* clamp so prices scale down when many tiers are shown / viewport is narrow */
    font-size: clamp( 24px, 2.4vw, 36px );
    font-weight: 800;
    letter-spacing: -1px;
}

.ppt-term {
    font-size: 13px;
    color: #888;
}

.ppt-billing-note {
    font-size: 11px;
    line-height: 1.5;
    color: #aaa;
    margin: 2px 0 0;
    min-height: calc( 11px * 1.5 ); /* match one line of text so tiers align */
    text-align: center;
}

/* EUR hidden by default – JS/radio toggles it */
.ppt-price--eur {
    display: none;
}

/* ── Product CTAs ── */

.ppt-product-cta {
    display: none; /* JS shows the active product's block */
    width: 100%;
}

.ppt-wrapper[data-active-product=""] .ppt-product-cta--none,
.ppt-wrapper:not([data-active-product]) .ppt-product-cta--none {
    display: block;
}

.ppt-sku {
    font-size: 11px;
    color: #999;
    margin-bottom: 8px;
    text-align: center;
}

.ppt-cta-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
}

.ppt-cta-buttons .ppt-btn {
    flex: 1;
    white-space: nowrap;
}

/* Buttons — scope under .ppt-wrapper and use !important on color so that
   themes which set a site-wide `a { color: ... }` rule don't make the
   button label invisible against our colored backgrounds. Text is the
   critical property; background specificity is fine as-is. */
.ppt-wrapper .ppt-btn {
    display: block;
    text-align: center;
    padding: 9px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.ppt-wrapper .ppt-btn--buy {
    background: var(--ppt-accent);
    color: #fff !important;
}

.ppt-wrapper .ppt-btn--buy:hover {
    background: var(--ppt-accent-dark);
    color: #fff !important;
}

.ppt-wrapper .ppt-btn--quote {
    background: transparent;
    color: var(--ppt-accent) !important;
    border: 1px solid var(--ppt-accent);
}

.ppt-wrapper .ppt-btn--quote:hover {
    background: var(--ppt-accent);
    color: #fff !important;
}

.ppt-select-prompt {
    font-size: 12px;
    color: #aaa;
    font-style: italic;
    margin: 0;
}

/* ── Feature rows ── */

.ppt-feature-label,
.ppt-feature-value {
    padding: 10px 14px;
    font-size: 13px;
    border-top: 1px solid var(--ppt-border);
    min-height: var(--ppt-row-min-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.ppt-feature-label {
    background: var(--ppt-bg-alt);
    font-weight: 600;
    color: #555;
    padding-left: 16px;
    padding-right: 20px;
    white-space: nowrap;
}

.ppt-feature-label a {
    color: inherit;
    text-decoration: underline dotted;
}

/* Modal trigger button styled as a link */
.ppt-modal-trigger {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    font-weight: inherit;
    color: var(--ppt-accent);
    text-decoration: underline dotted;
}

.ppt-modal-trigger:hover {
    text-decoration: underline;
}

.ppt-feature-value {
    justify-content: center;
    text-align: center;
}

/* Alternate row shading on even feature rows */
.ppt-feature-label:nth-of-type(even),
.ppt-feature-value:nth-of-type(4n),    /* every other label+values group */
.ppt-feature-label:nth-child(even),
.ppt-feature-value:nth-child(even) {
    /* Use a targeted approach instead */
}

/*
 * Striping: target alternating feature rows.
 * Since the grid is flat, we use a data attribute set by JS to add stripe class.
 * Fallback: use nth-child with step = tier-count + 1.
 * Simplest reliable approach: add .ppt-row-stripe class via PHP.
 */
.ppt-feature-label.stripe,
.ppt-feature-value.stripe {
    /* Slightly darker than --ppt-bg-alt so the stripe is visible against
       the white default row. */
    background: #ebedf0;
}

.ppt-feature-label:not(.stripe) {
    background: var(--ppt-bg-alt); /* label col always shaded */
}

/* Boolean icons (text content in HTML for crawlers + a11y) */
.ppt-bool {
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
}

.ppt-bool--yes {
    color: #2e7d32;
}

.ppt-bool--no {
    color: #bbb;
}

/* ================================================================
   Currency switcher
   ================================================================ */

.ppt-currency-switcher {
    display: flex;
    justify-content: center;
    background: var(--ppt-bg-alt);
    border: 1px solid var(--ppt-border);
    border-radius: 50px;
    padding: 4px;
    width: fit-content;
    margin: 16px auto 0;
}

/* Currency pills — scoped + !important on color so themes that
   style 'label' or 'input + span' don't turn the text black. */
.ppt-wrapper .ppt-currency-pill {
    display: flex;
    align-items: center;
    padding: 6px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #666 !important;
    transition: background 0.18s, color 0.18s;
    user-select: none;
}

.ppt-wrapper .ppt-currency-pill:hover {
    color: var(--ppt-accent) !important;
}

.ppt-wrapper .ppt-currency-pill:has(input:checked) {
    background: var(--ppt-accent);
    color: #fff !important;
}

.ppt-wrapper .ppt-currency-pill:has(input:checked):hover {
    color: #fff !important;
}

/* Also defeat theme rules that style the inner <span> separately */
.ppt-wrapper .ppt-currency-pill span {
    color: inherit !important;
}

.ppt-currency-pill input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* ================================================================
   Value tooltip
   ================================================================ */

.ppt-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid #bbb;
    background: transparent;
    color: #999;
    font-size: 10px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    cursor: help;
    position: relative;
    flex-shrink: 0;
    vertical-align: middle;
    transition: border-color 0.15s, color 0.15s;
}

.ppt-tooltip::before {
    content: "i";
}

.ppt-tooltip:hover {
    border-color: var(--ppt-accent);
    color: var(--ppt-accent);
}

.ppt-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc( 100% + 8px );
    left: 50%;
    transform: translateX(-50%);
    background: #444;
    color: #fff;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    font-family: inherit;
    max-width: 220px;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 10;
}

/* Arrow/caret pointing down from tooltip bubble */
.ppt-tooltip::after {
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.15));
}

.ppt-tooltip:hover::after {
    opacity: 1;
}

/* ================================================================
   Modal
   ================================================================ */

.ppt-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ppt-modal-backdrop--open {
    display: flex;
}

.ppt-modal {
    background: #fff;
    border-radius: 8px;
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0,0,0,0.25);
    animation: ppt-modal-in 0.18s ease;
}

@keyframes ppt-modal-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ppt-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--ppt-border);
    flex-shrink: 0;
}

.ppt-modal-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--ppt-text);
}

.ppt-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0 4px;
    flex-shrink: 0;
}

.ppt-modal-close:hover {
    color: var(--ppt-accent);
}

.ppt-modal-body {
    padding: 20px 24px 24px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ppt-text);
}

/* Basic typographic resets for modal body content from the page */
.ppt-modal-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 12px 0;
    font-size: 13px;
}

.ppt-modal-body th,
.ppt-modal-body td {
    border: 1px solid var(--ppt-border);
    padding: 8px 12px;
    text-align: left;
}

.ppt-modal-body th {
    background: var(--ppt-bg-alt);
    font-weight: 600;
}

/* ================================================================
   Responsive
   ================================================================ */

/* ================================================================
   Mobile cards (PHP-rendered, hidden on desktop)
   ================================================================ */

.ppt-mobile-cards {
    display: none; /* hidden on desktop — shown via media query */
}

.ppt-mobile-card {
    border: 1px solid var(--ppt-border);
    border-radius: 8px;
    overflow: hidden;
}

.ppt-mobile-cards .ppt-tier-header {
    border-bottom: 1px solid var(--ppt-border);
}

.ppt-mobile-feature {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-size: 13px;
    border-top: 1px solid var(--ppt-border);
}

.ppt-mobile-stripe {
    background: var(--ppt-bg-alt);
}

.ppt-mobile-feature-label {
    font-weight: 600;
    color: #555;
    margin-right: 12px;
}

.ppt-mobile-feature-value {
    text-align: right;
    flex-shrink: 0;
}

.ppt-mobile-cards .ppt-cta-buttons {
    flex-direction: row;
    justify-content: center;
    gap: 8px;
}

.ppt-mobile-cards .ppt-btn {
    white-space: nowrap;
}

/* ================================================================
   Responsive: Tablet
   Feature labels as full-width row headers, no label column,
   tier values side by side below each label.
   ================================================================ */

@media ( max-width: 900px ) and ( min-width: 601px ) {
    /* Keep the full grid but drop the label column width to 0.
       Feature labels span all columns as full-width row headers.
       The spacer and label cells use grid-column to span everything. */
    .ppt-table {
        grid-template-columns: repeat( var(--ppt-tier-count, 3), 1fr );
    }

    .ppt-label-spacer {
        display: none;
    }

    /* Each feature label becomes a full-width row header */
    .ppt-feature-label {
        grid-column: 1 / -1;
        justify-content: center;
        text-align: center;
    }

    .ppt-tier-header + .ppt-tier-header,
    .ppt-feature-value + .ppt-feature-value {
        border-left: 6px solid transparent;
    }

    .ppt-btn {
        white-space: nowrap;
    }

    .ppt-tier-subtitle {
        font-size: 11px;
    }

    .ppt-amount {
        font-size: 32px;
    }
}

/* ================================================================
   Responsive: Mobile
   Hide the grid, show stacked tier cards.
   ================================================================ */

@media ( max-width: 600px ) {
    .ppt-table {
        display: none; /* hide the grid */
    }

    .ppt-mobile-cards {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .ppt-selector {
        max-width: 100%;
    }

    .ppt-product-toggle {
        flex-wrap: wrap;
        border-radius: 12px;
        gap: 4px;
    }

    .ppt-toggle-pill {
        padding: 8px 14px;
        font-size: 13px;
    }
}