/* =====================================================================
   consultations.css — صفحة الاستشارات الهاتفية فقط  •  بعد site.css
   السلة/الإشعار من site.css. (q-drawer / q-toast)
   ===================================================================== */

/* =====================================================================
   اختيار المستشار — يظهر فقط عند وجود أكثر من مستشار.
   تبويبات: الأوّل مفتوح افتراضيًّا، والبقيّة بنقرة (بلا إعادة تحميل).
   ===================================================================== */
.cons-pick { background: #fff; border: 1.5px solid var(--line); border-radius: 22px; padding: 18px 18px 20px; box-shadow: 0 10px 30px rgba(20,90,84,.06); margin-bottom: 24px; }
.cons-pick__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cons-pick__bar { width: 7px; height: 22px; border-radius: 5px; background: var(--c-teal); flex-shrink: 0; }
.cons-pick__title { font-family: var(--font-head); font-weight: 800; font-size: 19px; margin: 0; color: var(--c-ink); }
.cons-pick__count { margin-inline-start: auto; font-size: 12.5px; font-weight: 700; color: var(--c-muted-2); background: var(--bg-page); padding: 5px 12px; border-radius: var(--r-pill); white-space: nowrap; }

.cons-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 12px; }
.cons-tab { display: flex; align-items: center; gap: 12px; width: 100%; text-align: right; font-family: var(--font-body); background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 12px 14px; cursor: pointer; transition: border-color .16s, background .16s, box-shadow .16s; }
.cons-tab:hover { border-color: rgba(var(--c-teal-rgb),.42); background: var(--bg-panel); }
.cons-tab.is-active { border-color: var(--c-teal); background: var(--bg-soft-teal); box-shadow: 0 10px 24px rgba(var(--c-teal-d-rgb),.16); }
.cons-tab:focus-visible { outline: 3px solid var(--c-teal-dd); outline-offset: 2px; }
.cons-tab__ava { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(20,90,84,.14); background: var(--bg-soft-teal); }
.cons-tab__ava img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cons-tab__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cons-tab__name { font-family: var(--font-head); font-weight: 800; font-size: 16px; color: var(--c-ink); line-height: 1.3; }
.cons-tab__role { font-size: 12.5px; font-weight: 600; color: var(--c-muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cons-tab__slots { font-size: 11.5px; font-weight: 700; color: var(--c-lime-d); }
.cons-tab__slots.is-none { color: var(--c-muted-3); }
.cons-tab__price { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.1; font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--c-teal); }
.cons-tab__price small { font-family: var(--font-body); font-size: 10.5px; font-weight: 700; color: var(--c-muted-2); }

/* لوحة المستشار المحدَّد */
.cons-panel[hidden] { display: none; }
.cons-panel.is-active { animation: q-fade .2s ease; }

/* بطاقة الأخصائي (sticky) بخلفية متدرّجة */
.cons-hero { position: relative; border-radius: 26px; overflow: hidden; background: linear-gradient(158deg, var(--c-teal-d) 0%, var(--c-teal) 100%); padding: 34px 30px 30px; box-shadow: 0 18px 44px rgba(var(--c-teal-d-rgb),.26); color: #fff; text-align: center; }
.cons-hero__content { position: relative; z-index: 2; }
.cons-hero__badge { width: 62px; height: 62px; border-radius: 18px; background: rgba(255,255,255,.16); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.cons-hero__avatar { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 18px; overflow: hidden; border: 4px solid rgba(255,255,255,.35); box-shadow: 0 12px 30px rgba(0,0,0,.18); background: var(--c-teal-dd); }
.cons-hero h2 { font-family: var(--font-head); font-weight: 800; font-size: 26px; margin: 0 0 6px; color: #fff; }
.cons-hero__role { font-size: 14.5px; color: var(--c-on-brand); font-weight: 600; margin-bottom: 18px; }
.cons-hero__pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.14); padding: 8px 16px; border-radius: var(--r-pill); font-weight: 700; font-size: 13.5px; margin-bottom: 20px; }
.cons-hero__price { font-family: var(--font-head); font-weight: 800; font-size: 42px; }
.cons-hero__price-unit { font-size: 16px; font-weight: 700; color: var(--c-on-brand); }

/* بطاقات الميزات الصغيرة تحت البطاقة */
.cons-mini { display: flex; gap: 12px; margin-top: 14px; }
.cons-mini__item { flex: 1; background: #fff; border-radius: 14px; padding: 14px 10px; text-align: center; box-shadow: 0 6px 16px rgba(20,90,84,.06); font-size: 12px; color: var(--c-muted); font-weight: 700; }

/* بطاقة الحجز */
.cons-card { background: rgba(var(--c-teal-rgb),.045); border: 1.5px solid rgba(var(--c-teal-rgb),.20); border-radius: 22px; padding: 24px; }
.cons-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.cons-card__title { display: flex; align-items: center; gap: 9px; }
.cons-card__bar { width: 7px; height: 22px; border-radius: 5px; background: var(--c-teal); }
.cons-card__title h3 { font-family: var(--font-head); font-weight: 800; font-size: 19px; margin: 0; color: var(--c-ink); }
.cons-card__price { font-family: var(--font-head); font-weight: 800; font-size: 30px; color: var(--c-teal); }
.cons-card__price-unit { font-size: 14px; color: var(--c-muted-2); font-weight: 700; }
.cons-card__label { display: block; font-size: 13px; font-weight: 700; color: var(--c-muted); margin-bottom: 8px; }
.cons-card__actions { display: flex; gap: 12px; }
.cons-card__submit { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--c-teal); color: #fff; border: none; cursor: pointer; font-family: var(--font-body); font-weight: 800; font-size: 16.5px; padding: 16px; border-radius: 14px; box-shadow: var(--sh-btn-teal); }
.cons-card__submit:hover { background: var(--c-teal-d); }
.cons-card__cart { width: 56px; border: 2px solid rgba(var(--c-teal-rgb),.20); border-radius: 14px; background: #fff; cursor: pointer; font-size: 20px; color: var(--c-teal); }
.cons-card__hint { font-size: 12px; color: var(--c-muted); font-weight: 600; margin-top: 12px; display: flex; align-items: center; gap: 7px; justify-content: center; }

/* حالة عدم توفّر مواعيد — متناسقة مع بطاقة الحجز */
.cons-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; background: #fff; border: 1.5px dashed rgba(var(--c-teal-rgb),.28); border-radius: 16px; padding: 30px 24px; margin-top: 4px; }
.cons-empty__icon { width: 58px; height: 58px; border-radius: 16px; background: var(--bg-soft-teal); color: var(--c-teal-d); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.cons-empty__title { font-family: var(--font-head); font-weight: 800; font-size: 16.5px; color: var(--c-ink); margin: 0; }
.cons-empty__text { font-size: 13.5px; line-height: 1.8; color: var(--c-muted); font-weight: 600; margin: 4px 0 0; max-width: 340px; }
.cons-empty--page { max-width: 480px; margin: 0 auto; padding: 44px 28px; box-shadow: 0 10px 30px rgba(20,90,84,.06); }

/* قائمة المواعيد (dropdown) */
.cons-dd { position: relative; margin-bottom: 18px; }
.cons-dd__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1.5px solid rgba(var(--c-teal-rgb),.20); border-radius: 14px; padding: 12px 14px; cursor: pointer; }
.cons-dd__cal { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-soft-teal); }
.cons-dd__menu { position: absolute; top: calc(100% + 8px); right: 0; left: 0; z-index: 41; background: #fff; border-radius: 16px; box-shadow: 0 18px 44px rgba(12,68,63,.18); border: 1px solid var(--line); padding: 8px; animation: q-fade .16s ease; max-height: 340px; overflow-y: auto; }
.cons-dd__group { font-size: 11.5px; font-weight: 800; color: #9BB0AC; padding: 8px 12px 6px; }
.cons-dd__row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; cursor: pointer; transition: background .12s; }
.cons-dd__row:hover { background: var(--bg-page); }
.cons-dd__date { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-soft-teal); color: var(--c-teal-d); }
.cons-dd__date b { font-family: var(--font-head); font-weight: 800; font-size: 16px; line-height: 1; }
.cons-dd__date span { font-size: 9px; }
.cons-dd__daytime { font-weight: 800; font-size: 14.5px; color: var(--c-ink); }

/* خطوات «كيف تتم الاستشارة» */
.cons-step { background: var(--bg-panel); border-radius: 22px; padding: 30px 24px; text-align: center; position: relative; height: 100%; }
.cons-step__num { position: absolute; top: 16px; left: 20px; font-family: var(--font-head); font-weight: 800; font-size: 40px; color: rgba(var(--c-teal-rgb),.18); line-height: 1; }
.cons-step__icon { width: 90px; height: 90px; border-radius: 24px; background: var(--track-soft); border: 2px solid var(--track); color: var(--track); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.cons-step h3 { font-family: var(--font-head); font-weight: 700; font-size: 18px; margin: 0 0 8px; color: var(--c-ink); }
.cons-step p { font-size: 13.5px; line-height: 1.75; color: var(--c-muted); font-weight: 500; margin: 0; }

/* الأسئلة الشائعة (FAQ accordion) */
.cons-faq { display: flex; flex-direction: column; gap: 12px; }
.cons-faq__item { background: #fff; border-radius: 16px; padding: 20px 24px; cursor: pointer; box-shadow: 0 8px 22px rgba(20,90,84,.06); }
.cons-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cons-faq__q h4 { font-family: var(--font-head); font-weight: 700; font-size: 16.5px; margin: 0; color: var(--c-ink); }
.cons-faq__sign { width: 28px; height: 28px; border-radius: 9px; background: var(--bg-soft-teal); color: var(--c-teal-d); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; flex-shrink: 0; }
.cons-faq__a { font-size: 14.5px; line-height: 1.9; color: var(--c-muted); font-weight: 500; margin: 14px 0 0; }