/* ==========================================================================
   نخبة الأطباء — Components
   Shared by the website and the design system (bundle.css). Uses tokens.css.
   RTL-first: logical properties only (inline-start = right in Arabic).
   ========================================================================== */

/* ---------- Icon ---------- */
.ic{width:1.25em;height:1.25em;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.ic-fill{fill:currentColor;stroke:none}
/* Icons that point "forward" must flip in RTL */
[dir="rtl"] .ic-dir{transform:scaleX(-1)}

/* ---------- Button ---------- */
.btn{
  --btn-h:48px;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--btn-h);padding:0 var(--space-5);
  border:1px solid transparent;border-radius:var(--radius-md);
  font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1.2;white-space:nowrap;
  text-decoration:none;cursor:pointer;user-select:none;
  transition:background-color var(--duration-fast) ease,border-color var(--duration-fast) ease,color var(--duration-fast) ease,box-shadow var(--duration-fast) ease,transform var(--duration-fast) ease;
}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn .ic{width:20px;height:20px}

.btn-primary{background:var(--primary);color:var(--on-dark);box-shadow:var(--shadow-primary)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-gold{background:var(--accent);color:var(--gold-900)}
.btn-gold:hover{background:var(--gold-500)}
.btn-outline{background:var(--surface);color:var(--primary);border-color:var(--purple-200)}
.btn-outline:hover{border-color:var(--primary);background:var(--purple-50)}
.btn-ghost{background:transparent;color:var(--primary)}
.btn-ghost:hover{background:var(--purple-50)}
.btn-on-dark{background:rgba(255,255,255,.08);color:var(--on-dark);border-color:rgba(255,255,255,.28)}
.btn-on-dark:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}
.btn-danger{background:var(--danger);color:var(--on-dark)}
.btn-danger:hover{filter:brightness(.92)}

.btn-sm{--btn-h:40px;padding:0 var(--space-4);font-size:14px;border-radius:10px}
.btn-lg{--btn-h:56px;padding:0 var(--space-6);font-size:16px}
.btn-block{width:100%}

/* On dark grounds the focus ring turns gold */
.on-dark .btn:focus-visible,.on-dark a:focus-visible{outline-color:var(--focus-on-dark)}

/* ---------- Icon button ---------- */
.icon-btn{
  width:44px;height:44px;display:inline-grid;place-items:center;
  border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface);color:var(--purple-700);cursor:pointer;
  transition:border-color var(--duration-fast),background-color var(--duration-fast);
}
.icon-btn:hover{border-color:var(--purple-200);background:var(--purple-50)}
.icon-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.icon-btn .ic{width:20px;height:20px}

/* ---------- Badge ---------- */
.badge{
  display:inline-flex;align-items:center;gap:var(--space-1);
  padding:4px 10px;border-radius:var(--radius-pill);
  font-family:var(--font-body);font-size:13px;font-weight:600;line-height:1.5;white-space:nowrap;
}
.badge .ic{width:15px;height:15px}
.badge-verified{background:var(--purple-50);color:var(--purple-700)}
.badge-tag{background:var(--purple-50);color:var(--purple-700)}
.badge-success{background:var(--success-bg);color:var(--success)}
.badge-warning{background:var(--gold-100);color:var(--gold-700)}
.badge-danger{background:var(--danger-bg);color:var(--danger)}
.badge-rating{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.badge-rating .ic{color:var(--gold-500)}

/* ---------- Form field ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-4)}
.field-label{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--ink)}
.field-hint{font-size:13px;color:var(--ink-muted)}
.field-error{font-size:13px;color:var(--danger)}
.input,.select,.textarea{
  width:100%;min-height:48px;padding:0 var(--space-4);
  border:1px solid var(--border-strong);border-radius:var(--radius-md);
  background:var(--surface);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.5;
  transition:border-color var(--duration-fast),box-shadow var(--duration-fast);
}
.input::placeholder,.textarea::placeholder{color:var(--ink-muted)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--purple-400)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(118,49,217,.22)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.input:disabled{background:var(--surface-muted);color:var(--ink-muted)}
.textarea{min-height:128px;padding-block:var(--space-3);resize:vertical}
.select{appearance:none;padding-inline-end:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b6280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 14px center;background-size:18px}
[dir="ltr"] .select{background-position:right 14px center}
.input-icon{position:relative}
.input-icon .ic{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);color:var(--ink-muted);pointer-events:none}
.input-icon .input{padding-inline-start:44px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.check{display:inline-flex;align-items:center;gap:var(--space-2);font-size:14px;color:var(--ink-soft);cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--primary);margin:0}

/* ---------- Segmented control (auth tabs) ---------- */
.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:var(--radius-md);background:var(--surface-muted)}
.segmented a,.segmented button{
  display:grid;place-items:center;min-height:42px;border:0;border-radius:9px;background:transparent;
  font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--ink-soft);cursor:pointer;text-decoration:none}
