/* ============================================================
   Pricing Table — layout

   Cards never wrap or shrink below their own fixed width
   (.orbisk-pt-card below has a fixed flex-basis, no shrink) — the track
   simply overflows into .orbisk-pt-scroll's horizontal scrollbar as soon as
   it doesn't fit, at any viewport width. Same "no responsive breakpoints,
   just let it scroll" technique as comparison-table-dynamic.css, chosen for
   the same reason: two independently-sized grids trying to reflow in sync is
   fragile, a single scroll container never drifts.
   ============================================================ */

.orbisk_pricing_table .orbisk-pt-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Grid, not flex — flexbox's align-items:stretch does not reliably
   equalize item height inside a scrollable (overflow-x) flex container on
   mobile Safari/Chrome (observed as only the tallest card, e.g. the one
   with the most features, standing out taller on tablet/mobile while
   desktop was fine). CSS Grid's row-stretch behaviour doesn't have that
   bug — every item in the row reliably matches the tallest one at any
   viewport. grid-auto-columns sets each card's fixed track width (no
   wrap/shrink), same "let it overflow into scroll" approach as before,
   just expressed in Grid terms; overridden narrower in the mobile media
   query below. */
.orbisk_pricing_table .orbisk-pt-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 370px;
    align-items: stretch;
    gap: 24px;
    /* Explicit, not left to default block-level sizing — a grid container
       with grid-auto-flow:column can size itself to its own content
       (shrink-to-fit) rather than stretching to fill its parent, especially
       combined with justify-content:safe center below. Without this, the
       track reads as having "a max-width" whenever the actual Divi
       row/column is wider than the cards' own combined width (e.g. 3 cards
       at 320px + gaps ≈ 1000px, cut short inside a 1200px column). Still
       overflows into .orbisk-pt-scroll's horizontal scrollbar exactly as
       before once there are more cards than fit. */
    width: 100%;
    /* Centers the row when it has fewer cards than fill the available
       width. Plain "center" (no "safe") centers the whole row once it
       overflows too, which strands the initial scroll position in the
       middle of the content instead of at its start — observed as the
       track opening scrolled to the 2nd card instead of the 1st on
       mobile. "safe center" only centers when the row actually fits,
       falling back to start-alignment once it overflows so the scrollable
       area always starts at the first card. The plain "center" line is a
       fallback for browsers that don't understand "safe" (they just get
       the old centered-but-may-open-scrolled behaviour back). */
    justify-content: center;
    justify-content: safe center;
}

/* ============================================================
   Pricing Table — card
   ============================================================ */

/* Explicit flex column container so .orbisk-pt-card below can fill the
   grid-stretched height via flex-grow rather than height:100% — a
   percentage height resolved against an ancestor whose OWN height comes
   from being stretched as a CSS Grid item is exactly the kind of mixed
   layout-context chain mobile Safari/Chrome don't reliably honor (same
   category of bug as the flexbox align-items:stretch issue above; not
   relying on Divi's own .et_flex_module possibly applying the same
   treatment automatically, since that isn't confirmed at this nesting
   depth). info-card.css sidesteps this same problem by hardcoding a fixed
   px card height instead — not usable here since card content length
   varies per plan (title/description/feature count), so flex-grow is used
   here to keep the height dynamic instead. */
.orbisk_pricing_table_item {
    /* Divi's own default .et_pb_module margin bleeds through here same as
       .orbisk_pricing_table_feature below — the grid's own `gap: 24px` on
       .orbisk-pt-track already handles spacing between cards, so any
       leftover module margin is pure extra space (can show up as
       inconsistent room above/below a card's content, e.g. around its
       bottom-pinned CTA). */
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.orbisk-pt-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
    /* Extra bottom padding (54px vs 32px on the other 3 sides) so the CTA
       — pinned to the bottom via margin-top:auto below — has more breathing
       room under it than the sides/top of the card. */
    padding: 32px 32px 54px;
    border-radius: 16px;
    background-color: #EAF3EA;
}

/* Always rendered — even when this card has no badge text set — so every
   card in the row reserves the exact same vertical space above its
   heading. Without this, only the card WITH a badge would push its own
   heading down, leaving that card's heading misaligned with the others
   even though the cards themselves are already the same overall height
   (via align-items:stretch on .orbisk-pt-track). Height is a fixed value
   matching the pill's own rendered size, not "auto", so an empty slot
   still takes up exactly as much room as a filled one. */
