/**
 * Tiger Advanced Pricing (Pro) — frontend styles.
 *
 * Everything is scoped under .tg-prx so rules cannot leak into the theme.
 * These are sensible defaults; per-instance overrides come from Elementor's
 * selector-driven controls. Layout is flexbox + grid.
 *
 * Specificity note: Elementor emits per-instance overrides as
 * `{{WRAPPER}} .tg-prx-card{…}` (0,2,0). Where a *default* must visually win
 * over those (the featured-card treatment, which would otherwise be flattened
 * by the always-present `card_bg` default), the rule is scoped one level deeper
 * — `.tg-prx .tg-prx-card.is-featured` (0,3,0) — so it beats the base default
 * but still yields the moment a user sets the matching control.
 */

.tg-prx {
    /* One accent drives every decorative element (icon tiles, check circles,
       crown bar, featured ring, toggle). The Accent Color control sets this to
       the site's Global Accent by default, so it stays in sync with the buttons
       and badges (which also default to the Global Accent). */
    --tgr-accent: #ec7002;
    /* Darker shade for gradient ends, auto-derived so a single accent suffices. */
    --tgr-accent-dark: color-mix(in srgb, var(--tgr-accent) 72%, #000000);
    --tgr-track: #d1d5db;
    --tgr-track-on: var(--tgr-accent);
    --tgr-knob: #ffffff;
    --tgr-featured-scale: 1.05;

    --tgr-tint-08: color-mix(in srgb, var(--tgr-accent) 8%, transparent);
    --tgr-tint-12: color-mix(in srgb, var(--tgr-accent) 12%, transparent);

    /* Surface tokens (card bg/border/shadow, icon tile) are intentionally NOT
       declared here. A preset class lives on the widget WRAPPER while .tg-prx is
       a descendant — declaring the tokens on .tg-prx would shadow the inherited
       preset value. Instead each is consumed as var(--token, <default>) so a
       preset set on the wrapper inherits cleanly down to the card. */
}

/* ---------- Billing toggle ---------- */
/* Block flex box + fit-content width + auto margins centres the pill on its own,
   no :has() required. */
.tg-prx-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 auto 36px;
    padding: 7px 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tgr-accent) 5%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--tgr-accent) 14%, transparent);
    width: -moz-fit-content;
    width: fit-content;
}

.tg-prx-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    opacity: 0.55;
    transition: opacity 0.25s ease, color 0.25s ease;
}

.tg-prx-toggle-label.is-active {
    opacity: 1;
}

.tg-prx-save-badge {
    display: inline-block;
    padding: 2px 9px;
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1.6;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
}

/* Switch — pure CSS, the hidden checkbox drives every visual state. */
.tg-prx-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.tg-prx-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.tg-prx-switch-track {
    display: inline-block;
    width: 52px;
    height: 28px;
    border-radius: 999px;
    background: var(--tgr-track);
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.18);
    transition: background 0.25s ease;
}

.tg-prx-switch-knob {
    display: block;
    width: 22px;
    height: 22px;
    margin: 3px;
    border-radius: 50%;
    background: var(--tgr-knob);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tg-prx-switch-input:checked + .tg-prx-switch-track {
    background: var(--tgr-track-on);
}

.tg-prx-switch-input:checked + .tg-prx-switch-track .tg-prx-switch-knob {
    transform: translateX(24px);
}

.tg-prx-switch-input:focus-visible + .tg-prx-switch-track {
    outline: 2px solid var(--tgr-track-on);
    outline-offset: 2px;
}

/* ---------- Grid of cards ---------- */
.tg-prx-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

/* ---------- Card ---------- */
.tg-prx-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--tgr-card-bg, #ffffff);
    border: 1px solid var(--tgr-card-border, #e5e7eb);
    border-radius: 16px;
    padding: 36px 28px;
    text-align: center;
    box-shadow: var(--tgr-card-shadow, 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 24px -12px rgba(16, 24, 40, 0.14));
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.tg-prx-card:hover {
    box-shadow: var(--tgr-card-shadow-hover, 0 2px 4px rgba(16, 24, 40, 0.05), 0 24px 48px -16px rgba(16, 24, 40, 0.22));
    border-color: color-mix(in srgb, var(--tgr-accent) 35%, #e5e7eb);
}

/* Featured — accent border + colored lift mark the recommended plan. The accent
   border colour is also exposed via the featured_border_color control (which
   defaults to the accent), so a user override wins over this default.
   Scoped at (0,3,0) so it reads as featured even when card_border is customised. */
.tg-prx .tg-prx-card.is-featured {
    border-color: var(--tgr-accent);
    transform: scale(var(--tgr-featured-scale));
    box-shadow: 0 18px 44px -16px color-mix(in srgb, var(--tgr-accent) 48%, transparent);
    z-index: 1;
    /* Contain the tint/crown pseudo-elements in their own stacking context. */
    isolation: isolate;
}

/* Accent crown bar along the top edge of the featured card. */
.tg-prx .tg-prx-card.is-featured::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    border-radius: inherit;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    background: linear-gradient(90deg, var(--tgr-accent), var(--tgr-accent-dark));
    z-index: 1;
}

/* Translucent accent wash laid *over* the card background — so it tints a white
   or a dark card alike and never replaces the user's card_bg. */
.tg-prx .tg-prx-card.is-featured::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--tgr-accent) 9%, transparent) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Keep real content above the wash. */
.tg-prx .tg-prx-card.is-featured > * {
    position: relative;
    z-index: 1;
}

