/* =============================================================
   TIER GRID + TIER CARD — canonical chrome shared across every
   plan-rendering surface (home, all product pages, and the
   wecom-plans shortcode used on Elementor LPs).
   Page-specific layout wrappers (.tier-grid--compact / --single /
   --two) only tweak grid sizing — the card's internal chrome
   below is universal.
   ============================================================= */
.tier-grid {
    display: flex;
    gap: 30px;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
}

/* Card chrome: transparent body + standalone orange header band */
.tier-card {
    background: var(--color-white);
    border: 0;
    border-radius: 16px;
    padding: 0;
    min-height: 0;
    width: 100%;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: center;
    overflow: hidden;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.22);
}

/* Orange-header band — title + name_num + sub_headline */
.tier-card__header {
    background: var(--color-primary);
    border-radius: 16px 16px 0 0;
    padding: 16px 10px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
    min-height: 101px;
}

.tier-card__name {
    color: var(--color-white);
    font-size: 25px;
    font-weight: 600;
    line-height: 25px;
    margin: 0;
}

.tier-card__brand {
    color: var(--color-text-heading);
}

.tier-card__name-num {
    color: var(--color-white);
}

.tier-card__sub-headline {
    color: var(--color-white);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    margin: 0;
}

/* Bullets — labelled groups; navy bullets with orange check. The outer
   .tier-card__bullets is the padded box; each group is a label + .tier-card__bullet-group. */
.tier-card__bullets {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 18px 12px;
    margin: 0 0 16px;
}

.tier-card__bullets-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-heading);
    line-height: 1.3;
    text-align: start;
    margin: 0;
}

.tier-card__bullet-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-heading);
    line-height: 1.3;
    text-align: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tier-card__bullet-group li {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0 8px;
}

.tier-card__bullet-group li::before {
    content: "";

    width: 16px;
    height: 16px;

    display: block;

    background: url('data:image/svg+xml,<svg aria-hidden="true" class="e-font-icon-svg e-fas-check" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" fill="%23FF3D00"></path></svg>') center center no-repeat;
    background-size: contain;
}

.tier-card__bullet--accent,
.tier-card__bullet--accent p {
    color: var(--color-primary) !important;
    font-weight: 700;
}

/* Price — plain navy with smaller period suffix */
.tier-card hr {
    width: 100%;
    max-width: 160px;
    height: 1px;

    margin: auto auto 16px;
    flex-shrink: 0;

    border: none;
    box-shadow: none;
    background: var(--color-primary);
}

.tier-card__price-plain {
    margin: 0 0 10px;
    font-size: 25px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text-heading);
    text-align: center;
}

.tier-card__price-plain small {
    font-size: 16px;
}

.tier-card__note {
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: var(--color-text-heading);
    margin: 0 18px 16px;
    text-align: center;
}

/* CTAs — primary solid, secondary mobile-only outline */
.tier-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 18px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    padding: 12px 20px;
    border-radius: 5px;
    text-decoration: none;
    min-height: 43px;
    background: var(--color-primary);
    color: var(--color-white);
    border: 2px solid var(--color-primary);
}

.tier-card__cta--primary:hover {
    background: var(--color-primary-hover);
}

.tier-card__cta--secondary {
    display: none;
    background: transparent;
    color: var(--color-primary);
    margin-block-start: 8px;
}

.tier-card__cta--secondary:hover {
    background: rgba(255, 61, 0, 0.04);
}

/* Footer links — small grey utility links */
.tier-card__links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 18px 16px;
}

.tier-card__links-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.tier-card__links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgb(179, 179, 179);
    text-decoration: none;
}

.tier-card__links a:hover {
    color: rgb(120, 120, 120);
}

.tier-card__links a svg {
    width: 12px;
    height: 12px;
    
    fill: #B3B3B3;
    color: #B3B3B3;
}

/* Max-visible — cards past the per-device max fold away until the grid
   gains .is-expanded (JS in assets/js/tier-grid.js). Hidden per device, so
   a card can collapse on mobile yet stay on desktop and vice-versa. */
@media (min-width: 1025px) {

    .tier-grid:not(.is-expanded) .tier-card--hide-desktop {
        display: none;
    }
}

@media (max-width: 1024px) {

    .tier-grid:not(.is-expanded) .tier-card--hide-mobile {
        display: none;
    }
}

.tier-grid__show-all {
    display: flex;
    justify-content: center;
    margin-block-start: 32px;
}

/* Once expanded the CTA has no job left — fold it away. */
.tier-grid.is-expanded + .tier-grid__show-all {
    display: none;
}

/* Per-device CTA: render only where that device's max was exceeded. */
@media (max-width: 1024px) {

    .tier-grid__show-all--desktop-only {
        display: none;
    }
}