.segmented a:hover,.segmented button:hover{color:var(--primary)}
.segmented [aria-current="page"],.segmented [aria-selected="true"]{background:var(--surface);color:var(--primary);box-shadow:var(--shadow-sm)}

/* ---------- Card ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-6)}
.card-title{font-family:var(--font-display);font-size:22px;line-height:1.5;font-weight:700;color:var(--ink);margin:0 0 var(--space-4)}

/* ---------- Section header ---------- */
.section-head{max-width:720px;margin:0 auto var(--space-8);text-align:center}
.section-head.is-start{margin-inline:0;text-align:start}
.section-head .eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--gold-700);margin-bottom:var(--space-2)}
.section-head .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-500)}
.section-head h2{font-family:var(--font-display);font-size:32px;line-height:1.4;font-weight:800;color:var(--purple-800);margin:0 0 var(--space-2)}
.section-head p{font-size:17px;line-height:1.8;color:var(--ink-soft);margin:0}
.on-dark .section-head h2{color:var(--on-dark)}
.on-dark .section-head p{color:var(--on-dark-muted)}
.on-dark .section-head .eyebrow{color:var(--gold-300)}

/* ---------- Doctor card ---------- */
.doctor-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--duration-base) ease,box-shadow var(--duration-base) ease,border-color var(--duration-base)}
.doctor-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--purple-200)}
.doctor-card__media{position:relative;aspect-ratio:1/1;background:var(--surface-muted);overflow:hidden}
.doctor-card__media img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.doctor-card__media .badge-rating{position:absolute;inset-inline-end:12px;bottom:12px}
.doctor-card__body{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4) var(--space-5) var(--space-5);flex:1}
.doctor-card__name{font-family:var(--font-display);font-size:18px;line-height:1.5;font-weight:700;color:var(--ink);margin:0}
.doctor-card__name a{color:inherit;text-decoration:none}
.doctor-card__name a:hover{color:var(--primary)}
.doctor-card__specialty{font-size:14px;font-weight:600;color:var(--primary)}
.doctor-card__meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin:var(--space-2) 0 var(--space-4);font-size:13px;color:var(--ink-muted)}
.doctor-card__meta span{display:inline-flex;align-items:center;gap:4px}
.doctor-card__meta .ic{width:16px;height:16px}
.doctor-card__actions{margin-top:auto;display:grid;grid-template-columns:1fr auto;gap:var(--space-2)}
.doctor-card__actions .icon-btn{width:48px;height:48px}

/* ---------- Feature card (services, specialties, values) ---------- */
.feature-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:var(--space-6);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);color:inherit;text-decoration:none;transition:transform var(--duration-base) ease,box-shadow var(--duration-base),border-color var(--duration-base)}
a.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--purple-200)}
a.feature-card:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.feature-card__icon{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:var(--purple-50);color:var(--primary)}
.feature-card__icon .ic{width:26px;height:26px}
.feature-card__icon.is-gold{background:var(--gold-50);color:var(--gold-700)}
.feature-card h3{font-family:var(--font-display);font-size:18px;line-height:1.5;font-weight:700;color:var(--ink);margin:0}
.feature-card p{font-size:14px;line-height:1.75;color:var(--ink-soft);margin:0}
.feature-card__more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--primary)}
.feature-card__more .ic{width:16px;height:16px}