.tg-prx .tg-prx-card.is-featured:hover {
    transform: scale(var(--tgr-featured-scale)) translateY(-8px);
    box-shadow: 0 30px 60px -20px color-mix(in srgb, var(--tgr-accent) 55%, transparent);
}

.tg-prx-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 16px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--tgr-accent), var(--tgr-accent-dark));
    color: #ffffff;
    white-space: nowrap;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--tgr-accent) 70%, transparent);
}

/* Plan icon sits inside a soft rounded tile; size scales with icon font-size,
   so the icon_size control keeps working. */
.tg-prx-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The card is a column flex container, so this fixed-size tile is a flex
       item — align-self keeps it centred (text-align can't position it). */
    align-self: center;
    width: 1.7em;
    height: 1.7em;
    margin-bottom: 16px;
    font-size: 40px;
    line-height: 1;
    color: var(--tgr-accent);
    background: var(--tgr-icon-bg, var(--tgr-tint-12));
    border-radius: 0.4em;
}

.tg-prx-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.tg-prx-title {
    margin: 0 0 4px;
    font-size: 1.4rem;
    line-height: 1.2;
}

.tg-prx-subtitle {
    margin: 0 0 18px;
    font-size: 0.95rem;
    opacity: 0.7;
}

.tg-prx-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    margin-bottom: 24px;
    font-weight: 800;
    line-height: 1;
}

.tg-prx-currency {
    font-size: 1.4rem;
    align-self: flex-start;
    margin-top: 0.15em;
    opacity: 0.85;
}

.tg-prx-amount {
    font-size: 3.1rem;
    letter-spacing: -0.02em;
}

.tg-prx-suffix {
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.6;
}

/* ---------- Feature list ---------- */
.tg-prx-features {
    list-style: none;
    margin: 0 0 26px;
    padding: 22px 0 0;
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    display: flex;
    flex-direction: column;
    gap: 13px;
    text-align: left;
    flex: 1 1 auto;
}

.tg-prx-feature {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 0.95rem;
}

/* Check / cross sits in a tinted pill so the list scans like a checklist. */
.tg-prx-feat-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3em;
    min-height: 1.3em;
    box-sizing: content-box;
    margin-top: 0.05em;
    font-size: 0.78em;
    border-radius: 50%;
    background: var(--tgr-tint-12);
    color: var(--tgr-accent);
}

/* Inner icon (Font Awesome <i> or custom <svg>) sizes to the mark's font-size,
   so the "Icon Size" control scales the glyph and the chip together. */
.tg-prx-feat-mark > i {
    font-size: 1em;
    line-height: 1;
}

.tg-prx-feat-mark > svg {
    width: 1em;
    height: 1em;
    display: block;
    fill: currentColor;
}

.tg-prx-feature.is-off {
    opacity: 0.55;
}

.tg-prx-feature.is-off .tg-prx-feat-text {
    text-decoration: line-through;
}

.tg-prx-feature.is-off .tg-prx-feat-mark {
    background: color-mix(in srgb, currentColor 12%, transparent);
    color: currentColor;
}

/* ---------- Button ---------- */
.tg-prx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 14px 24px;
    border: none;
    border-radius: 10px;
    background: var(--tgr-accent);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.18s ease, box-shadow 0.25s ease;
}

.tg-prx-btn:hover,
.tg-prx-btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px -8px color-mix(in srgb, var(--tgr-accent) 65%, transparent);
}

