/* See ./complex-comp-chart.md for design notes and rationale. */

/* Container */
.complex-comp-chart {
    --ccc-tooltip-max-width: 583px;
    --ccc-tooltip-shadow: 0 4px 24px 0 var(--ll-color-shadow-tint);

    max-width: 100%;
    overflow: hidden;
}


/* Heading + subheading */
.complex-comp-chart__heading {
    color: var(--ll-color-text-secondary);
    font-weight: var(--ds-font-weight-medium);
   margin-block: var(--ll-space-13) var(--ll-space-5);
    font-size: var(--ll-text-h4-size);
    line-height: var(--ll-text-h4-line-height);
    letter-spacing: var(--ll-text-h4-letter-spacing);
    text-align: center;
}

.complex-comp-chart__subheading {
    color: var(--ll-color-text-secondary);
    font-size: var(--ll-text-body-xl-size);
    line-height: var(--ll-text-body-xl-line-height);
    letter-spacing: var(--ll-text-body-xl-letter-spacing);
    text-align: center;

    p {
            margin-block: 0;
        }
}

/* Tab list — two rows: buttons row + tooltip row */
.complex-comp-chart__tabs {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--ll-space-4);

    @media (width <= 768px) {
        gap: var(--ll-space-3);
    }
}

/* The subheading/tab-bar gap lives on the bar, not as the subheading's
   margin-block-end, so it disappears along with the bar when showTabs is off.
   Sibling-scoped because the subheading is optional - a heading-only chart must
   keep relying on the heading's own margin-block-end. */
.complex-comp-chart__subheading + .complex-comp-chart__tabs {
    margin-block-start: var(--ll-space-8);
}

/* showTabs off: drop the switcher, keep panel 0 rendering. Needs to outrank the
   `display: flex` above, so the `hidden` attribute alone would not have worked. */
.complex-comp-chart--no-tabs .complex-comp-chart__tabs {
    display: none;
}

/* Row 1: pill toggle track (Figma GWD-663 node 45947:23170) */
.complex-comp-chart__tab-btn-row {
    align-items: center;
    background: var(--ll-color-bg-card);
    border-radius: var(--ll-radius-pill);
    display: inline-flex;
    gap: 0;
    justify-content: center;
    padding: 0;
}

/* Tab button */
.complex-comp-chart__tab-btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--ll-radius-pill);
    color: var(--ll-color-text-primary);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--ll-text-body-base-family);
    font-size: var(--ll-text-body-base-size);
    font-weight: var(--ds-font-weight-medium);
    gap: var(--ll-space-3);
    justify-content: center;
    letter-spacing: var(--ll-text-body-base-letter-spacing);
    line-height: var(--ll-text-body-base-line-height);
    min-height: 44px;
    min-width: 96px;
    padding: var(--ll-space-3) var(--ll-space-5);
    transition: background var(--ll-motion-interactive-state-duration, 200ms) var(--ll-motion-interactive-state-easing, ease),
    color var(--ll-motion-interactive-state-duration, 200ms) var(--ll-motion-interactive-state-easing, ease);
}

.complex-comp-chart__tab-btn:focus-visible {
    outline: 2px solid var(--ll-color-border-focus);
    outline-offset: 2px;
}

.complex-comp-chart__tab-btn[aria-selected="true"] {
    background: var(--ll-color-bg-inverse);
    color: var(--ll-color-text-inverse);
}

/* Tab icon */
.complex-comp-chart__tab-icon {
    display: block;
    flex-shrink: 0;
    height: 24px;
    width: 24px;
}

.complex-comp-chart__tab-btn[aria-selected="true"] .complex-comp-chart__tab-icon {
    filter: brightness(0) invert(1);
}

/* Row 2: tooltip zone — centred below the buttons */
.complex-comp-chart__tooltip-row {
    position: relative;
    text-align: center;
}

/* One entry per tab; only the active tab's entry is visible */
.complex-comp-chart__tooltip-zone-entry[aria-hidden="true"] {
    display: none;
}