@media (min-width: 1025px) {

    .tier-grid__show-all--mobile-only {
        display: none;
    }
}

.tier-grid__show-all-btn {
    background: var(--color-primary);
    color: var(--color-white);
    border: 0;
    border-radius: 8px;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
    padding: 18px 36px;
    min-width: 354px;
    min-height: 65px;
    cursor: pointer;
}

.tier-grid__show-all-btn:hover {
    background: var(--color-primary-hover);
}

/* Layout modifiers — control grid density only */
.tier-grid--compact {
    gap: 18px;
}

.tier-grid--single > .tier-card {
    max-width: 350px;
    width: 100%;
    max-width: 350px;
}

.tier-grid--two > .tier-card {
    max-width: 320px;
    width: 100%;
    max-width: 320px;
}

@media (max-width: 1024px) {

    .tier-grid {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        max-width: 480px;
        margin-inline: auto;
    }

    .tier-card {
        flex: 0 0 auto;
        width: 100%;
        max-width: 340px;
        margin-inline: auto;
    }

    .tier-card__cta--secondary {
        display: flex;
    }

    .tier-grid__show-all-btn {
        font-size: 20px;
        min-width: 310px;
        min-height: 50px;
        padding: 14px 28px;
    }
}

/* New-skin grid — 30px gap, cards sized so up to 5 fit one row
   (container content 1336px: 5*240 + 4*30 = 1320). */
.tier-grid--new {
    gap: 30px;
    /* Don't stretch cards to the tallest — an open accordion would otherwise
       drag every other card's content down. JS equalizes closed heights via
       min-height; only the opened card grows past it. */
    align-items: flex-start;
}

.tier-grid--new .tier-card--new {
    max-width: 250px;
}

/* Stacked on tablet/mobile — drop the JS-applied equal height + the width cap.
   Placed AFTER the 240px rule so the equal-specificity override wins. */
@media (max-width: 1024px) {
    .tier-card--new {
        min-height: 0 !important;
    }

    .tier-grid--new .tier-card--new {
        max-width: 100%;
    }

    /* Stacked badged cards need room above for the overflowing badge. */
    .tier-grid--new .tier-card--new:has(.tier-card__badge) {
        margin-top: 32px;
    }
}

/* =============================================================
   NEW VARIANT (.tier-card--new) — Figma 233-4385/4719. Single
   ExtraBold title, badge tab, gradient body, details accordion.
   Text = wecom tertiary #1F2E3B, Rubik. Roaming uses this variant too
   (its cards keep the 3-part brand/name/name-num title).
   ============================================================= */
.tier-card--new {
    position: relative;
    overflow: visible;
    border-radius: 16px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.60) 100%), linear-gradient(180deg, rgba(217, 217, 217, 0.20) 1.8%, rgba(115, 115, 115, 0.20) 99.96%);
    box-shadow: -1.845px 0 5.536px 0 rgba(255, 61, 0, 0.15), 3.69px 3.69px 5.536px 0.923px rgba(255, 61, 0, 0.15);
}

/* Hover + open: 2px orange "border" via an inset box-shadow on a ::after
   overlay — no layout change (so the row/section never jumps), transitions
   smoothly, and sits on top of the card's children + alongside its outer
   shadow. */
.tier-card--new::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 16px;
    box-shadow: inset 0 0 0 2px transparent;
    transition: box-shadow 0.2s ease;
    pointer-events: none;
}

.tier-card--new:hover::after,
.tier-card--new.is-open::after {
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

/* Header — single ExtraBold title, orange band, 24px padding */
.tier-card--new .tier-card__header {
    min-height: 0;
    flex-shrink: 0;
    padding: 24px;
    border-radius: 14px 14px 0 0;
}

.tier-card--new .tier-card__name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 26px;
    line-height: 1;
    letter-spacing: 0.3px;
    color: var(--color-white);
}

/* Badge — outlined tab (top corners rounded) overlapping the header */
/* Give the grid top room for the badge to float into — only when a card
   actually has a badge, so non-badged grids stay flush. */
.tier-grid--new:has(.tier-card__badge) {
    padding-top: 20px;
}

/* On stacked layouts the per-card margin-top handles badge room instead. */
@media (max-width: 1024px) {
    .tier-grid--new:has(.tier-card__badge) {
        padding-top: 0;
    }
}

.tier-card__badge {
    position: absolute;
    left: 50%;
    top: -34px;
    transform: translateX(-50%);
    z-index: 2;
}

