/* Hero بحث + بطاقات إتاحة بطراز Zocdoc — الصفحة الرئيسية فقط.
   متغيرات --zd-* محلية النطاق، لا تُعدِّل توكينات --primary/--fd-* العامة. */
:root {
    --zd-navy: #1C2B5B;
    --zd-navy-deep: #131F45;
    --zd-navy-soft: #E7EAF3;
    --zd-coral: #F86A5B;
    --zd-coral-deep: #E1503F;
    --zd-slot-bg: #EAF2FF;
    --zd-slot-border: #CFE0FB;
    --zd-star: #F5A623;
    --zd-surface: #FFFFFF;
    --zd-text: #14203F;
    --zd-text-2: #5C6784;
    --zd-border: #E4E7F1;
    --zd-radius: 16px;
    --zd-field-bg: #F7F8FC;
}
html[data-theme="dark"] {
    --zd-navy: #2C3E7A;
    --zd-navy-soft: #1C2440;
    --zd-surface: #1E2338;
    --zd-text: #E7EAF3;
    --zd-text-2: #A6ACC6;
    --zd-border: #313A5C;
    --zd-field-bg: #232A45;
    --zd-slot-bg: #1C2A44;
    --zd-slot-border: #2C3E5F;
}

/* ── Hero ── */
.zd-hero {
    background: linear-gradient(135deg, var(--zd-navy) 0%, var(--zd-navy-deep) 100%);
    border-radius: var(--zd-radius);
    padding: 28px 24px;
    margin-bottom: 18px;
    color: #fff;
}
.zd-hero-inner { max-width: 780px; }
.zd-hero-title { font-size: 22px; font-weight: 800; margin: 0 0 6px; color: #fff; }
.zd-hero-sub { font-size: 14px; color: rgba(255,255,255,.82); margin: 0 0 18px; }

.zd-hero-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: var(--zd-surface);
    border-radius: 14px;
    padding: 10px;
}
.zd-hero-field {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--zd-field-bg);
    border: 1px solid var(--zd-border);
    border-radius: 10px;
    padding: 10px 12px;
    flex: 1 1 180px;
    min-width: 150px;
    color: var(--zd-text-2);
}
.zd-hero-field-grow { flex: 2 1 220px; }
.zd-hero-field i { color: var(--zd-navy); font-size: 14px; }
.zd-hero-field input,
.zd-hero-field select {
    border: 0;
    background: transparent;
    width: 100%;
    font-size: 14px;
    color: var(--zd-text);
}
/* لا نُخفي outline افتراضياً — فقط نستبدله بحلقة تركيز واضحة عند التنقل بلوحة المفاتيح */
.zd-hero-field input:focus-visible,
.zd-hero-field select:focus-visible {
    outline: 2px solid var(--zd-navy);
    outline-offset: 2px;
}
.zd-hero-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--zd-coral);
    /* لون ثابت غير مرتبط بالثيم: خلفية الزر المرجانية لا تتغيّر بين الوضعين، ونحتاج نسبة تباين ≥4.5:1
       مع النص — الأبيض على هذا المرجاني يعطي ~2.9:1 فقط (فشل WCAG AA)، بينما هذا اللون الداكن يعطي ~5.5:1 */
    color: #14203F;
    border: 0;
    border-radius: 10px;
    padding: 0 22px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: filter .15s ease;
}
.zd-hero-btn:hover { filter: brightness(1.07); }

.zd-hero-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
.zd-hero-today {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255,255,255,.9);
    cursor: pointer;
}
.zd-hero-today input { accent-color: var(--zd-coral); }
.zd-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff;
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease;
}
.zd-hero-chip:hover { background: rgba(255,255,255,.22); color: #fff; }
.zd-hero-chip:disabled { cursor: default; opacity: .75; }

.zd-hero-trust {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: rgba(255,255,255,.78);
    display: flex;
    align-items: center;
    gap: 6px;
}
.zd-hero-trust strong { color: #fff; }

/* ── Cards section ── */
.zd-cards-section { margin-bottom: 20px; }
.zd-cards-title { font-size: 16px; font-weight: 700; color: var(--zd-text); margin: 0 0 12px; }
.zd-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.zd-card {
    background: var(--zd-surface);
    border: 1px solid var(--zd-border);
    border-radius: var(--zd-radius);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow .15s ease, transform .15s ease;
}
.zd-card:hover { box-shadow: 0 8px 20px rgba(28,43,91,.10); transform: translateY(-1px); }

.zd-card-top { display: flex; gap: 10px; align-items: flex-start; }
.zd-card-av {
    width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
    border: 1px solid var(--zd-border); flex-shrink: 0;
}
.zd-card-info { min-width: 0; }
.zd-card-name { font-size: 14.5px; font-weight: 700; margin: 0 0 2px; }
.zd-card-name a { color: var(--zd-text); text-decoration: none; }
.zd-card-name a:hover { color: var(--zd-navy); }
.zd-card-cat { font-size: 12.5px; color: var(--zd-navy); font-weight: 600; margin-bottom: 4px; }
.zd-card-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--zd-text-2); }
.zd-card-rating { color: var(--zd-text); font-weight: 600; }
.zd-card-rating i { color: var(--zd-star); }
.zd-card-rating-count { color: var(--zd-text-2); font-weight: 400; }

.zd-card-slots { border-top: 1px dashed var(--zd-border); padding-top: 10px; }
.zd-slot-day { font-size: 12px; color: var(--zd-text-2); margin-bottom: 6px; }
.zd-slot-row { display: flex; flex-wrap: wrap; gap: 6px; }
.zd-slot-btn {
    background: var(--zd-slot-bg);
    border: 1px solid var(--zd-slot-border);
    color: var(--zd-navy);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease;
    /* الوقت رقمان بفاصل شرطة ضمن سياق RTL — بدون هذا يُعاد ترتيبهما بصرياً (bidi) فيبدو معكوساً */
    direction: ltr;
    unicode-bidi: isolate;
}
.zd-slot-btn:hover { background: var(--zd-slot-border); }

.zd-slot-day-only,
.zd-slot-none {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--zd-navy);
    text-decoration: none;
    font-weight: 600;
}
.zd-slot-none { color: var(--zd-text-2); }

@media (max-width: 640px) {
    .zd-hero { padding: 20px 16px; }
    .zd-hero-title { font-size: 18px; }
    .zd-hero-form { flex-direction: column; }
    .zd-hero-field, .zd-hero-field-grow { flex: 1 1 auto; }
    .zd-cards-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
    .zd-cards-grid { grid-template-columns: 1fr; }
}