/* Tooltip trigger: [icon] "What does this mean?" — inline, centred */
.complex-comp-chart__tooltip-trigger {
    align-items: center;
    background: none;
    border: none;
    color: var(--ll-color-text-brand);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--ll-text-body-xs-family);
    font-size: var(--ll-text-body-xs-size);
    gap: var(--ll-space-2);
    letter-spacing: var(--ll-text-body-xs-letter-spacing);
    line-height: var(--ll-text-body-xs-line-height);
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.complex-comp-chart__tooltip-trigger:hover,
.complex-comp-chart__tooltip-trigger:focus-visible {
    color: var(--ll-color-text-link-hover);
}

.complex-comp-chart__tooltip-trigger img {
    display: block;
    flex-shrink: 0;
    height: 16px;
    width: 16px;
}

.complex-comp-chart__tooltip-label {
    /* visible label text next to the icon */
}

/* Tooltip panel — absolute, centred below its trigger (Figma 45947:23411) */
.complex-comp-chart__tooltip-zone-entry {
    display: inline-block;
    position: relative;
}

.complex-comp-chart__tooltip {
    background: var(--ll-color-bg-default);
    border: var(--ll-border-width-xs) solid var(--ll-color-border-default);
    border-radius: var(--ll-radius-card);
    box-shadow: var(--ccc-tooltip-shadow);
    left: 50%;
    max-width: min(var(--ccc-tooltip-max-width), calc(100vw - 2 * var(--ll-space-4)));
    padding: var(--ll-space-5) var(--ll-space-7);
    position: absolute;
    text-align: left;
    top: calc(100% + var(--ll-space-2));
    transform: translateX(-50%);
    width: max-content;
    z-index: 10;
}

.complex-comp-chart__tooltip::before {
    border-color: transparent transparent var(--ll-color-border-default);
    border-style: solid;
    border-width: 0 7px 9px;
    content: '';
    left: 50%;
    position: absolute;
    top: -9px;
    transform: translateX(-50%);
}

.complex-comp-chart__tooltip::after {
    border-color: transparent transparent var(--ll-color-bg-default);
    border-style: solid;
    border-width: 0 6px 8px;
    content: '';
    left: 50%;
    position: absolute;
    top: -7px;
    transform: translateX(-50%);
}

.complex-comp-chart__tooltip[aria-hidden="true"] {
    display: none;
}

.complex-comp-chart__tooltip-body {
    color: var(--ll-color-text-primary);
    font-family: var(--ll-text-body-sm-family);
    font-size: var(--ll-text-body-sm-size);
    font-weight: var(--ll-text-body-sm-weight);
    letter-spacing: var(--ll-text-body-sm-letter-spacing);
    line-height: var(--ll-text-body-sm-line-height);
}

.complex-comp-chart__tooltip-body :is(p, ul, ol) {
    margin: 0;
}

.complex-comp-chart__tooltip-body :is(strong, b) {
    font-weight: var(--ds-font-weight-semibold);
}

/* Tab panels */
.complex-comp-chart__panel[aria-hidden="true"] {
    display: none;
}

@media (width >= 1024px) {
    .complex-comp-chart__panel {
        max-width: 1330px;
        margin:  0 auto;
        padding: 0 40px;
        box-sizing: border-box;
    }
}

.complex-comp-chart__panel-loading {
    color: var(--ll-color-text-secondary);
    font-size: var(--ll-text-body-sm-size);
    min-height: 200px;
    padding: var(--ll-space-5);
    text-align: center;
}

.complex-comp-chart__panel-loading::after {
    content: 'Loading\2026';
}


/* Plan cards layout — JS adds complex-comp-chart__plans-row to the section
   after loadFragment resolves so the class is applied post-aem.js decoration.
   flex-wrap + min basis lets cards flow side-by-side without a viewport breakpoint
   (the UE preview iframe can be narrower than 768px). */
.complex-comp-chart__plans-row {
    position: relative;
    align-items: stretch;
    width: 100%;
}

