html {
    -ms-overflow-style: scrollbar;
}

body {
    overflow-y: scroll;
    overflow-x: hidden;
}

input[type="text"], input[type="password"], input[type="date"], input[type="email"], input[type="tel"], select {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

form {
    margin-top: 0;
}

/* custom disabled */
.disabled {
    opacity: .25;
    cursor: not-allowed;
    pointer-events: none;
}

/* custom hidden */
.hidden {
    display: none
}

/* custom button */
.button:hover {
    cursor: pointer;
}

/* the footer resource carries both prefooter variants. `physicians` comes from
   Master.BodyID. each is hidden where it doesn't belong rather than hidden by
   default, so one always shows even if the body class changes. */
body.physicians .prefooter_patient {
    display: none;
}

body:not(.physicians) .prefooter_physician {
    display: none;
}

/* components.css uses the margin shorthand on `.contact_site .questionnaire-wrapper`,
   which resets margin-left/right from auto to 0 and knocks the card off center.
   it outranks the base rule, so restore centering here. */
.contact_site .questionnaire-wrapper {
    margin-left: auto;
    margin-right: auto;
}

/* components.css drops the divider on `.group:last-of-type`, which breaks for
   conditional questions that are only sometimes last. `.question` opts a group
   back into keeping its divider regardless of position. */
.questionnaire .group.question:last-of-type {
    border-bottom: 1px solid var(--q-spacer-color);
    padding-bottom: var(--question-spacing);
    margin-bottom: var(--question-spacing);
}

/* the map is a div, not an <img>, so it gets none of the intrinsic sizing
   .split_container .image img relies on. the split row is flex, so the column
   already stretches - the map just needs to fill it. scoped to .map_wrapper so
   v3.0 pages using .map-custom are untouched. */
.map_wrapper .map-custom {
    max-width: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

/* stacked below lg there is no content column to match, so use a ratio */
@media (max-width: 991.98px) {
    .map_wrapper .map-custom {
        height: auto;
        aspect-ratio: 4 / 3;
        min-height: 309px;
    }
}

/* `.split_container .image img { object-fit: cover }` also catches every <img>
   the google maps api injects - markers, tiles, controls, watermark - and
   stretches them. reset to natural sizing, scoped inside .map-custom so real
   content images in a split column keep the cover behaviour. */
.split_container .image .map-custom img {
    display: initial;
    width: auto;
    height: auto;
    max-width: none;
    object-fit: fill;
}

.map-custom-home {
    max-width: 485px;
    height: 384px;
    border-radius: 15px;
}

@media (max-width: 768px) {
    .map-custom-home {
        height: 329px;
    }
}

.map-site-info {
    line-height: 18px;
    font-weight: 400;
}

/* behalf of */
.behalf-of-default {
    display: inline;
}

.behalf-of-myself {
    display: none;
}

.behalf-of-other {
    display: none;
}

/* template overrides */
.questionnaire .group p.field_desc_spacing {
    margin: 0 0 1em 0;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

/* v3.2 overrides */
.v30, .v32 {
    display: none;
}

html[data-version="3.0"] .v30:not(.hidden) {
    display: block;
}

html[data-version="3.2"] .v32:not(.hidden) {
    display: block;
}

/* widen the container so up to three site cards fit side by side */
html[data-version="3.2"] .questionnaire-wrapper:has(.site_multi) {
    max-width: 1100px;
}

.site_multi {
    margin-top: 15px;
}

/* .site_multi also carries .v32, and its display:block kills the .row flex layout */
html[data-version="3.2"] .site_multi.v32 {
    display: flex;
    flex-wrap: wrap;
}

.site_multi .site_card_col {
    display: flex;
    margin-bottom: 20px;
}

/* shared card shell (multi + single), built on the theme's card tokens */
.site_multi .site_card,
.site_single .site_card {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    border: var(--card-border-style);
    border-radius: var(--card-radius);
    overflow: hidden;
    background-color: var(--colors-1);
    font-weight: normal;
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* multi cards are the selectable control */
.site_multi .site_card {
    cursor: pointer;
}

.site_multi .site_card:hover {
    border-color: var(--colors-4);
}

/* selected state */
.site_multi .site_card:has(input[type="radio"]:checked) {
    border-color: var(--colors-2);
    box-shadow: 0 0 0 1px var(--colors-2);
}

/* header band (radio + label for multi; heading only for single) */
.site_multi .site_card_select,
.site_single .site_card_select {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background-color: var(--colors-3);
    border-bottom: var(--card-border-style);
    transition: background-color .2s ease;
}

.site_multi .site_card:has(input[type="radio"]:checked) .site_card_select {
    background-color: var(--colors-4);
}

.site_multi .site_card_radio {
    position: relative;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    min-width: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
}

.site_multi .site_card_radio > span {
    margin: 0;
}

/* the multi card is a <label>, and the theme's `legend, label` rule pulls in the
   condensed heading face - put the body font back so it matches the single card */
.site_multi .site_card,
.site_multi .site_card p,
.site_multi .site_card_select_label {
    font-family: var(--ff);
}

.site_multi .site_card_select_label,
.site_single .site_card_select_label {
    font-family: var(--ff);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--textColor);
    margin: 0;
}

.site_multi .site_card_body,
.site_single .site_card_body {
    padding: 20px 24px 24px 24px;
    flex: 1 1 auto;
}

.site_multi .site_card_body p,
.site_single .site_card_body p {
    margin: 0 0 4px 0;
    font-size: 1.5rem;
    line-height: 1.5;
}

.site_multi .site_card_distance,
.site_single .site_card_distance {
    font-size: 1.4rem;
    color: #6b6b6b;
    margin-bottom: 12px !important;
}

.site_multi .site_card_doctor,
.site_single .site_card_doctor {
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--colors-2);
}

.site_multi .site_card_directions,
.site_single .site_card_directions {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
}

.site_multi .site_card_directions a,
.site_single .site_card_directions a {
    font-size: 1.5rem;
}

/* no surrounding group, so the wrapper carries the spacing */
.site_single_wrapper {
    margin-bottom: var(--question-spacing);
}

@media (max-width: 991px) {
    .site_multi .site_card_col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

#pnlZipConfirm {
    display: none;
}

/* message modal - the theme styles .modal / .btn-close globally for its own
   modals, so everything below is scoped to #modal-message to leave those alone */

#modal-message .modal-dialog {
    max-width: 420px;
    margin: 1.75rem auto;
}

#modal-message .modal-content {
    --bs-modal-bg: #fff;
    background-color: #fff;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    overflow: visible;
}

