.vachr-appointment { box-sizing: border-box; max-width: var(--vap-width, 680px); padding: var(--vap-pad, 0); border-radius: var(--vap-radius, 6px); background: var(--vap-bg, transparent); box-shadow: var(--vap-shadow, none); color: var(--vap-text, inherit); font-size: var(--vap-font-size, inherit); }
:where(.vachr-appointment) :where(button, input, select, textarea) { color: var(--vap-text, inherit); }
.vachr-appointment.vap-layout-compact { margin-right: auto; margin-left: auto; }
.vachr-appointment.vap-layout-wide { width: 100%; }
.vachr-appointment-avatar { position: relative; display: inline-grid; flex: 0 0 40px; width: 40px; height: 40px; overflow: hidden; place-items: center; border-radius: 50%; background: #e7f3ff; color: #0a4b78; font-size: 13px; font-weight: 700; }
.vachr-appointment-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.vachr-appointment-avatar__initials { display: grid; width: 100%; height: 100%; place-items: center; }
.vachr-appointment-avatar:not(.is-missing) img + .vachr-appointment-avatar__initials { color: transparent; }
.vachr-appointment-avatar.is-mini { flex-basis: 28px; width: 28px; height: 28px; font-size: 10px; }
.vachr-appointment-avatar.is-summary { flex-basis: 52px; width: 52px; height: 52px; font-size: 16px; }
.vachr-appointment-provider-summary { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 12px; padding: 10px 0; }
.vachr-appointment-provider-summary__text { display: grid; gap: 3px; }
.vachr-appointment-provider-summary__text > small { color: #646970; }
.vachr-appointment-time-item { min-width: 0; }
.vachr-appointment-time-item.is-selected { padding: 3px; border: 1px solid var(--vap-primary, #1d6f42); border-radius: 8px; background: var(--vap-surface, #fff); }
.vachr-appointment-time { width: 100%; }
.vachr-appointment-time-providers { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px; min-height: 34px; padding: 3px 0 0; }
.vachr-appointment-time-provider { display: inline-flex; padding: 1px; border: 2px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; transition: transform .15s ease; }
.vachr-appointment-time-provider:hover,
.vachr-appointment-time-provider:focus-visible,
.vachr-appointment-time-provider.is-selected { border-color: var(--vap-primary, #1d6f42); outline: none; }
.vachr-appointment-time-provider-wrap { position: relative; display: inline-flex; }
.vachr-appointment-provider-card { position: absolute; bottom: 100%; left: 50%; z-index: 20; display: none; flex-direction: column; align-items: center; gap: 4px; min-width: 120px; max-width: 220px; padding: 10px; margin-bottom: 4px; border: 1px solid #dcdcde; border-radius: 10px; background: var(--vap-surface, #fff); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); text-align: center; transform: translateX(-50%); }
.vachr-appointment-provider-card::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 8px; }
.vachr-appointment-provider-card img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.vachr-appointment-provider-card__name { font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.vachr-appointment-provider-card__link { font-size: 12px; overflow-wrap: anywhere; color: var(--vap-primary, #1d6f42); }
.vachr-appointment-provider-option { position: relative; display: flex; }
.vachr-appointment-provider-option > .vachr-appointment-choice { flex: 1; }
.vachr-appointment-provider-card.is-option { left: 0; transform: none; align-items: flex-start; text-align: left; }
.vachr-appointment-provider-option.is-open .vachr-appointment-provider-card,
.vachr-appointment-time-provider-wrap:hover .vachr-appointment-provider-card,
.vachr-appointment-time-provider-wrap:focus-within .vachr-appointment-provider-card { display: flex; }
.vachr-appointment-time-more { padding: 2px 5px; border: 0; border-radius: 999px; background: #e7f3ff; color: #0a4b78; font-size: 11px; font-weight: 700; cursor: pointer; }
.vachr-appointment-time-providers:not(.is-expanded) .vachr-appointment-time-provider-wrap.is-extra { display: none; }
.vap-block-editor-controls { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 0 14px; width: min(100%, 720px); text-align: left; }
.vap-block-editor-controls .components-base-control { margin-bottom: 8px; }
.vap-editor-layout-compact .block-editor-block-list__block { max-width: 520px; }
.vap-editor-layout-wide .block-editor-block-list__block { max-width: 100%; }
.vap-editor-layout-compact .components-placeholder { max-width: 520px; margin-right: auto; margin-left: auto; }
.vap-editor-layout-wide .components-placeholder { width: 100%; }
.vachr-appointment-step { margin: 0 0 24px; }
.vachr-appointment-step h4 { margin: 0 0 10px; }
.vachr-appointment-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.vachr-appointment-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: var(--vap-bw, 1px) solid var(--vap-border, #c3c4c7); background: var(--vap-surface, #fff); border-radius: var(--vap-radius, 6px); cursor: pointer; font: inherit; color: inherit; text-align: left; }
.vachr-appointment-choice:hover { border-color: var(--vap-primary, #1d6f42); }
.vachr-appointment-choice.is-selected { background: var(--vap-primary, #1d6f42); border-color: var(--vap-primary, #1d6f42); color: var(--vap-primary-text, #fff); }
.vachr-appointment-choice small { opacity: .8; }
.vachr-appointment-person { display: flex; align-items: center; gap: 8px; }
.vachr-appointment-person img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.vachr-appointment-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; text-transform: capitalize; }
.vachr-appointment-nav { border: var(--vap-bw, 1px) solid var(--vap-border, #c3c4c7); background: var(--vap-surface, #fff); border-radius: var(--vap-radius, 6px); width: 36px; height: 36px; cursor: pointer; font-size: 20px; line-height: 1; }
.vachr-appointment-nav:disabled { opacity: .4; cursor: default; }
.vachr-appointment-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.vachr-appointment-dow { text-align: center; font-size: 12px; opacity: .7; padding: 4px 0; }
.vachr-appointment-day { border: 1px solid transparent; background: var(--vap-day, #f3f3f3); border-radius: 4px; padding: 10px 0; cursor: pointer; font: inherit; color: inherit; }
.vachr-appointment-day:disabled { background: transparent; opacity: .35; cursor: default; }
.vachr-appointment-day.is-available { background: var(--vap-ok-bg, #e6f4ea); border-color: var(--vap-ok-border, #86c79a); }
.vachr-appointment-day.is-full { background: var(--vap-no-bg, #f7e8e6); border-color: var(--vap-no-border, #d4a09b); }
.vachr-appointment-day.is-selected { background: var(--vap-primary, #1d6f42); color: var(--vap-primary-text, #fff); border-color: var(--vap-primary, #1d6f42); }
.vachr-appointment-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.vachr-appointment-time { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: var(--vap-bw, 1px) solid var(--vap-ok-border, #86c79a); background: var(--vap-ok-bg, #e6f4ea); border-radius: var(--vap-radius, 6px); cursor: pointer; font: inherit; color: inherit; font-weight: 600; }
.vachr-appointment-time small { font-weight: 400; font-size: 12px; opacity: .85; }
.vachr-appointment-time.is-unavailable { border-color: var(--vap-no-border, #d4a09b); background: var(--vap-no-bg, #f7e8e6); color: var(--vap-no-text, #742e28); cursor: not-allowed; }
.vachr-appointment-time.is-unavailable .vachr-appointment-time-status { font-weight: 600; opacity: 1; }
.vachr-appointment-time-status { display: inline-flex; align-items: center; justify-content: center; gap: 3px; max-width: 100%; text-align: center; font-size: 10px !important; line-height: 1.2; }
.vachr-appointment-wait-icon, .vachr-appointment-overtime-icon { flex: 0 0 12px; width: 12px; height: 12px; }
.vachr-appointment-time-provider:disabled { cursor: not-allowed; opacity: .55; }
.vachr-appointment-time-provider.is-unavailable .vachr-appointment-avatar { filter: grayscale(1); }
.vachr-appointment-time.is-selected { background: var(--vap-primary, #1d6f42); border-color: var(--vap-primary, #1d6f42); color: var(--vap-primary-text, #fff); }
.vachr-appointment-time.is-overtime { position: relative; border-color: #d28a28; background: #fff4dc; }
.vachr-appointment-time.is-overtime.is-selected { background: var(--vap-primary, #1d6f42); border-color: var(--vap-primary, #1d6f42); }
.vachr-appointment-overtime-label { display: inline-flex; align-items: center; justify-content: center; gap: 3px; max-width: 100%; color: #80500a; font-size: 10px !important; line-height: 1.3; text-align: center; }
.vachr-appointment-overtime-price { color: #67420b; font-size: 11px !important; font-weight: 600 !important; text-align: center; }
.vachr-appointment-time.is-selected .vachr-appointment-overtime-label { color: inherit; }
.vachr-appointment-time.is-selected .vachr-appointment-overtime-price { color: inherit; }
.vachr-appointment-form { display: grid; gap: 10px; position: relative; }
.vachr-appointment-field { display: flex; flex-direction: column; gap: 4px; }
.vachr-appointment-field input, .vachr-appointment-field textarea, .vachr-appointment-field select { padding: 8px; border: var(--vap-bw, 1px) solid var(--vap-border, #c3c4c7); border-radius: var(--vap-radius, 6px); background: var(--vap-surface, #fff); font: inherit; width: 100%; box-sizing: border-box; }
.vachr-appointment-custom-field__checkbox { display: inline-flex; align-items: center; gap: 8px; }
.vachr-appointment-custom-field__checkbox input { width: auto; }
.vachr-appointment-custom-field > small { color: #646970; }
.vachr-appointment-summary { border: var(--vap-bw, 1px) solid var(--vap-border, #dcdcde); border-radius: var(--vap-radius, 6px); padding: 10px 12px; background: var(--vap-surface, #f9f9f9); }
.vachr-appointment-summary div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.vachr-appointment-summary .is-total { margin-top: 6px; padding-top: 8px; border-top: 1px solid #c3c4c7; font-weight: 700; }
.vachr-appointment-summary .is-overtime { margin-top: 6px; padding: 8px; border-radius: 5px; background: #fff4dc; color: #67420b; font-size: 13px; }
.vachr-appointment-msg { color: #b32d2e; margin: 0; }
.vachr-appointment-success { padding: 14px; background: #e6f4ea; border: 1px solid #86c79a; border-radius: 6px; }
.vachr-appointment-submit { padding: 12px 20px; border: 0; border-radius: var(--vap-radius, 6px); background: var(--vap-primary, #1d6f42); color: var(--vap-primary-text, #fff); font: inherit; cursor: pointer; justify-self: start; }
.vachr-appointment-submit:disabled { opacity: .6; cursor: default; }
.vachr-appointment-consent { display: flex; gap: 6px; align-items: flex-start; }
.vachr-appointment-pay { border: var(--vap-bw, 1px) solid var(--vap-border, #c3c4c7); border-radius: var(--vap-radius, 6px); padding: 8px 12px; }
.vachr-appointment-pay-option { display: block; margin: 4px 0; }
.vachr-appointment-bank { margin-bottom: 8px; }

/* Staff booking widget */
.vachr-appointment-staff-manual { border: var(--vap-bw, 1px) solid var(--vap-border, #c3c4c7); border-radius: var(--vap-radius, 6px); padding: 8px 12px; margin: 0; }
.vachr-appointment-staff-manual.is-disabled { opacity: .5; }

/* Admin wizard */
.vachr-appointment-days { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.vachr-appointment-days label { display: inline-flex; align-items: center; gap: 3px; font-weight: 400; }
.vachr-appointment-days--compact { min-width: 220px; }
.vachr-appointment-wizard [data-vachr-appointment-free][hidden],
.vachr-appointment-wizard [data-vachr-appointment-fixed][hidden] { display: none !important; }

/* Provider setup wizard */
.vstrb-unit-wizard { margin: 12px 0 22px; padding: 22px 24px 20px; border: 1px solid #dcdcde; border-radius: 6px; background: linear-gradient(135deg, #f0f7fc, #fff 70%); }
.vstrb-unit-wizard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.vstrb-unit-wizard__top h2 { margin: 3px 0 5px; padding: 0; font-size: 22px; }
.vstrb-unit-wizard__top p { max-width: 760px; margin: 0; color: #50575e; font-size: 14px; }
.vstrb-unit-wizard__eyebrow { color: #2271b1; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.vstrb-unit-wizard__steps { display: grid; grid-template-columns: repeat(5, minmax(105px, 1fr)); gap: 8px; margin: 22px 0 16px; padding: 0; list-style: none; }
.vstrb-unit-wizard__steps li { margin: 0; }
.vstrb-unit-wizard__steps button { display: flex; align-items: center; width: 100%; min-height: 54px; gap: 8px; padding: 8px 10px; border: 1px solid #c3c4c7; border-radius: 5px; color: #50575e; background: #fff; text-align: left; cursor: pointer; }
.vstrb-unit-wizard__steps button span { display: grid; flex: 0 0 28px; height: 28px; place-items: center; border-radius: 50%; color: #50575e; background: #f0f0f1; font-weight: 700; }
.vstrb-unit-wizard__steps button.is-active { border-color: #2271b1; color: #1d2327; box-shadow: 0 0 0 1px #2271b1; }
.vstrb-unit-wizard__steps button.is-active span,
.vstrb-unit-wizard__steps button.is-complete span { color: #fff; background: #2271b1; }
.vstrb-unit-wizard__notice { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 4px; color: #3c434a; background: #fff; }
.vstrb-unit-wizard__notice p { margin: 0; }
.vstrb-unit-wizard__validation { display: none; margin-top: 12px; padding: 12px 14px; border: 1px solid #d63638; border-left-width: 4px; border-radius: 4px; background: #fff; }
.vstrb-unit-wizard__validation.is-visible { display: block; }
.vstrb-unit-wizard__validation ul { margin: 7px 0 0 18px; list-style: disc; }
.vstrb-unit-wizard__steps button.has-error { border-color: #d63638; box-shadow: inset 0 0 0 1px #d63638; }
.vstrb-unit-wizard__steps button.has-error span { color: #fff; background: #d63638; }
.vstrb-unit-wizard-section { padding: 8px 4px 18px; }
.vstrb-unit-wizard__actions { display: flex; align-items: center; gap: 8px; }
.vstrb-unit-wizard__spacer { flex: 1; }
.vstrb-wizard-stay-grid { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: 12px; max-width: 760px; }
.vstrb-wizard-stay-grid p { margin: 6px 0; }
.vstrb-wizard-availability-advanced { max-width: 760px; margin-top: 10px; border: 1px solid #c3c4c7; border-radius: 6px; background: #fff; }
.vstrb-wizard-availability-advanced summary { display: flex; justify-content: space-between; gap: 16px; padding: 14px 16px; cursor: pointer; }
.vstrb-wizard-availability-advanced__content { padding: 4px 16px 14px; border-top: 1px solid #dcdcde; }
.vstrb-wizard-catalog-add { margin: 14px 0 20px; padding: 14px; border: 1px dashed #8c8f94; border-radius: 6px; background: #f6f7f7; }
.vstrb-wizard-catalog-add > .description { display: block; margin: 3px 0 0; color: #646970; }
.vstrb-wizard-catalog-add__fields { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; }
.vstrb-wizard-catalog-add__fields label { display: grid; min-width: 150px; gap: 4px; font-weight: 600; }
.vstrb-wizard-inline-error { margin: 0; color: #b32d2e; }
.vstrb-wizard-new-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vstrb-wizard-new-item { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 10px; border-radius: 999px; color: #0a4b78; background: #dff0fa; }
.vstrb-event-row { padding: 10px 12px; border: 1px solid #dcdcde; border-radius: 6px; background: #f6f7f7; }
.vstrb-event-row__main { display: flex; align-items: end; flex-wrap: wrap; gap: 10px 12px; align-items: stretch;}
.vstrb-event-row__main label { display: grid; gap: 4px; font-weight: 600; }
.vstrb-event-row__remove { margin-left: auto; color: #b32d2e; font-size: 22px; line-height: 1; }
.vachr-overtime-date-list { max-height: 480px; overflow-y: auto; padding: 8px; border: 1px solid #dcdcde; border-radius: 8px; background: #fff; }
.vachr-overtime-actions { display: flex; gap: 8px; }
.vachr-overtime-date-grid { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 6px; }
.vachr-overtime-date-row { display: grid; grid-template-columns: minmax(54px, 1fr) auto minmax(54px, 1fr); align-items: center; gap: 8px; min-height: 42px; padding: 4px 8px; border: 1px solid #e2e4e7; border-radius: 6px; background: #f6f7f7; }
.vachr-overtime-date-row.has-overtime { border-color: #d28a28; background: #fff4dc; box-shadow: inset 0 0 0 1px #d28a28; }
.vachr-overtime-date-label { min-width: 75px; text-align: center; white-space: nowrap; }
.vachr-overtime-hours { display: flex; align-items: center; gap: 4px; }
.vachr-overtime-hours input { width: 56px; min-height: 30px; }
.vachr-overtime-date-row > .vachr-overtime-hours:nth-of-type(2) { justify-content: flex-end; }
.vachr-overtime-final { grid-column: 1 / -1; padding-top: 4px; border-top: 1px solid #e2e4e7; color: #80500a; font-size: 12px; font-weight: 600; text-align: center; }
.vachr-overtime-fees { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 8px 0 20px; }
.vachr-overtime-fees label { display: grid; gap: 4px; }
.vachr-overtime-fees label > span { display: flex; align-items: center; gap: 5px; }
.vachr-overtime-bulk-dialog { width: min(520px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 10px; box-shadow: 0 12px 48px rgba(0, 0, 0, .25); }
.vachr-overtime-bulk-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.vachr-overtime-bulk-dialog__content { padding: 20px; }
.vachr-overtime-bulk-dialog__content h3 { margin-top: 0; }
.vachr-overtime-bulk-dates, .vachr-overtime-bulk-hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vachr-overtime-bulk-dates label, .vachr-overtime-bulk-hours label { display: grid; gap: 5px; font-weight: 600; }
.vachr-overtime-bulk-dates input { max-width: 100%; }
.vachr-overtime-bulk-hours label > span { display: flex; align-items: center; gap: 5px; }
.vachr-overtime-bulk-hours input { width: 80px; }
.vachr-overtime-bulk-error { color: #b32d2e; }
.vachr-overtime-bulk-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 0; }
@media (max-width: 782px) { .vachr-overtime-date-grid { grid-template-columns: 1fr; } }

/* Settings panels use the same restrained cards and spacing as the provider wizard. */
.vachr-appointment-settings-page { max-width: 1240px; }
.vachr-appointment-settings-page .nav-tab-wrapper { margin-bottom: 20px; }
.vachr-appointment-settings-page > form:not(.vap-settings-editor) .form-table { max-width: 980px; margin-top: 14px; border: 1px solid #dcdcde; border-spacing: 0; border-radius: 6px; background: #fff; overflow: hidden; }
.vachr-appointment-settings-page > form:not(.vap-settings-editor) .form-table th,
.vachr-appointment-settings-page > form:not(.vap-settings-editor) .form-table td { padding: 15px 18px; border-bottom: 1px solid #f0f0f1; vertical-align: middle; }
.vachr-appointment-settings-page > form:not(.vap-settings-editor) .form-table th { width: 250px; }
.vachr-appointment-settings-page > form:not(.vap-settings-editor) .form-table tr:last-child th,
.vachr-appointment-settings-page > form:not(.vap-settings-editor) .form-table tr:last-child td { border-bottom: 0; }
.vachr-appointment-page-wizard-wrap > p { max-width: 780px; color: #50575e; }
.vap-page-wizard { max-width: 920px; margin-top: 24px; padding: 26px; border: 1px solid #c3c4c7; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.vap-page-wizard .vstrb-page-wizard__progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 30px; padding: 0; list-style: none; }
.vap-page-wizard .vstrb-page-wizard__progress li { display: flex; align-items: center; gap: 9px; margin: 0; padding: 11px 13px; border-radius: 6px; background: #f0f0f1; color: #646970; font-weight: 600; }
.vap-page-wizard .vstrb-page-wizard__progress li > span { display: inline-grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #fff; }
.vap-page-wizard .vstrb-page-wizard__progress .is-active { background: #e7f3ff; color: #0a4b78; }
.vap-page-wizard .vstrb-page-wizard__progress .is-complete { background: #edfaef; color: #116329; }
.vap-page-wizard section h2 { margin-top: 0; }
.vap-page-wizard select,
.vap-page-wizard input[type="text"] { width: min(100%, 460px); }
.vap-page-wizard .vstrb-page-wizard__fields { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 20px; max-width: 600px; }
.vap-page-wizard .vstrb-page-wizard__actions { display: flex; align-items: center; gap: 8px; }
.vap-page-wizard .vstrb-page-wizard__actions > span { flex: 1; }
.vap-page-wizard__layouts { display: grid; gap: 10px; max-width: 700px; margin: 16px 0 22px; padding: 14px; border: 1px solid #dcdcde; border-radius: 6px; }
.vap-page-wizard__layouts label { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border: 1px solid #dcdcde; border-radius: 5px; background: #f9fafb; cursor: pointer; }
.vap-page-wizard__layouts label > span { display: grid; gap: 4px; }
.vap-page-wizard__layouts small { color: #646970; }
.vap-page-wizard [data-vap-page-intro][hidden] { display: none !important; }
.vap-settings-editor { max-width: 1160px; }
.vap-settings-intro { margin: 12px 0 16px; padding: 20px 24px; border: 1px solid #dcdcde; border-radius: 6px; background: linear-gradient(135deg, #f0f7fc, #fff 70%); }
.vap-settings-intro h2 { margin: 3px 0 6px; font-size: 22px; }
.vap-settings-intro p { max-width: 800px; margin: 0; color: #50575e; font-size: 14px; }
.vap-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.vap-settings-card { min-width: 0; padding: 18px 20px; border: 1px solid #dcdcde; border-radius: 6px; background: #fff; }
.vap-settings-card--wide { grid-column: 1 / -1; }
.vap-settings-card__heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin: 0 0 16px; }
.vap-settings-card__heading h3,
.vap-settings-last-run h3 { margin: 0 0 4px; color: #1d2327; font-size: 15px; }
.vap-settings-card__heading p,
.vap-settings-last-run p { margin: 0; color: #646970; }
.vap-settings-fields { display: grid; align-items: start; gap: 14px; }
.vap-settings-fields--connection { grid-template-columns: minmax(0, 1.4fr) minmax(110px, .5fr) minmax(140px, .7fr); }
.vap-settings-fields--mailbox { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
.vap-settings-fields--patterns { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
.vap-settings-field { display: grid; min-width: 0; gap: 6px; color: #1d2327; font-weight: 600; }
.vap-settings-field > span { display: grid; gap: 3px; }
.vap-settings-field small { color: #646970; font-size: 12px; font-weight: 400; }
.vap-settings-field input:not([type="checkbox"]),
.vap-settings-field select,
.vap-settings-field textarea { width: 100%; max-width: none; min-width: 0; box-sizing: border-box; }
.vap-settings-field input:not([type="checkbox"]),
.vap-settings-field select { min-height: 38px; }
.vap-settings-field textarea { min-height: 88px; resize: vertical; }
.vap-settings-fields--patterns .vap-settings-field:first-child { grid-column: 1 / -1; }
.vap-settings-toggle { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 9px 12px; border: 1px solid #c3c4c7; border-radius: 5px; background: #f6f7f7; font-weight: 600; }
.vap-settings-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vap-settings-option { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 10px 12px; border: 1px solid #dcdcde; border-radius: 5px; background: #f9fafb; }
.vap-settings-option input { margin-top: 2px; }
.vap-settings-field--compact { max-width: 280px; margin-top: 14px; }
.vap-settings-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.vap-settings-last-run { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: #f6f7f7; }
.vap-settings-last-run__result { text-align: right; }
.vap-settings-audit { max-width: 1160px; margin-top: 28px; }
.vap-settings-audit__heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 12px; }
.vap-settings-audit__heading h2 { margin: 3px 0 0; font-size: 20px; }
.vap-settings-audit__heading p { margin: 0; color: #646970; }
.vap-settings-table-wrap { overflow-x: auto; border: 1px solid #dcdcde; border-radius: 6px; background: #fff; }
.vap-settings-table-wrap .widefat { border: 0; border-radius: 6px; }
.vap-settings-audit__empty { margin: 0; padding: 18px; border: 1px solid #dcdcde; border-radius: 6px; background: #fff; color: #646970; }

.vap-booking-dialog { width: min(760px, calc(100vw - 32px)); max-width: 760px; max-height: min(90vh, 900px); padding: 22px; border: 1px solid #c3c4c7; border-radius: 10px; box-shadow: 0 16px 56px rgb(0 0 0 / 24%); }
.vap-booking-dialog::backdrop { background: rgb(20 25 30 / 55%); }
.vap-booking-dialog h2 { margin: 0 0 18px; }
.vap-booking-dialog label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; }
.vap-booking-dialog input:not([type="hidden"]), .vap-booking-dialog select, .vap-booking-dialog textarea { width: 100%; max-width: none; box-sizing: border-box; }
.vap-booking-calendar { margin: 16px 0 10px; }
.vap-booking-calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.vap-booking-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; text-align: center; }
.vap-booking-calendar__grid > span { padding: 5px 0; color: #646970; font-size: 12px; }
.vap-booking-calendar__day { min-height: 36px; border: 1px solid #dcdcde; border-radius: 5px; background: #fff; cursor: pointer; }
.vap-booking-calendar__day.is-available { border-color: #78a98c; background: #eff8f1; }
.vap-booking-calendar__day.is-selected, .vap-booking-time.is-selected { border-color: #2271b1; background: #e8f2fb; box-shadow: inset 0 0 0 1px #2271b1; }
.vap-booking-calendar__day:disabled { color: #b4b9be; background: #f6f7f7; cursor: not-allowed; }
.vap-booking-times { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-height: 40px; margin: 10px 0 18px; }
.vap-booking-times > strong { flex-basis: 100%; }
.vap-booking-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vap-booking-contact .vap-booking-note { grid-column: 1 / -1; }
.vap-booking-custom-fields { margin: 16px 0 0; padding: 12px; border: 1px solid #c3c4c7; }
.vap-booking-custom-fields__row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(180px, 2fr) auto; gap: 10px; align-items: end; margin: 0 0 10px; }
.vap-booking-custom-fields__row .button-link-delete { margin-bottom: 6px; }
.vap-custom-field-builder__card { margin: 0 0 14px; padding: 14px; border: 1px solid #c3c4c7; background: #fff; }
.vap-custom-field-builder__toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 12px; }
.vap-custom-field-builder__label { display: flex; flex-direction: column; gap: 5px; }
.vap-custom-field-builder__required { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; }
.vap-custom-field-builder__translations { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.vap-custom-field-builder__language, .vap-custom-field-builder__options { margin: 0; padding: 10px; border: 1px solid #dcdcde; }
.vap-custom-field-builder__language legend, .vap-custom-field-builder__options legend { padding: 0 4px; font-weight: 600; }
.vap-custom-field-builder__language .vap-custom-field-builder__label { margin: 0 0 8px; }
.vap-custom-field-builder__language input, .vap-custom-field-builder__language textarea,
.vap-custom-field-builder__option input { width: 100%; max-width: none; box-sizing: border-box; }
.vap-custom-field-builder__options { margin-top: 12px; }
.vap-custom-field-builder__option { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) auto; align-items: end; gap: 8px; margin-bottom: 8px; }
.vap-custom-field-builder__option .vap-custom-field-builder__label { font-size: 12px; }
.vap-booking-dialog__actions { display: flex; justify-content: flex-end; margin: 18px 0 0; }

@media (max-width: 900px) {
	.vstrb-unit-wizard__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vstrb-wizard-stay-grid { grid-template-columns: 1fr; }
	.vap-page-wizard .vstrb-page-wizard__progress { grid-template-columns: 1fr; gap: 6px; margin-bottom: 18px; }
	.vap-page-wizard .vstrb-page-wizard__fields { grid-template-columns: 1fr; gap: 0; }
	.vap-settings-grid { grid-template-columns: minmax(0, 1fr); }
	.vap-block-editor-controls { grid-template-columns: minmax(0, 1fr); }
	.vap-settings-card--wide { grid-column: auto; }
	.vap-settings-fields--mailbox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vap-settings-options { grid-template-columns: 1fr; }
	.vap-settings-audit__heading { display: block; }
	.vap-settings-audit__heading p { margin-top: 8px; }
	.vap-booking-contact { grid-template-columns: minmax(0, 1fr); }
	.vap-booking-contact .vap-booking-note { grid-column: auto; }
	.vap-booking-custom-fields__row { grid-template-columns: minmax(0, 1fr); }
}

/* Provider basics */
.vap-provider-basics { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px 24px; align-items: start; }
.vap-provider-basics__main { min-width: 0; }
.vachr-appointment-provider-photo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.vachr-appointment-provider-photo__frame { display: grid; place-items: center; width: 160px; height: 160px; overflow: hidden; border: 1px dashed #8c8f94; border-radius: 8px; background: #f6f7f7; }
.vachr-appointment-provider-photo__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vachr-appointment-provider-photo__frame img[hidden] { display: none; }
.vachr-appointment-provider-photo__frame img:not([hidden]) + .vachr-appointment-provider-photo__empty { display: none; }
.vachr-appointment-provider-photo__empty { width: 40px; height: 40px; font-size: 40px; color: #a7aaad; }
.vachr-appointment-provider-photo__actions { display: flex; align-items: stretch; gap: 6px; }
.vachr-appointment-provider-photo__actions .button { display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.vachr-appointment-provider-photo__actions .vap-customer-icon-button { min-width: 48px; padding: 0; }
.vachr-appointment-provider-photo__actions .vap-customer-icon-button { line-height: 1; }
.vachr-appointment-provider-photo__actions .vap-customer-icon-button .dashicons { margin: 0; line-height: 1; }
.vachr-appointment-provider-photo__actions [hidden] { display: none !important; }
.vap-customer-card .vap-field-row.vap-field-row--grow { align-items: flex-start; }
.vap-customer-card .vap-field-row--grow > .vap-field { flex: 1 1 240px; }
.vap-customer-card .vap-field-row--grow select { min-height: 40px; }
.vap-customer-card .vstrb-wizard-availability-advanced { max-width: none; }
.vap-customer-card .vap-field-row--grow > .vap-field--narrow { flex: 0 0 160px; }
.vap-customer-card .vap-field-row--grow input.widefat { width: 100%; }
.vstrb-unit-wizard__actions { margin: 0 0 14px; }
@media (max-width: 600px) { .vap-provider-basics { grid-template-columns: 1fr; } }

@media (max-width: 600px) {
	.vap-settings-fields--connection,
	.vap-settings-fields--mailbox,
	.vap-settings-fields--patterns { grid-template-columns: minmax(0, 1fr); }
	.vap-settings-fields--patterns .vap-settings-field:first-child { grid-column: auto; }
	.vap-settings-card { padding: 15px; }
	.vap-settings-card__heading,
	.vap-settings-last-run { display: block; }
	.vap-settings-toggle { margin-top: 14px; }
	.vap-settings-last-run__result { margin-top: 8px !important; text-align: left; }
	.vachr-appointment-settings-page > form:not(.vap-settings-editor) .form-table th { width: auto; }
}

/* Waiting list */
.vachr-appointment-wait { padding: 12px; border: var(--vap-bw, 1px) dashed var(--vap-border, #c3c4c7); border-radius: var(--vap-radius, 6px); }
.vachr-appointment-wait-toggle { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0; cursor: pointer; }
.vachr-appointment-wait-hint { font-size: 14px; opacity: .85; }
.vachr-appointment-wait-list { margin: 6px 0 12px 18px; padding: 0; }
.vachr-appointment-wait-list li { margin: 4px 0; }
.vachr-appointment-wait-remove { border: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; padding: 0 4px; }
.vachr-appointment-time.is-waitable { position: relative; border-style: dashed; border-color: #d28a28; background: #fff4dc; color: #6b4300; cursor: pointer; }
.vachr-appointment-time.is-waitable.is-waiting { border-style: solid; background: #d28a28; color: #fff; }
.vachr-appointment-time[data-info-tooltip]::after { content: attr(data-info-tooltip); position: absolute; bottom: calc(100% + 5px); left: 50%; z-index: 20; width: max-content; max-width: min(260px, 80vw); padding: 8px 10px; border-radius: 5px; background: #1d2327; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal; box-shadow: 0 3px 10px rgba(0, 0, 0, .2); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%); }
.vachr-appointment-time[data-info-tooltip]:hover::after,
.vachr-appointment-time[data-info-tooltip]:focus-visible::after { opacity: 1; visibility: visible; }

/* Customer detail: contact card on the left, reservations and waiting list on the right */
.vap-customer-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 12px; }
.vap-customer-col { display: grid; gap: 20px; min-width: 0; }
.vap-customer-card { background: #fff; border: 1px solid #dcdcde; border-radius: 6px; padding: 4px 18px 16px; box-shadow: 0 1px 1px rgba(0, 0, 0, .04); overflow-x: auto; }
.vap-customer-card h2 { margin: 14px 0 10px; padding: 0; font-size: 16px; }
.vap-customer-card h3 { margin: 18px 0 6px; font-size: 14px; }
.vap-customer-card .form-table th { width: 130px; padding: 10px 10px 10px 0; }
.vap-customer-card .form-table td { padding: 8px 0; }
.vap-customer-card .regular-text, .vap-customer-card .large-text { width: 100%; max-width: 100%; }
.vap-customer-card .vap-customer-archive-form { margin-top: 12px; }
@media (max-width: 1100px) { .vap-customer-layout { grid-template-columns: 1fr; } }
.vap-customer-toolbar { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
.vap-customer-toolbar form { margin: 0; }
.vap-customer-icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding: 0 6px; }
.vap-customer-icon-button .dashicons { width: 20px; height: 20px; font-size: 20px; line-height: 20px; }
.vap-customer-toolbar { justify-content: flex-end; }
.vap-customer-toolbar > .button-primary { order: 2; }
.vap-customer-toolbar .vap-customer-back { margin-right: auto; }
.vap-customer-card tr.vap-customer-current td { background: #f0f6fc; }
.vap-customer-card details { margin-top: 12px; }
.vap-customer-card .vap-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; }
.vap-customer-card .vap-field-row { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: flex-end; }
.vap-customer-card .vap-field-row > .vap-field { margin-bottom: 14px; }
.vap-customer-card .vap-field-inline { display: inline-flex; align-items: center; gap: 6px; }
.vap-customer-card .vap-field input[type="number"], .vap-customer-card .vap-field input[type="time"] { width: auto; margin: 0; }
.vap-customer-card .vap-field input.small-text { width: 90px; }
.vap-customer-card .vap-field .description { margin: 2px 0 0; }

/* Customer contact fields: searchable calling code + number, country and language selects */
.vachr-appointment-phone { display: flex; flex-direction: column; gap: 4px; }
.vachr-appointment-phone__row { display: flex; gap: 6px; align-items: stretch; }
.vachr-appointment-phone__row > .ts-wrapper, .vachr-appointment-phone__row > select { flex: 0 0 190px; min-width: 0; }
.vachr-appointment-phone__custom { flex: 0 0 110px; }
.vachr-appointment-phone__number { flex: 1 1 auto; min-width: 0; }
.vachr-appointment .ts-wrapper .ts-control { padding: 8px; min-height: 38px; border: var(--vap-bw, 1px) solid var(--vap-border, #c3c4c7); border-radius: var(--vap-radius, 6px); background: var(--vap-surface, #fff); font: inherit; box-sizing: border-box; box-shadow: none; }
.vachr-appointment .ts-wrapper .ts-control .item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vachr-appointment .ts-dropdown { border-radius: var(--vap-radius, 6px); font: inherit; z-index: 100000; }
.vachr-appointment-phone .ts-dropdown { min-width: 300px; }
.vachr-appointment .ts-dropdown .dropdown-input { box-sizing: border-box; width: 100%; font: inherit; }
@media (max-width: 520px) { .vachr-appointment-phone__row { flex-wrap: wrap; } .vachr-appointment-phone__row > .ts-wrapper, .vachr-appointment-phone__row > select { flex-basis: 100%; } }

.vachr-appointment-break { grid-column: 1 / -1; padding: 6px 10px; text-align: center; font-size: 0.85em; opacity: 0.7; border: 1px dashed currentColor; border-radius: 4px; }
.vap-booking-break { padding: 4px 10px; font-size: 12px; opacity: 0.7; border: 1px dashed #8c8f94; border-radius: 3px; }

.vap-repeater__item { margin: 0 0 14px; padding: 14px 16px; border: 1px solid #dcdcde; border-radius: 6px; background: #fff; }
.vap-repeater__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vap-repeater__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.vap-repeater__grid label, .vap-repeater__wide { display: block; }
.vap-repeater__grid label > span, .vap-repeater__wide > span { display: block; margin-bottom: 4px; font-weight: 600; }
.vap-repeater__grid input[type="text"] { width: 100%; max-width: none; }
.vap-repeater__details { margin-top: 12px; }
.vap-repeater__details summary { cursor: pointer; font-weight: 600; }
.vap-repeater__wide { margin-top: 10px; }
.vap-repeater__checks label { margin-right: 14px; }

.vap-row-actions { white-space: nowrap; }
.vap-row-menu { display: inline-block; position: relative; vertical-align: middle; }
.vap-row-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; padding: 2px 4px; border-radius: 3px; }
.vap-row-menu > summary::-webkit-details-marker { display: none; }
.vap-row-menu > summary:hover, .vap-row-menu[open] > summary { background: #f0f0f1; }
.vap-row-menu__list { position: absolute; right: 0; z-index: 10; min-width: 150px; margin-top: 2px; background: #fff; border: 1px solid #c3c4c7; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.vap-row-menu__list a { display: block; padding: 6px 12px; text-decoration: none; }
.vap-row-menu__list a:hover { background: #f0f0f1; }
.vap-row-menu > summary .dashicons { transform: rotate(90deg); }

/* Appearance settings: fields on the left, live preview of the public form on the right */
.vap-appearance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1.1fr); align-items: start; gap: 24px; max-width: 1400px; }
.vachr-appointment-settings-page > form:not(.vap-settings-editor) .vap-appearance .form-table { max-width: none; }
.vap-appearance__presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.vap-appearance__preset { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 2px solid #dcdcde; border-radius: 6px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.vap-appearance__preset:hover { border-color: #8c8f94; }
.vap-appearance__preset.is-active { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; }
.vap-appearance__swatch { display: inline-flex; flex: 0 0 auto; gap: 3px; padding: 4px; border: 1px solid #dcdcde; border-radius: 4px; }
.vap-appearance__swatch i { display: block; width: 12px; height: 18px; border-radius: 2px; }
.vap-appearance__inherit { margin-left: 12px; }
.vap-appearance__preview { position: sticky; top: 42px; border: 1px solid #dcdcde; border-radius: 6px; background: #f6f7f7; }
.vap-appearance__preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #dcdcde; background: #fff; border-radius: 6px 6px 0 0; }
.vap-appearance__sizes .button { margin-left: 4px; }
.vap-appearance__sizes .button.is-active { border-color: #2271b1; background: #f0f6fc; color: #0a4b78; }
.vap-appearance__stage { max-height: calc(100vh - 160px); overflow: auto; padding: 16px; }
.vap-appearance__stage.is-mobile .vachr-appointment { max-width: 360px; margin: 0 auto; }
.vap-appearance__stage .vachr-appointment { pointer-events: none; margin: 0 auto; }
.vap-appearance__stage .vachr-appointment-step:last-child { margin-bottom: 0; }
@media (max-width: 1100px) { .vap-appearance { grid-template-columns: minmax(0, 1fr); } .vap-appearance__preview { position: static; } }