/* ==========================================================================
   Pricing card redesign  —  /pricing and /subscription
   Presentation layer only. Markup is emitted by:
     - LayoutController::plan_get_data()              (/pricing)
     - FrontendController::subscription_plan_get_data() (/subscription)
   Brand tokens reused from style.css (--yellow_c, --green_c).
   ========================================================================== */

.tp-plans {
    --tp-gold: var(--yellow_c, #B69713);
    --tp-green: var(--green_c, #004B4B);
    --tp-ink: #14231f;
    --tp-muted: #667;
    --tp-line: #E4E7E7;
    --tp-soft: #F6F8F8;
    --tp-radius: 16px;
    padding: 8px 0 40px;
    max-width: 100%;
}

/* the host pages do not set a global border-box reset */
.tp-plans,
.tp-plans *,
.tp-plans *::before,
.tp-plans *::after {
    box-sizing: border-box;
}

/* ---------- billing toggle ----------
   Presentation only: both figures are the same annual charge, shown either as
   a yearly total or divided across 12 months. */
.tp-plans__billing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    margin: 20px auto 0;
    padding: 4px;
    border: 1px solid var(--tp-line);
    border-radius: 999px;
    background: var(--tp-soft);
}

.tp-billing__opt {
    border: 0;
    background: transparent;
    color: var(--tp-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    padding: 8px 22px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.tp-billing__opt:hover:not(.is-active) {
    color: var(--tp-ink);
}

.tp-billing__opt.is-active {
    background: #fff;
    color: var(--tp-green);
    box-shadow: 0 1px 3px rgba(20, 35, 31, .12);
}

.tp-billing__opt:focus-visible {
    outline: 2px solid var(--tp-green);
    outline-offset: 2px;
}

/* "/mo" and "/yr" suffixes; only the active cycle's is visible */
.tp-card__per {
    align-self: flex-end;
    font-size: 14px;
    font-weight: 600;
    color: var(--tp-muted);
    line-height: 1.9;
    margin-left: 2px;
}

.tp-card__per[hidden] {
    display: none;
}

@media (max-width: 767px) {
    .tp-billing__opt {
        padding: 8px 18px;
        font-size: 13px;
    }
}

/* ---------- track ----------
   One horizontal scroll-snap track at every breakpoint. How many cards are on
   screen is set by --tp-per-view (4 on desktop, 3 / 2 on smaller screens, 1 on
   phones), so the same slider logic drives every size. */
.tp-plans__grid {
    --tp-per-view: 4;
    --tp-gap: 24px;
    display: flex;
    align-items: stretch;
    gap: var(--tp-gap);
    padding: 28px 24px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.tp-plans__grid::-webkit-scrollbar {
    display: none;
}

/* focusable for arrow-key paging, but only ringed for keyboard users */
.tp-plans__grid:focus {
    outline: none;
}

.tp-plans__grid:focus-visible {
    outline: 2px solid var(--tp-green);
    outline-offset: -2px;
    border-radius: var(--tp-radius);
}

.tp-plans__grid > .tp-card {
    /* n cards + (n-1) gaps fill the track exactly */
    flex: 0 0 calc((100% - (var(--tp-per-view) - 1) * var(--tp-gap)) / var(--tp-per-view));
    max-width: calc((100% - (var(--tp-per-view) - 1) * var(--tp-gap)) / var(--tp-per-view));
    scroll-snap-align: start;
}

/* Centre the deck and cap card width on very wide screens */
@media (min-width: 1400px) {
    .tp-plans__grid {
        max-width: 1368px;
        margin: 0 auto;
    }
}

/* Fewer across as the viewport narrows, before the phone slider takes over */
@media (max-width: 1199px) {
    .tp-plans__grid {
        --tp-per-view: 3;
    }
}

@media (max-width: 900px) {
    .tp-plans__grid {
        --tp-per-view: 2;
        --tp-gap: 20px;
        padding-inline: 20px;
        scroll-padding-inline: 20px;
    }
}

/* ---------- card ---------- */
.tp-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid var(--tp-gold);
    border-radius: var(--tp-radius);
    padding: 28px 22px 24px;
    position: relative;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    min-width: 0;
}

/* display:flex above would otherwise beat the UA [hidden] rule, which is
   exactly what let a plan with no monthly price keep rendering in the
   Monthly view instead of disappearing like applyCycle() intends. */
.tp-card[hidden] {
    display: none;
}

.tp-card:hover {
    border-color: #cfd6d6;
    box-shadow: 0 6px 22px rgba(20, 35, 31, .08);
    transform: translateY(-3px);
}

/* Highlighted / recommended plan.
   The heavier border is absorbed by 1px less padding so the inner content
   still starts on the same baseline as the neighbouring cards. */
.tp-card--featured {
    border-color: var(--tp-green);
    border-width: 2px;
    padding: 27px 21px 23px;
    box-shadow: 0 8px 28px rgba(0, 75, 75, .12);
}

.tp-card--featured:hover {
    border-color: var(--tp-green);
    box-shadow: 0 12px 34px rgba(0, 75, 75, .18);
}

.tp-card__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--tp-green);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
    padding: 7px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ---------- head ---------- */
.tp-card__name {
    font-size: 20px;
    font-weight: 600;
    color: var(--tp-ink);
    margin: 4px 0 6px;
    line-height: 1.3;
}

.tp-card__desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--tp-muted);
    margin: 0 0 18px;
    /* reserve 2 lines so the price row starts at the same y in every card */
    min-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- price ---------- */
.tp-card__price {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 2px;
    min-height: 46px;
}

.tp-card__currency {
    font-size: 18px;
    font-weight: 600;
    color: var(--tp-ink);
    line-height: 1.5;
}

.tp-card__amount {
    font-size: 36px;
    font-weight: 700;
    color: var(--tp-gold);
    line-height: 1.15;
    letter-spacing: -.01em;
    word-break: break-word;
}

/* The price row owns the height (see .tp-card__price min-height), so the
   call-for-pricing text just centres inside it and CTAs stay aligned. */
.tp-card__callprice {
    font-size: 24px;
    font-weight: 700;
    color: var(--tp-ink);
    line-height: 1.2;
    align-self: center;
}

.tp-card__billing {
    font-size: 13px;
    color: var(--tp-muted);
    margin: 0 0 20px;
    min-height: 20px;
}

/* ---------- CTA ---------- */
.tp-card__cta {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    padding: 11px 18px;
    border-radius: 8px;
    border: 1px solid #D7D7D7;
    background: #fff;
    color: var(--tp-ink);
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* A normal plan's button stays neutral: it only darkens its outline, so the
   highlight colour belongs to the featured plan alone. The gold fill that
   used to apply here made every card look highlighted on hover - and turned
   the featured card gold too, so it stopped standing out exactly when the
   visitor was interacting with it. */
.tp-card__cta:hover {
    border-color: var(--tp-ink);
}

.tp-card--featured .tp-card__cta {
    background: var(--tp-green);
    border-color: var(--tp-green);
    color: #fff;
}

/* the featured plan keeps its green on hover rather than switching to gold */
.tp-card--featured .tp-card__cta:hover {
    background: #013a3a;
    border-color: #013a3a;
    color: #fff;
}

/* current plan — non-interactive */
.tp-card__cta--current,
.tp-card__cta--current:hover {
    background: var(--tp-soft);
    border-color: var(--tp-line);
    color: var(--tp-muted);
    cursor: default;
}

a.tp-card__ctawrap {
    display: block;
    text-decoration: none;
}

/* ---------- capacity rows (Primary / Secondary, alerts / tracking) ---------- */
.tp-card__meta {
    margin: 20px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--tp-line);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tp-card__metarow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
    min-width: 0;
}

.tp-card__metalabel {
    color: var(--tp-muted);
    min-width: 0;
    overflow-wrap: anywhere;
}

.tp-card__metavalue {
    color: var(--tp-ink);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/* ---------- features ---------- */
.tp-card__features {
    list-style: none;
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--tp-line);
    display: flex;
    flex-direction: column;
    gap: 11px;
    /* push nothing below: features are the last block, card stretches naturally */
    flex: 1 1 auto;
}

.tp-card__featstitle {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tp-ink);
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--tp-line);
}

