@import './app-theme.css';
@import './app-buttons.css';
@import url('https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.16/index.min.css');

.field-validation-error {
  display: block;
  min-width: 0;
  color: #b42318;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.field-validation-error:empty { display: none; }
input[aria-invalid="true"],
textarea[aria-invalid="true"],
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.settings-form input[aria-invalid="true"],
.settings-form textarea[aria-invalid="true"],
.public-booking-page .public-booking-form input[aria-invalid="true"] {
  border-color: #b42318;
}
.field :is(input, textarea)[aria-invalid="true"]:focus,
.settings-form :is(input, textarea)[aria-invalid="true"]:focus,
.public-booking-page .public-booking-form input[aria-invalid="true"]:focus {
  border-color: #b42318;
  box-shadow: 0 0 0 0.1875rem rgba(180, 35, 24, .1);
}

.public-booking-page {
  --bg: #f8f8fa;
  --card: #fff;
  --text: #30283a;
  --muted: #766d7e;
  --border: #e7e4e9;
  --success: #10b981;
  --danger: #ef4444;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.public-booking-page .public-booking-shell {
  width: min(30rem, 100%);
  margin: 0 auto;
}

.public-booking-page.booking-embedded {
  margin: 0;
  padding: .5rem;
  min-height: 100dvh;
}
.booking-embedded .public-booking-shell {
  width: min(960px, 100%);
}
.booking-embedded .public-booking-platform-brand,
.booking-embedded .public-booking-header > p,
.booking-embedded .public-booking-shell > .page-title {
  display: none;
}
.booking-embedded .public-booking-header {
  margin: 0;
  padding: .5rem;
}
.booking-embedded .booking-embedded-payment {
  margin: 1rem 0;
}

.public-booking-page > .page-title,
.public-booking-shell > .page-title {
  margin: 1rem;
  font-size: 1.375rem;
  font-weight: 700;
}

.public-booking-page .public-booking-card {
  display: grid;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 0.0625rem solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  box-shadow: 0 0.125rem 0.5rem rgba(48, 40, 58, .035);
}

.public-booking-page .public-booking-card > p { margin: 0; color: var(--muted); font-size: 0.875rem; }
.public-booking-page .public-booking-form { display: grid; gap: 1rem; min-width: 0; }
.booking-widget-discount-form { padding: 0.875rem; border: 0.0625rem solid var(--border); border-radius: 0.75rem; }
.booking-widget-discount-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
.booking-widget-discount-form .booking-widget-status { margin: 0; }
.booking-widget-discount-form .booking-widget-status.is-error { color: var(--danger); }
.booking-widget-discount-form .booking-widget-status.is-success { color: #16794b; }
.public-booking-page [hidden] { display: none !important; }
.booking-widget-service-card { cursor: pointer; min-height: 2.75rem; }
.booking-widget-service-card input[type="checkbox"] { width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; accent-color: var(--primary); }
.booking-widget-service-description {
  display: block;
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  white-space: pre-line;
}
.public-booking-page .public-booking-form label { display: grid; gap: 0.375rem; font-size: 0.875rem; font-weight: 500; }
.public-booking-page .public-booking-form input:not([type="checkbox"]),
.public-booking-page .public-booking-form textarea,
.public-booking-page .public-booking-form select {
  width: 100%;
  min-width: 0;
  min-height: 2.875rem;
  padding: 0.625rem 0.75rem;
  border: 0.0625rem solid var(--border);
  border-radius: 0.625rem;
  color: var(--text);
  font: inherit;
  background-color: var(--card);
}
.public-booking-page .public-booking-form textarea {
  min-height: 7rem;
  resize: vertical;
  box-sizing: border-box;
  font-size: 1rem;
}
.public-booking-page .public-booking-form input:focus-visible,
.public-booking-page .public-booking-form textarea:focus-visible,
.public-booking-page .public-booking-form select:focus-visible {
  outline: none;
  border-color: var(--primary-highlight);
  box-shadow: 0 0 0 0.1875rem var(--primary-focus);
}
.public-booking-page .public-booking-form .checkbox-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0;
  padding: 0.625rem 0;
  font-size: 0.875rem;
}
.public-booking-page .checkbox-row input {
  flex: 0 0 1.125rem;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.125rem 0 0;
  padding: 0;
  accent-color: var(--primary);
}
.public-booking-page .btn-block { width: 100%; }
.public-booking-page button:hover { filter: none; transform: none; }
.public-booking-page .btn.is-selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.public-booking-page a { color: var(--primary); }
.public-booking-page .public-booking-terms {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 18.75rem;
  overflow-y: auto;
}
@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 33.75rem) {
  .public-booking-page .public-booking-card { padding: 1.125rem; }
}

