/* Figtree, bundled under ../font/Figtree/.
 *
 * `--airdr-font-family` below has named "Figtree" since the Pomodoc theme
 * landed, but nothing ever loaded it: index.html links only Poppins, and the
 * vendored stylesheet declares only Poppins and AirDoctorIcons. Every element
 * using the family fell back to generic sans-serif, so the theme's typography
 * was never actually on screen.
 *
 * The two variable files carry the whole family. Their `fvar` tables give the
 * wght axis as 300-900 (read from the files, not assumed), which is why the
 * range is written that way rather than as a single weight — a variable face
 * declared at one weight is synthesised for the others instead of varied. The
 * app only ever asks for 400, 500 and 600, so the 14 static cuts in
 * font/Figtree/static/ stay unreferenced: one file per axis beats three files
 * that still cannot answer a fourth weight.
 *
 * `truetype-variations` is the correct format hint for a variable TTF, and no
 * plain-truetype fallback is listed on purpose: a browser that ignored the
 * variations would render the file's default instance — Light 300 — for all
 * three weights, which is worse than the generic fallback this replaces. Any
 * browser that can run this app supports variable fonts; index.html already
 * requires import maps and top-level await.
 */
@font-face {
    font-family: "Figtree";
    src: url('../font/Figtree/Figtree-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Figtree";
    src: url('../font/Figtree/Figtree-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Pomodoc brand purple */
    --airdr-brand-primary-color: #6B38C8;
    --airdr-brand-secondary-color: #E0D4FF;
    --airdr-brand-tertiary-color: #F0EAFF;
    --airdr-brand-primary-background: var(--airdr-brand-primary-color);
    --airdr-brand-secondary-background: var(--airdr-brand-secondary-color);
    --airdr-brand-disabled-background: var(--airdr-brand-tertiary-color);

    /* Purple scale (replaces blue scale, light mode) */
    --airdr-blue-50-color: #F5F0FF;
    --airdr-blue-100-color: #E8DCFF;
    --airdr-blue-200-color: #D0BAFF;
    --airdr-blue-300-color: #B496F8;
    --airdr-blue-400-color: #9470EC;
    --airdr-blue-500-color: #7B50D8;
    --airdr-blue-600-color: #6B38C8;
    --airdr-blue-700-color: #5828B0;
    --airdr-blue-800-color: #421A90;
    --airdr-blue-900-color: #2E0E6C;

    /* Accent */
    --airdr-accent-color: #6B38C8;

    /* Ink stays dark in light mode */
    --airdr-ink-color: #282828;

    /* Remove SVG background image, use paper color instead */
    --airdr-background-image: none;

    /* Body font color */
    --airdr-body-font-color: #6E6E6E;

    /* Font family */
    --airdr-font-family: "Figtree", sans-serif;

    /* Title font */
    --airdr-title-font: 700 26px / 32px "Source Serif 4", serif;

    /* Headline font */
    --airdr-headline-font: 600 26px / 32px "Source Serif 4", serif;

    /* Display font */
    --airdr-display-font: 600 48px / 60px "Source Serif 4", serif;

    /* Subtitle font */
    --airdr-subtitle-font: 600 13px / 20px var(--airdr-font-family);

    /* Footnote font */
    --airdr-footnote-font: 400 12px / 16px var(--airdr-font-family);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Restore readable ink on dark backgrounds */
        --airdr-ink-color: #ebf4ff;
        --airdr-body-font-color: #A0A0A0;

        /* Purple scale flipped for dark mode */
        --airdr-blue-50-color: #2E0E6C;
        --airdr-blue-100-color: #421A90;
        --airdr-blue-200-color: #5828B0;
        --airdr-blue-300-color: #6B38C8;
        --airdr-blue-400-color: #9470EC;
        --airdr-blue-500-color: #B496F8;
        --airdr-blue-600-color: #D0BAFF;
        --airdr-blue-700-color: #E8DCFF;
        --airdr-blue-800-color: #F0EAFF;
        --airdr-blue-900-color: #F5F0FF;

        /* Lighter brand primary so it shows against dark backgrounds */
        --airdr-brand-primary-color: #9470EC;
        --airdr-brand-primary-background: #9470EC;
        --airdr-brand-secondary-color: #421A90;
        --airdr-brand-tertiary-color: #2E0E6C;
        --airdr-brand-disabled-background: #2E0E6C;
        --airdr-accent-color: #9470EC;
    }
}

body, .airdr-layout__body, .airdr-layout {
    background-color: var(--airdr-paper-color);
}

.airdr-text--tag {
    align-self: center !important;
    border-radius: var(--airdr-pill-shape-radius) !important;
    flex: 0 0 auto !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
    width: max-content !important;
}

[airdr-ref="medication-info"] .airdr-text {
    font: 400 14px / 20px var(--airdr-font-family) !important;
}

/* The two small lines in the doctor card at 14px: the date/time and the
 * "Video consultation: €40.00" line. Refs read off the production DOM.
 *
 * Addressed by ref rather than by text variant. Both lines are
 * `airdr-text--footnote`, and so are small lines elsewhere in the card, so
 * scoping by variant would have caught text that should stay at 12px; naming
 * the two elements changes exactly those two and nothing else. The doctor's
 * name is `--headline` at 26px and is not matched here.
 *
 * The SDK puts `airdr-ref` on the component's own element, which is also the
 * element carrying `.airdr-text--footnote` and its `font:` shorthand. A plain
 * declaration would lose to that shorthand, so `!important` is required on both
 * declarations. Family and weight are left alone, so the footnote's Figtree 400
 * still applies.
 *
 * `line-height` is raised from the footnote's 16px to 20px: at 14px the two
 * lines sat too close together. It is set here rather than by switching the
 * element to `--body` (which is 14px/20px already) because the variant is the
 * app owner's choice, not ours.
 */
[airdr-ref="appointment-date"],
[airdr-ref="appointment-place"] {
    font-size: 14px !important;
    line-height: 20px !important;
}

/* Actual gap between the two lines, separate from their leading.
 *
 * The 20px line-height above adds room inside each line's own box, which
 * centres the text but does not push the second line away from the first. This
 * is the gap itself, and it is on `appointment-place` only — the second of the
 * two — so nothing is added above the date line or below the price line, and
 * the card's own padding is untouched.
 */
[airdr-ref="appointment-place"] {
    margin-top: 4px !important;
}

/* Step 1 only: space above the country-results card.
 *
 * The element Keren pointed at is
 * `.airdr-internal.airdr-internal--column.airdr-card.airdr-card--column.airdr-with-width`,
 * which is a generic card shell used on other screens too, so the class
 * combination on its own would have moved those as well. On Step 1 that element
 * carries `airdr-ref="country-results"` — the country autocomplete's results
 * container — and it is the only element on the screen matching the
 * combination. Scoping to the ref pins the rule to this one card: a selector
 * that requires the attribute cannot match a card that does not have it, so
 * every other screen is untouched by construction rather than by luck.
 *
 * Ref alone, without the class combination, deliberately: this SDK renames
 * design-system classes between drops (the 2026-09-01 build renamed fifteen of
 * them), and a rule that depends on five class names silently stops applying
 * the first time one is consolidated. The refs have been the stable half.
 * Consistent with how the rest of this file targets the app.
 *
 * Note that this card is empty and 0px high until the visitor types, so the
 * 24px reads as a gap between the country field and the Continue row on the
 * initial state, not only as space above the results.
 */
[airdr-ref="country-results"] {
    margin-top: calc(var(--airdr-default-indent) * 3) !important;
}

.airdr-button--secondary {
    border-color: var(--airdr-grayscale-300-color) !important;
    color: var(--airdr-grayscale-600-color) !important;
}

[airdr-ref="sub-title"],
[airdr-ref="email-info"] {
    color: #6e6e6e !important;
}

[airdr-ref="email-hint-text"] {
    color: var(--airdr-text-primary-color) !important;
}

.airdr-card--shadow {
    box-shadow: none !important;
    background-color: var(--airdr-blue-100-color) !important;
    margin-top: calc(var(--airdr-default-indent) * 2) !important;
    border-radius: 16px !important;
}

[airdr-ref="contact-shadow"] {
    background-color: var(--airdr-paper-color) !important;
    border: 1px solid var(--airdr-grayscale-300-color) !important;
}


.airdr-text--tag.airdr-text-shaded-1 {
    background-color: var(--airdr-blue-100-color) !important;
}

[airdr-ref="email-icon"] {
    background-image: url('../img/icon-badge-outer%20mail.svg') !important;
    margin-top: calc(var(--airdr-spacing-4xl) * 1) !important;
}

[airdr-ref="wa-icon"] {
    background-image: url('../img/icon-badge-outer.svg') !important;
    margin-top: calc(var(--airdr-spacing-4xl) * 1) !important;
}

/* Progress bar: transform Rating/stars into segmented pill bar */
.airdr-rating[airdr-ref="progress-bar"] {
    width: 100% !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: row !important;
}

.airdr-rating[airdr-ref="progress-bar"] .wrapper {
    width: 100% !important;
    gap: 6px !important;
}

.airdr-rating[airdr-ref="progress-bar"] .star {
    flex: 1 !important;
    height: 6px !important;
    width: auto !important;
    border-radius: 10px !important;
    background: var(--airdr-blue-100-color) !important;
    fill: transparent !important;
    overflow: hidden !important;
}

.airdr-rating[airdr-ref="progress-bar"] .star.filled {
    background: var(--airdr-brand-primary-color) !important;
}