/**
 * Doctor Search Form - Super Minimal Design
 * (classes from the live site) plus a live specialty results dropdown.
 */

/* Form Container */
.doctor-search-form {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 1rem;
    max-width: 100%;
    margin: 0 auto;
    overflow: visible;
    position: relative;
    z-index: 20;
}

.doctor-search-form--refine {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 1.25rem;
}

.doctor-search-form--refine .doctor-search-form__group,
.doctor-search-form--refine .doctor-search-form__button {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    min-width: 0;
}

.doctor-search-form__clear {
    align-self: flex-start;
    margin-top: 0.4rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--hcl-brand-9, #6b4f2a);
    font-family: inherit;
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
}

/* Form Groups */
.doctor-search-form__group {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 150px;
    position: relative;
    overflow: visible;
}

/* Labels - Hidden */
.doctor-search-form__label {
    display: none;
}

/* Inputs and Selects */
.doctor-search-form__input,
.doctor-search-form__select {
    width: 100%;
    padding: 1rem 0;
    border: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
    font-size: 1rem;
    font-family: inherit;
    background-color: transparent;
    color: var(--hcl-neutral-12);
    transition: border-color 0.3s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.doctor-search-form__select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 1.25em;
    padding-right: 1.5rem;
    cursor: pointer;
}

