/* Figma widget_incomplete_visits (1640:2591): state x promotion x wrapped x
 * device. promotion=true is the dark solar theme, false the plain light one;
 * wrapped adds the neutral shell + ProgressButton rail (TreatmentsCard
 * precedent). */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Figma's card stroke sits inside; an inset ring keeps the auto mobile
     * heights and inner offsets exact (Info strip precedent). */
    box-shadow: inset 0 0 0 1px var(--border-color-light);
    border-radius: var(--border-radius-sm);
}

.cardDesktop {
    height: 470px;
}

.cardMobile {
    width: 100%;
}

.cardMobile[data-state='single'] {
    border-radius: var(--border-radius-md);
}

.card[data-state='single'] {
    justify-content: center;
}

/* Single is light-only since the 2764:x redesign (promo dark ground retired);
 * the inner .singleFrame carries the grey card chrome, so the bare mobile
 * card drops its own ring/ground (no double border). */
.cardMobile[data-state='single'] {
    background: none;
    box-shadow: none;
}

/* Standalone desktop single: white shell around the inner grey card
 * (widget_shop_carousel_wrapper 2785:34144 — shared shell pattern). */
.cardDesktop[data-state='single']:not(.cardInShell) {
    background-color: var(--color-bg-base-light);
    border-radius: var(--border-radius-md);
}

.singleActive {
    display: flex;
    flex: 1;
    min-height: 1px;
    width: 100%;
    padding: 24px 24px 0;
}

/* Deviates from the wrapper mock's 80px strip on purpose: matches the shipped
 * ShopCarousel footer (0 24 20) so the view links align across the row
 * (Ben, 2026-07-15 — flag the mock drift to design). */
.singleFooter {
    display: flex;
    flex-shrink: 0;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    padding: var(--spacing-16) var(--spacing-24) var(--spacing-20);
}

.card[data-state='multiple'],
.card[data-state='loading'] {
    background-color: var(--color-bg-base-light);
    overflow: hidden;
}

/* ============================ single state ============================= */

/* Inner grey card (2764:16216): its own ground, border, and shadow-card so it
 * reads as a card inside the white shell. */
.singleFrame {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 1px;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-24);
    /* Figma pads 24 with a 1px inside stroke; CSS border adds outside, so
     * 23px keeps offsets exact (TreatmentsCard precedent). */
    padding: 23px;
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-md);
    background-color: var(--color-bg-neutral-light);
    box-shadow: 0 7px 10px 0 rgba(0, 0, 0, 0.04); /* shadow-card */
}

.cardMobile .singleFrame {
    flex: none;
    padding: 15px;
}

.singleBgClip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--border-radius-md);
    pointer-events: none;
}

/* Bottom-anchored ambient render, full bleed (2764:x: inset-0 object-bottom). */
.singleBg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: bottom;
}

/* Title block fills the frame's 24px content box (was a hardcoded 409px from
 * the pre-shell 456px card — overflowed the padding once the inner card
 * shrank to 408). */
.singleTop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-14);
    width: 100%;
}

.singleTitle {
    margin: 0;
    width: 100%;
    text-align: center;
    font-family: var(--font-default);
    font-weight: var(--font-weight-regular);
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: var(--letter-spacing-negative-xl);
    font-feature-settings: 'case' 1;
    color: var(--color-text-primary);
}

.cardMobile .singleTitle {
    font-size: 24px;
}

/* Glass hero panel with the floating product shot (2764:x: 18px pad,
 * alpha-black border on the light ground). */
.heroPanel {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 1px;
    width: 260px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-24);
    padding: 18px;
    border: 1px solid var(--border-color-alpha-black-10);
    border-radius: var(--border-radius-sm);
    backdrop-filter: blur(25px);
    background-color: var(--color-bg-fill-alpha-white-20);
}

.cardMobile .heroPanel {
    flex: none;
    width: 100%;
}

.heroProduct {
    display: flex;
    flex: 1;
    min-height: 1px;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-16);
}

.cardMobile .heroProduct {
    flex: none;
}

/* 2764:x: bare product shot — the tile fill/shadow chrome is gone. */
.heroImgWrap {
    display: flex;
    flex: 1;
    min-height: 1px;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-xs);
    overflow: hidden;
}

.cardMobile .heroImgWrap {
    flex: none;
    height: 120px;
}

.heroImg {
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: bottom;
}

.heroLine {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-16);
    width: 100%;
}

.heroName {
    margin: 0;
    text-align: center;
    color: var(--color-text-primary);
}

/* Full-width CONTINUE VISIT (2764:x). */
.heroCta {
    display: flex;
    width: 100%;
}

.heroCta > * {
    flex: 1;
}

/* =========================== multiple state ============================ */

.multipleContent {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 1px;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    border-radius: var(--border-radius-sm);
    background-color: var(--color-bg-neutral-light);
}