/* ---------- Stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--purple-900);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);color:var(--on-dark)}
.stats__item{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-6);position:relative}
.stats__item+.stats__item::before{content:"";position:absolute;inset-inline-start:0;top:24%;bottom:24%;width:1px;background:rgba(255,255,255,.14)}
.stats__icon{width:48px;height:48px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;background:rgba(255,211,110,.12);color:var(--gold-300)}
.stats__icon .ic{width:24px;height:24px}
.stats__value{display:block;font-family:var(--font-display);font-size:28px;line-height:1.2;font-weight:800;color:var(--gold-300);font-variant-numeric:tabular-nums}
.stats__label{display:block;font-size:14px;color:var(--on-dark-muted)}

/* ---------- Stepper ---------- */
.stepper{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-6);padding:0;list-style:none}
.stepper li{display:flex;align-items:center;gap:var(--space-2);font-size:14px;font-weight:500;color:var(--ink-muted)}
.stepper li+li::before{content:"";width:32px;height:2px;border-radius:2px;background:var(--border);margin-inline-end:var(--space-1)}
.stepper .num{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--surface-muted);color:var(--ink-soft);font-weight:700;font-size:14px}
.stepper [aria-current="step"]{color:var(--ink);font-weight:700}
.stepper [aria-current="step"] .num{background:var(--primary);color:var(--on-dark)}
.stepper .is-done .num{background:var(--purple-100);color:var(--primary)}

/* ---------- Time slots ---------- */
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}
.slot{min-height:44px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--ink-soft);cursor:pointer;font-variant-numeric:tabular-nums;transition:all var(--duration-fast)}
.slot:hover{border-color:var(--purple-400);color:var(--primary)}
.slot:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.slot[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-dark)}
.slot:disabled{background:var(--surface-muted);color:var(--ink-muted);text-decoration:line-through;cursor:not-allowed}

/* ---------- Summary list ---------- */
.summary{margin:0;padding:0}
.summary div{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--border);font-size:15px}
.summary dt{color:var(--ink-muted)}
.summary dd{margin:0;font-weight:600;color:var(--ink)}
.summary .is-total dd{font-size:18px;color:var(--primary)}

/* ---------- Accordion (FAQ) ---------- */
.accordion{display:flex;flex-direction:column;gap:var(--space-3)}
.accordion details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);transition:border-color var(--duration-fast),box-shadow var(--duration-fast)}
.accordion details[open]{border-color:var(--purple-200);box-shadow:var(--shadow-sm)}
.accordion summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-6);font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--ink);cursor:pointer;list-style:none}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary .ic{color:var(--primary);transition:transform var(--duration-base)}
.accordion details[open] summary .ic{transform:rotate(180deg)}
.accordion summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:var(--radius-lg)}
.accordion .answer{padding:0 var(--space-6) var(--space-5);font-size:15px;line-height:1.85;color:var(--ink-soft)}
.accordion .answer p{margin:0}

/* ---------- Data table ---------- */
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg)}
.data-table{width:100%;min-width:640px;border-collapse:collapse;font-size:14px}
.data-table th,.data-table td{padding:14px var(--space-5);text-align:start;border-bottom:1px solid var(--border)}
.data-table th{background:var(--surface-subtle);font-weight:600;color:var(--ink-soft);font-size:13px}
.data-table tr:last-child td{border-bottom:0}
.data-table td{color:var(--ink)}
.data-table .who{display:flex;align-items:center;gap:var(--space-3);font-weight:600}
.data-table .who img{width:36px;height:36px;border-radius:50%;object-fit:cover}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0 0 var(--space-3);padding:0;list-style:none;font-size:14px}
.breadcrumbs li+li::before{content:"/";margin-inline-end:var(--space-2);opacity:.5}
.breadcrumbs a{color:inherit;text-decoration:none;opacity:.85}
.breadcrumbs a:hover{opacity:1;text-decoration:underline}
.breadcrumbs [aria-current="page"]{font-weight:600}

/* ---------- Toast ---------- */
.toast{position:fixed;inset-inline-start:24px;bottom:24px;z-index:2000;display:flex;align-items:center;gap:var(--space-3);max-width:calc(100vw - 48px);padding:14px 18px;border-radius:var(--radius-md);background:var(--purple-950);color:var(--on-dark);font-size:15px;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity var(--duration-base),transform var(--duration-base)}
.toast .ic{color:var(--gold-300)}
.toast.is-visible{opacity:1;transform:none}
/* Compact stats: two columns, icon above value — for narrow containers */
.stats.is-compact{grid-template-columns:1fr 1fr}
.stats.is-compact .stats__item{flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.stats.is-compact .stats__item:nth-child(3)::before{display:none}
.stats.is-compact .stats__item:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}