:root {
  --radius: 0.75rem;
  --background: oklch(0.99 0.005 220);
  --foreground: oklch(0.20 0.03 240);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.20 0.03 240);
  --primary: oklch(0.55 0.14 230);
  --primary-foreground: oklch(0.99 0.005 220);
  --secondary: oklch(0.96 0.02 220);
  --secondary-foreground: oklch(0.25 0.05 240);
  --muted: oklch(0.96 0.01 230);
  --muted-foreground: oklch(0.50 0.02 240);
  --accent: oklch(0.70 0.14 165);
  --accent-foreground: oklch(0.15 0.02 240);
  --success: oklch(0.68 0.15 160);
  --success-foreground: oklch(0.99 0.005 220);
  --destructive: oklch(0.60 0.22 27);
  --destructive-foreground: oklch(0.99 0.005 220);
  --border: oklch(0.92 0.01 230);
  --input: oklch(0.94 0.01 230);
  --ring: oklch(0.55 0.14 230);
  --chart-3: oklch(0.75 0.13 85);
  --font-sans: "Vazirmatn", "Inter", ui-sans-serif, system-ui, sans-serif;
}

* {
  border-color: var(--border);
}

html {
  font-family: var(--font-sans);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "ss02";
}

.bg-background { background-color: var(--background); }
.bg-card { background-color: var(--card); }
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-muted { background-color: var(--muted); }
.bg-accent { background-color: var(--accent); }
.bg-success { background-color: var(--success); }
.bg-destructive { background-color: var(--destructive); }

.text-foreground { color: var(--foreground); }
.text-primary { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-success { color: var(--success); }
.text-destructive { color: var(--destructive); }
.text-accent-foreground { color: var(--accent-foreground); }
.text-chart-3 { color: var(--chart-3); }

.border-border { border-color: var(--border); }
.border-input { border-color: var(--input); }
.border-primary { border-color: var(--primary); }

.bg-primary\/5 { background-color: color-mix(in oklch, var(--primary) 5%, transparent); }
.bg-primary\/10 { background-color: color-mix(in oklch, var(--primary) 10%, transparent); }
.bg-secondary\/40 { background-color: color-mix(in oklch, var(--secondary) 40%, transparent); }
.bg-muted\/30 { background-color: color-mix(in oklch, var(--muted) 30%, transparent); }
.bg-muted\/40 { background-color: color-mix(in oklch, var(--muted) 40%, transparent); }
.bg-muted\/50 { background-color: color-mix(in oklch, var(--muted) 50%, transparent); }
.bg-success\/15 { background-color: color-mix(in oklch, var(--success) 15%, transparent); }
.bg-destructive\/15 { background-color: color-mix(in oklch, var(--destructive) 15%, transparent); }
.bg-accent\/20 { background-color: color-mix(in oklch, var(--accent) 20%, transparent); }
.bg-chart-3\/15 { background-color: color-mix(in oklch, var(--chart-3) 15%, transparent); }
.bg-background\/60 { background-color: color-mix(in oklch, var(--background) 60%, transparent); }
.bg-background\/80 { background-color: color-mix(in oklch, var(--background) 80%, transparent); }

.border-primary\/20 { border-color: color-mix(in oklch, var(--primary) 20%, transparent); }
.border-primary\/30 { border-color: color-mix(in oklch, var(--primary) 30%, transparent); }
.border-primary\/40 { border-color: color-mix(in oklch, var(--primary) 40%, transparent); }
.border-border\/60 { border-color: color-mix(in oklch, var(--border) 60%, transparent); }

.ring-primary\/10 { --tw-ring-color: color-mix(in oklch, var(--primary) 10%, transparent); box-shadow: 0 0 0 2px var(--tw-ring-color); }
.fill-chart-3 { fill: var(--chart-3); }

.shadow-primary\/5 { box-shadow: 0 20px 25px -5px color-mix(in oklch, var(--primary) 5%, transparent); }

.bg-medical-gradient {
  background-image: linear-gradient(135deg, oklch(0.55 0.14 230) 0%, oklch(0.70 0.14 190) 50%, oklch(0.70 0.14 165) 100%);
}

.bg-soft-gradient {
  background-image: linear-gradient(180deg, oklch(0.98 0.015 220) 0%, oklch(0.99 0.005 220) 100%);
}

.hover\:bg-primary\/90:hover { background-color: color-mix(in oklch, var(--primary) 90%, black); }
.hover\:bg-muted:hover { background-color: var(--muted); }
.hover\:border-primary:hover { border-color: var(--primary); }
.hover\:border-primary\/40:hover { border-color: color-mix(in oklch, var(--primary) 40%, transparent); }
.hover\:bg-primary\/5:hover { background-color: color-mix(in oklch, var(--primary) 5%, transparent); }
.hover\:text-foreground:hover { color: var(--foreground); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: colors 0.15s;
  height: 2.25rem;
  padding: 0 1rem;
  border: none;
}
.btn-default { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }
.btn-default:hover { background: color-mix(in oklch, var(--primary) 90%, black); }
.btn-outline { border: 1px solid var(--input); background: var(--background); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }
.btn-outline:hover { background: var(--accent); color: var(--accent-foreground); }
.btn-lg { height: 2.5rem; padding: 0 2rem; border-radius: calc(var(--radius) - 2px); }
.btn-sm { height: 2rem; padding: 0 0.75rem; font-size: 0.75rem; border-radius: calc(var(--radius) - 2px); }
.btn-icon { height: 2.25rem; width: 2.25rem; padding: 0; }

.input {
  display: flex;
  height: 2.25rem;
  width: 100%;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--input);
  background: transparent;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.input:focus { outline: none; box-shadow: 0 0 0 1px var(--ring); }
.input::placeholder { color: var(--muted-foreground); }
.textarea {
  display: flex;
  width: 100%;
  min-height: 5rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--input);
  background: var(--background);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  resize: vertical;
}
.textarea:focus { outline: none; box-shadow: 0 0 0 1px var(--ring); }
.input-time-24 {
  direction: rtl;
  text-align: center;
  font-family: var(--font-sans);
}
input[type="time"].input-time-24 {
  direction: rtl;
}