.cardMobile .multipleContent {
    flex: none;
    justify-content: flex-start;
    padding-bottom: var(--spacing-20);
}

.multipleTop {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

/* Header panel; the rows below pull up over its 210px bottom padding via the
 * -173px margin, exactly as drawn. */
.headerPanel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 23px 23px 209px;
    margin-bottom: -173px;
    border: 1px solid var(--border-color-alpha-white-20);
    border-radius: var(--border-radius-sm);
    filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.1));
}

.cardMobile .headerPanel {
    padding: 17px 15px 199px 17px;
}

.headerPanel[data-theme='light'],
.headerPanelLoading {
    background-color: var(--color-bg-neutral-light);
}

.headerBgClip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--border-radius-sm);
    pointer-events: none;
}

.headerBgDark {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

/* Pre-rotated render of the light sphere; percentages verbatim from Figma
 * (negative width/height there = the 180-degree flip baked into the asset). */
.headerBgLight {
    position: absolute;
    left: -17.56%;
    top: 51.46%;
    width: 102.14%;
    height: 141.87%;
    max-width: none;
}

.headerContent {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-12);
    width: 100%;
}

.cardMobile .headerContent {
    gap: var(--spacing-14);
}

.headerTitleGroup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px; /* Figma one-off; no token */
    width: 100%;
}

.headerTitleRow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.multipleTitle {
    margin: 0;
    font-family: var(--font-default);
    font-weight: var(--font-weight-regular);
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: var(--letter-spacing-negative-xl);
    font-feature-settings: 'case' 1;
}

.cardMobile .multipleTitle {
    font-size: 24px;
}

/* Figma pins the promo mobile title to 28px (2004:12849); the plain variant
 * stays auto. */
.cardMobile .headerPanel[data-theme='dark'] .multipleTitle {
    height: 28px;
}

.headerPanel[data-theme='dark'] .multipleTitle {
    background-image: linear-gradient(177.043deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Figma gives the first title line its own angle (1664:24976). */
.headerPanel[data-theme='dark'] .headerTitleRow .multipleTitle {
    background-image: linear-gradient(172.306deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.7) 100%);
}

.headerPanel[data-theme='light'] .multipleTitle {
    color: var(--color-text-primary);
}

.headerTitleSub {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8);
    width: 100%;
}

.headerDesc {
    width: 100%;
}

.headerPanel[data-theme='dark'] .headerDesc {
    color: var(--color-text-primary-disabled);
}

.headerPanel[data-theme='light'] .headerDesc {
    color: var(--color-text-secondary);
}

.rows {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-20);
    width: 100%;
}

/* Figma sizes the promo rows 409px centred and pads the plain ones 20px. */
.rows[data-theme='dark'] > * {
    width: 409px;
}

.rows[data-theme='light'],
.rowsLoading {
    padding: 0 var(--spacing-20);
}

.cardMobile .rows,
.cardMobile .rowsLoading {
    padding: 0 var(--spacing-8);
}

.cardMobile .rows[data-theme='dark'] > * {
    width: 100%;
}

.footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    padding: var(--spacing-20);
}

/* ============================ mobile chrome ============================ */

.mobileRoot {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
}

.mobileHeader {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
    height: 24px;
    width: 100%;
}

.eyebrow {
    font-family: var(--font-decorative);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xxl);
    text-transform: uppercase;
    color: var(--color-text-primary-disabled);
    white-space: nowrap;
}

.headerDivider {
    flex: 1;
    min-width: 1px;
    height: 1px;
    background-color: var(--border-color-alpha-black-10);
}

/* ============================ loading state ============================ */

/* Skeleton fill — per-block Figma angles collapsed to one, matching the
 * AccountSetupCard/TreatmentsCard skeleton convention. */
.skelEyebrow,
.skelChip,
.skelTitle,
.skelDesc,
.skelThumb,
.skelName,
.skelSegment {
    background: linear-gradient(176deg, rgba(229, 229, 229, 0.2) 0%, rgba(173, 173, 173, 0.2) 100%);
}

.skelEyebrow {
    height: 24px;
    width: 100%;
    border-radius: 6px; /* Figma one-off; no token */
}

.skelHeaderGroup {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    width: 100%;
}

.skelHeaderLines {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 64px;
    width: 100%;
}

.skelHeaderRow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.skelTitle {
    width: 194px;
    height: 26px;
    border-radius: 6px; /* Figma one-off; no token */
}

.skelTitleShort {
    width: 156px;
}

.skelChip {
    width: 106px;
    height: 24px;
    border-radius: var(--border-radius-xxs);
    backdrop-filter: blur(6px);
}

/* Figma leaves the bar to flex; it resolves to the body line height. */
.skelDesc {
    width: 100%;
    height: 19px;
    border-radius: var(--border-radius-xxs);
}