.complex-comp-chart__plans-row.l-slider {
    row-gap: 0;
}

.complex-comp-chart__plans-viewport {
    margin-block: var(--ll-space-13);

    @media (width <= 1024px) {
        margin-block: calc(var(--ll-space-9) - 14px) calc(var(--ll-space-13) - 24px);
    }

    @media (width < 768px) {
        margin-block-end:  calc( var(--ll-space-9) - 24px);
    }
}

.complex-comp-chart__plans-viewport .product-details-wrapper {
    min-width: 0;
}

.complex-comp-chart__plans-viewport .product-details {
    min-width: 0;
}

/* 750ms matches prod's `.prodpanel .container .cta-slider .product { transition: opacity .75s }`
   so the neighbouring cards fade at the same rate as the slide settles. */
.complex-comp-chart__plans-viewport .product-details__card {
    transition: opacity 750ms;
}

/* Prod animates its carousel by translating a track (`transform: translate3d(...)` with a
   transition on transform). l-slider instead moves by assigning `scrollLeft`, so a
   `transition: transform` here would never fire - the animation has to come from the scroll
   itself. `scroll-behavior` covers programmatic scrolls (l-slider's scrollLeft assignment for
   arrows, dots and the post-drag snap) but not user gestures, so a touch swipe stays 1:1.
   Duration and easing are browser-controlled: CSS cannot express prod's cubic-bezier for a
   native scroll. */
.complex-comp-chart__plans-row.l-slider .complex-comp-chart__plans-viewport {
    scroll-behavior: smooth;
}

/* Mouse drag assigns scrollLeft per pointermove, which would ease every frame and feel
   rubbery, so the rail tracks the cursor directly while l-slider's is-dragging is set. */
.complex-comp-chart__plans-row.l-slider.is-dragging .complex-comp-chart__plans-viewport {
    scroll-behavior: auto;
}

@media (prefers-reduced-motion: reduce) {
    .complex-comp-chart__plans-row.l-slider .complex-comp-chart__plans-viewport {
        scroll-behavior: auto;
    }

    .complex-comp-chart__plans-viewport .product-details__card {
        transition: none;
    }
}

.complex-comp-chart__plans-viewport .l-slider__slide:not(.is-active) .product-details__card {
    opacity: 0.5;
}

/* Center the 40px arrows on the middle card's edges (pad-inline is the card's side gap). */
.complex-comp-chart__plans-row.l-slider[data-slider-arrows-sm='overlay'] .l-slider__arrow[data-action='prev'],
.complex-comp-chart__plans-row.l-slider[data-slider-arrows-md='overlay'] .l-slider__arrow[data-action='prev'] {
    inset-inline-start: calc(var(--l-slider-pad-inline) - 20px);
}

.complex-comp-chart__plans-row.l-slider[data-slider-arrows-sm='overlay'] .l-slider__arrow[data-action='next'],
.complex-comp-chart__plans-row.l-slider[data-slider-arrows-md='overlay'] .l-slider__arrow[data-action='next'] {
    inset-inline-end: calc(var(--l-slider-pad-inline) - 20px);
}

/* Round white plan thumbs with a masked chevron (no hardcoded glyph). */
.complex-comp-chart__plans-thumbs .l-slider__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #fff;
    border: none;
    box-shadow: none;
    filter: drop-shadow(0 0 8px rgb(0 0 0 / 25%));
}

/* Plan thumbs */
.complex-comp-chart__plans-row.l-slider .complex-comp-chart__plans-thumbs .l-slider__arrow[data-action='prev'],
.complex-comp-chart__plans-row.l-slider .complex-comp-chart__plans-thumbs .l-slider__arrow[data-action='next'] {
    top: var(--complex-comp-chart-plans-thumbs-top, calc(50% - 48px));
}

.complex-comp-chart__plans-thumbs .l-slider__arrow::before {
    content: '';
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    background-repeat: no-repeat;
    background-size: 24px 24px;
}

.complex-comp-chart__plans-thumbs .l-slider__arrow--prev::before {
    background-image: url('/icons/arrows-navigation/simple-chevron-left.svg');
}

