@import url("link-icons.css?v=20260914");

/* Shared customer interaction styles; retains the existing brand's darker orange. */
:root { --ss-action: #a65018; --ss-focus: #68340f; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button, .button, .primary-button { min-height: 44px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex="-1"]:focus { outline: 3px solid var(--ss-focus); outline-offset: 3px; }
.ss-calendar { max-width: 420px; width: 100%; }
.calendar-toggle { width: 100%; text-align: left; }
.calendar-panel { padding: 12px; border: 1px solid #9b8d82; border-radius: 12px; background: #fffaf5; margin-top: 8px; color: #292721; }
.calendar-nav { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.calendar-nav h3 { font-size: 1rem; margin: 0; text-align: center; }
.calendar-nav button { width: 44px; flex: 0 0 44px; padding: 4px; font-size: 1.5rem; }
.calendar-grid table { display: table; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; min-width: 0; }
/* Isolate the grid from the portal's responsive appointment-table rules. */
.ss-calendar .calendar-grid thead { display: table-header-group; position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.ss-calendar .calendar-grid tbody { display: table-row-group; }
.ss-calendar .calendar-grid tr { display: table-row; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.ss-calendar .calendar-grid th, .ss-calendar .calendar-grid td { display: table-cell; padding: 0; border: 0; text-align: center; background: transparent; }
.ss-calendar .calendar-grid td::before { content: none; }
.calendar-grid th { font-size: .8rem; padding: 10px 0; }
.calendar-grid abbr { text-decoration: none; }
.calendar-grid .calendar-day { width: 100%; min-width: 0; min-height: 58px; padding: 3px 1px; border: 1px solid #bbb0a6; border-radius: 6px; background: white; color: #292721; box-shadow: none; font-size: .9rem; }
.calendar-day small { color: inherit; display: block; font-size: .6rem; line-height: 1.15; overflow-wrap: normal; }
.calendar-grid .closed { background: #eee8e2; border-style: dashed; }
.calendar-grid .service-unavailable { background: #eee8e2; border-style: dashed; }
.calendar-grid .past { background: #f1eeeb; color: #625a54; }
.calendar-grid .past span { text-decoration: line-through; }
.calendar-grid [aria-disabled="true"] { cursor: default; }
.calendar-grid .special_opening { border: 2px solid #705532; background: #fff0cc; }
.calendar-grid .selected { background: #a65018; color: white; border: 2px solid #68340f; font-weight: bold; }
.calendar-status, .slot-status, .slot-help { font-size: .88rem; line-height: 1.5; margin: 10px 0; }
.calendar-panel a, .slot-help a, .receipt a, .account-invitation a { color: #824012; }
.home-return-button, .home-return-button:visited, .receipt a.home-return-button, .receipt a.home-return-button:visited { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; color: #824012; background: #fffaf5; border: 1px solid var(--ss-action); border-radius: 10px; font-size: 1.5rem; font-weight: 750; line-height: 1; text-decoration: none; transition: background-color 150ms ease, transform 150ms ease; }
.home-return-button:hover, .receipt a.home-return-button:hover { color: #68340f; background: #fff0e4; transform: translateY(-1px); }
.page-action-button, .page-action-button:visited, .receipt a.page-action-button, .receipt a.page-action-button:visited { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; color: #0f5560; background: #fff; border: 1px solid #176b77; border-radius: 10px; font-weight: 750; line-height: 1.2; text-align: center; text-decoration: none; transition: background-color 150ms ease, transform 150ms ease; }
.page-action-button:hover, .receipt a.page-action-button:hover { color: #0f5560; background: #e8f4f5; transform: translateY(-1px); }
.page-action-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 0; }
.step-progress { padding: 0; margin: 16px 0 24px; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.step-progress li { flex: 1 1 115px; border-bottom: 3px solid #d6cbc1; padding: 10px 3px; font-size: .9rem; }
.step-progress li[aria-current="step"] { border-color: #a65018; font-weight: bold; }
.step-actions, .receipt-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; align-items: center; }
.step-actions > * { flex: 1 1 auto; }
.step-actions button, .account-invitation button, .booking-handoff button[type="submit"], .portal-form button[type="submit"] { padding: 12px 20px; color: white; background: #a65018; border: 1px solid #a65018; border-radius: 10px; font-weight: 700; cursor: pointer; }
.step-actions button:hover, .account-invitation button:hover, .portal-form button[type="submit"]:hover { background: #824012; }
.step-actions button[data-back] { box-sizing: border-box; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; font-size: 1.5rem; line-height: 1; }
.step-actions button[data-back]:hover { background: #fff0e4 !important; }
.calendar-toggle { min-height: 48px; padding: 12px; color: #292721; border: 1px solid #99897b; border-radius: 8px; background: white; cursor: pointer; }
.calendar-nav button, .calendar-retry { border: 1px solid #a65018; border-radius: 8px; background: #a65018; color: white; }
.secondary-button { padding: 10px 16px; border-radius: 8px; cursor: pointer; }
.secondary-button, .text-button { background: white !important; border: 1px solid #a65018 !important; color: #824012 !important; }
.text-button { min-height: 44px; padding: 6px 10px; border: 0 !important; text-decoration: underline; }
.field-error, .flow-error { color: #942626; font-weight: bold; font-size: .95rem; }
[aria-invalid="true"] { border: 2px solid #942626 !important; }
.draft-status:empty { display: none; }
.draft-status { font-size: .85rem; color: #5c5148; margin: 12px 0; }
.flow-step { min-width: 0; }
.flow-step > h2 { margin: 8px 0 20px; }
.review-card, .pet-card, .receipt, .account-invitation, .booking-handoff { border: 1px solid #d7c7b9; border-radius: 12px; padding: 20px; margin: 16px 0; background: #fffdf9; overflow-wrap: anywhere; }
.pet-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.review-card dl, .receipt dl { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr; gap: 10px; }
.review-card dt, .receipt dt { font-weight: bold; }
.review-card dd, .receipt dd { margin: 0; }
.account-invitation { background: #fff0db; border: 2px solid #a65018; }
.account-invitation ul, .receipt ul { padding-left: 22px; }
.receipt h1, .receipt h2 { line-height: 1.2; }
.price-note, .service-description { font-size: .9rem; line-height: 1.5; color: #584b40; }
.price-note { margin: 10px 0; }
.service-inclusions { margin: 10px 0; }
.service-inclusions summary, .contact-summary summary { cursor: pointer; min-height: 44px; padding: 10px 0; font-weight: bold; }
.add-on-option { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; }
.add-on-option input { width: 22px; height: 22px; flex: 0 0 22px; }
.add-on-option label { margin: 0; }
.flow-step input:not([type="checkbox"]), .flow-step select, .flow-step textarea { width: 100%; box-sizing: border-box; min-height: 44px; }
.flow-step label { display: block; margin-top: 12px; }
.flow-step .checkbox-container label { margin-top: 0; }
.flow-step .checkbox-container { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; }
.flow-step .checkbox-container input { width: 22px; height: 22px; flex: 0 0 22px; }
.receipt-actions a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 420px) {
    .container.booking-card { padding: 14px; }
    .booking-shell { width: calc(100% - 24px); }
    .portal-form .flow-step { padding: 0; }
    .calendar-panel { padding: 6px; }
    .calendar-grid table { border-spacing: 1px; }
    .calendar-grid .calendar-day { min-height: 58px; }
    .review-card, .pet-card, .receipt, .account-invitation, .booking-handoff { padding: 12px; }
    .review-card dl, .receipt dl { grid-template-columns: 1fr; gap: 4px; }
    .review-card dd, .receipt dd { margin-bottom: 10px; }
}