.tp-card__featstitle + .tp-card__features {
    border-top: 0;
    margin-top: 12px;
    padding-top: 0;
}

.tp-card__feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--tp-ink);
    min-width: 0;
}

/* display:flex above would otherwise beat the UA [hidden] rule */
.tp-card__feature[hidden] {
    display: none;
}

.tp-card__feature--off {
    color: #9aa3a3;
}

.tp-card__feature .tp-ico {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 3px;
}

.tp-card__feattext {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tp-card__featlimit {
    display: block;
    font-size: 12px;
    color: var(--tp-muted);
    margin-top: 1px;
}

/* toggle for long feature lists */
.tp-card__more {
    background: none;
    border: 0;
    padding: 12px 0 0;
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--tp-green);
    cursor: pointer;
    text-align: left;
    align-self: flex-start;
}

.tp-card__more:hover {
    text-decoration: underline;
}

/* ---------- empty state ---------- */
#noplan,
.tp-plans__empty {
    text-align: center;
    padding: 60px 20px;
    font-size: 16px;
    color: var(--tp-muted);
}

/* ==========================================================================
   Slider controls — shown at every breakpoint.
   The script hides the whole nav when everything already fits on screen.
   ========================================================================== */
.tp-plans__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 18px;
}

.tp-plans__arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    /* brand yellow ring: the arrows sit over the cards, so they need to read
       as a control rather than blending into the card borders */
    border: 2px solid var(--tp-gold);
    background: #fff;
    color: var(--tp-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, opacity .2s ease, border-color .2s ease;
}