#modal-message .modal-header {
    position: relative;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #e3e3e3;
}

#modal-message .modal-title {
    font-size: 20px;
    line-height: 1.35;
    margin: 0;
    padding-right: 30px;
    text-align: left;
}

/* the theme centers modal body text - align ours left with the title */
#modal-message .modal-body {
    padding: 18px 18px 20px 18px;
    text-align: left;
}

#modal-message .modal-body .message {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
}

#modal-message .modal-footer {
    justify-content: flex-end;
    padding: 12px 18px;
    border-top: 1px solid #e3e3e3;
}

/* .btn is sized for page content (--btn-mt, --btn-fs), too big for a dialog */
#modal-message .modal-footer .btn {
    margin: 0;
    padding: 8px 20px;
    font-size: 14px;
    line-height: 1.4;
}

/* the theme parks .btn-close outside the header (top:-14px) for its overlay
   modals - re-anchor it inside ours and resize the X to match the title */
#modal-message .btn-close {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent;
    border-radius: 0;
    opacity: .6;
    transition: opacity .15s ease-in-out;
}

#modal-message .btn-close:hover {
    opacity: 1;
}

#modal-message .btn-close:before,
#modal-message .btn-close:after {
    width: 100%;
    height: 2px;
}

@media (max-width: 575px) {
    #modal-message .modal-dialog {
        margin: 1rem;
    }

    #modal-message .modal-header {
        padding: 13px 16px;
    }

    #modal-message .modal-body {
        padding: 16px 16px 18px 16px;
    }

    #modal-message .modal-footer {
        padding: 11px 16px;
    }

    #modal-message .btn-close {
        top: 14px;
        right: 14px;
    }
}