.skelRow {
    display: flex;
    flex-direction: column;
    height: 90px;
    width: 100%;
    padding: 11px 17px 11px 11px;
    border: 1px solid var(--border-color-alpha-white-20);
    border-radius: var(--border-radius-sm);
    background-color: var(--color-bg-fill-alpha-white-20);
    backdrop-filter: blur(25px);
    box-shadow: 0 12px 10px 0 rgba(0, 0, 0, 0.04);
}

.skelRowInner {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
    flex: 1;
    min-height: 1px;
    width: 100%;
}

.skelThumb {
    height: 100%;
    aspect-ratio: 1;
    border-radius: var(--border-radius-xs);
    flex-shrink: 0;
}

.skelRowLines {
    display: flex;
    flex: 1;
    min-width: 1px;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-16);
}

.cardMobile .skelRowLines {
    gap: var(--spacing-14);
}

.skelNameWrap {
    width: 100%;
    padding-right: var(--spacing-48);
}

.skelName {
    width: 100%;
    height: 22px;
    border-radius: 6px; /* Figma one-off; no token */
}

.skelSegments {
    display: flex;
    gap: var(--spacing-4);
    width: 100%;
}

.skelSegment {
    flex: 1;
    min-width: 1px;
    height: 4px;
    border-radius: var(--border-radius-xxs);
}

.skelArrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    /* Figma "muted" style = the skeleton gradient (rgba 229→173 at 20%, see
     * AccountSetupCard); collapsed to its midpoint for the glyph fill. */
    color: rgba(201, 201, 201, 0.2);

    & > * {
        width: 100%;
        height: 100%;
    }
}

/* ============================= error state ============================ */
/* Figma state=error (2208:8313 desktop / 2208:8332 mobile): a greyed
 * "That didn't go as planned" hero over a single disabled cloud-off row.
 * Spacing composed from the Figma-derived visit-row/text metrics and
 * screenshot-verified against both symbols; the cloud-off glyph + tile
 * gradient are verbatim from the Figma export. */
.card[data-state='error'] {
    background-color: var(--color-bg-neutral-light);
    overflow: hidden;
}

.errorContent {
    display: flex;
    flex: 1;
    min-height: 1px;
    width: 100%;
    flex-direction: column;
    gap: var(--spacing-24);
    padding: 23px;
}

.cardMobile .errorContent {
    flex: none;
    gap: var(--spacing-16);
    padding: 17px 17px 20px;
}

.errorHeader {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    width: 100%;
}

.errorTitle {
    margin: 0;
    font-family: var(--font-default);
    font-weight: var(--font-weight-regular);
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: var(--letter-spacing-negative-xl);
    font-feature-settings: 'case' 1;
    color: var(--color-text-secondary);
}

.cardMobile .errorTitle {
    font-size: 24px;
}

.errorSubtitle {
    margin: 0;
    color: var(--color-text-secondary-disabled);
}

/* Disabled row — visit-row glass metrics (skelRow), centred in the leftover
 * space between the hero and the footer. */
.errorRow {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
    box-sizing: border-box;
    width: 100%;
    height: 90px;
    margin: auto 0;
    padding: 11px 17px 11px 11px;
    border: 1px solid var(--border-color-alpha-white-20);
    border-radius: var(--border-radius-sm);
    background-color: var(--color-bg-fill-alpha-white-20);
    backdrop-filter: blur(25px);
    box-shadow: 0 12px 10px 0 rgba(0, 0, 0, 0.04);
}

.cardMobile .errorRow {
    margin: 0;
}

.errorTile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    aspect-ratio: 1;
    flex-shrink: 0;
    border-radius: var(--border-radius-xs);
    /* "Gray Linear Light" Figma style (ConsultationCheckInCard precedent). */
    background: linear-gradient(145.789deg, #f0f0f0 0%, #e5e5e5 100%);
    color: var(--color-text-primary-disabled);
}

/* The exported icon keeps its 48-unit frame (glyph spans the middle 24),
 * so it renders at the component's native 48px. */
.errorTileIcon {
    width: 48px;
    height: 48px;
}

.errorSegments {
    display: flex;
    gap: var(--spacing-4);
    flex: 1;
    min-width: 1px;
}

.errorSegment {
    flex: 1;
    min-width: 1px;
    height: 4px;
    border-radius: var(--border-radius-xxs);
    background-color: var(--border-color-light);
}

/* ============================ wrapped shell ============================ */

.shell {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    height: 470px;
    border-radius: var(--border-radius-sm);
    background-color: var(--color-bg-neutral-light);
}

.cardInShell {
    flex: 1;
    min-height: 1px;
    height: auto;
}

/* Full-width prev/next rail (ProgressButton is 145px on its own). */
.rail {
    width: 100%;
}