.tp-plans__arrow:hover:not([disabled]) {
    background: var(--tp-gold);
    color: #fff;
    border-color: var(--tp-gold);
}

.tp-plans__arrow[disabled] {
    opacity: .35;
    cursor: default;
}

.tp-plans__arrow svg {
    width: 16px;
    height: 16px;
}

.tp-plans__count {
    font-size: 13px;
    color: var(--tp-muted);
    min-width: 52px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.tp-plans__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
    padding: 0 20px;
}

.tp-plans__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #D3D9D9;
    cursor: pointer;
    transition: background-color .2s ease, width .2s ease;
}

.tp-plans__dot.is-active {
    background: var(--tp-green);
    width: 22px;
    border-radius: 999px;
}

/* everything fits: the script sets this and the controls go away */
.tp-plans[data-tp-static="1"] .tp-plans__nav,
.tp-plans[data-tp-static="1"] .tp-plans__dots {
    display: none;
}

/* ==========================================================================
   Phones — one card at a time
   ========================================================================== */
@media (max-width: 767px) {

    .tp-plans {
        padding: 4px 0 28px;
        overflow: hidden;
    }

    .tp-plans__grid {
        --tp-per-view: 1;
        --tp-gap: 16px;
        padding: 26px 16px 8px;
        scroll-padding-inline: 16px;
    }

    .tp-plans__grid > .tp-card {
        scroll-snap-align: center;
        scroll-snap-stop: always;
        padding: 26px 18px 22px;
        transform: none !important;
    }

    .tp-card--featured {
        padding: 25px 17px 21px;
    }

    .tp-card:hover {
        transform: none;
        box-shadow: none;
        border-color: var(--tp-line);
    }

    .tp-card--featured:hover {
        border-color: var(--tp-green);
    }

    .tp-plans__arrow {
        width: 40px;
        height: 40px;
    }

    /* Descriptions may wrap freely (nothing sits beside them here), but the
       reserved two-line height is kept so the price and CTA do not jump
       vertically as the user swipes from card to card. */
    .tp-card__desc {
        -webkit-line-clamp: none;
        line-clamp: none;
        display: block;
    }

    .tp-card__billing {
        min-height: 0;
    }

    .tp-card__price {
        min-height: 42px;
    }

    .tp-card__amount {
        font-size: 32px;
    }

}

/* the redesigned cards replace the old table chrome on these pages */
.tabing_box .tab-content:has(.tp-plans) {
    width: 100%;
    border: 0;
    padding-top: 0;
}

.tabing_box .tab-pane .table-responsive:has(.tp-plans) {
    max-height: none;
    overflow: visible;
}

/* Centre short decks: when there are fewer cards than a full row,
   the flex track would otherwise leave them stranded at the left. */
.tp-plans__grid:not(:has(> .tp-card:nth-child(5))) {
    justify-content: center;
}


