/*
 * components.css - المكوّنات المشتركة
 * أزرار، حقول، نوافذ، أيقونات، عناوين الأقسام، نجوم التقييم.
 */

/* ---------------- الأزرار ---------------- */

.bt-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bt-sp-2);
  padding: .75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--bt-radius-pill);
  background: var(--bt-btn-bg);
  color: var(--bt-btn-text);
  font-size: var(--bt-fs-sm);
  font-weight: var(--bt-fw-semibold);
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--bt-transition), color var(--bt-transition),
    border-color var(--bt-transition), transform var(--bt-transition),
    box-shadow var(--bt-transition);
}

/*
 * شريحة ضوء صريحة تمر على الزر عند الهوفر.
 * بلون واحد شفاف بدون أي تدرج لوني.
 */
.bt-btn::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -40%;
  z-index: -1;
  width: 22%;
  background: rgba(255, 255, 255, .22);
  transform: skewX(-18deg);
  pointer-events: none;
}

.bt-btn:hover::after,
.bt-btn:focus-visible::after {
  animation: bt-shine .75s ease forwards;
}

@keyframes bt-shine {
  from { inset-inline-start: -40%; }
  to { inset-inline-start: 120%; }
}

/*
 * الهوفر الموحّد لكل أزرار الموقع:
 * الخلفية تتحوّل إلى اللون الأساسي والكلام أبيض.
 */
.bt-btn:hover,
.bt-btn:focus-visible {
  background: var(--bt-primary);
  border-color: var(--bt-primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(14, 124, 134, .28);
}

.bt-btn--secondary {
  background: var(--bt-primary);
  color: #fff;
}

.bt-btn--ghost {
  background: transparent;
  border-color: var(--bt-border);
  color: var(--bt-text);
}

.bt-btn--light {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
  backdrop-filter: blur(4px);
}

.bt-btn--whatsapp {
  background: var(--bt-whatsapp);
  color: #fff;
}

.bt-btn--block { width: 100%; }
.bt-btn--lg { padding: 1rem 2rem; font-size: 1rem; }

.bt-btn__icon { font-size: 1.05em; }

.bt-btn__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: bt-spin .7s linear infinite;
}

@keyframes bt-spin { to { transform: rotate(360deg); } }

.bt-btn.is-loading { pointer-events: none; opacity: .75; }

/* زر أيقونة دائري */

.bt-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--bt-border);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  transition: background var(--bt-transition), border-color var(--bt-transition);
}

.bt-icon-btn:hover,
.bt-icon-btn:focus-visible {
  background: var(--bt-primary);
  border-color: var(--bt-primary);
  color: #fff;
}

/* ---------------- عنوان القسم ---------------- */

.bt-section-head {
  max-width: 720px;
  margin-bottom: var(--bt-sp-6);
}

/* شارة القسم: نقطة بلون الهوية الثانوي ثم النص */
.bt-section-head__sub {
  display: inline-flex;
  align-items: center;
  gap: var(--bt-sp-2);
  margin-bottom: var(--bt-sp-3);
  padding: .32rem 1rem .32rem .8rem;
  border-radius: var(--bt-radius-pill);
  background: var(--bt-primary-light);
  color: var(--bt-primary-dark);
  font-size: var(--bt-fs-xs);
  font-weight: var(--bt-fw-semibold);
}

.bt-section-head__sub::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bt-secondary);
}

/* خط قصير بلون الهوية أسفل العنوان يعطي القسم بداية واضحة */
.bt-section-head__title {
  position: relative;
  margin-bottom: var(--bt-sp-4);
  padding-bottom: var(--bt-sp-3);
}

.bt-section-head__title::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 56px;
  height: 4px;
  border-radius: 4px;
  background: var(--bt-secondary);
}

.bt-section-head--center .bt-section-head__title::after,
.bt-cta .bt-section-head__title::after { inset-inline-start: calc(50% - 28px); }

.bt-section-head__desc {
  margin: 0;
  color: var(--bt-text-soft);
}

.bt-section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* ---------------- نجوم التقييم ---------------- */

.bt-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--bt-star);
  font-size: var(--bt-fs-sm);
}

.bt-stars__num {
  margin-inline-start: var(--bt-sp-2);
  color: var(--bt-text-soft);
  font-weight: var(--bt-fw-semibold);
}

/* ---------------- روابط السوشيال ---------------- */

.bt-social {
  display: flex;
  align-items: center;
  gap: var(--bt-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bt-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: inherit;
  font-size: .95rem;
  transition: background var(--bt-transition), color var(--bt-transition);
}

.bt-social a:hover {
  background: var(--bt-secondary);
  color: #fff;
}

.bt-social--topbar a {
  width: 28px;
  height: 28px;
  background: transparent;
  font-size: .9rem;
}

.bt-social--drawer a {
  background: var(--bt-bg-alt);
  color: var(--bt-text);
}

/* ---------------- الحقول والنماذج ---------------- */

.bt-form { display: grid; gap: var(--bt-sp-3); }

.bt-input,
.bt-select,
.bt-textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid var(--bt-border);
  border-radius: var(--bt-radius);
  background: var(--bt-bg);
  color: var(--bt-text);
  font-size: var(--bt-fs-sm);
  transition: border-color var(--bt-transition), box-shadow var(--bt-transition);
}

