/* =====================================================================
   KlinikPlus – PRICING page · MOBILE
   ---------------------------------------------------------------------
   Everything here is scoped to `.klinikplus-pricing-page` (the wrapper on
   pricing.blade.php) and to `@media (max-width: 991px)`, so no other page
   and no desktop breakpoint is touched.

   The page is built desktop-first: a 4-column comparison table, a
   "Compare Plans" header row that mirrors that table's columns, and a
   hero sized for a wide viewport. Below 992px the table overflowed to
   656px inside a 359px column (readable only by sideways-scrolling into
   half-cut words) and the compare row collapsed into three ~300px-tall
   centred blocks. This file rebuilds those three areas for a phone.

   Loaded from the page's @section('styles'), which the layout yields
   BEFORE the page's own inline <style> block — hence the
   `.klinikplus-pricing-page` prefix plus !important on rules that have to
   outrank an inline-block !important of the same name.
   ===================================================================== */

/* The plan tabs are a phone-only control — from 768px up the table shows
   every column at once and they would be meaningless. Declared outside the
   media query so they are hidden by default and only ever switched on. */
.compare-plan-tabs {
    display: none;
}

@media (max-width: 991px) {

    /* -----------------------------------------------------------------
       1) BREATHING ROOM
       The global container drops to 8px of side padding on a phone,
       which puts the card borders almost on the screen edge.
    ----------------------------------------------------------------- */
    .klinikplus-pricing-page .klinikplus-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* -----------------------------------------------------------------
       2) HERO
       2.5rem is a desktop size; at 375px "Custom Package" fills the line
       edge to edge.
    ----------------------------------------------------------------- */
    .klinikplus-pricing-page .klinikplus-pricing-title {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    .klinikplus-pricing-page .klinikplus-pricing-subtitle {
        font-size: 0.9375rem !important;
        line-height: 1.55 !important;
    }

    .klinikplus-pricing-page .klinikplus-toggle-text {
        font-size: 0.9375rem;
    }

    /* -----------------------------------------------------------------
       3) PLAN CARDS
       28px of padding on a 359px card leaves ~300px for the feature
       list, and the price/plan sizes are tuned for a 3-up desktop row.
    ----------------------------------------------------------------- */
    .klinikplus-pricing-page .klinikplus-pricing-card {
        padding: 1.25rem !important;
    }

    .klinikplus-pricing-page .klinikplus-card-price {
        font-size: 1.75rem !important;
    }

    .klinikplus-pricing-page .klinikplus-card-plan-name {
        font-size: 1.375rem !important;
    }

    /* -----------------------------------------------------------------
       4) COMPARE PLANS HEADER
       On desktop this row lines each plan card up with its column in the
       table below. The old white boxed “stacked rows” treatment is what
       made the phone UI feel heavy — that now lives only under 768px,
       as a single featured plan. Tablet keeps a compact 3-up row with
       no extra chrome.
    ----------------------------------------------------------------- */
    .klinikplus-pricing-page .klinikplus-compare-section {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        padding: 0 !important;
        margin-bottom: 1.5rem;
    }

    .klinikplus-pricing-page .klinikplus-compare-left {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .klinikplus-pricing-page .klinikplus-compare-title {
        font-size: 1.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* -----------------------------------------------------------------
       5) CTA
       64px/32px of padding on a 343px-wide box leaves a narrow ribbon of
       text down the middle.
    ----------------------------------------------------------------- */
    .klinikplus-pricing-page .pricing-cta-section {
        padding: 48px 20px !important;
    }

    .klinikplus-pricing-page .pricing-cta-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    .klinikplus-pricing-page .pricing-cta-description {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
    }

    /* smaller brand badge on a narrow panel — same specificity as the base
       `.pricing-cta-content .pricing-cta-badge` rule so it wins on size */
    .klinikplus-pricing-page .pricing-cta-content .pricing-cta-badge {
        width: 68px !important;
        height: 68px !important;
        margin-bottom: 20px !important;
    }

    /* on a narrow panel the full-height arcs fan across the copy — keep them
       as fainter, part-height edge texture, and shrink the dot grid */
    .klinikplus-pricing-page .pricing-cta-arcs,
    .klinikplus-pricing-page .pricing-cta-curve {
        stroke: rgba(255, 142, 108, 0.16) !important;
    }

    .klinikplus-pricing-page .pricing-cta-arcs {
        height: 62% !important;
    }

    .klinikplus-pricing-page .pricing-cta-curve {
        height: 52% !important;
    }

    .klinikplus-pricing-page .pricing-cta-section::after {
        left: 20px !important;
        bottom: 20px !important;
        width: 88px !important;
        height: 66px !important;
    }
}

/* =====================================================================
   6) COMPARISON TABLE — TABLET (768–991px)
   Four columns still fit here; they just need to stop asking for the
   desktop's 24px cell padding and 1.125rem type. Keeping it a real table
   at this width beats stacking, which would waste most of the row.
   ===================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
    .klinikplus-pricing-page .comparison-table {
        table-layout: fixed;
        width: 100%;
    }

    .klinikplus-pricing-page .comparison-table th.service-header,
    .klinikplus-pricing-page .comparison-table td.service-cell {
        width: 28%;
    }

    .klinikplus-pricing-page .comparison-table th:not(.service-header),
    .klinikplus-pricing-page .comparison-table td.feature-cell {
        width: 24%;
    }

    .klinikplus-pricing-page .comparison-table th,
    .klinikplus-pricing-page .comparison-table td {
        padding: 12px 10px !important;
        font-size: 0.875rem !important;
        overflow-wrap: break-word;
    }

    /* the chevron would otherwise sit on top of the service name */
    .klinikplus-pricing-page .comparison-table td.service-cell {
        padding-right: 28px !important;
    }

    .klinikplus-pricing-page .comparison-table .service-row .dropdown-icon {
        right: 8px;
    }
}