/* ==========================================================================
   Plan-type navigation.

   Desktop keeps the tab strip and puts the slider arrows on the left and
   right edges of the card row, vertically centred against the cards.

   Phones cannot fit four plan-type tabs across the screen, so the strip is
   replaced by a plain <select>. The select is markup-only sugar over the
   same plan_get_data() call the tabs use, so pricing data and logic are
   unchanged at every width.
   ========================================================================== */

/* The select exists in the DOM at all widths; desktop simply never shows it. */
.plan-type-select,
.plan-type-select__label {
    display: none;
}

/* The viewport wraps only the scrolling grid, so it is the correct anchor for
   the arrows: centring on it means centring on the card row, ignoring the
   billing toggle above and the counter/dots below. */
.tp-plans__viewport {
    position: relative;
}

@media (min-width: 768px) {

    /* The row of arrows no longer sits under the cards: each arrow is pinned
       to its own side and vertically centred on the card row. The counter
       stays in the flow underneath so nothing overlaps the cards. */
    .tp-plans__nav {
        margin-top: 14px;
    }

    .tp-plans__arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
    }

    /* Kept inside the grid: pushing them outside adds horizontal page
       overflow at wide widths, where the grid already spans the container. */
    .tp-plans__arrow[data-tp-prev] {
        left: 4px;
    }

    .tp-plans__arrow[data-tp-next] {
        right: 4px;
    }
}

