/* Nobatik 1.1.0 — production implementation of the editable Figma RTL concepts.
   Figma reference: https://www.figma.com/design/anMt5dUx4gtxosRKUrLF4c
   Primary web typography: Vazirmatn (loaded in style.css); Figma canvas: Noto Sans Arabic.
   Additive CSS: no reset, no change to appointment logic, deliberately overrides base styles. */
:root {
  --ink:#18264f;
  --muted:#8290a9;
  --line:#e8edfa;
  --blue:#345df5;
  --blue-dark:#2447d7;
  --teal:#18b7ac;
  --page:#f6f8fe;
  --shadow:0 16px 44px rgba(30,47,111,.055);
}
body {font-feature-settings:'ss01' 1;}
a,button,input,select,textarea { -webkit-tap-highlight-color:transparent; }
::selection {background:#dbe5ff;color:#243a91;}

/* Marketing design language from Figma's desktop homepage. */
.site-header {box-shadow:0 4px 35px rgba(41,61,114,.025);}
.site-header .brand,.auth-header .brand,.simple-header .brand {letter-spacing:-.045em;}
.main-nav a {font-weight:750;transition:color .2s;}
.nav-actions .btn-primary {border-radius:13px;min-height:46px;}
.hero {min-height:630px;gap:32px;}
.hero h1 {letter-spacing:-.052em;line-height:1.35;}
.hero-copy .eyebrow-badge {background:#eef2ff;border-color:#e2e9ff;}
.hero-visual .mock-card {box-shadow:0 28px 80px rgba(33,57,144,.19);}
.hero-description {color:#7888a6;}
.gradient-text {background-image:linear-gradient(98deg,#345df5 8%,#526af6 64%,#19b6af 115%);}
.hero-buttons .btn-lg {min-height:58px;padding-inline:25px;border-radius:15px;}
.feature-card,.public-service {box-shadow:0 6px 22px rgba(36,59,124,.025);}
.feature-card:hover,.public-service:hover {transform:translateY(-4px);box-shadow:0 16px 38px rgba(34,57,131,.09);border-color:#dce5ff;}
.industry-card {transition:transform .2s,box-shadow .2s;}
.industry-card:hover {box-shadow:0 20px 45px rgba(40,59,128,.09);}

/* Global dashboard shell: editable owner dashboard Figma reference. */
.mode-admin,.mode-panel,.mode-account {background:var(--page);}
.app-shell {background:var(--page);}
.sidebar {width:250px;background:#fff;border-left:1px solid #edf1f8;padding:28px 17px;box-shadow:-5px 0 28px rgba(28,48,104,.018);}
.sidebar-head {padding:0 8px 42px;}
.sidebar .brand {font-size:24px;}
.sidebar .brandmark {background:linear-gradient(135deg,#365ff5,#5c6ef8);}
.sidebar-label {font-size:11px;letter-spacing:0;padding-inline:14px;margin-bottom:16px;color:#9eabc1;}
.sidebar nav {gap:8px;}
.side-link {font-size:13px;padding:13px 15px;border-radius:12px;font-weight:750;color:#697993;}
.side-link svg {color:#8292b5;}
.side-link.current {background:#edf2ff;color:#345df5;}
.side-link.current svg,.side-link:hover svg {color:#345df5;}
.sidebar-bottom .side-link {font-size:12px;}
.app-top {height:90px;padding:0 clamp(22px,3.6vw,52px);border-bottom:1px solid #edf1f9;}
.app-top-tools {margin-inline-start:auto;display:flex;align-items:center;gap:24px;}
.app-today {font-size:12px;color:#8998b1;font-weight:700;white-space:nowrap;}
.breadcrumb {font-size:12px;color:#8491ac;font-weight:600;}
.user-chip {background:#f6f8fd;padding:8px 11px;border-radius:14px;gap:11px;}
.user-chip .avatar {width:38px;height:38px;border-radius:11px;background:#e8eeff;color:#345df5;}
.user-chip small {color:#95a0b8;}
.dashboard-content {max-width:1520px;padding:36px clamp(22px,3.6vw,52px) 80px;}
.page-heading {margin-bottom:28px;}
.page-heading .eyebrow {font-size:12px;margin-bottom:3px;}
.page-heading h1 {font-size:clamp(23px,2.2vw,32px);font-weight:900;letter-spacing:-.04em;}
.panel-banner {background:linear-gradient(108deg,#3558d4,#566ce0);padding:29px 34px;min-height:156px;border-radius:19px;margin-bottom:26px;box-shadow:0 17px 36px rgba(48,78,184,.16);}
.panel-banner::after {left:12%;top:-87px;width:295px;height:295px;border-width:48px;border-color:rgba(255,255,255,.065);}
.panel-banner h2 {font-size:28px;margin:12px 0 8px;color:#fff;}
.panel-banner .banner-kicker {font-size:12px;color:#dce5ff;font-weight:750;display:inline-flex;align-items:center;gap:8px;}
.banner-link {display:flex;flex-wrap:wrap;align-items:center;gap:7px 13px;font-size:12px;color:#e0e8ff;}
.banner-link a {font-size:12px;color:#fff;font-weight:750;text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere;}
.banner-copy {background:#ffffff1b;border:1px solid #ffffff55;color:#fff;font-size:11px;font-weight:700;border-radius:9px;padding:4px 9px;}
.banner-copy:hover {background:#ffffff30;}
.panel-banner .btn-white {border-radius:12px;min-height:51px;position:relative;z-index:1;}
.stats-grid {gap:16px;margin-bottom:25px;}
.stat-card {padding:21px 20px;border:1px solid #edf1fb;border-radius:16px;box-shadow:0 8px 28px rgba(37,58,112,.035);min-height:151px;}
.stat-top {align-items:center;color:#8190aa;}
.stat-top>span:first-child {font-size:12px;font-weight:750;}
.stat-icon {background:#edf2ff;color:#4865ec;border-radius:12px;width:43px;height:43px;display:grid;place-items:center;}
.stat-card strong {font-size:35px;font-variant-numeric:tabular-nums;margin-top:10px;color:#1c2f59;}
.stat-card small {font-size:11px;color:#9aa7bc;}
.panel-card {border:1px solid #edf1f9;border-radius:19px;padding:28px;margin-bottom:23px;box-shadow:0 9px 30px rgba(40,64,124,.03);}
.card-heading {align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:20px;}
.card-heading h2 {font-size:20px;letter-spacing:-.02em;margin:0;}
.card-actions {display:flex;align-items:center;flex-wrap:wrap;gap:14px;}
.table-wrap {border:1px solid #f0f3fa;border-radius:13px;overflow:auto;}
.table-wrap table {width:100%;border-collapse:collapse;}
.table-wrap th {background:#f7f9ff;color:#8995ac;font-size:12px;font-weight:800;white-space:nowrap;}
.table-wrap th,.table-wrap td {padding:15px 16px;text-align:right;vertical-align:middle;}
.table-wrap tbody tr {border-bottom:1px solid #f0f3f9;transition:background .2s;}
.table-wrap tbody tr:last-child {border-bottom:0;}
.table-wrap tbody tr:hover {background:#fbfcff;}
.pill {border-radius:100px;}
.quick-grid a {background:#fbfcff;border-radius:15px;min-height:117px;}
.quick-grid a:hover {background:#f0f4ff;border-color:#dce5ff;}
.field>span,.form-section-title {font-weight:800;color:#334467;}
.field input,.field textarea,.field select,.note-form input {border:1px solid #dfe7f5;border-radius:11px;background:#fff;min-height:45px;}
.field input:focus,.field textarea:focus,.field select:focus {border-color:#8097ff;box-shadow:0 0 0 4px #eef2ff;outline:none;}
.form-grid {gap:13px 18px;}
.form-section-title {font-size:16px;margin:14px 0 2px;padding-bottom:12px;border-bottom:1px solid #edf1fa;}
.admin-form-intro {display:flex;gap:16px;align-items:center;margin-bottom:22px;padding:20px;background:#f6f8ff;border:1px solid #e9edff;border-radius:15px;}
.admin-form-intro .feature-icon {margin:0;flex-shrink:0;}
.admin-form-intro h2 {font-size:20px;margin:0 0 5px;}
.admin-form-intro p {font-size:13px;margin:0;}
.form-footer {display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px;}

/* The guided setup appears only on the authenticated owner dashboard. */
.setup-card {background:#fff;border:1px solid #e8eefa;border-radius:19px;padding:27px 30px;margin-bottom:25px;box-shadow:0 9px 30px rgba(40,64,124,.025);}
.setup-header {display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:21px;}
.setup-header h2 {font-size:20px;margin:3px 0 4px;}
.setup-header p {font-size:12px;margin:0;}
.setup-progress {display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:105px;height:85px;background:#edf4ff;border:1px solid #dfe9ff;border-radius:15px;}
.setup-progress strong {font-size:24px;color:#345df5;direction:ltr;}
.setup-progress span {color:#7b8ca8;font-size:10px;}
.setup-meter {height:7px;background:#edf1fb;border-radius:100px;overflow:hidden;margin-bottom:20px;}
.setup-meter>span {display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,#18b7ac,#345df5);transition:width .3s;}
.setup-steps {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.setup-step {display:flex;align-items:center;gap:12px;min-width:0;padding:15px;border:1px solid #eaf0fa;border-radius:12px;background:#fbfcff;transition:background .2s,border-color .2s;}
.setup-step:hover {background:#f1f5ff;border-color:#dce6ff;}
.setup-step.done {background:#f7fcfa;border-color:#dff4ec;}
.setup-step-icon {width:42px;height:42px;display:grid;place-items:center;flex-shrink:0;border-radius:12px;background:#eaf0ff;color:#345df5;}
.setup-step.done .setup-step-icon {background:#dff8ee;color:#0b9c77;}
.setup-step-copy {display:flex;flex-direction:column;min-width:0;flex:1;}
.setup-step-copy strong {font-size:12px;color:#263c69;}
.setup-step-copy small {font-size:10px;color:#91a0b8;line-height:1.9;}
.setup-step-action {display:inline-flex;align-items:center;gap:5px;color:#345df5;font-size:10px;font-weight:800;white-space:nowrap;}
.setup-step.done .setup-step-action {color:#099e7a;}

/* Public booking screen: same clinic identity, step flow and cards as Figma. */
.mode-booking {background:#f6f8fe;}
.simple-header {padding:17px 0;border-bottom:1px solid #e8ecf8;}
.booking-clinic {margin-top:34px;background:#fff;border:1px solid #eaf0fb;border-radius:21px;padding:25px 29px;display:flex;align-items:center;gap:23px;box-shadow:0 8px 28px rgba(43,62,120,.035);}
.booking-clinic-logo {width:94px;height:94px;object-fit:contain;border-radius:23px;background:#f1ecff;flex-shrink:0;}
.booking-clinic-logo.fallback {display:grid;place-items:center;color:#465ef2;}
.booking-clinic h1 {font-size:clamp(23px,2.5vw,30px);margin:2px 0 5px;}
.booking-clinic p {font-size:12px;color:#8390aa;margin:0;}
.booking-progress {display:flex;align-items:center;justify-content:center;gap:16px;overflow-x:auto;padding:25px 0 8px;color:#95a3bb;scrollbar-width:thin;}
.booking-progress span {display:flex;align-items:center;gap:8px;white-space:nowrap;font-weight:800;font-size:12px;}
.booking-progress span b {width:28px;height:28px;border:1px solid #e0e6f4;border-radius:50%;display:grid;place-items:center;background:#fff;color:#8394b2;}
.booking-progress span.progress-active {color:#345df5;}
.booking-progress .progress-active b {background:#345df5;color:#fff;border-color:#345df5;}
.booking-progress i {height:1px;background:#dfe6f5;width:min(55px,5vw);flex-shrink:0;}
.booking-layout {grid-template-columns:minmax(0,1fr) 300px;gap:30px;padding-top:20px;align-items:start;}
.booking-title {margin-bottom:18px;}
.booking-title h2 {font-size:25px;margin:2px 0 5px;}
.booking-title p {font-size:13px;margin:0;}
.booking-card {padding:27px 28px;margin-bottom:18px;}
.booking-step-heading {display:flex;align-items:center;gap:11px;margin:0 0 19px;font-size:19px;}
.booking-step-heading>span {width:33px;height:33px;border-radius:11px;display:grid;place-items:center;background:#ecf1ff;color:#345df5;flex-shrink:0;font-size:16px;}
.service-choice-grid {display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:22px;}
.service-choice {position:relative;display:block;cursor:pointer;}
.service-choice input {position:absolute;inset:0;opacity:0;cursor:pointer;}
.service-choice-body {display:flex;align-items:center;gap:15px;padding:13px 18px;border:1px solid #e8edf8;background:#fbfcff;border-radius:13px;transition:background .18s,border .18s,box-shadow .18s;}
.service-choice:hover .service-choice-body {background:#f6f9ff;}
.service-choice input:checked+.service-choice-body {background:#f0f4ff;border-color:#a9bafe;box-shadow:inset 0 0 0 1px #cfdaff;}
.service-choice input:focus-visible+.service-choice-body {outline:3px solid #9db5ff;outline-offset:3px;}
.service-choice-mark {border:2px solid #d5ddec;width:25px;height:25px;display:grid;place-items:center;flex-shrink:0;border-radius:50%;color:#fff;font-weight:900;line-height:1;font-size:13px;}
.service-choice input:checked+.service-choice-body .service-choice-mark {background:#345df5;border-color:#345df5;}
.service-choice-name {display:flex;flex-direction:column;flex:1;gap:4px;min-width:0;}
.service-choice-name b {font-size:14px;color:#26375e;}
.service-choice-name small {font-size:11px;color:#8e9cb4;}
.service-choice-chevron {color:#a6b2ca;}
.service-choice input:checked+.service-choice-body .service-choice-chevron {color:#345df5;}
.booking-controls-row {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.booking-date-note {display:flex;gap:7px;align-items:center;font-size:11px;color:#7388ac;margin:0 0 17px;}
.booking-date-note svg {color:#345df5;}
.booking-date-note strong {color:#4961a3;}
.booking-controls .btn-outline {border-radius:12px;min-height:46px;}
.booking-submit .booking-divider {margin:25px 0;}
.booking-summary {top:26px;margin-top:0;border:1px solid #e9eef9;box-shadow:0 9px 28px rgba(44,64,124,.035);padding:27px 24px;}
.booking-summary h2 {font-size:19px;margin:15px 0 18px;}
.booking-summary .summary-line {padding:14px 0;}
.booking-summary .tiny {line-height:2;color:#94a0b5;}
.slot-option span {padding:13px 6px;border-radius:11px;font-variant-numeric:tabular-nums;}
.slot-option input:checked+span {background:#345df5;border-color:#345df5;}
.public-hero {background:linear-gradient(110deg,#eef4ff,#f7f4ff);}
.public-service {transition:transform .2s,box-shadow .2s,border-color .2s;}

@media (max-width:1250px) {
  .booking-layout {grid-template-columns:minmax(0,1fr) 275px;gap:20px;}
  .dashboard-content {padding-inline:25px;}
}
@media (max-width:1000px) {
  .sidebar {position:fixed;right:-285px;top:0;}
  .sidebar.open {right:0;}
  .stats-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .booking-layout {grid-template-columns:1fr;}
  .booking-summary {position:static;grid-row:1;margin-top:0;}
  .booking-progress {justify-content:flex-start;}
  .app-top-tools {gap:12px;}
}
@media (max-width:760px) {
  .hero {min-height:0;}
  .app-top {padding:0 14px;}
  .app-today {display:none;}
  .user-chip {padding:5px 7px;}
  .dashboard-content {padding:24px 15px 60px;}
  .page-heading h1 {font-size:23px;}
  .panel-banner {padding:23px 21px;min-height:0;gap:16px;}
  .panel-banner h2 {font-size:22px;}
  .banner-link {align-items:flex-start;}
  .stats-grid {gap:10px;}
  .stat-card {min-height:126px;padding:16px 13px;}
  .stat-icon {width:37px;height:37px;}
  .stat-card strong {font-size:29px;}
  .setup-card {padding:19px 15px;}
  .setup-header {gap:10px;}
  .setup-header h2 {font-size:17px;}
  .setup-progress {min-width:76px;height:70px;}
  .setup-progress strong {font-size:20px;}
  .setup-steps {grid-template-columns:1fr;}
  .setup-step {padding:12px 10px;}
  .panel-card {padding:19px 16px;}
  .booking-clinic {margin-top:17px;padding:18px 15px;gap:13px;}
  .booking-clinic-logo {width:67px;height:67px;border-radius:16px;}
  .booking-clinic h1 {font-size:20px;}
  .booking-clinic p {font-size:10px;}
  .booking-progress {gap:9px;padding-top:18px;}
  .booking-progress span {font-size:10px;gap:5px;}
  .booking-progress span b {height:23px;width:23px;}
  .booking-progress i {width:18px;}
  .booking-layout {padding-top:15px;}
  .booking-title h2 {font-size:21px;}
  .booking-card {padding:20px 16px;}
  .booking-controls-row {grid-template-columns:1fr;gap:4px;}
  .service-choice-body {padding:12px 10px;gap:9px;}
  .service-choice-name b {font-size:12px;}
  .service-choice-name small {font-size:10px;}
  .booking-summary {padding:20px 18px;}
  .admin-form-intro {padding:13px;align-items:flex-start;}
  .admin-form-intro h2 {font-size:17px;}
  .form-footer {flex-direction:column;align-items:stretch;}
  .form-footer .btn {width:100%;}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;}
}
/* Nobatik 1.2 — responsive owner/staff appointment calendar and rescheduling */
.calendar-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;margin:14px 0 22px}
.calendar-week-nav{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.calendar-staff-filter{display:flex;align-items:flex-end;gap:10px}.calendar-staff-filter .field{margin:0;min-width:190px}
.calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;align-items:stretch;direction:rtl;overflow-x:auto;padding:6px 1px 12px;min-height:390px}
.calendar-day{min-width:130px;border:1px solid #e9eefd;background:#f8faff;border-radius:17px;display:flex;flex-direction:column;overflow:hidden}
.calendar-day.is-today{border:2px solid #4e69f1;box-shadow:0 10px 30px rgba(60,90,220,.10)}
.calendar-day header{padding:13px 10px;background:white;border-bottom:1px solid #e9eefd;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;min-height:107px}
.calendar-day header strong{color:#1b2b53;font-size:14px}.calendar-day header time{font-size:12px;color:#526389;line-height:1.8}.calendar-day header span{font-size:11px;color:#8796b0}
.calendar-day-list{padding:8px;display:flex;flex-direction:column;gap:8px;flex:1}
.calendar-event{display:flex;flex-direction:column;gap:5px;padding:11px 9px;border:1px solid #d9e3ff;border-right:3px solid #4669ef;border-radius:10px;background:white;color:#27375d;text-decoration:none;transition:transform .15s,box-shadow .15s}
.calendar-event:hover{transform:translateY(-2px);box-shadow:0 7px 19px rgba(34,57,130,.11)}
.calendar-event strong{font-size:12px;line-height:1.8;overflow-wrap:anywhere}.calendar-event small{font-size:11px;color:#7f8ba5;overflow-wrap:anywhere}.calendar-event .cal-time{align-self:flex-start;direction:ltr;color:#345df5;background:#eef2ff;border-radius:7px;padding:3px 7px;font-weight:700;font-size:12px}.calendar-event .pill{align-self:flex-start;font-size:10px}
.calendar-event.cal-cancelled,.calendar-event.cal-no_show{opacity:.55;border-right-color:#d46c79}.calendar-event.cal-confirmed{border-right-color:#1cae90}.calendar-event.cal-completed{border-right-color:#81a1b2}
.cal-empty{text-align:center;color:#adb7cc;padding:23px 3px;font-size:12px}
.reschedule-current{display:flex;gap:15px;flex-wrap:wrap;align-items:center;background:#f7f9ff;border:1px solid #e8edfd;padding:18px 20px;border-radius:15px}.reschedule-current strong{color:#1c2c52}.reschedule-current span,.reschedule-current time{color:#7585a2;font-size:13px}
.reschedule-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:10px;margin:20px 0}.reschedule-slot{position:relative;cursor:pointer}.reschedule-slot input{position:absolute;opacity:0;pointer-events:none}.reschedule-slot span{display:block;border:1px solid #dce4f9;border-radius:10px;background:white;text-align:center;padding:12px;font-weight:700;color:#314b80;direction:ltr}.reschedule-slot input:checked+span{background:#345df5;color:white;border-color:#345df5;box-shadow:0 8px 19px rgba(52,93,245,.18)}.reschedule-slot input:focus-visible+span{outline:3px solid #8ab4ff;outline-offset:3px}
.sms-event{border:1px solid #e6ecf9;padding:20px;border-radius:14px;margin:16px 0}.sms-event legend{font-weight:800;color:#24345c;padding:0 10px}.sms-config-status{display:flex;gap:10px;margin:15px 0}.sms-settings-form>.check-item{display:flex;margin:20px 0}.sms-settings-form .field textarea{min-height:110px;direction:ltr;text-align:left;font-family:monospace}.sms-settings-form .field input[type=number]{direction:ltr;text-align:left}
@media(max-width:1100px){.calendar-week{grid-template-columns:repeat(7,minmax(156px,1fr))}}@media(max-width:650px){.calendar-week{grid-template-columns:repeat(7,minmax(150px,1fr))}.calendar-toolbar{align-items:stretch}.calendar-staff-filter{flex-wrap:wrap}.reschedule-current{align-items:flex-start;flex-direction:column}}