.doctor-search-form__input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.doctor-search-form__input:focus,
.doctor-search-form__select:focus {
    outline: none;
    border-bottom-color: var(--hcl-brand-9, #0d7377);
}

/* Submit Button */
.doctor-search-form__button {
    flex-shrink: 0;
    padding: 1rem 2.5rem;
    background: #000000;
    color: white;
    border: none;
    border-radius: 0;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
}

.doctor-search-form__button:hover {
    background: #1a1a1a;
}

@media (max-width: 900px) {
    .doctor-search-form {
        flex-direction: column !important;
        gap: 1.5rem;
        align-items: stretch !important;
    }

    .doctor-search-form > * {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        min-width: 0;
    }

    .doctor-search-form__group {
        width: 100%;
    }

    .doctor-search-form__button {
        width: 100%;
    }
}

.doctor-search-form__input[type="number"]::-webkit-inner-spin-button,
.doctor-search-form__input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.doctor-search-form__input[type="number"] {
    -moz-appearance: textfield;
}

/* Live specialty dropdown — top 6 results, flush under the field */
.bdfad-specialty-list {
    position: absolute;
    z-index: 100000;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    max-height: calc(6 * 3.5rem);
    overflow-y: auto;
    box-sizing: border-box;
}

.bdfad-specialty-list[hidden] {
    display: none !important;
}

.bdfad-specialty-list__item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.bdfad-specialty-list__item:last-child {
    border-bottom: none;
}

.bdfad-specialty-list__item.is-active,
.bdfad-specialty-list__item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.bdfad-specialty-list__title {
    color: var(--hcl-neutral-12, #1a1a1a) !important;
    font-size: 0.95rem;
    line-height: 1.3;
    font-weight: 500;
}

.bdfad-specialty-list__item mark {
    background: none;
    font-weight: 700;
    color: inherit;
}

.bdfad-specialty-list__meta {
    color: rgba(0, 0, 0, 0.45);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bdfad-specialty-list__empty {
    padding: 0.75rem 0.9rem;
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
}

.bdfad-refine-panel {
    width: 100%;
}

.bdfad-refine-panel__header h3 {
    color: var(--hcl-neutral-12, #1a1a1a);
}

/* ══════════════════════════════════════════════════════════════════════════
 * Search banner — Figma "Find A Doctor": home 3286:3154, results 3286:3258,
 * mobile 3310:1444 / 3310:1540. Tokens mirror the Figma variables.
 * ══════════════════════════════════════════════════════════════════════════ */
.bdfad-hero {
    --bdfad-hero-bg: #efb14d;                    /* Background/Background Accent */
    --bdfad-hero-field-bg: rgba(255, 255, 255, 0.3); /* White/white-alpha-30 */
    --bdfad-hero-field-border: #a66317;          /* Yellow/yellow-600 */
    --bdfad-hero-placeholder: rgba(0, 0, 0, 0.5); /* Form/Input Placeholder */
    --bdfad-hero-joiner: #653c15;                /* Yellow/yellow-800 */
    --bdfad-hero-text: #000;                     /* Text/Text Primary */
    --bdfad-hero-button: #000;                   /* Button/Button Primary */
    --bdfad-hero-button-text: #fff;              /* Button/Button Text */
    --bdfad-hero-font-primary: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bdfad-hero-font-secondary: "Erode Variable", "Erode", Georgia, "Times New Roman", serif;

    box-sizing: border-box;
    width: 100%;
    color: var(--bdfad-hero-text);
    font-family: var(--bdfad-hero-font-primary);
    zoom: var(--bdfad-zoom, 1);                  /* same "Desktop size" setting as the results */
}

.bdfad-hero *,
.bdfad-hero *::before,
.bdfad-hero *::after {
    box-sizing: border-box;
}

.bdfad-hero .bdfad-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bdfad-hero .bdfad-icon {
    display: block;
    flex-shrink: 0;
    max-width: none;
    pointer-events: none;
}

.bdfad-hero--banner {
    padding: 74px 16px;                          /* Section/section-m */
    background: var(--bdfad-hero-bg);
}

.bdfad-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;                                   /* Space/space-3xl */
    width: 100%;
    max-width: 1440px;                           /* Width/max-width */
    margin: 0 auto;
}

.bdfad-hero__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    text-align: center;
}

.bdfad-hero__eyebrow {
    margin: 0;
    font-family: var(--bdfad-hero-font-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.42px;
    text-transform: uppercase;
    opacity: 0.7;
    color: var(--bdfad-hero-text);
    text-box: trim-both cap alphabetic;
}

/* Desktop/Heading/Heading 2 */
.bdfad-hero .bdfad-hero__title {
    margin: 0;
    padding: 0;
    font-family: var(--bdfad-hero-font-secondary);
    font-size: 56px;                             /* Typography/font-5xl */
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.56px;
    color: var(--bdfad-hero-text);
    text-align: center;
    text-transform: none;
    text-box: trim-both cap alphabetic;
}

.bdfad-hero--heading-only .bdfad-hero__title {
    text-align: inherit;
}

/* "near" / "in" match the rest of the heading. The Figma design set these in
   Yellow/yellow-800 (--bdfad-hero-joiner), but on the live page it reads as a
   mistake rather than a deliberate accent. The token is kept so the design
   colour can be restored by changing this one line back. */
.bdfad-hero .bdfad-hero__joiner {
    color: var(--bdfad-hero-text);
}

.bdfad-hero .bdfad-hero__strong {
    color: var(--bdfad-hero-text);
}

/* form */
.bdfad-hero .bdfad-search-block {
    width: 100%;
    min-width: 0;
}

.bdfad-hero .bdfad-search__hint {
    margin: 12px 0 0;
    padding: 0 8px;
    font-family: var(--bdfad-hero-font-primary);
    font-size: calc(12px / var(--bdfad-zoom, 1)); /* Keep the visible text at 12px after banner scaling. */
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
    color: var(--bdfad-hero-text);
    opacity: 0.8;
    text-wrap: pretty;
}

.bdfad-hero .bdfad-search {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;                                   /* Space/space-m */
    width: 100%;
    margin: 0;
}

/* Form/ Select and Form/ Input */
.bdfad-hero .bdfad-search__field {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 56px;
    margin: 0;
    background: var(--bdfad-hero-field-bg);
    border: 1px solid var(--bdfad-hero-field-border);
}

.bdfad-hero .bdfad-search__field--specialty {
    width: 368px;
}

.bdfad-hero .bdfad-search__field--location {
    width: 288px;
}

.bdfad-hero .bdfad-search__field > .bdfad-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.bdfad-hero .bdfad-search__field--specialty > .bdfad-icon--chevron-down {
    right: 8px;                                  /* Space/space-s */
}

.bdfad-hero .bdfad-search__field--location > .bdfad-icon--location-pin {
    left: 12px;                                  /* Space/space-m */
}

.bdfad-hero .bdfad-search__control {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 54px;                            /* 56px box minus borders */
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    color: var(--bdfad-hero-text);
    font-family: var(--bdfad-hero-font-primary);
    font-size: 20px;                             /* Typography/font-m */
    font-weight: 400;
    line-height: 1.3;
}

.bdfad-hero .bdfad-search__field--specialty .bdfad-search__control {
    padding: 12px 44px 12px 16px;                /* chevron: 12 gap + 24 icon + 8 */
    cursor: pointer;
}

.bdfad-hero .bdfad-search__field--location .bdfad-search__control {
    padding: 12px 12px 12px 48px;                /* pin: 12 + 24 icon + 12 gap */
}

/* The specialty field reads as a select in the design, so its prompt is full black. */
.bdfad-hero .bdfad-search__field--specialty .bdfad-search__control::placeholder {
    color: var(--bdfad-hero-text);
    opacity: 1;
}

.bdfad-hero .bdfad-search__field--location .bdfad-search__control::placeholder {
    color: var(--bdfad-hero-placeholder);
    opacity: 1;
}

.bdfad-hero .bdfad-search__field:focus-within {
    outline: 2px solid var(--bdfad-hero-text);
    outline-offset: 2px;
}

/* Button/ Button */
.bdfad-hero .bdfad-search__button,
.bdfad-hero .bdfad-search__button:hover,
.bdfad-hero .bdfad-search__button:focus,
.bdfad-hero .bdfad-search__button:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    min-height: 56px;
    margin: 0;
    padding: 12px 24px;
    background: var(--bdfad-hero-button);
    border: 2px solid var(--bdfad-hero-button);
    border-radius: 0;
    box-shadow: none;
    color: var(--bdfad-hero-button-text) !important;
    font-family: var(--bdfad-hero-font-primary);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
}

.bdfad-hero .bdfad-search__button span {
    color: var(--bdfad-hero-button-text) !important;
    text-box: trim-both cap alphabetic;
}

.bdfad-hero .bdfad-search__button:focus-visible {
    outline: 2px solid var(--bdfad-hero-text);
    outline-offset: 2px;
}

/* Mobile (Figma frame 402px): fields stack full width, heading drops to 32px. */
@media (max-width: 767px) {
    .bdfad-hero {
        zoom: var(--bdfad-zoom-mobile, 1);
    }

    .bdfad-hero .bdfad-search__hint {
        font-size: calc(12px / var(--bdfad-zoom-mobile, 1));
    }

    .bdfad-hero--banner {
        padding: 64px 16px;
    }

    /* Homepage title: Heading 1 at the mobile font-6xl value (3310:1449). */
    .bdfad-hero .bdfad-hero__title {
        font-size: 36px;
        letter-spacing: -0.36px;
    }

    /* Results title: Heading 2 at mobile font-5xl, left-aligned (3310:1544). */
    .bdfad-hero .bdfad-hero__title--results {
        width: 100%;
        font-size: 32px;
        letter-spacing: -0.32px;
        text-align: left;
    }

    .bdfad-hero .bdfad-search {
        flex-direction: column;
        align-items: stretch;
    }

    .bdfad-hero .bdfad-search__field--specialty,
    .bdfad-hero .bdfad-search__field--location,
    .bdfad-hero .bdfad-search__button {
        width: 100%;
    }
}

/* Between mobile and a full desktop row (368 + 288 + Search + gaps ≈ 800px). */
@media (min-width: 768px) and (max-width: 860px) {
    .bdfad-hero .bdfad-search {
        flex-wrap: wrap;
    }
}

/* ---------------------------------------------------------------------------
   Location is required: the Search button reads as unavailable until a place
   is entered, and clicking it explains why rather than doing nothing.
   --------------------------------------------------------------------------- */
.bdfad-hero .bdfad-search__error {
    margin: 12px 0 0;
    padding: 0 8px;
    font-family: var(--bdfad-hero-font-primary);
    font-size: calc(12px / var(--bdfad-zoom, 1));
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    color: #7f1d1d;
}

@media (max-width: 767px) {
    .bdfad-hero .bdfad-search__error {
        font-size: calc(12px / var(--bdfad-zoom-mobile, 1));
    }
}

.bdfad-search__control.has-error {
    outline: 2px solid #7f1d1d;
    outline-offset: -2px;
}

.bdfad-search__button.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}