@media (max-width: 767px) {

    /* Tab strip and slider chrome give way to the select. The arrows are
       listed explicitly: they are position:absolute at this point, so
       hiding only their .tp-plans__nav parent would leave them on screen. */
    .tabing_box .nav.nav-tabs,
    .tp-plans__nav,
    .tp-plans__arrow,
    .tp-plans__count,
    .tp-plans__dots {
        display: none !important;
    }

    .plan-type-select__label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--tp-muted, #5b6b6b);
        margin: 0 0 6px;
    }

    .plan-type-select {
        display: block;
        width: 100%;
        height: 46px;
        padding: 0 38px 0 14px;
        font-size: 15px;
        color: var(--tp-ink, #0b1f1f);
        background-color: #fff;
        border: 1px solid var(--tp-line, #e0e5e5);
        border-radius: 10px;
        /* native arrow varies by OS; draw our own so it matches the cards */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23004B4B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 13px center;
        background-size: 16px 16px;
    }

    .plan-type-select:focus {
        outline: none;
        border-color: var(--tp-green, #004B4B);
        box-shadow: 0 0 0 3px rgba(0, 75, 75, .12);
    }

    /* The select sits where the strip did, inside the white panel. */
    .tabing_box .d-flex {
        display: block !important;
        padding: 14px 16px 4px;
    }
}


/* ==========================================================================
   Phones — stack the cards instead of swiping them.

   The deck is a horizontal scroller by design on desktop, and phones used to
   inherit that as a one-card-at-a-time swipe. With the plan-type select now
   doing the navigating, a plain vertical list is easier to read: every plan
   is visible by scrolling the page, with nothing to discover sideways.

   Overrides the base .tp-plans__grid scroller and the per-view card width.
   ========================================================================== */
@media (max-width: 767px) {

    .tp-plans__grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        /* no sideways travel: the page scrolls, the deck does not */
        overflow-x: visible;
        overflow-y: visible;
        scroll-snap-type: none;
        gap: 16px;
        padding: 18px 16px 4px;
    }

    /* Full width, natural height — undoes the --tp-per-view flex basis. */
    .tp-plans__grid > .tp-card {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }

    /* .tp-plans clips its children on phones for the swipe deck; with the
       cards stacked there is nothing to clip and it would cut the last card. */
    .tp-plans {
        overflow: visible;
    }
}


/* ==========================================================================
   Compare plans — feature matrix.

   Same data as the cards, laid out as rows so features line up across plans.
   Hidden until the visitor switches to it; the card view is untouched.
   ========================================================================== */

/* view switch */
.tp-plans__views {
    display: flex;
    justify-content: center;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    margin: 18px auto 0;
    padding: 4px;
    border: 1px solid var(--tp-line);
    border-radius: 999px;
    background: var(--tp-soft);
}

.tp-views__opt {
    border: 0;
    background: transparent;
    color: var(--tp-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    padding: 8px 20px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.tp-views__opt:hover:not(.is-active) {
    color: var(--tp-ink);
}

.tp-views__opt.is-active {
    background: #fff;
    color: var(--tp-green);
    box-shadow: 0 1px 3px rgba(20, 35, 31, .12);
}

.tp-views__opt:focus-visible {
    outline: 2px solid var(--tp-green);
    outline-offset: 2px;
}

.tp-compare[hidden] {
    display: none;
}

/* ==========================================================================
   Compare plans — feature rows across chosen plans.

   Features are rows, plans are columns, so one row reads as "who includes
   this". The column count is the visitor's choice (chip strip below), not the
   plan count: two to four columns always fit, so there is no sideways scroll
   and no sticky label column at any width. On a phone the grid stacks — each
   plan becomes a block and every cell carries its own row label.
   ========================================================================== */
.tp-compare {
    --tp-cols: 3;
    --tp-axis: 220px;
    padding: 24px 0 8px;
}

/* ---------- chip strip ---------- */
.tp-compare__chooser {
    margin-bottom: 20px;
    text-align: center;
}

.tp-compare__chooselabel {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tp-muted);
}

.tp-compare__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.tp-compare__chip {
    border: 1px solid var(--tp-line);
    background: #fff;
    color: var(--tp-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.tp-compare__chip.is-on {
    border-color: var(--tp-green);
    background: var(--tp-green);
    color: #fff;
}

/* the last remaining chip cannot be switched off — one column is not a
   comparison, so the script disables it rather than allowing an empty grid */
.tp-compare__chip[disabled] {
    cursor: default;
    opacity: .9;
}

.tp-compare__chip:focus-visible {
    outline: 2px solid var(--tp-green);
    outline-offset: 2px;
}

/* ---------- board ---------- */
.tp-compare__board {
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius);
    background: #fff;
    overflow: hidden;
}

/* One shared grid template for the header row and every data row, so the
   columns line up without a table. --tp-cols is rewritten by the script as
   chips are toggled. */
.tp-compare__headrow,
.tp-compare__row {
    display: grid;
    grid-template-columns: var(--tp-axis) repeat(var(--tp-cols), minmax(0, 1fr));
    align-items: stretch;
}

/* ---------- header row ---------- */
.tp-compare__headrow {
    border-bottom: 1px solid var(--tp-line);
    background: var(--tp-soft);
}

.tp-compare__axis--head {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tp-muted);
    display: flex;
    align-items: center;
}

.tp-compare__col--head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 18px 14px 20px;
    background: #fff;
    border-left: 1px solid var(--tp-line);
}

.tp-compare__col--head.is-featured {
    background: rgba(0, 75, 75, .05);
}

/* Reserved even when the plan has no badge, so names, prices and buttons sit
   on the same baseline across every column. */
.tp-compare__badge {
    display: inline-flex;
    align-items: center;
    min-height: 21px;
    background: var(--tp-green);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1;
    padding: 6px 11px;
    border-radius: 999px;
    white-space: nowrap;
}

.tp-compare__badge.is-empty {
    background: transparent;
    padding: 0;
}

.tp-compare__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-ink);
    line-height: 1.3;
}

.tp-compare__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
    color: var(--tp-muted);
}

.tp-compare__currency {
    font-size: 15px;
    font-weight: 600;
    color: var(--tp-ink);
}

.tp-compare__amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--tp-gold);
    line-height: 1.2;
    letter-spacing: -.01em;
}

.tp-compare__callprice {
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-ink);
    line-height: 1.3;
}

.tp-compare__cta {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid var(--tp-green);
    background: #fff;
    color: var(--tp-green);
    cursor: pointer;
}

.tp-compare__col--head.is-featured .tp-compare__cta {
    background: var(--tp-green);
    color: #fff;
}

.tp-compare__cta.is-current {
    border-color: var(--tp-line);
    background: var(--tp-soft);
    color: var(--tp-muted);
    cursor: default;
}

/* ---------- data rows ---------- */
.tp-compare__row {
    border-top: 1px solid var(--tp-line);
}

.tp-compare__rows > .tp-compare__row:first-child {
    border-top: 0;
}