.tier-card__badge span {
    display: inline-block;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.60) 100%), linear-gradient(180deg, rgba(217, 217, 217, 0.20) 1.8%, rgba(115, 115, 115, 0.20) 99.96%), #FFF;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 6px 6px 0 0;
    padding: 8px 16px;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: -1.87px 0 5.61px 0 rgba(255, 61, 0, 0.15), 3.74px 3.74px 5.61px 0.935px rgba(255, 61, 0, 0.15);
}

/* Body — padded wrapper around bullets / hr / price / note. Fills the card
   height (flex col) so the hr's margin-top:auto pins price/note to the bottom
   and the price lines up across cards regardless of bullet count. */
.tier-card__body {
    padding: 24px 20px;
    height: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.tier-card__body hr {
    width: calc(100% - 24px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Bullets — no own padding/margin; 15px between lists, 5px between items */
.tier-card--new .tier-card__bullets {
    padding: 0 12px 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Each label + its list is a group; 5px between the label and the list,
   while .tier-card__bullets keeps 15px between groups. */
.tier-card--new .tier-card__bullet-group-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tier-card--new .tier-card__bullet-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tier-card--new .tier-card__bullet-group li p {
    margin: 0;
    font-size: 13px;
    line-height: 1.25;
    color: var(--color-tertiary);
}

.tier-card--new .tier-card__bullets-label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-tertiary);
}

/* New checkmark (10x8) for the always-visible bullets */
.tier-card--new .tier-card__bullet-group li::before {
    content: "";
    width: 10px;
    height: 8px;
    flex-shrink: 0;
    background: url('data:image/svg+xml,<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.23815 2.4763L0 3.71446L3.71446 7.42891L9.90522 1.23815L8.66707 0L3.71446 4.95261L1.23815 2.4763Z" fill="%23FF3D00"/></svg>') center no-repeat;
    background-size: contain;
}

/* Price — SemiBold navy number + small period/note */
.tier-card--new .tier-card__price-plain {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: var(--color-tertiary);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.1;
}

.tier-card--new .tier-card__price-plain small {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-weight: 400;
    font-size: 11px;
    margin-inline-start: 4px;
}

.tier-card--new .tier-card__note {
    margin: 0;
    color: var(--color-tertiary);
    font-size: 12px;
    font-weight: 400;
}

/* CTA — solid orange, 4px radius, white chevron. Hover = shadow only. */
.tier-card--new .tier-card__cta--primary {
    gap: 8px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    background: #FF3D00;
    border-color: #FF3D00;
    transition: box-shadow 0.2s ease;
}

.tier-card__cta-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

html:not([lang="he-IL"]):not([dir="rtl"]) .tier-card__cta-icon {
    transform: scaleX(-1);
}

.tier-card--new .tier-card__cta--primary:hover {
    background: #FF3D00;
    border-color: #FF3D00;
    box-shadow: 0 3.485px 6.971px 2.614px rgba(255, 61, 0, 0.20), 0 0.871px 2.614px 0 rgba(255, 61, 0, 0.50);
}

/* Footer links — orange, weight 400, underline (svg removed in markup) */
.tier-card--new .tier-card__links {
    padding: 10px 15px;
}

.tier-card--new .tier-card__links-row {
    justify-content: space-between;
}

.tier-card--new .tier-card__links a {
    color: var(--color-primary);
    font-weight: 400;
    text-decoration: underline;
}

/* Details — "פרטי החבילה" toggle (navy text + orange chevron) + accordion */
.tier-card__details {
    margin: 0 18px;
}

.tier-card__details-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: none;
    border: 0;
    padding: 10px 0;
    cursor: pointer;
    color: var(--color-tertiary);
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.tier-card__details-chevron {
    width: 11px;
    height: 11px;
    color: var(--color-primary);
    transition: transform 0.25s ease;
}

.tier-card__details-toggle[aria-expanded="true"] .tier-card__details-chevron {
    transform: rotate(180deg);
}

.tier-card__details-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.tier-card__details-content {
    padding: 16px 0;
    text-align: start;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-tertiary);
}

/* Accordion list — same 10x8 check as a flex marker */
.tier-card__details-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tier-card__details-content ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.tier-card__details-content ul li::before {
    content: "";
    width: 10px;
    height: 8px;
    flex-shrink: 0;
    margin-top: 5px;
    background: url('data:image/svg+xml,<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.23815 2.4763L0 3.71446L3.71446 7.42891L9.90522 1.23815L8.66707 0L3.71446 4.95261L1.23815 2.4763Z" fill="%23FF3D00"/></svg>') center no-repeat;
    background-size: contain;
}

.tier-card__details-content ul li p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-tertiary);
}

.tier-card__details-content ul li a {
    color: var(--color-primary);
    text-decoration: underline;
}