.bt-input:focus,
.bt-select:focus,
.bt-textarea:focus {
  outline: none;
  border-color: var(--bt-primary);
  box-shadow: 0 0 0 3px var(--bt-primary-light);
}

.bt-textarea { min-height: 110px; resize: vertical; }

/*
 * سهم القائمة المنسدلة.
 * سهم المتصفح الافتراضي كان ملتصقًا بحافة الحقل، فاستبدلناه بسهم مرسوم
 * مع مسافة داخلية تمنع تداخله مع النص.
 */
.bt-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-inline-end: 2.5rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23536872' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center;
  background-size: 14px 14px;
  cursor: pointer;
}

/* في الاتجاه من اليسار لليمين يذهب السهم إلى الطرف الآخر */
[dir="ltr"] .bt-select,
.bt-select[dir="ltr"] { background-position: right 1rem center; }

.bt-select::-ms-expand { display: none; }

/* حقول التاريخ: أيقونة التقويم كانت ملتصقة بحافة الحقل */
.bt-input[type="date"] { padding-inline-start: .65rem; }

.bt-input[type="date"]::-webkit-calendar-picker-indicator {
  margin-inline-start: 0;
  padding: 4px;
  border-radius: var(--bt-radius-sm);
  opacity: .55;
  cursor: pointer;
  transition: opacity var(--bt-transition), background var(--bt-transition);
}

.bt-input[type="date"]::-webkit-calendar-picker-indicator:hover {
  background: var(--bt-primary-light);
  opacity: 1;
}

.bt-select:focus {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230e7c86' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
}

.bt-label {
  display: block;
  margin-bottom: var(--bt-sp-1);
  font-size: var(--bt-fs-xs);
  font-weight: var(--bt-fw-semibold);
  color: var(--bt-text-soft);
}

.bt-field--error .bt-input,
.bt-field--error .bt-select,
.bt-field--error .bt-textarea { border-color: var(--bt-danger); }

/* الحقل الخفي المضاد للسبام */
.bt-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bt-form__message {
  margin: 0;
  font-size: var(--bt-fs-sm);
  font-weight: var(--bt-fw-medium);
}

.bt-form__message:empty { display: none; }
.bt-form__message.is-success { color: var(--bt-success); }
.bt-form__message.is-error { color: var(--bt-danger); }

/* ---------------- النوافذ المنبثقة ---------------- */

.bt-modal {
  position: fixed;
  inset: 0;
  z-index: var(--bt-z-popup);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bt-gutter);
}

.bt-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--bt-overlay);
  animation: bt-fade .25s ease;
}

.bt-modal__box {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow: auto;
  padding: var(--bt-sp-6);
  border-radius: var(--bt-radius-lg);
  background: var(--bt-bg);
  box-shadow: var(--bt-shadow-lg);
  animation: bt-rise .3s ease;
}

.bt-modal__close {
  flex-shrink: 0;
  background: var(--bt-bg-alt);
  border-color: transparent;
}

/* رأس النافذة: العنوان من جهة وزر الإغلاق من الجهة المقابلة */
.bt-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bt-sp-4);
  margin-bottom: var(--bt-sp-5);
}

.bt-modal__title {
  margin: 0;
  font-size: 1.25rem;
}

.bt-modal__desc {
  margin: 4px 0 0;
  color: var(--bt-text-muted);
  font-size: var(--bt-fs-sm);
}

@keyframes bt-fade { from { opacity: 0; } }
@keyframes bt-rise { from { opacity: 0; transform: translateY(16px); } }

/* نافذة البحث */

/* تُفتح قريبة من أعلى الشاشة لا في منتصفها */
.bt-modal--search {
  align-items: flex-start;
  padding-block-start: min(14vh, 140px);
}

.bt-search-modal__box { max-width: 680px; }

.bt-search-form {
  display: flex;
  align-items: stretch;
  gap: var(--bt-sp-2);
}

.bt-search-form .bt-btn {
  flex-shrink: 0;
  padding-inline: 1.75rem;
}

/* حقل البحث مع أيقونة داخلية */
.bt-search-form__field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.bt-search-form__icon {
  position: absolute;
  inset-inline-start: 1.125rem;
  color: var(--bt-text-muted);
  font-size: .95rem;
  pointer-events: none;
  transition: color var(--bt-transition);
}

.bt-search-form__input {
  width: 100%;
  min-width: 0;
  padding: .875rem 1.125rem;
  padding-inline-start: 2.85rem;
  border: 1px solid var(--bt-border);
  border-radius: var(--bt-radius-pill);
  background: var(--bt-bg-alt);
  color: var(--bt-text);
  font-size: 1rem;
  transition: border-color var(--bt-transition), box-shadow var(--bt-transition),
    background var(--bt-transition);
}

