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

/* بطاقة الأخصائي (sticky) بخلفية متدرّجة */
.cons-hero { position: relative; border-radius: 26px; overflow: hidden; background: linear-gradient(158deg,#0E8A82 0%,#15A99F 100%); padding: 34px 30px 30px; box-shadow: 0 18px 44px rgba(14,138,130,.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: #0c7a72; }
.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: #D8F1EE; 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: #D8F1EE; }

/* بطاقات الميزات الصغيرة تحت البطاقة */
.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: #F3FAF8; border: 1.5px solid #D5EBE7; 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: 0 10px 24px rgba(21,169,159,.3); }
.cons-card__submit:hover { background: var(--c-teal-d); }
.cons-card__cart { width: 56px; border: 2px solid #D5EBE7; 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 #CBE6E1; 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 #D5EBE7; 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: #E3F0DD; 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; }