.tg-prx-btn:active {
    transform: translateY(0);
}

/* The featured plan's CTA carries a touch more weight. */
.tg-prx .tg-prx-card.is-featured .tg-prx-btn {
    box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--tgr-accent) 60%, transparent);
}

/* ==========================================================
 * STYLE PRESETS
 * Each block is scoped under a preset modifier class on the wrapper, so the
 * rules apply ONLY when that preset is chosen. Presets mostly re-theme the
 * surface tokens (so the Elementor colour controls still win); structural
 * touches (gradients, blur) are layered on top.
 * ========================================================== */

/* ---------- Preset: Gradient — vivid, the recommended plan is a full
   accent-gradient card with white content. ---------- */
.tg-prx--gradient {
    --tgr-card-shadow: 0 10px 30px -14px color-mix(in srgb, var(--tgr-accent) 32%, transparent);
    --tgr-card-shadow-hover: 0 24px 50px -16px color-mix(in srgb, var(--tgr-accent) 48%, transparent);
    --tgr-icon-bg: linear-gradient(135deg, color-mix(in srgb, var(--tgr-accent) 20%, transparent), color-mix(in srgb, var(--tgr-accent) 6%, transparent));
}

.tg-prx--gradient .tg-prx-card.is-featured {
    background: linear-gradient(160deg, var(--tgr-accent), var(--tgr-accent-dark));
    border-color: transparent;
    color: #ffffff;
}

/* Full gradient already reads as featured — drop the wash + crown bar. */
.tg-prx--gradient .tg-prx-card.is-featured::before,
.tg-prx--gradient .tg-prx-card.is-featured::after {
    display: none;
}

.tg-prx--gradient .tg-prx-card.is-featured .tg-prx-title,
.tg-prx--gradient .tg-prx-card.is-featured .tg-prx-price {
    color: #ffffff;
}

.tg-prx--gradient .tg-prx-card.is-featured .tg-prx-subtitle,
.tg-prx--gradient .tg-prx-card.is-featured .tg-prx-suffix {
    color: rgba(255, 255, 255, 0.82);
}

.tg-prx--gradient .tg-prx-card.is-featured .tg-prx-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.tg-prx--gradient .tg-prx-card.is-featured .tg-prx-features {
    border-top-color: rgba(255, 255, 255, 0.28);
}

.tg-prx--gradient .tg-prx-card.is-featured .tg-prx-feat-mark {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.tg-prx--gradient .tg-prx-card.is-featured .tg-prx-btn {
    background: #ffffff;
    color: var(--tgr-accent);
}

.tg-prx--gradient .tg-prx-card.is-featured .tg-prx-btn:hover,
.tg-prx--gradient .tg-prx-card.is-featured .tg-prx-btn:focus {
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.3);
}

.tg-prx--gradient .tg-prx-card.is-featured .tg-prx-badge {
    background: #ffffff;
    color: var(--tgr-accent);
}

/* ---------- Preset: Glass — frosted, translucent cards (shines over a
   coloured section or image; still soft over a flat background). ---------- */
.tg-prx--glass {
    --tgr-card-bg: rgba(255, 255, 255, 0.55);
    --tgr-card-border: rgba(255, 255, 255, 0.6);
    --tgr-icon-bg: rgba(255, 255, 255, 0.5);
    --tgr-card-shadow: 0 8px 32px -10px rgba(31, 38, 135, 0.2);
    --tgr-card-shadow-hover: 0 18px 48px -14px rgba(31, 38, 135, 0.32);
}

.tg-prx--glass .tg-prx-card {
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
}

.tg-prx--glass .tg-prx-card.is-featured {
    --tgr-card-bg: rgba(255, 255, 255, 0.74);
    border-color: color-mix(in srgb, var(--tgr-accent) 45%, transparent);
}

.tg-prx--glass .tg-prx-feat-mark {
    background: rgba(255, 255, 255, 0.6);
}

/* ---------- Responsive fallbacks (Elementor controls override these) ---------- */
@media (max-width: 1024px) {
    .tg-prx-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .tg-prx .tg-prx-card.is-featured {
        transform: none;
    }
    .tg-prx .tg-prx-card.is-featured:hover {
        transform: translateY(-8px);
    }
}

@media (max-width: 767px) {
    .tg-prx-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .tg-prx-card,
    .tg-prx-btn,
    .tg-prx-switch-track,
    .tg-prx-switch-knob,
    .tg-prx-toggle-label {
        transition: none;
    }
}