.complex-comp-chart__plans-thumbs .l-slider__arrow--next::before {
    background-image: url('/icons/arrows-navigation/simple-chevron-right.svg');
}

/* At the first/last card there is no card to page toward, so hide that edge arrow. */
.complex-comp-chart__plans-row.l-slider .l-slider__arrow:disabled,
.complex-comp-chart__plans-row.l-slider .l-slider__arrow[aria-disabled='true'] {
    display: none;
}

/* Tablet/mobile: the shared controls bar stays hidden; plan thumbs overlay the cards. */
@media (width < 1024px) {
    .complex-comp-chart__plans-row.l-slider .l-slider__controls {
        display: none;
    }
}

/* Tablet, two plans authored: both fit, so drop the carousel exactly as desktop does for
   three - static rail, no snap, no peek padding, no overlay thumbs. Mobile still needs the
   one-per-view carousel, hence the lower bound. */
@media (width >= 768px) and (width < 1024px) {
    .complex-comp-chart__plans-row--pair.l-slider .complex-comp-chart__plans-viewport {
        overflow: visible;
        scroll-snap-type: none;
        padding: 0;
        justify-content: center;
    }

    .complex-comp-chart__plans-row--pair.l-slider .complex-comp-chart__plans-thumbs {
        display: none;
    }

    .complex-comp-chart__plans-row--pair.l-slider
    .complex-comp-chart__plans-viewport .l-slider__slide:not(.is-active) .product-details__card {
        opacity: 1;
    }
}

.complex-comp-chart__plans-thumbs {
    display: contents;
}

/* stylelint-disable-next-line no-duplicate-selectors, no-descending-specificity -- ordering is
   load-bearing; see ./complex-comp-chart.md "Plans rail metrics" */
.complex-comp-chart__plans-row.l-slider .complex-comp-chart__plans-viewport {
    column-gap: 20px;
    padding-block: 14px 24px;
}

/* Desktop: all three cards fit, so drop the carousel behavior and render a static row. */
@media (width >= 1024px) {
    .complex-comp-chart__plans-thumbs {
        display: none;
    }

    .complex-comp-chart__plans-row.l-slider .complex-comp-chart__plans-viewport {
        overflow: visible;
        scroll-snap-type: none;
        padding: 0;
        gap:30px;
        justify-content: center;
    }

    .complex-comp-chart__plans-viewport .l-slider__slide:not(.is-active) .product-details__card {
        opacity: 1;
    }
}

@media (width < 1024px) {
    .complex-comp-chart__heading,
    .complex-comp-chart__subheading {
        padding-inline: var(--ll-space-8);
    }
}

@media (width < 768px) {
    .complex-comp-chart__heading {
        font-size: var(--ll-text-h5-size);
        line-height: var(--ll-text-h5-line-height);
        letter-spacing: var(--ll-text-h4-letter-spacing);
        margin-block: var(--ll-space-9) var(--ll-space-5);
        padding-block: 0;
        padding-inline: var(--ll-space-5);
    }

    .complex-comp-chart__subheading {
        font-size: var(--ll-text-body-lg-size);
        line-height: var(--ll-text-body-lg-line-height);
        letter-spacing: var(--ll-text-body-lg-letter-spacing);
        padding-inline: var(--ll-space-5);
    }

    .complex-comp-chart__tab-btn {
        font-size: var(--ll-text-body-sm-size);
        line-height: var(--ll-text-body-sm-line-height);
        letter-spacing: var(--ds-letter-spacing-body-base);
        min-width: unset;
    }

    .complex-comp-chart__tab-icon {
        display: none;
    }

    .complex-comp-chart__tooltip {
        max-width: 300px;
    }
}

/* LG/XL */
@media (width >= 1024px) {
    .complex-comp-chart__tabs {
        gap: var(--ll-space-4);
    }

    .complex-comp-chart__subheading + .complex-comp-chart__tabs {
        margin-block-start: var(--ll-space-11);
    }
}