:root {
  color-scheme: light;
  font-family: "DM Sans", "Segoe UI", Arial, sans-serif;
  color: #1e392e;
  background: #f5f7f0;
  --ink: #1e392e;
  --muted: #4c6559;
  --forest: #153d31;
  --accent: #1b664c;
  --accent-dark: #124e39;
  --line: #d6e1d8;
  --control-line: #758c80;
  --soft: #eef4ed;
  --selected: #e1f0e5;
  --surface: #fff;
  --radius: 1.2rem;
  --control-radius: .65rem;
}

:root:lang(ar) {
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
p { margin: 0; line-height: 1.6; }
a { color: inherit; }
bdi { unicode-bidi: isolate; }

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset: .5rem auto auto .5rem;
  z-index: 5;
  padding: .65rem 1rem;
  background: var(--surface);
  color: var(--ink);
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid #25875f; outline-offset: 3px; }

.shell {
  inline-size: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.top-bar {
  background: var(--forest);
  border-block-end: 1px solid #254b3f;
  color: #fff;
}

.top-bar-inner {
  min-block-size: 4.35rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.brand { font-size: 1.02rem; font-weight: 700; }
.language {
  min-block-size: 2.55rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid #a5bcb0;
  border-radius: 99rem;
  padding-inline: .95rem;
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.language:hover { background: #2b5546; }
.language:focus-visible { outline-color: #fff; }
main { padding-block: 2rem 3rem; }
.page-intro { margin-block-end: 1.4rem; }

h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: clamp(2.05rem, 6vw, 3rem); font-weight: 730; }
h2 { font-size: clamp(1.22rem, 3vw, 1.52rem); }
h3 { font-size: 1.03rem; }

.preview {
  max-inline-size: 42rem;
  margin-block-start: .7rem;
  color: var(--muted);
  font-size: .88rem;
}

.booking-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .4rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.booking-progress li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-block-size: 3.1rem;
  padding: .45rem .28rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: #edf2ea;
  color: var(--muted);
  text-align: start;
  font-size: .83rem;
  font-weight: 650;
}

.step-marker {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 1.48rem;
  block-size: 1.48rem;
  border-radius: 50%;
  background: #dce6dd;
  color: #355145;
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}

.booking-progress [aria-current="step"] {
  border-color: var(--accent);
  color: var(--forest);
  background: var(--surface);
  font-weight: 750;
}

.booking-progress [aria-current="step"] .step-marker {
  background: var(--accent);
  color: #fff;
}

.booking-progress :is(.is-complete, [data-state="complete"]) {
  color: var(--forest);
  background: var(--selected);
}

.booking-layout { display: grid; gap: 1rem; align-items: start; }
.booking-flow { display: grid; gap: 1rem; min-inline-size: 0; }

.panel, .summary-panel {
  min-inline-size: 0;
  padding: clamp(1.15rem, 3.7vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.panel {
  background: var(--surface);
  box-shadow: 0 .28rem 1rem #193c2f09;
}

.panel h2 { margin-block-end: 1.2rem; }

.fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .95rem 1.1rem;
}

.full-row { grid-column: 1 / -1; }
.appointment-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 1.15rem;
  padding: 1rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: var(--soft);
}
.appointment-context > div { flex: 1 1 13rem; }
.appointment-context strong { overflow-wrap: anywhere; }
.appointment-context p { margin-block-start: .24rem; }
.patient-appointment {
  margin-block: -.35rem 1.05rem;
  padding: .65rem .8rem;
  border-inline-start: .18rem solid var(--accent);
  background: var(--soft);
  color: var(--accent-dark);
  font-size: .88rem;
}
label { display: grid; align-content: start; gap: .36rem; min-inline-size: 0; font-size: .91rem; font-weight: 650; }

select, input {
  min-inline-size: 0;
  inline-size: 100%;
  min-block-size: 2.95rem;
  padding: .68rem .8rem;
  border: 1px solid var(--control-line);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 450;
}

input[dir="ltr"] { text-align: start; }
input::placeholder { color: #5e7268; opacity: 1; }
:is(select, input):disabled { color: #586d62; background: #edf2ec; cursor: not-allowed; opacity: 1; }

.select-control { display: block; position: relative; min-inline-size: 0; }
.select-control select { appearance: none; padding-inline-end: 2rem; }

.select-control::after {
  content: "";
  position: absolute;
  inset-inline-end: 1rem;
  inset-block-start: 1.15rem;
  inline-size: .45rem;
  block-size: .45rem;
  transform: rotate(45deg);
  border-block-end: 2px solid var(--muted);
  border-inline-end: 2px solid var(--muted);
  pointer-events: none;
}

:root[dir="rtl"] .select-control::after { transform: rotate(-45deg); }
#service-name { margin-block-start: .15rem; overflow-wrap: anywhere; font-weight: 450; }

.search-field { display: grid; gap: .36rem; min-inline-size: 0; }
.search-field input { background: #f8faf7; }
.search-field input:disabled { background: #edf2ec; }

.search-results {
  max-block-size: 17rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: var(--surface);
}

.search-results ul { list-style: none; margin: 0; padding: 0; }
.search-results p { padding: .6rem .75rem; }
.search-results button {
  display: block;
  inline-size: 100%;
  padding: .65rem .75rem;
  border: 0;
  border-block-end: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  text-align: start;
}
.search-results button:hover, .search-results button:focus-visible { background: var(--selected); }
.search-results button:focus-visible { outline-offset: -3px; }
.search-results :is(strong, small) { display: block; overflow-wrap: anywhere; }
.search-results small { margin-block-start: .12rem; color: var(--muted); font-weight: 450; }

.time-section { margin-block-start: 1.35rem; padding-block-start: 1.15rem; border-block-start: 1px solid var(--line); }
.date-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .65rem; }
.date-field { flex: 0 1 11.7rem; }
.date-field input { min-inline-size: 9rem; }
.date-options, .slots { display: grid; gap: .5rem; }
.date-options { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-start: .8rem; }
.slots { grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.2rem), 1fr)); }
.slots:not(:empty) { margin-block-start: .55rem; }
#availability { margin-block-start: .82rem; }
.hint { color: var(--muted); font-size: .88rem; }

button {
  min-block-size: 2.85rem;
  padding: .55rem .84rem;
  border-radius: var(--control-radius);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.slot, .date-options button, .secondary {
  border-color: var(--control-line);
  background: var(--surface);
  color: var(--ink);
}

.slot, .date-options button { padding-inline: .45rem; text-align: center; font-size: .9rem; }
.date-options button { display: grid; align-content: center; justify-items: center; gap: .15rem; }
.date-options button span { display: block; }

:is(.slot, .date-options button, .secondary):hover:not(:disabled) { background: var(--soft); border-color: var(--accent); }
:is(.slot, .date-options button):is([aria-pressed="true"], [aria-current="date"]) {
  background: var(--selected);
  border-color: var(--accent);
  color: var(--accent-dark);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.primary { background: var(--accent); color: #fff; border-color: var(--accent); padding-inline: 1.2rem; }
.primary:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); }
button:disabled { opacity: .68; cursor: not-allowed; }

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-block-start: 1.3rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--line);
}

.panel-actions .primary { min-inline-size: 10rem; }
.back-link {
  min-block-size: 2.5rem;
  margin: -.35rem 0 .6rem;
  padding: .3rem 0;
  background: transparent;
  color: var(--accent-dark);
  font-size: .9rem;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.note {
  margin-block: .95rem;
  padding: .75rem .86rem;
  background: var(--soft);
  border-radius: var(--control-radius);
}

.code-field { max-inline-size: 17rem; }
.code-field input { letter-spacing: .22em; font-weight: 650; font-variant-numeric: tabular-nums; }
#demo-code { font-weight: 750; letter-spacing: .12em; }
.error {
  margin: 0 0 .85rem;
  padding: .72rem .85rem;
  border: 1px solid #e3b9b3;
  border-radius: var(--control-radius);
  background: #fbefed;
  color: #842a25;
  font-size: .91rem;
  font-weight: 650;
}

.summary-panel { background: #edf3eb; }
.summary-panel h2 { font-size: 1.15rem; margin-block-end: .55rem; }
.summary-list { display: grid; gap: .72rem; margin: .85rem 0 0; }
.summary-list:not(:has(.summary-row:not([hidden]))) { margin: 0; }
.summary-row { padding-block-end: .68rem; border-block-end: 1px solid var(--line); }
.summary-row:last-child { border-block-end: 0; padding-block-end: 0; }

.summary-row dt, .receipt dt { color: var(--muted); font-size: .81rem; font-weight: 650; margin-block-end: .24rem; }
.summary-row dd, .receipt dd { margin: 0; line-height: 1.52; font-size: .95rem; font-weight: 650; overflow-wrap: anywhere; }

.support { margin-block-start: 1rem; padding-block-start: .75rem; border-block-start: 1px solid var(--line); }
.support a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-block-size: 2.4rem;
  color: var(--accent-dark);
  font-size: .89rem;
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

#confirmation { border-inline-start: .23rem solid var(--accent); }
#confirmation .note { margin-block-end: 0; }
.receipt-title { display: flex; gap: .7rem; align-items: center; }
.receipt-title h2 { margin: 0; }
.receipt-check {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--selected);
  color: var(--accent-dark);
  font-weight: 750;
}
.receipt { display: grid; gap: .65rem 1rem; margin: .85rem 0; }
.receipt div { padding-block: .7rem; border-block-end: 1px solid var(--line); }

.staff-panel {
  margin-block-start: 1.15rem;
  padding: .65rem 1rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: #f9fbf8;
}

.staff-panel summary { min-block-size: 2.2rem; padding-block: .35rem; cursor: pointer; color: var(--muted); font-size: .9rem; font-weight: 650; }
#staff-empty { margin-block: .5rem; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; inline-size: 100%; margin-block: .55rem .4rem; font-size: .9rem; }
th, td { padding: .65rem; border-block-end: 1px solid var(--line); text-align: start; }
th, .booking-status { white-space: nowrap; }
.booking-status { color: var(--accent-dark); font-weight: 700; }

@media (min-width: 37rem) {
  .fields, .receipt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .date-options { grid-template-columns: repeat(auto-fit, minmax(5.1rem, 1fr)); }
  .booking-progress li { padding-inline: .7rem; font-size: .91rem; }
}

@media (min-width: 52rem) {
  .shell { inline-size: min(100% - 4rem, 72rem); }
  main { padding-block: 2.7rem 4rem; }
  .page-intro { margin-block-end: 1.55rem; }
  .booking-progress {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    max-inline-size: calc((100% - 1.25rem) / 1.46);
    margin-block-end: 1rem;
  }
  .booking-layout { grid-template-columns: minmax(0, 1fr) minmax(17rem, .46fr); gap: 1.25rem; }
  .booking-layout:has(.summary-panel[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .summary-panel { position: sticky; inset-block-start: 1.25rem; }
  .patient-appointment { display: none; }
  #service-name { display: none; }
}

@media (max-width: 51.99rem) {
  #patient-appointment:not([hidden]) ~ #verify #selected-summary { display: none; }
}

@media (max-width: 36.99rem) {
  .panel-actions button { flex: 1 1 100%; }
}

@media (forced-colors: active) {
  .primary, .booking-progress [aria-current="step"], :is(.slot, .date-options button)[aria-pressed="true"] {
    border: 2px solid Highlight;
  }
}