/* =====================================================================
   7) COMPARISON — PHONE (< 768px): ONE PLAN, TABS + FEATURED STRIP
   Four columns cannot fit 375px. Rather than three stacked boxed cards
   (which duplicated the tabs and ate the screen) plus a sideways table,
   phones get:

     heading / billing toggle
     segmented plan picker
     one featured price + subscribe strip (tied to the active tab)
     the comparison list for that plan, visually attached below

   pricing-plan-tabs.js flags the chosen plan on both the strip
   (`.klinikplus-compare-card.is-active`) and the table cells
   (`.is-active-plan`). From 768px up the tabs stay hidden and every
   column remains visible.
   ===================================================================== */
@media (max-width: 767px) {

    .klinikplus-pricing-page #pricing-compare-section {
        margin-bottom: 0 !important;
    }

    .klinikplus-pricing-page .klinikplus-compare-section {
        gap: 0.875rem;
        margin-bottom: 0 !important;
    }

    /* --- segmented control ------------------------------------------ */
    .klinikplus-pricing-page .compare-plan-tabs {
        display: flex;
        width: 100%;
        gap: 6px;
        margin: 0.25rem 0 0.75rem;
        padding: 5px;
        background: #EFEAE4;
        border-radius: 9999px;
    }

    .klinikplus-pricing-page .compare-plan-tab {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 8px;
        border: 0;
        border-radius: 9999px;
        background: transparent;
        color: #6B6B6B;
        font-family: Outfit, sans-serif;
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
    }

    .klinikplus-pricing-page .compare-plan-tab.is-active {
        background: #FF8E6C;
        color: #FFFFFF;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(255, 142, 108, 0.28);
    }

    /* --- featured plan strip (replaces the three stacked boxes) ------ */
    .klinikplus-pricing-page .klinikplus-compare-right {
        display: block;
        width: 100%;
        margin: 0;
    }

    .klinikplus-pricing-page .klinikplus-compare-card {
        display: none !important;
        grid-template-columns: 1fr auto;
        column-gap: 12px;
        row-gap: 2px;
        align-items: center;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 18px 18px 18px 20px !important;
        background: #150F02;
        border: 0;
        border-radius: 1.25rem 1.25rem 0 0 !important;
        text-align: left;
        position: relative;
        overflow: hidden;
    }

    .klinikplus-pricing-page .klinikplus-compare-card.is-active,
    .klinikplus-pricing-page .klinikplus-compare-right:not(.has-active-plan) .klinikplus-compare-card:first-child {
        display: grid !important;
    }

    .klinikplus-pricing-page .klinikplus-compare-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 4px;
        background: #FF8E6C;
    }

    .klinikplus-pricing-page .klinikplus-compare-card-plan {
        grid-column: 1;
        grid-row: 1;
        margin: 0 !important;
        text-align: left;
        font-size: 0.6875rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.12em;
        text-transform: uppercase !important;
        color: rgba(255, 255, 255, 0.62) !important;
    }

    .klinikplus-pricing-page .klinikplus-price-inline--compare {
        grid-column: 1;
        grid-row: 2;
        justify-content: flex-start;
        align-items: baseline;
        gap: 0.45rem;
        margin: 0 !important;
        flex-wrap: wrap;
    }

    .klinikplus-pricing-page .klinikplus-compare-card-price {
        font-size: 1.625rem !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        color: #FFFFFF !important;
    }

    .klinikplus-pricing-page .klinikplus-compare-card-period {
        font-size: 0.8125rem !important;
        font-weight: 400 !important;
        color: rgba(255, 255, 255, 0.58) !important;
        margin: 0 !important;
    }

    .klinikplus-pricing-page .klinikplus-compare-subscribe-btn {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 11px 18px !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        white-space: nowrap;
        background: #FF8E6C !important;
        color: #FFFFFF !important;
        border-radius: 9999px !important;
        box-shadow: 0 6px 16px rgba(255, 142, 108, 0.35);
    }

    /* --- the table itself, visually attached to the strip ----------- */
    .klinikplus-pricing-page .comparison-table-container {
        margin-top: 0 !important;
        border-radius: 0 0 1.25rem 1.25rem !important;
        box-shadow: 0 12px 32px rgba(21, 15, 2, 0.08) !important;
        overflow: hidden;
    }

    /* the Tailwind `.overflow-x-auto` scroller is no longer needed */
    .klinikplus-pricing-page .comparison-table-container > .overflow-x-auto {
        overflow: visible !important;
    }

    .klinikplus-pricing-page .comparison-table,
    .klinikplus-pricing-page .comparison-table tbody,
    .klinikplus-pricing-page .comparison-table tr,
    .klinikplus-pricing-page .comparison-table td {
        display: block;
        width: auto !important;
    }

    /* the tabs replace the column headers */
    .klinikplus-pricing-page .comparison-table thead {
        display: none;
    }

    .klinikplus-pricing-page .comparison-table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    /* one service = one row: name on the left, the active plan's value
       on the right */
    .klinikplus-pricing-page .comparison-table tbody tr {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 15px 18px;
        border-bottom: 1px solid #F0EBE6 !important;
        background: #FFFFFF;
    }

    .klinikplus-pricing-page .comparison-table tbody tr:nth-child(even) {
        background: #FBF8F5;
    }

    .klinikplus-pricing-page .comparison-table tbody tr:last-child {
        border-bottom: 0 !important;
    }

    /* Flex so the name and the chevron sit on one line — `.service-main`
       is a block div and the chevron is its sibling, so inline-flowing the
       chevron alone would still push it onto a second line. */
    .klinikplus-pricing-page .comparison-table td.service-cell {
        display: flex;
        align-items: baseline;
        gap: 6px;
        flex: 1 1 56%;
        padding: 0 !important;
        /* 0.9375rem wrapped most of these names onto a second line */
        font-size: 0.875rem !important;
        line-height: 1.35 !important;
        font-weight: 500;
    }

    /* Absolutely positioned it would land on top of the value column. */
    .klinikplus-pricing-page .comparison-table .service-row .dropdown-icon {
        position: static;
        flex: 0 0 auto;
        width: 0.75rem;
        height: 0.75rem;
        margin: 0;
        transform: none;
        align-self: center;
    }

    .klinikplus-pricing-page .comparison-table .service-row.expanded .dropdown-icon {
        transform: rotate(180deg);
    }

    /* Only the plan picked in the tab bar is shown. Values stay
       left-aligned inside their column: they are full phrases rather than
       the short ticks/numbers a right-aligned column suits, and
       klinikplus.css left-aligns the inner `.service-main` with
       !important anyway. */
    .klinikplus-pricing-page .comparison-table td.feature-cell {
        display: none;
        flex: 0 1 44%;
        padding: 0 !important;
        font-size: 0.875rem !important;
        line-height: 1.35 !important;
        color: #373737;
    }

    .klinikplus-pricing-page .comparison-table td.feature-cell.is-active-plan {
        display: block;
    }

    /* Before the script runs (or if it fails) fall back to the first
       plan, so a row is never blank on the right. */
    .klinikplus-pricing-page .comparison-table tbody tr:not(.has-active-plan) td.feature-cell:first-of-type {
        display: block;
    }

    /* Expanded: the feature list needs the full width, so drop the
       two-column row and let it run left-aligned under the name. */
    .klinikplus-pricing-page .comparison-table tbody tr.expanded {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .klinikplus-pricing-page .comparison-table tbody tr.expanded td.feature-cell {
        flex: 1 1 auto;
    }

    .klinikplus-pricing-page .comparison-table tbody tr.expanded .service-details {
        padding-top: 0.5rem;
    }

    .klinikplus-pricing-page .comparison-table td[colspan] {
        display: block;
        padding: 16px !important;
    }
}

/* Very narrow phones (iPhone SE and friends). */
@media (max-width: 400px) {
    .klinikplus-pricing-page .klinikplus-pricing-title {
        font-size: 1.75rem !important;
    }

    .klinikplus-pricing-page .klinikplus-compare-subscribe-btn {
        padding: 10px 14px !important;
        font-size: 0.8125rem !important;
    }
}