.slot-grid button {
  direction: rtl;
  font-family: var(--font-sans);
}

.faq-details { overflow: hidden; }
.faq-summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: 0.875rem;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::after {
  content: "▾";
  float: left;
  color: var(--muted-foreground);
  transition: transform 0.2s ease;
}
.faq-details[open] .faq-summary::after { transform: rotate(180deg); }
.faq-answer { padding: 0 1.25rem 1rem; }

.select {
  display: flex;
  height: 2.25rem;
  width: 100%;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--input);
  background: var(--background);
  padding: 0 0.75rem;
  font-size: 0.875rem;
}

.card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--card-foreground);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.card-content { padding: 1.5rem; }
.card-content-compact { padding: 1rem; }

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid transparent;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.badge-default { background: var(--primary); color: var(--primary-foreground); }

.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th { height: 2.5rem; padding: 0 1rem; text-align: right; font-weight: 500; color: var(--muted-foreground); border-bottom: 1px solid var(--border); }
.table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }

.tabs-list {
  display: inline-flex;
  min-height: 2.25rem;
  height: auto;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--radius) - 2px);
  background: var(--muted);
  padding: 0.25rem;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.tabs-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: calc(var(--radius) - 4px);
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  cursor: pointer;
  border: none;
  background: transparent;
}
.tabs-trigger.active { background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }
.tabs-panel { display: none; }
.tabs-panel.active { display: block; }

.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgb(0 0 0 / 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.dialog-overlay.open { display: flex; }
.dialog-content {
  background: var(--background);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  width: 100%;
  max-width: 28rem;
  padding: 1.5rem;
  max-height: 90vh;
  overflow-y: auto;
}

.mobile-sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
}
.mobile-sheet.open { display: block; }
body.mobile-menu-open { overflow: hidden; }
.mobile-sheet-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.5); }
.mobile-sheet-panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 20rem;
  max-width: min(20rem, 92vw);
  background: var(--background);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgb(0 0 0 / 0.1);
  animation: mobile-sheet-in 0.2s ease-out;
}
.mobile-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.mobile-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}
.mobile-sheet-footer {
  flex-shrink: 0;
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid var(--border);
}
.mobile-menu-section + .mobile-menu-section {
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}
.mobile-menu-section-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--foreground);
  text-align: right;
}
.mobile-menu-section-trigger[aria-expanded="false"] + .mobile-menu-section-panel {
  display: none;
}
.mobile-menu-chevron {
  transition: transform 0.2s ease;
}
.mobile-menu-section-trigger[aria-expanded="false"] .mobile-menu-chevron {
  transform: rotate(90deg);
}
.mobile-menu-section-trigger[aria-expanded="true"] .mobile-menu-chevron {
  transform: rotate(0deg);
}
.mobile-menu-section-panel {
  padding-right: 0.25rem;
}
@keyframes mobile-sheet-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.toast-container {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: 0.75rem 1rem;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.875rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  animation: toast-in 0.2s ease;
}
.toast-success { background: var(--success); color: var(--success-foreground); }
.toast-error { background: var(--destructive); color: var(--destructive-foreground); }
.toast-info { background: var(--foreground); color: var(--background); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.otp-input {
  width: 2.5rem;
  height: 2.75rem;
  text-align: center;
  font-size: 1.125rem;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 2px);
}
.otp-input:focus { outline: none; box-shadow: 0 0 0 1px var(--ring); }

.slot-btn.selected { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.day-btn.selected { border-color: var(--primary); background: color-mix(in oklch, var(--primary) 10%, transparent); color: var(--primary); }

.has-\[\:checked\]\:border-primary:has(:checked) { border-color: var(--primary); }
.has-\[\:checked\]\:bg-primary\/5:has(:checked) { background-color: color-mix(in oklch, var(--primary) 5%, transparent); }
.has-\[\:checked\]\:bg-primary\/10:has(:checked) { background-color: color-mix(in oklch, var(--primary) 10%, transparent); }
.has-\[\:checked\]\:ring-1:has(:checked) { box-shadow: 0 0 0 1px var(--primary); }
.has-\[\:checked\]\:ring-primary:has(:checked) { --tw-ring-color: var(--primary); }

.hidden { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


@media (min-width: 768px) {
  .md\:hidden { display: none !important; }
}

@media (max-width: 767px) {
  .hidden.md\:flex { display: none !important; }
  .hidden.md\:block { display: none !important; }
}