.call-modal {
    box-sizing: border-box;
    width: min(100%, 32rem);
    padding: 0.5rem 1rem 1.25rem;
    color: var(--text-color, #1b2333);
}

.call-modal__header h2,
.call-modal h2 {
    margin: 0.15rem 0 0.5rem;
}

.call-modal__header p,
.call-modal--message > p {
    line-height: 1.55;
}

.call-modal__header--centered {
    text-align: center;
}

.call-modal__eyebrow {
    margin: 0;
    color: var(--accent, #9b6834);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.call-modal--message {
    text-align: center;
}

.call-modal__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    background: var(--glass, #eef1f5);
    font-size: 1.5rem;
}

.call-modal__icon--success {
    background: #e5f7ed;
    color: #176b3a;
}

.call-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}

.call-form__field {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.call-form__field label {
    font-weight: 650;
}

.call-form__field input {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--nav-underline-color, #b8bec8);
    border-radius: 0.45rem;
    background: none;
    color: var(--text-color, #1b2333);
    font: inherit;
}

.call-form__field input:focus-visible {
    border-color: var(--accent, #b47a40);
    outline: 3px solid color-mix(in srgb, var(--accent, #b47a40) 35%, transparent);
}

.call-form__field input:user-invalid {
    border-color: #a11b1b;
}

.call-form__schedule {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.call-form__optional,
.call-form__hint {
    color: var(--nav-text-color, #667085);
    font-size: 0.875rem;
}

.call-form__hint {
    margin: 0;
}

.call-form__errors,
.call-form .form-errors {
    margin: 0;
}

.call-form .errorlist {
    margin: 0.55rem 0 0;
    padding: 0.65rem 0.8rem;
    border-left: 3px solid var(--error-border, #bd3030);
    border-radius: 6px;
    background: var(--error-bg, #fce8e8);
    color: var(--error-text, #8b1e1e);
    font-size: 0.875rem;
    list-style: none;
}

.call-form .field-wrapper {
    min-width: 0;
}

.call-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 2.65rem;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
}

.call-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent, #b47a40) 40%, transparent);
    outline-offset: 2px;
}

.call-button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.call-button--primary {
    background: var(--accent, #9b6834);
    color: #fff;
}

.call-button--secondary {
    border-color: var(--nav-underline-color, #b8bec8);
    background: transparent;
    color: var(--text-color, #1b2333);
}

.call-button--danger {
    border-color: #bd3030;
    background: transparent;
    color: #a11b1b;
}

.call-modal__separator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    color: #667085;
}

.call-modal__separator::before,
.call-modal__separator::after {
    content: "";
    flex: 1;
    border-top: 1px solid #d0d5dd;
}

.call-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 1rem 0;
    text-align: left;
}

.call-summary div {
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: var(--glass, #eef1f5);
}

.call-summary dt {
    color: var(--nav-text-color, #667085);
    font-size: 0.8rem;
}

.call-summary dd {
    margin: 0.2rem 0 0;
    font-weight: 700;
}

.call-modal--message .call-button {
    width: 100%;
    margin-top: 0.6rem;
}

.call-modal .iti {
    width: 100%;
}


.viewing-booking-hours .viewing-month-nav button {
    padding-left: .5rem;
    padding-right: .5rem;
}
.call-modal--viewing {
    width: min(100%, 50rem);
}

#modal-base:has(.call-modal--viewing){
    max-width: 60ch;
}
.viewing-hours-toggle {
    width: 100%;
}

.viewing-booking-hours {
    --viewing-available: #389e70;
    --viewing-exception: #d89b30;
    --viewing-closed: #888;
    padding: 0.9rem;
    border: 1px solid var(--nav-underline-color, #d0d5dd);
    border-radius: 0.65rem;
    background: var(--glass, #f6f7f9);
}

.viewing-booking-hours__layout {
    display: grid;
    grid-template-columns: minmax(18rem, 1.6fr) minmax(12rem, 1fr);
    gap: 1rem;
}

.viewing-booking-hours .viewing-month-nav {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.7rem;
}

.viewing-booking-hours .viewing-month-nav h3 {
    margin: 0;
    text-align: center;
    font-size: 1rem;
}

.viewing-booking-hours .viewing-month-nav button,
.viewing-booking-hours .viewing-date {
    min-height: 2.25rem;
    border: 1px solid var(--nav-underline-color, #d0d5dd);
    background: none;
    border-radius: 0.4rem;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.viewing-booking-hours .viewing-weekdays,
.viewing-booking-hours .viewing-dates {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
    text-align: center;
}

.viewing-booking-hours .viewing-weekdays {
    margin-bottom: 0.35rem;
    color: var(--muted, #667085);
    font-size: 0.72rem;
}

.viewing-booking-hours .viewing-date.available {
    border-color: #389e70;
    background: color-mix(in srgb, #389e70 18%, transparent);
}

.viewing-booking-hours .viewing-date.exception {
    border-color: #d89b30;
}

.viewing-booking-hours .viewing-date.selected {
    outline: 2px solid var(--accent, #9b6834);
    outline-offset: 1px;
}

.viewing-booking-hours .viewing-date:disabled {
    cursor: default;
    opacity: 0.45;
}

.viewing-booking-hours .viewing-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 0.65rem 0 0;
    color: var(--muted, #667085);
    font-size: 0.72rem;
}

.viewing-booking-hours .viewing-legend span {
    padding-bottom: 0.2rem;
    border-bottom: 3px solid transparent;
}

.viewing-booking-hours .viewing-legend .available {
    border-bottom-color: var(--viewing-available);
}

.viewing-booking-hours .viewing-legend .exception {
    border-bottom-color: var(--viewing-exception);
}

.viewing-booking-hours .viewing-legend .closed {
    border-bottom-color: var(--viewing-closed);
}

.viewing-booking-hours__summary {
    padding-left: 1rem;
    border-left: 1px solid var(--nav-underline-color, #d0d5dd);
}

.viewing-booking-hours__summary h3,
.viewing-booking-hours__summary h4 {
    margin: 0 0 0.4rem;
}

.viewing-booking-hours__summary h4 {
    margin-top: 1rem;
    font-size: 0.9rem;
}

.viewing-booking-hours__summary p {
    margin: 0;
    color: var(--muted, #667085);
    font-size: 0.85rem;
}

.viewing-booking-hours__summary ul {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.viewing-booking-hours__summary li {
    display: grid;
    gap: 0.1rem;
    font-size: 0.8rem;
}

.viewing-booking-hours__summary li span,
.viewing-booking-hours__summary li small {
    color: var(--muted, #667085);
}

@media (max-width: 42rem) {
    .call-form__schedule {
        grid-template-columns: 1fr;
    }

    .viewing-booking-hours__layout {
        grid-template-columns: 1fr;
    }

    .viewing-booking-hours__summary {
        padding: 0.8rem 0 0;
        border-top: 1px solid var(--nav-underline-color, #d0d5dd);
        border-left: 0;
    }

    .viewing-booking-hours .viewing-month-nav {
        grid-template-columns: auto 1fr auto;
    }

    .viewing-booking-hours .viewing-month-nav [data-action="today"] {
        grid-column: 1 / -1;
        /*display: none;*/
    }
}