.orbisk-pt-badge-slot {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 28px;
    margin-bottom: 12px;
}

.orbisk-pt-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 999px;
    background-color: #B5E37C;
    color: #13382A;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.5;
}

.orbisk-pt-plan-name {
    margin: 0 0 12px;
    /* "Bold" is baked into this font-family name itself (same convention as
       .orbisk-tc-card--text .orbisk-tc-heading in testimonial-carousel.css)
       — not applied via font-weight, which stays at the family's own
       natural weight. !important needed for the same reason it's needed
       there: this field renders as an <h3> (tagName in module.json), and
       Divi's own core heading typography is more specific / loads later,
       so it silently wins over a plain class selector without it. */
    font-family: 'Agrandir Bold', sans-serif !important;
    font-weight: 400 !important;
    font-size: 32px !important;
    line-height: 1 !important;
    color: #13382A !important;
}

.orbisk-pt-plan-description {
    margin: 0 0 24px;
    /* Reserves space for 3 lines (16px * 1.5 line-height = 24px per line)
       regardless of actual length, so a 1-line description doesn't start
       the features row higher than a card with a 3-line description. */
    min-height: 72px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #13382A;
}

/* ============================================================
   Pricing Table — feature list
   ============================================================ */

.orbisk-pt-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.orbisk_pricing_table_feature {
    /* Divi's own default .et_pb_module spacing adds margin around every
       module (top and bottom, not just bottom) on top of the 12px flex
       gap set by .orbisk-pt-features above — same bleed-through
       comparison-table-dynamic-row.css already had to fix. More
       noticeable on mobile because everything else in the card (card
       width, text) is more compact there, so the same absolute leftover
       margin reads as a much bigger gap relatively. */
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.orbisk-pt-feature-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.orbisk-pt-feature-check {
    display: inline-flex;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    background-color: #B5E37C;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8l3.5 3.5L13 5' stroke='%23004737' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

.orbisk-pt-feature-text {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #13382A;
}

.orbisk-pt-feature-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    padding: 2px 10px;
    max-height: 20px;
    border-radius: 999px;
    background-color: var(--orbisk-pt-feature-badge-bg, #29A72C);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 1.5;
}

/* ============================================================
   Pricing Table — CTA button

   Pinned to the bottom of the card via margin-top:auto on the flex column
   (.orbisk-pt-card) — same technique already used in info-card.css to keep
   a card's bottom row aligned regardless of how much text sits above it.

   Padding/radius/font match .orbisk-nav-cta in nav-menu.css exactly (same
   button style used site-wide), just full-width for a card context and with
   fixed colours instead of nav's own configurable ones — text is always
   #fff, background defaults to #004737 (overridable per-card via the
   Button Background Colour field, resolved through Divi's global-colour API
   same as every other colour picker in this plugin).
   ============================================================ */

.orbisk-pt-cta,
.orbisk-pt-cta .orbisk-pt-cta-text {
    /* !important needed for the same reason as .orbisk-pt-plan-name above —
       this is an <a> wrapping a Divi-rendered text field, and the site's
       own global link/text typography is more specific or loads later, so
       it silently wins over a plain class selector without it. */
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 150% !important;
}

.orbisk-pt-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    padding: 14px 16px;
    border-radius: 12px;
    background-color: var(--orbisk-pt-cta-bg, #004737);
    color: #fff;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}

.orbisk-pt-cta:hover {
    background-color: #003227;
}

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

   No column-count/width overrides at any breakpoint — see the layout note
   at the top of this file. Below 767px the row a card sits in typically has
   no side padding of its own, so the track's overflow naturally lets the
   first/last card's edge sit flush with (or run past) the viewport edge
   rather than being artificially inset — the same plain overflow-x
   behaviour as wider tiers, just visually obvious there's more to scroll to.
   ============================================================ */
@media (max-width: 767px) {
    .orbisk_pricing_table .orbisk-pt-track {
        grid-auto-columns: 260px;
    }

    .orbisk-pt-card {
        padding: 24px 24px 40px;
    }
}