/* =====================================================================
   Appointment-modal stylesheet -- 2026-05-14 redesign.

   Visual system ported from the /customer-portal-preview prototype the
   user signed off on. All selectors are prefixed .am- (appointment
   modal) so they don't collide with the page-level .cp- styles in the
   preview. The dimensions, colors, and component layouts here are the
   single source of truth -- the preview Blade can be removed once this
   ships and validates.

   File is loaded lazily by public_html/js/modals/appointment-modal-loader.js
   the first time the user hits a .my-appointment-btn trigger, or when
   the appointment-link query state (?appointment=1...) is present at
   page load.
   ===================================================================== */

/* ---------- Modal positioning + dialog shell ---------- */
.appointment-modal {
    position: fixed;
    inset: 0;
    z-index: 5100;
    display: none;
}
.appointment-modal.is-open {
    display: block;
}
.appointment-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    backdrop-filter: blur(3px);
}
.appointment-modal__dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(900px, calc(100vw - 24px));
    max-height: min(92vh, 980px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 26px 64px rgba(0, 0, 0, 0.32);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    color: #111827;
    font-family: inherit;
}

/* Body class set by JS to lock page scroll while the modal is open. */
body.appointment-modal-open {
    overflow: hidden;
}

/* ---------- Hero strip (orange gradient header) ---------- */
.am-hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 22px 26px;
    background: linear-gradient(135deg, #C75528 0%, #a64720 100%);
    color: #fff;
}
.am-hero__icon {
    width: 56px; height: 56px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
}
.am-hero__icon svg { width: 28px; height: 28px; fill: #fff; }
.am-hero__eyebrow {
    margin: 0 0 4px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.86); text-transform: uppercase;
}
.am-hero__title { margin: 0; font-size: clamp(22px, 3vw, 28px); font-weight: 800; line-height: 1.1; }
.am-hero__subtitle { margin: 6px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.86); }
.am-hero__close {
    width: 36px; height: 36px; border: 0; border-radius: 10px;
    background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s ease;
}
.am-hero__close:hover { background: rgba(255, 255, 255, 0.28); }
.am-hero__close svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Body container (scrolling area below hero) ---------- */
.appointment-modal__body.am-body {
    overflow: auto;
    padding: 22px 26px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #fff;
}

