/*
 * Consultation Check-In card — Figma R2: Dashboard file VtSQbiEqtuaowkAOQhXmpI,
 * use-cases consultation_cta 1191:15314, layout set
 * widget_consultation_cta_layout 1219:9861.
 *
 * Desktop (456×470, 1206:15567): photo shell with a frosted glass panel —
 * eyebrow, headline, body, full-width CTA. Mobile (362px, 1889:16722):
 * compact photo shell — eyebrow, info icon (tooltip carries the body copy),
 * headline, CTA. Loading renders skeleton blocks over a washed-out photo;
 * error swaps the shell to black with an alert icon.
 */

.card {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}

/* Desktop shell (1206:15567): p24, radius-small, border-light over the
 * neutral-light base; the use-case frames add the soft drop shadow. */
.cardDesktop {
    height: 470px;
    padding: var(--spacing-24);
    background: var(--color-bg-neutral-light);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 12px 10px 0 rgba(0, 0, 0, 0.04);
}

/* Mobile shell (1889:16722): pl-20 pr-16 py-20, radius-medium,
 * alpha-white-20 border, 18px gap between content and CTA. */
.cardMobile {
    align-items: flex-start;
    gap: var(--spacing-18);
    padding: var(--spacing-20) var(--spacing-16) var(--spacing-20) var(--spacing-20);
    background: var(--color-bg-neutral-light);
    border: 1px solid var(--border-color-alpha-white-20);
    border-radius: var(--border-radius-md);
}

/* Error state (1894:15566 / 1894:15574): black shell, no photo. */
.cardError {
    background: var(--color-bg-base-dark);
}

/* Mobile loading (1893:19464) sits on the light base, so the border flips to
 * alpha-black-10; desktop loading keeps border-light. */
.cardMobile.cardLoading {
    border-color: var(--border-color-alpha-black-10);
}

.background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none; /* allow >100% widths for the per-form crops (BG_STYLES) */
    object-fit: cover;
    object-position: center bottom;
    z-index: 0;
}

/* Washed-out product photo behind the skeletons (1893:19385 / 1893:19464). */
.backgroundLoading {
    opacity: 0.2;
}

/*
 * Frosted glass panel (Figma `card` 1206:15555): alpha-white-10 fill +
 * border, 25px blur, layered drop shadow. The 34px content↔CTA gap has no
 * spacing token.
 */
.glass {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 34px;
    width: 100%;
    padding: var(--spacing-24);
    background: var(--color-bg-fill-alpha-white-10);
    border: 1px solid var(--border-color-alpha-white-10);
    border-radius: var(--border-radius-sm);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow:
        0 20px 25px 0 rgba(0, 0, 0, 0.1),
        0 8px 10px 0 rgba(0, 0, 0, 0.1);
    color: var(--color-text-primary-inverted);
}

/* Loading glass brightens to alpha-white-20 (1893:19386). */
.glassLoading {
    background: var(--color-bg-fill-alpha-white-20);
}

.content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    width: 100%;
    color: var(--color-text-primary-inverted);
}

.copy {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
    word-break: break-word;
}

/* Mobile copy stack tightens to 12px (1889:16726). */
.cardMobile .copy {
    gap: var(--spacing-12);
}

.eyebrow {
    opacity: 0.6;
}

/* Figma headline enables the cap-height variant (fontFeatureSettings "case"). */
.headline {
    font-feature-settings: 'case' 1;
}

.cta {
    position: relative;
    z-index: 1;
    width: 100%;
}

.cta button {
    width: 100%;
}

/* ========================= Mobile info tooltip ========================= */

.infoButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-text-primary-inverted);
    transition: opacity 150ms ease-in-out;
}

/* Muted while its tooltip is open (designer note 2026-07-10; no Figma spec —
 * 50% pending her confirmation). */
.infoButton[data-open='true'] {
    opacity: 0.5;
}

.infoIcon {
    width: 24px;
    height: 24px;
}

/*
 * White bubble + caret above the info icon (Tooltip 1893:18573): caret 8×16
 * pointing left at the icon, content radius-small p-12. Offsets and 270px
 * width verbatim from the symbol; shadow-float rendered as drop-shadow so it
 * wraps the caret too.
 */
.tooltip {
    position: absolute;
    top: -23px;
    left: 30px;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 270px;
    color: var(--color-bg-fill-brand-inverse);
    filter: drop-shadow(0 20px 12.5px rgba(0, 0, 0, 0.1)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.1));
}

.tooltipCaretSlot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8px;
    height: 16px;
    flex-shrink: 0;
}

.tooltipCaret {
    width: 16px;
    height: 8px;
    flex: none;
    transform: rotate(90deg);
}

.tooltipText {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-12);
    background: var(--color-bg-fill-brand-inverse);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-primary);
}

/* ============================ Error state ============================ */

/* 48px icon tile (1894:15592) — "Gray Linear Light" gradient, no tokens. */
.errorTile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--border-radius-xs);
    background: linear-gradient(145.789deg, #f0f0f0 0%, #e5e5e5 100%);
}

.errorTileIcon {
    width: 24px;
    height: 24px;
    color: var(--color-text-secondary-disabled);
}

.errorIconMobile {
    width: 24px;
    height: 24px;
    color: var(--color-text-primary-inverted);
}

/* =============================== Loading =============================== */

/* Skeleton fill — Figma "muted" style (rgba 229→173 at 20%); the per-block
 * gradient angles differ by <5° in the file and collapse to one here. */
.skel {
    display: block;
    border-radius: var(--border-radius-xxs);
    background: linear-gradient(176deg, rgba(229, 229, 229, 0.2) 0%, rgba(173, 173, 173, 0.2) 100%);
}

.skelEyebrow {
    width: 117px;
    height: 12px;
}

.skelIcon {
    width: 24px;
    height: 24px;
}

.skelHeadline {
    width: 100%;
    height: 62px;
    border-radius: 6px; /* no radius token between xxs (4) and xs (8) */
}

/* Body placeholder rows (1893:19402): 10px row gap (no token), right-padded
 * 80px, second row a further 40px short. */
.skelBody {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding-right: var(--spacing-80);
    box-sizing: border-box;
}

.skelLine {
    width: 100%;
    height: 18px;
}

.skelLineShort {
    width: 100%;
    padding-right: var(--spacing-40);
    box-sizing: border-box;
}

.skelButton {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 40px;
}

/* ========================== Desktop pager wrapper ========================== */

/* Figma wrapper variant (1219:9860): 470px column, card flexes above a
 * full-width ProgressButton, 16px apart. */
.pagerStack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    height: 470px;
    width: 100%;
}

.pagerStack .cardDesktop {
    flex: 1;
    height: auto;
    min-height: 0;
}

.pagerStack .pagerButton {
    width: 100%;
}