.public-booking-header {
  display: grid;
  justify-items: center;
  gap: 0.625rem;
  padding: 1rem 1.25rem;
  border-bottom: 0.0625rem solid #e7e4e9;
  background: #fff;
  color: #30283a;
  text-align: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.public-booking-platform-brand,
.public-booking-salon-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.public-booking-platform-brand { color: var(--primary); font-size: 0.75rem; font-weight: 700; }
.public-booking-platform-brand .brand-logo {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: 0.6875rem;
  background: transparent;
  box-shadow: none;
}
.public-booking-platform-brand .brand-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.public-booking-salon-brand { gap: 0.625rem; }
.public-booking-salon-brand img,
.public-booking-salon-placeholder {
  width: 2.625rem;
  height: 2.625rem;
  flex: 0 0 2.625rem;
  border-radius: 0.625rem;
  object-fit: contain;
}
.public-booking-salon-placeholder {
  display: grid;
  place-items: center;
  background: var(--primary-tint);
  color: var(--primary);
  font-weight: 700;
}
.public-booking-salon-brand h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.public-booking-header > p { margin: 0; color: #766d7e; font-size: 0.8125rem; }

/* Keep the public booking flow independent of dashboard layout rules. */
.public-booking-page.booking-widget-page .booking-widget-shell {
  --booking-gutter: 1rem;
  width: min(40rem, 100%);
}
.booking-widget-page .booking-widget-language {
  grid-template-columns: minmax(0, 1fr) minmax(0, 10rem);
  align-items: center;
  gap: 0.75rem;
  margin: 1rem var(--booking-gutter) 0;
}
.booking-widget-page .booking-widget-language label {
  color: var(--muted);
}
.booking-widget-page .booking-widget-language select {
  box-sizing: border-box;
  font-size: 1rem;
}
.booking-widget-page .booking-widget-shell > .page-title {
  margin: 1.25rem var(--booking-gutter);
  text-align: start;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.booking-widget-page .booking-widget-message {
  margin: 0 var(--booking-gutter) 1rem;
}
.booking-widget-page .booking-widget-main {
  gap: 1rem;
  padding: 0 var(--booking-gutter);
}
.booking-widget-page .booking-widget-section {
  min-width: 0;
  padding: 1rem;
  box-shadow: none;
}
.booking-widget-page .booking-widget-section-header {
  display: grid;
  grid-template-columns: 1.625rem minmax(0, 1fr) 1rem;
  column-gap: 0.625rem;
  row-gap: 0.25rem;
  min-height: 2.75rem;
  font: inherit;
}
.booking-widget-page .booking-widget-section-title {
  font-size: 1rem;
  line-height: 1.4;
}
.booking-widget-page .booking-widget-section-chevron {
  grid-column: 3;
  grid-row: 1;
  text-align: center;
}
.booking-widget-page .booking-widget-section-summary {
  grid-column: 2;
  grid-row: 2;
  text-align: start;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 0.8125rem;
}
.booking-widget-page .booking-widget-section-summary:empty { display: none; }
.booking-widget-page .booking-widget-section.is-open .booking-widget-section-body,
.booking-widget-page .booking-widget-category.is-open .booking-widget-category-body {
  max-height: none;
}
.booking-widget-page .booking-widget-category-content {
  padding: 1rem;
  border-top: 0.0625rem solid var(--border);
}
.booking-widget-page .booking-widget-category-content .booking-widget-message {
  margin: 0;
}
.booking-widget-page .booking-widget-status {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
}
.booking-widget-page .booking-widget-location-row {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.booking-widget-page .booking-widget-location-card {
  align-content: center;
  text-align: start;
}
.booking-widget-page .booking-widget-location-card > span:empty {
  display: none;
}
.booking-widget-page .booking-widget-employee-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  overflow: visible;
  padding: 0;
}
.booking-widget-page .booking-widget-employee-card {
  width: 100%;
  min-width: 0;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 0.625rem;
  padding: 0.75rem;
  border: 0.0625rem solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
}
.booking-widget-page .booking-widget-employee-card.is-selected {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.booking-widget-page .booking-widget-employee-card.is-no-preference,
.booking-widget-page .booking-widget-employee-row > .booking-widget-status {
  grid-column: 1 / -1;
}
.booking-widget-page .booking-widget-employee-avatar {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.875rem;
}
.booking-widget-page .booking-widget-employee-name {
  text-align: start;
  font-size: 0.875rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.booking-widget-page .booking-widget-week-strip-wrap {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  gap: 0.5rem;
}
.booking-widget-page .booking-widget-week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-column: 1 / -1;
  grid-row: 1;
  gap: 0.25rem;
  overflow: visible;
}
.booking-widget-page .booking-widget-week-nav {
  grid-row: 2;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
}
.booking-widget-page #weekNextButton { grid-column: 3; }
.booking-widget-page .booking-widget-day-button {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-content: center;
  width: 100%;
  min-width: 0;
  min-height: 3.5rem;
  padding: 0.5rem 0;
  border-radius: 0.625rem;
  font: inherit;
}
.booking-widget-page .booking-widget-day-button.has-waitlist {
  border-color: var(--primary);
}
.booking-widget-page .booking-widget-day-waitlist-mark {
  position: absolute;
  top: 0.125rem;
  inset-inline-end: 0.25rem;
  color: var(--primary);
  font-size: 0.75rem;
  line-height: 1;
}
.booking-widget-page .booking-widget-waitlist {
  display: grid;
  gap: 0.75rem;
}
.booking-widget-page .booking-widget-waitlist > p {
  margin: 0;
  color: var(--muted);
}
.booking-widget-page .booking-widget-waitlist .booking-widget-waitlist-days {
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
.booking-widget-page .booking-widget-day-name { font-size: 0.625rem; }
.booking-widget-page .booking-widget-timeslot-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}
.booking-widget-page .booking-widget-timeslot-badge {
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.5rem 0.25rem;
  font-variant-numeric: tabular-nums;
}
.booking-widget-page :is(.booking-widget-section-header, .booking-widget-service-option) {
  text-align: start;
}
.booking-widget-page :is(.booking-widget-service-name, .booking-widget-section-summary, .booking-widget-summary-details dd, .booking-widget-customer-details li > span) {
  unicode-bidi: plaintext;
}
.booking-widget-page :is(input[type="tel"], input[type="email"], input[type="date"]) {
  direction: ltr;
  text-align: start;
}
[dir="rtl"] .booking-widget-page .booking-widget-week-nav {
  transform: scaleX(-1);
}
.booking-widget-page .public-booking-platform-brand {
  direction: ltr;
}
@media (max-width: 47.9375rem) {
  .booking-widget-page .booking-widget-timeslot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.booking-widget-page :is(.booking-widget-employee-card, .booking-widget-day-button, .booking-widget-week-nav, .booking-widget-section-header):focus-visible {
  outline: 0.125rem solid var(--primary);
  outline-offset: -0.1875rem;
}
@media (max-width: 24rem) {
  .public-booking-page.booking-widget-page .booking-widget-shell { --booking-gutter: 0.75rem; }
  .booking-widget-page .booking-widget-section { padding: 0.875rem; }
  .booking-widget-page .booking-widget-employee-row { grid-template-columns: minmax(0, 1fr); }
}

.booking-widget-page .booking-widget-summary {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 0.75rem;
}
.booking-widget-page .booking-widget-summary-title {
  margin: 0;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 650;
}
.booking-widget-page .booking-widget-summary-panel {
  padding: 1rem;
  border: 0.0625rem solid var(--primary-border, var(--border));
  border-radius: 0.875rem;
  background: var(--primary-soft);
}
.booking-widget-page .booking-widget-summary-details,
.booking-widget-page .booking-widget-customer-details {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.booking-widget-page .booking-widget-summary-details > div,
.booking-widget-page .booking-widget-customer-details > li {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0.25rem 1rem;
  align-items: baseline;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.booking-widget-page .booking-widget-summary-details dt,
.booking-widget-page .booking-widget-customer-details strong {
  color: var(--muted);
  font-weight: 400;
}
.booking-widget-page .booking-widget-summary-details dd,
.booking-widget-page .booking-widget-customer-details li > span {
  margin: 0;
  min-width: 0;
  color: var(--text);
  font-weight: 500;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.booking-widget-page .booking-widget-summary-details .booking-widget-summary-total {
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  border-top: 0.0625rem solid var(--border);
}
.booking-widget-page .booking-widget-summary-total :is(dt, dd) {
  color: var(--text);
  font-weight: 700;
  font-size: 1rem;
}
.booking-widget-page .booking-widget-summary-payment :is(dt, dd),
.booking-widget-page .booking-widget-summary-remaining :is(dt, dd) {
  color: var(--text);
  font-weight: 500;
}
.booking-widget-page .booking-widget-payment-choice {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 0.0625rem solid var(--border);
  display: grid;
  gap: 0.5rem;
}
.booking-widget-page .booking-widget-payment-choice-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
}
.booking-widget-page .booking-widget-payment-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 0.0625rem solid var(--border);
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
}
.booking-widget-page .booking-widget-payment-option input[type="radio"] {
  accent-color: var(--primary);
  width: 1rem;
  height: 1rem;
}
.booking-widget-page .booking-widget-payment-option:hover {
  border-color: var(--primary);
}
.booking-widget-page .booking-widget-confirm-button {
  width: 100%;
  min-height: 3rem;
  white-space: normal;
  line-height: 1.4;
}
.booking-widget-page .booking-widget-payment-note {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--bg);
  color: var(--text);
  font-size: 0.875rem;
}
@media (max-width: 24rem) {
  .booking-widget-page .booking-widget-summary-details > div,
  .booking-widget-page .booking-widget-customer-details > li {
    grid-template-columns: minmax(0, 1fr);
  }
  .booking-widget-page .booking-widget-summary-details .booking-widget-summary-total {
    grid-template-columns: 1fr auto;
  }
}