.am-section {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 14px;
    padding: 18px;
}
.am-section__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.am-section__head-icon {
    width: 40px; height: 40px;
    background: #fff7ed; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.am-section__head-icon svg { width: 20px; height: 20px; fill: #C75528; }
.am-section__title { margin: 0; font-size: 18px; font-weight: 800; }
.am-section__copy { margin: 2px 0 0; font-size: 13px; color: #6b7280; line-height: 1.45; }

/* ---------- Loading panel (auto-verify state) ---------- */
.am-loading {
    text-align: center;
    padding: 48px 24px;
}
.am-loading__spinner {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    display: inline-flex; align-items: center; justify-content: center;
}
.am-loading__spinner svg { width: 100%; height: 100%; }
.am-loading__text {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
    font-weight: 600;
}

/* ---------- Lookup form (initial state) ---------- */
.am-lookup__form { display: flex; flex-direction: column; gap: 14px; }
.am-lookup__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.am-field { display: flex; flex-direction: column; gap: 6px; }
.am-field--wide { grid-column: 1 / -1; }
.am-field label { font-size: 12px; font-weight: 700; color: #374151; }
.am-field input {
    width: 100%;
    min-height: 44px;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 14px; font-weight: 500;
    color: #111827;
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.am-field input:focus { border-color: #C75528; box-shadow: 0 0 0 3px rgba(199, 85, 40, 0.16); }
.am-lookup__actions {
    display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}

/* ---------- Appointment found card ---------- */
.am-found__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef0f4;
    margin-bottom: 16px;
}
.am-found__icon {
    width: 64px; height: 64px;
    background: #fef3e6; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.am-found__icon svg { width: 30px; height: 30px; fill: #C75528; }
.am-found__eyebrow { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #6b7280; text-transform: uppercase; }
.am-found__status {
    margin: 0 0 6px;
    font-size: 13px; color: #b65116; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    text-transform: capitalize;
}
.am-status-dot { width: 8px; height: 8px; background: #f59e0b; border-radius: 50%; }
.am-found__status[data-status="confirmed"] .am-status-dot { background: #16a34a; }
.am-found__status[data-status="cancelled"] .am-status-dot { background: #dc2626; }
.am-found__status[data-status="confirmed"] { color: #166534; }
.am-found__status[data-status="cancelled"] { color: #991b1b; }
.am-found__title { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.25; }

.am-found__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.am-stat { display: flex; align-items: center; gap: 10px; }
.am-stat__icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #fef3e6;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.am-stat__icon svg { width: 16px; height: 16px; fill: #C75528; }
.am-stat__label { font-size: 11px; color: #6b7280; font-weight: 600; }
.am-stat__value { font-size: 13.5px; font-weight: 700; color: #111827; }
.am-stat__value--accent { color: #C75528; }

/* ---------- Cancelled-notice (shown when status=cancelled) ---------- */
.am-cancelled-notice {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    background: #fef2f2;
    border-color: #fecaca;
}
.am-cancelled-notice__icon {
    width: 56px; height: 56px;
    background: #fee2e2;
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.am-cancelled-notice__icon svg { width: 28px; height: 28px; fill: #dc2626; }
.am-cancelled-notice__title { margin: 0; font-size: 16px; font-weight: 800; color: #991b1b; }
.am-cancelled-notice__copy { margin: 4px 0 0; font-size: 13px; color: #7f1d1d; line-height: 1.45; }
.am-cancelled-notice__ref { margin: 8px 0 0; font-size: 12px; color: #991b1b; font-weight: 700; letter-spacing: 0.02em; }
.am-cancelled-notice__ref:empty { display: none; }

/* Author display: grid in the base rule has the same specificity as
   the UA [hidden]{display:none}, so we re-assert display:none on the
   [hidden] attribute to make sure JS-driven .hidden = true actually
   collapses the box. */
.am-cancelled-notice[hidden],
.am-cancel[hidden],
.am-grid-2[hidden],
.am-info[hidden],
.am-found__grid[hidden] {
    display: none;
}

/* ---------- Need-to-cancel banner ---------- */
.am-cancel {
    background: #fff7ed;
    border-color: #fed7aa;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
}
.am-cancel__icon {
    width: 44px; height: 44px;
    background: #fff; border: 1.5px solid #fed7aa; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.am-cancel__icon svg { width: 22px; height: 22px; fill: #C75528; }
.am-cancel__title { margin: 0; font-size: 15px; font-weight: 800; }
.am-cancel__copy { margin: 2px 0 0; font-size: 13px; color: #6b7280; }

/* ---------- Reschedule CTA + picker ---------- */
.am-resched-cta {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    color: #111827;
    margin-top: 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    text-align: left;
}
.am-resched-cta:hover { border-color: #C75528; background: #fef9f5; }
.am-resched-cta.is-open { border-color: #C75528; box-shadow: 0 0 0 4px rgba(199, 85, 40, 0.12); background: #fff; }
.am-resched-cta__icon {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, #C75528 0%, #a64720 100%);
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.am-resched-cta__icon svg { width: 20px; height: 20px; fill: #fff; }
.am-resched-cta__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.am-resched-cta__title { font-size: 15px; font-weight: 700; color: #111827; overflow: hidden; text-overflow: ellipsis; }
.am-resched-cta__hint { font-size: 12px; color: #6b7280; }
.am-resched-cta__chevron { width: 18px; height: 18px; fill: #6b7280; flex-shrink: 0; transition: transform 0.2s ease; }
.am-resched-cta.is-open .am-resched-cta__chevron { transform: rotate(180deg); }

.am-resched__picker {
    margin-top: 14px;
    background: #f9fafb;
    border: 1px solid #eef0f4;
    border-radius: 14px;
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    animation: am-picker-in 200ms ease-out;
}
/* See note in customer-portal-preview.blade.php: author display:grid
   has the same specificity (0,1,0) as UA [hidden]{display:none}, so
   the picker stays visible unless we bump specificity to (0,2,0). */
.am-resched__picker[hidden],
.am-resched__foot[hidden] {
    display: none;
}
@keyframes am-picker-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Calendar */
.am-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.am-cal__month { font-size: 14px; font-weight: 800; color: #111827; }
.am-cal__nav {
    width: 30px; height: 30px;
    background: #fff;
    border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color 0.15s ease;
}
.am-cal__nav:hover { border-color: #C75528; }
.am-cal__nav svg { width: 14px; height: 14px; fill: #4b5563; }
.am-cal__weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
    font-size: 10px; font-weight: 700; color: #6b7280;
    text-transform: uppercase; text-align: center; margin-bottom: 6px;
}
.am-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.am-cal__cell {
    aspect-ratio: 1 / 1;
    border: 1px solid transparent;
    background: #fff;
    border-radius: 8px;
    font-size: 13px; font-weight: 600; color: #111827;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
    font-family: inherit;
}
.am-cal__cell:hover:not(:disabled):not(.is-selected) { background: #fef3e6; border-color: #fed7aa; }
.am-cal__cell:disabled, .am-cal__cell--muted { color: #d1d5db; cursor: default; background: transparent; }
.am-cal__cell.is-selected { background: #C75528; color: #fff; border-color: #C75528; transform: scale(1.05); }
.am-cal__cell.is-today:not(.is-selected) { outline: 1.5px dashed #C75528; outline-offset: -1.5px; }

/* Time slots */
.am-times__label { font-size: 12px; font-weight: 700; color: #4b5563; margin-bottom: 10px; }
.am-times__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.am-time-slot {
    padding: 10px 8px;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    border-radius: 10px;
    font-size: 13px; font-weight: 600; color: #111827;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    font-family: inherit;
}
.am-time-slot:hover:not(.is-booked):not(:disabled) { border-color: #C75528; background: #fef3e6; }
.am-time-slot.is-selected { border-color: #C75528; background: #C75528; color: #fff; }
.am-time-slot.is-booked, .am-time-slot:disabled { background: #f3f4f6; color: #9ca3af; border-color: #e5e7eb; cursor: not-allowed; }

/* Reschedule footer (Save bar) */
.am-resched__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.am-resched__note { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #6b7280; margin: 0; }
.am-resched__note svg { width: 16px; height: 16px; fill: #C75528; flex-shrink: 0; }

/* ---------- 2-col details + help ---------- */
.am-grid-2 { display: grid; grid-template-columns: 1fr 320px; gap: 14px; }

.am-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.am-info-list li {
    display: grid;
    grid-template-columns: 32px 110px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed #eef0f4;
}
.am-info-list li:last-child { border-bottom: 0; }
.am-info-list__icon {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: #fef3e6;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.am-info-list__icon svg { width: 16px; height: 16px; fill: #C75528; }
.am-info-list__label { font-size: 13px; color: #6b7280; font-weight: 600; }
.am-info-list__value { font-size: 13.5px; color: #111827; line-height: 1.45; font-weight: 600; word-break: break-word; }

/* Help aside */
.am-help { background: #fff7ed; border-color: #fed7aa; text-align: center; padding: 20px 18px; }
.am-help__icon {
    width: 56px; height: 56px; margin: 0 auto 12px;
    background: #fff; border: 1.5px solid #fed7aa; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.am-help__icon svg { width: 28px; height: 28px; fill: #C75528; }
.am-help__title { margin: 0 0 4px; font-size: 16px; font-weight: 800; }
.am-help__copy { margin: 0 0 8px; font-size: 13px; color: #6b7280; }
.am-help__phone { font-size: 16px; font-weight: 800; color: #C75528; text-decoration: none; display: block; }
.am-help__phone:hover { text-decoration: underline; }

.am-meta { margin: 0; color: #6b7280; font-size: 12px; padding: 4px 6px; }

/* Your information (read-only chips) */
.am-info .am-info-list li { grid-template-columns: 32px 90px 1fr; }

/* ---------- Error banner ---------- */
.am-error {
    border-radius: 12px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.4;
}

/* ---------- Buttons ---------- */
.am-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 18px;
    font-size: 14px; font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    min-height: 42px;
}
.am-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.am-btn--solid { background: #C75528; color: #fff; border-color: #C75528; }
.am-btn--solid:hover:not(:disabled) { background: #a64720; border-color: #a64720; box-shadow: 0 6px 18px rgba(199, 85, 40, 0.32); }
.am-btn--ghost { background: #fff; color: #C75528; border-color: #C75528; }
.am-btn--ghost:hover:not(:disabled) { background: #fef3e6; }
.am-btn--small { padding: 8px 14px; font-size: 13px; min-height: 36px; }
.am-btn--block { width: 100%; }
.am-btn--soft { background: #fff7ed; color: #C75528; border-color: #fed7aa; }
.am-btn--soft:hover:not(:disabled) { background: #fef3e6; border-color: #C75528; }
.am-btn--danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.am-btn--danger:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; box-shadow: 0 6px 18px rgba(220, 38, 38, 0.32); }

/* ---------- Cancellation-policy nested modal ---------- */
.am-policy {
    position: fixed; inset: 0; z-index: 5200;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.am-policy[hidden] { display: none; }
.am-policy__backdrop {
    position: absolute; inset: 0;
    background: rgba(17, 24, 39, 0.55);
    backdrop-filter: blur(2px);
    animation: am-fade-in 180ms ease-out;
}
.am-policy__dialog {
    position: relative; z-index: 1;
    background: #fff;
    border-radius: 18px;
    width: 100%; max-width: 540px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
    overflow: hidden;
    animation: am-modal-in 220ms ease-out;
}
@keyframes am-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes am-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.am-policy__hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 20px 22px;
    background: linear-gradient(135deg, #fff7ed 0%, #fef3e6 100%);
    border-bottom: 1px solid #fed7aa;
}
.am-policy__hero-icon {
    width: 44px; height: 44px;
    background: #C75528;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
}
.am-policy__hero-icon svg { width: 22px; height: 22px; fill: #fff; }
.am-policy__eyebrow { margin: 0 0 2px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: #C75528; text-transform: uppercase; }
.am-policy__title { margin: 0; font-size: 18px; font-weight: 800; color: #111827; }
.am-policy__close {
    width: 32px; height: 32px;
    border: 0; background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s ease;
}
.am-policy__close:hover { background: #fff; }
.am-policy__close svg { width: 16px; height: 16px; fill: #4b5563; }
.am-policy__body { padding: 22px; }
.am-policy__copy { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: #374151; }
.am-policy__copy:last-of-type { margin-bottom: 16px; }
.am-policy__choice { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.am-policy__choice-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px; align-items: center;
    padding: 12px 14px;
    background: #f9fafb;
    border: 1px solid #eef0f4;
    border-radius: 12px;
}
.am-policy__choice-row > div { display: flex; flex-direction: column; gap: 2px; }
.am-policy__choice-row strong { font-size: 14px; color: #111827; }
.am-policy__choice-hint { font-size: 12.5px; color: #6b7280; }
.am-policy__choice-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.am-policy__choice-icon--good { background: #dcfce7; }
.am-policy__choice-icon--good svg { width: 18px; height: 18px; fill: #16a34a; }
.am-policy__choice-icon--warn { background: #fee2e2; }
.am-policy__choice-icon--warn svg { width: 16px; height: 16px; fill: #dc2626; }
.am-policy__foot {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 16px 22px 20px;
    border-top: 1px solid #eef0f4;
    flex-wrap: wrap;
}

/* =====================================================================
   Responsive cascade
   ===================================================================== */
@media (max-width: 860px) {
    .am-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .am-found__grid { grid-template-columns: 1fr 1fr; }
    .am-found__head { grid-template-columns: auto 1fr; }
    .am-found__head .am-btn { grid-column: 1 / -1; justify-self: stretch; width: 100%; }
    .am-resched__picker { grid-template-columns: 1fr; }
    .am-lookup__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .appointment-modal__dialog {
        top: 8px; left: 8px; right: 8px; bottom: 8px;
        transform: none;
        width: auto; max-height: calc(100dvh - 16px);
        border-radius: 14px;
    }

    .am-hero { padding: 18px 16px; gap: 12px; }
    .am-hero__icon { width: 44px; height: 44px; border-radius: 11px; }
    .am-hero__icon svg { width: 22px; height: 22px; }
    .am-hero__title { font-size: 20px; }
    .am-hero__subtitle { font-size: 12px; }
    .am-hero__close { width: 32px; height: 32px; }

    .appointment-modal__body.am-body { padding: 16px 14px 18px; gap: 12px; }
    .am-section { padding: 14px; border-radius: 12px; }
    .am-section__head { gap: 10px; margin-bottom: 10px; }
    .am-section__head-icon { width: 36px; height: 36px; }
    .am-section__title { font-size: 16px; }

    .am-found__head { gap: 12px; padding-bottom: 12px; margin-bottom: 12px; }
    .am-found__icon { width: 48px; height: 48px; }
    .am-found__icon svg { width: 24px; height: 24px; }
    .am-found__title { font-size: 16px; }
    .am-found__grid { grid-template-columns: 1fr; gap: 10px; }
    .am-stat__value { font-size: 13px; }

    .am-cancel { grid-template-columns: auto 1fr; row-gap: 10px; }
    .am-cancel .am-btn { grid-column: 1 / -1; justify-self: stretch; width: 100%; }

    .am-resched-cta { padding: 14px; gap: 12px; }
    .am-resched-cta__icon { width: 36px; height: 36px; }
    .am-resched-cta__icon svg { width: 18px; height: 18px; }
    .am-resched-cta__title { font-size: 14px; }
    .am-resched-cta__hint { font-size: 11.5px; }
    .am-resched__picker { padding: 12px; }
    .am-cal__cell { font-size: 12px; border-radius: 6px; }
    .am-cal__weekdays { font-size: 9px; }
    .am-cal__nav { width: 28px; height: 28px; }
    .am-time-slot { padding: 9px 6px; font-size: 12.5px; }
    .am-resched__foot { flex-direction: column; align-items: stretch; }
    .am-resched__foot .am-btn { width: 100%; }

    .am-help { padding: 16px 14px; }
    .am-help__icon { width: 48px; height: 48px; }
    .am-help__phone { font-size: 18px; }

    .am-info-list li {
        grid-template-columns: 32px 1fr;
        grid-template-rows: auto auto;
        row-gap: 2px;
        column-gap: 12px;
        padding: 8px 0;
    }
    .am-info-list__icon { grid-row: 1 / 3; align-self: center; }
    .am-info-list__label { grid-row: 1; grid-column: 2; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
    .am-info-list__value { grid-row: 2; grid-column: 2; font-size: 13.5px; line-height: 1.4; }

    .am-policy { padding: 12px; }
    .am-policy__dialog { border-radius: 14px; }
    .am-policy__hero { padding: 16px 14px; grid-template-columns: auto 1fr; }
    .am-policy__hero .am-policy__close { grid-column: 2 / 3; justify-self: end; }
    .am-policy__title { font-size: 16px; }
    .am-policy__body { padding: 16px 14px; }
    .am-policy__copy { font-size: 13px; }
    .am-policy__foot { padding: 14px; flex-direction: column-reverse; }
    .am-policy__foot .am-btn { width: 100%; }
}
@media (max-width: 380px) {
    .am-hero { padding: 16px 14px; }
    .appointment-modal__body.am-body { padding: 14px 12px 16px; }
    .am-section { padding: 12px; }
    .am-found__title { font-size: 15px; }
    .am-cal__cell { font-size: 11px; }
}