.tp-compare__row--meta {
    background: var(--tp-soft);
}

.tp-compare__axis {
    padding: 14px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tp-ink);
    display: flex;
    align-items: center;
    min-width: 0;
    overflow-wrap: anywhere;
}

.tp-compare__col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 12px;
    border-left: 1px solid var(--tp-line);
    min-width: 0;
}

/* grid items ignore the UA [hidden] rule once display is set above */
.tp-compare__col[hidden] {
    display: none;
}

.tp-compare__col.is-featured {
    background: rgba(0, 75, 75, .04);
}

.tp-compare__row--meta .tp-compare__col.is-featured {
    background: rgba(0, 75, 75, .07);
}

.tp-compare__value {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    min-width: 0;
}

.tp-compare__col--text .tp-compare__value {
    font-size: 13px;
    font-weight: 600;
    color: var(--tp-ink);
    overflow-wrap: anywhere;
}

.tp-compare__col .tp-ico {
    width: 19px;
    height: 19px;
}

.tp-compare__limit {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--tp-muted);
}

.tp-compare__dash {
    color: var(--tp-muted);
    font-weight: 400;
}

/* screen-reader only: the icon alone does not say included / not included */
.tp-compare__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1100px) {
    .tp-compare {
        --tp-axis: 180px;
    }
}

@media (max-width: 900px) {
    .tp-compare {
        --tp-axis: 150px;
    }

    .tp-compare__axis {
        padding: 13px 14px;
        font-size: 13px;
    }

    .tp-compare__amount {
        font-size: 21px;
    }
}

/* ==========================================================================
   Phones — stack the comparison.

   Columns cannot stay side by side under ~600px without crushing them, so the
   grid turns into one block per plan: the plan card, then that plan's rows
   with their own labels. Nothing is hidden and nothing scrolls sideways.
   ========================================================================== */
/* ==========================================================================
   Phones — the grid stays a grid.

   The comparison is the point, so the columns stay side by side rather than
   stacking into per-plan blocks (which is just the card view again). What
   gives instead is the column COUNT: the script caps the selection at two on
   a phone, and the label column narrows, so two plans and their labels fit a
   360px screen without any sideways scrolling.
   ========================================================================== */
@media (max-width: 600px) {

    .tp-compare {
        --tp-axis: 112px;
        padding: 18px 0 4px;
    }

    .tp-compare__chooselabel {
        font-size: 11px;
    }

    .tp-compare__chip {
        font-size: 12px;
        padding: 7px 12px;
    }

    .tp-compare__board {
        border-radius: 12px;
    }

    .tp-compare__axis {
        padding: 12px 10px;
        font-size: 12px;
        line-height: 1.35;
    }

    .tp-compare__axis--head {
        font-size: 10px;
        letter-spacing: .05em;
    }

    .tp-compare__col {
        padding: 12px 8px;
    }

    .tp-compare__col--head {
        padding: 14px 8px 16px;
        gap: 3px;
    }

    .tp-compare__badge {
        font-size: 8.5px;
        padding: 5px 8px;
        min-height: 18px;
        /* the pill cannot shrink below its text, so let it wrap instead of
           pushing the column wider than its share of the grid */
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }

    .tp-compare__name {
        font-size: 13.5px;
    }

    .tp-compare__currency {
        font-size: 12px;
    }

    .tp-compare__amount {
        font-size: 18px;
    }

    .tp-compare__callprice {
        font-size: 13px;
    }

    .tp-compare__cta {
        font-size: 12px;
        padding: 8px 6px;
    }

    .tp-compare__col--text .tp-compare__value {
        font-size: 12px;
    }

    .tp-compare__col .tp-ico {
        width: 17px;
        height: 17px;
    }

    .tp-compare__limit {
        font-size: 10.5px;
    }
}

/* Very narrow phones: one more squeeze rather than a scrollbar. */
@media (max-width: 380px) {
    .tp-compare {
        --tp-axis: 96px;
    }

    .tp-compare__axis {
        font-size: 11.5px;
        padding: 12px 8px;
    }

    .tp-compare__amount {
        font-size: 16px;
    }
}


.tabing_box .tab-pane thead tr th {
    border-radius: 0px;
}