.bt-search-form__input::placeholder { color: var(--bt-text-muted); }

.bt-search-form__input:focus {
  outline: none;
  background: var(--bt-bg);
  border-color: var(--bt-primary);
  box-shadow: 0 0 0 3px var(--bt-primary-light);
}

.bt-search-form__field:focus-within .bt-search-form__icon { color: var(--bt-primary); }

/* زر المسح الافتراضي كان يظهر ملتصقًا بحافة الحقل */
.bt-search-form__input::-webkit-search-cancel-button { -webkit-appearance: none; }

@media (max-width: 520px) {
  .bt-modal--search { padding-block-start: min(8vh, 80px); }
  .bt-search-form { flex-direction: column; }
  .bt-search-form .bt-btn { width: 100%; }
}

/* النافذة الترحيبية */

.bt-popup__box { padding: 0; overflow: hidden; }
.bt-popup__media img { width: 100%; }
.bt-popup__body { padding: var(--bt-sp-6); text-align: center; }
.bt-popup__title { margin-bottom: var(--bt-sp-2); }
.bt-popup__text { color: var(--bt-text-soft); }

/* ---------------- القائمة الجانبية ---------------- */

.bt-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--bt-z-popup);
}

.bt-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: var(--bt-overlay);
  animation: bt-fade .25s ease;
}

.bt-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  width: min(340px, 88vw);
  padding: var(--bt-sp-5);
  background: var(--bt-bg);
  box-shadow: var(--bt-shadow-lg);
  overflow-y: auto;
  animation: bt-slide-in .3s ease;
}

@keyframes bt-slide-in {
  from { transform: translateX(-100%); }
}

.bt-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bt-sp-3);
  padding-bottom: var(--bt-sp-4);
  border-bottom: 1px solid var(--bt-border);
}

.bt-drawer__head .bt-logo__img { max-height: 40px; width: auto; }

.bt-drawer__nav { flex: 1; padding-block: var(--bt-sp-4); }

.bt-drawer__foot {
  display: grid;
  gap: var(--bt-sp-3);
  padding-top: var(--bt-sp-4);
  border-top: 1px solid var(--bt-border);
}

.bt-drawer__foot .bt-social { justify-content: center; }

/* منع تمرير الصفحة خلف النوافذ */
body.bt-locked { overflow: hidden; }

/* ---------------- زر الواتساب العائم ---------------- */

/* أيقونة فقط بدون نص بجانبها */
.bt-wa-float {
  position: fixed;
  inset-block-end: 20px;
  z-index: var(--bt-z-float);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  background: var(--bt-whatsapp);
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .38);
  transition: transform var(--bt-transition), box-shadow var(--bt-transition);
}

.bt-wa-float:hover {
  color: #fff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 30px rgba(37, 211, 102, .46);
}

.bt-wa-float i { font-size: 1.75rem; line-height: 1; }

/* النص يبقى للقارئ الصوتي فقط */
.bt-wa-float__text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bt-wa-float--left { inset-inline-start: 20px; }
.bt-wa-float--right { inset-inline-end: 20px; }

@media (max-width: 575px) {
  .bt-wa-float { width: 52px; height: 52px; }
  .bt-wa-float i { font-size: 1.6rem; }
}

/* ---------- ترويسة الأقسام على الموبايل ---------- */

@media (max-width: 575px) {
  .bt-section-head { margin-bottom: var(--bt-sp-5); }
  .bt-section-head__sub { font-size: 11px; padding: .28rem .85rem .28rem .7rem; }
  .bt-section-head__title { margin-bottom: var(--bt-sp-3); padding-bottom: var(--bt-sp-2); }
  .bt-section-head__title::after { width: 44px; height: 3px; }
  .bt-section-head__desc { font-size: var(--bt-fs-sm); }
}

/* ---------- مقاسات الأزرار على الموبايل ---------- */

/*
 * تصغَّر الأزرار قليلًا مع إبقاء ارتفاع لا يقل عن 44 بكسل،
 * وهو الحد الذي يسهل الضغط عليه بالإصبع.
 */
@media (max-width: 767px) {
  .bt-btn { padding: .7rem 1.25rem; font-size: var(--bt-fs-sm); }
  .bt-btn--lg { padding: .8rem 1.5rem; font-size: var(--bt-fs-sm); }
}

@media (max-width: 575px) {
  .bt-btn {
    min-height: 44px;
    padding: .6rem 1.1rem;
    font-size: var(--bt-fs-xs);
  }

  .bt-btn--lg {
    min-height: 46px;
    padding: .65rem 1.3rem;
    font-size: var(--bt-fs-sm);
  }

  .bt-btn--block { min-height: 46px; }
  .bt-btn i { font-size: .9em; }
}