/*
 * مكوّنات المنصّة التي لا يعرفها Vineta — الثيم السادس عشر.
 *
 * قالب Vineta قالب متجرٍ ثابت، ولا يعرف مكوّنات هذه المنصّة: مبدّل اللغات
 * وشارة السلّة وغيرهما. وكانت أنماطها في القوالب السابقة موزّعةً داخل ورقة كل
 * ثيم، فمن لا يكتبها يخرج المكوّن عنده عارياً.
 *
 * تُحمَّل بعد styles.css في سلّة css، فتغلب عند التعارض.
 *
 * وهذه أوّل نواة «ورقة التوافق» الموصوفة في docs/vineta-theme-migration.md —
 * تكبر مع كل مكوّن منصّةٍ يُكتشف عارياً على ثيمات Vineta.
 */

/* مبدّل اللغات لم يعد هنا: صار عنصر `select` بصنف `image-select` كما في
 * الأصل، يزيّنه bootstrap-select. وقواعدي التي كانت تصنع منسدلةً مخصّصة
 * حُذفت — كانت شبيهةً بالأصل لا مطابقةً له.
 *
 * وبقي رفعُ الشريط العلوي فوق الرأس: `#header` لاصقٌ بـ`z-index: 888`
 * وخلفيّته معتمة، فما ينسدل من الشريط يُرسم تحته فلا يُرى.
 */
.tf-topbar {
  position: relative;
  z-index: 900;
}

/* زرّ مبدّل اللغة: مرجعٌ لسهمه، وصفٌّ مرن.
 *
 * قِستُ الأصل في المتصفّح: زرّه `display: flex` و`position: relative`، وسهمه
 * `::after` عند `top: 0.5px`. وقِستُ عندنا بعد أن صارت الأصول متطابقةً بايتاً
 * ببايت والترتيب ترتيبَه و jQuery نسخته: `block` و`static` والسهم عند 18px،
 * أي تحت الزرّ.
 *
 * وعدّدتُ كل قاعدةٍ تطابق الزرّ في الصفحتين — بما فيها ما داخل @media — فلم
 * أجد في أيٍّ منهما قاعدةً تمنحه `display` أصلاً. فمصدرُ `flex` في الأصل لم
 * أستطع تسميته، ولا أدّعي أنّي عرفته.
 *
 * وما أعرفه مقيسٌ: هذه القيم هي قيم الأصل، وبها يخرج المبدّل عندنا كما يخرج
 * عنده. وقاعدة Vineta نفسها تضع على هذا الزرّ `gap: 6px` — ولا معنى للـgap
 * على عنصرٍ كتليّ — فالمرونة هي المقصودة لا المستنبطة.
 */
.tf-languages .bootstrap-select,
.tf-languages .bootstrap-select > .dropdown-toggle {
  position: relative;
}

.tf-languages .bootstrap-select > .dropdown-toggle {
  display: flex;
  align-items: center;
}

/* ومبدّل اللغة في قائمة الجوّال ينسدل **لأعلى**.
 *
 * bootstrap-select يضيف صنف `dropup` صحيحاً — لا مكان تحت الزرّ، فهو ملتصقٌ
 * بقاع اللوحة — لكن قاعدة Vineta تفرض على القائمة `margin-top: 17px !important`
 * فتغلب ما يضعه Popper، وتنزل القائمة أسفل الشاشة فتُقصّ.
 *
 * فيُثبَّت الاتّجاه هنا صراحةً بدل الاعتماد على حسابٍ يُدهَس.
 */
#mobileMenu .bootstrap-select.dropup > .dropdown-menu {
  top: auto !important;
  bottom: 100% !important;
  transform: none !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* ===== موضع القائمة المنسدلة =====
 * Vineta يجعل `.sub-menu` مطلقةً بـ`left: 0` ولا يجعل `.menu-item` مرجعاً —
 * لأن قوائمه كلّها mega-menu تمتدّ بعرض الحاوية، فمرجعها الحاوية عمداً.
 *
 * وقوائم هذا الثيم تُبنى من قائمة التاجر، وكلّها منسدلاتٌ بسيطة. فبلا مرجعٍ
 * قريب كانت تُرسم بعيداً عن الزرّ الذي فتحها.
 */
.box-nav-menu .menu-item {
  position: relative;
}

/* والقياس منسدلةٌ بسيطة لا mega-menu: عرض Vineta الأدنى ثلاثمئة بكسل بحشوٍ
   ٣٢/٦٠ مصمَّمٌ لقائمةٍ بأعمدةٍ وصور، ويخرج ضخماً على أربعة روابط. */
.box-nav-menu .menu-item > .sub-menu {
  min-width: 220px;
  padding: 16px 0;
  inset-inline-start: 0;
  left: auto;
  right: auto;
  text-align: start;
}

.box-nav-menu .menu-item > .sub-menu .menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.box-nav-menu .menu-item > .sub-menu .menu-link-text {
  display: block;
  padding: 7px 24px;
  white-space: nowrap;
}

/* ===== معرض المنتج: قطع الحلقة الراجعة =====
 *
 * `.product-thumbs-slider` صفٌّ مرن يضمّ عمود المصغّرات والصورة الرئيسية،
 * والافتراضي `align-items: stretch`. فارتفاع الصورة كان يأتي من ارتفاع الصفّ،
 * وارتفاع الصفّ من عمود المصغّرات الذي يحسبه السوايبر من الصورة — حلقةٌ مغلقة.
 * ومع `observer: true` في zoom.js كانت كل دورةٍ تُطلق التالية، فينمو الارتفاع
 * عشرة بكسلات كل ثانية بلا استقرار.
 *
 * فتُشتقّ من عرضها بنسبة الأصل نفسها، ولا تسأل الصفَّ عن شيء.
 */
.product-thumbs-slider {
  align-items: flex-start;
}

.tf-product-media-main .swiper-slide .item,
.tf-product-media-main .swiper-slide img {
  aspect-ratio: 552 / 827;
  height: auto;
}

/* و`transition: all` في styles.css كان يحوّل كل إعادة حسابٍ إلى حركةٍ تُرى.
   الشفافية وحدها تكفي لتأثيرات المرور. */
.tf-product-media-main .swiper-slide img {
  transition: opacity 0.3s ease;
}

/* ===== شارة عدد السلّة ===== */
.nav-icon-item .count-box {
  position: absolute;
  top: -6px;
  inset-inline-end: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 11px;
  line-height: 1;
  color: #fff;
  background: var(--primary, #ea1a1a);
  border-radius: 999px;
}

.nav-icon .nav-icon-item {
  position: relative;
}

/* ===== أقسام الأعمال — المرحلة ٢ =====
 *
 * القالب قالبُ تجارة، ولا مقابل فيه لهذه الأقسام. وما يلي أصغرُ ما يلزم
 * لإكمال مكوّناته القائمة، لا تصميمٌ موازٍ: المقاييس والألوان من متغيّراته.
 */

/* شريط المهارة — الصنف موجودٌ في القالب لكن مقصوراً على السلّة المصغّرة،
   فلا تنسيق له مجرَّداً. وقواعد السلّة أعلى تخصيصاً فلا تتأثّر بهذه. */
.tf-skill-item .tf-progress-bar {
  height: 6px;
  border-radius: 999px;
  background-color: var(--line-2, #f2f4f7);
  overflow: hidden;
}
.tf-skill-item .tf-progress-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-color: var(--primary, #ff6f61);
  transition: width 0.6s ease;
}

/* بطاقة عضو الفريق — على مقاس بطاقات القالب: نفس الحواف ونفس تكبير الصورة
   عند المرور. */
.tf-team-member .img-style {
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--line-2, #f2f4f7);
}
.tf-team-member .img-style img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.tf-team-member:hover .img-style img {
  transform: scale(1.06);
}
.tf-team-member .name {
  margin-bottom: 2px;
}
.tf-team-member .role {
  font-size: 14px;
}
.tf-team-member .tf-social-icon {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* خطوة العمل — رقمٌ باهتٌ خلف المحتوى، على عادة القالب في الأرقام الكبيرة. */
.tf-work-step {
  position: relative;
  overflow: hidden;
}
.tf-work-step .tf-work-step-num {
  position: absolute;
  inset-inline-end: 12px;
  top: 4px;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--line-2, #f2f4f7);
  pointer-events: none;
}
.tf-work-step .content,
.tf-work-step .box-icon {
  position: relative;
  z-index: 1;
}

/* تسمية عمل المعرض — تظهر فوق الطبقة عند المرور، كبطاقات المعرض نفسها. */
.gallery-item .tf-portfolio-caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  padding: 14px 16px;
  color: var(--white, #fff);
  font-weight: 500;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.gallery-item:hover .tf-portfolio-caption {
  opacity: 1;
  transform: translateY(0);
}

/* لافتة الفيديو — صورةٌ بطبقةٍ داكنة وزرّ تشغيل في وسطها. */
.tf-video-banner .tf-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.35);
}
.tf-video-banner .tf-video-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-top: 6px;
  border-radius: 999px;
  background-color: var(--white, #fff);
  color: var(--dark, #000);
  font-size: 20px;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.tf-video-banner .tf-video-play:hover {
  transform: scale(1.08);
  background-color: var(--primary, #ff6f61);
  color: var(--white, #fff);
}

/* السيرة المهنيّة — خطٌّ رأسيّ ونقاطٌ عليه. والحدّ منطقيّ (inline-start) لا
   أيسر، فينقلب مع اللغة من نفسه. */
.tf-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-inline-start: 2px solid var(--line, #ebebeb);
}
.tf-timeline-item {
  position: relative;
  padding-inline-start: 24px;
  padding-bottom: 24px;
}
.tf-timeline-item::before {
  content: "";
  position: absolute;
  inset-inline-start: -7px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background-color: var(--primary, #ff6f61);
}
.tf-timeline-date {
  font-size: 13px;
  font-weight: 500;
}
.tf-timeline-title {
  margin: 4px 0 2px;
}
.tf-timeline-sub {
  font-size: 14px;
  margin: 0;
}

/* شريط النشرة */
.tf-newsletter-band {
  padding: 40px 24px;
  border-radius: 12px;
  background-color: var(--primary-4, #fff1ef);
}
.tf-newsletter-band .form-newsletter {
  max-width: 520px;
  margin-top: 18px;
}

/* لوحة الدخول — لوحة القالب المنزلقة موضوعةً في صفحة، فتحتاج إطاراً
   وحشواً كانا يأتيانها من كونها offcanvas. */
.tf-login-panel {
  border: 1px solid var(--line, #ebebeb);
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--white, #fff);
}
.tf-login-panel .popup-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--line, #ebebeb);
}
.tf-login-panel .popup-inner {
  padding: 24px;
}
.tf-login-errors {
  list-style: none;
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background-color: var(--primary-4, #fff1ef);
  color: var(--primary, #ff6f61);
  font-size: 14px;
}

/* شريط تصنيفات — للغرف والدورات والحملات. القالب يرشّح بلوحةٍ منزلقة،
   وتصنيفات هذه الأنواع قليلة فيكفيها شريطٌ أفقيّ يلتفّ. */
.tf-control-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tf-btn-cate {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--line, #ebebeb);
  color: var(--text, #545454);
  font-size: 14px;
  transition: all 0.3s ease;
}
.tf-btn-cate:hover,
.tf-btn-cate.active {
  background-color: var(--primary, #ff6f61);
  border-color: var(--primary, #ff6f61);
  color: var(--white, #fff);
}

/* بيانات الغرفة داخل البطاقة — أسرّة وحمّامات وضيوف في سطرٍ واحد. */
.tf-room-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 14px;
  color: var(--text-3, #667085);
}
.tf-room-meta li + li {
  position: relative;
  padding-inline-start: 14px;
}
.tf-room-meta li + li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background-color: var(--line-3, #c9c9c9);
  transform: translateY(-50%);
}

/* شريط تقدّم الحملة */
.tf-cause-progress {
  height: 6px;
  margin: 10px 0 4px;
  border-radius: 999px;
  background-color: var(--line-2, #f2f4f7);
  overflow: hidden;
}
.tf-cause-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-color: var(--primary, #ff6f61);
}

/* ==========================================================================
   صفحات التفاصيل — الغرف والدورات والحملات
   --------------------------------------------------------------------------
   هذه الصفحات ثقيلة السلوك: حجزٌ بحساب ليالٍ، وتسجيلٌ في دورة، وتبرّعٌ ببوّابة
   دفع. وإعادةُ كتابتها بترميز Vineta تخاطر بكسر مسار الدفع مقابل مكسبٍ بصريّ،
   فتُنسَّق مفرداتها القائمة بلغته بدل استبدالها: نفس المقاييس والمتغيّرات
   المستعملة في بقيّة الثيم.

   وحين تُحذف الثيمات الخمسة عشر تُعاد كتابة هذه الصفحات ترميزاً، ويسقط هذا
   القسم كلّه. انظر docs/vineta-theme-migration.md — المرحلة الرابعة.
   ========================================================================== */

.section-padding {
  padding: 60px 0;
}

/* الحقول — شكل حقول القالب نفسه */
.form_group {
  margin-bottom: 16px;
}
.form_group > label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--text-2, #393939);
}
.form_control,
.form_group input:not([type="checkbox"]):not([type="radio"]),
.form_group select,
.form_group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line, #ebebeb);
  border-radius: 8px;
  background-color: var(--white, #fff);
  color: var(--dark, #000);
  font-size: 14px;
  transition: border-color 0.3s ease;
}
.form_control:focus,
.form_group input:focus,
.form_group select:focus,
.form_group textarea:focus {
  outline: none;
  border-color: var(--primary, #ff6f61);
}

/* الأزرار — زرّ القالب المملوء */
.filled-btn,
.form_btn,
.form_group button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border: 0;
  border-radius: 999px;
  background-color: var(--dark-2, #101828);
  color: var(--white, #fff);
  font-weight: 500;
  transition: background-color 0.3s ease;
}
.filled-btn:hover,
.form_btn:hover,
.form_group button[type="submit"]:hover {
  background-color: var(--primary, #ff6f61);
  color: var(--white, #fff);
}

/* الصناديق الجانبية — الحجز والتسجيل والتبرّع */
.widget-box,
.course-sidebar-price,
.nusafe-sidebar,
.single-price-option {
  padding: 24px;
  border: 1px solid var(--line, #ebebeb);
  border-radius: 12px;
  background-color: var(--white, #fff);
}
.widget-title,
.title-review {
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 600;
}

/* التبويبات — تفاصيل الغرفة والدورة */
.desc-tab-item {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.desc-tab-item .nav-link {
  display: inline-flex;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--line, #ebebeb);
  color: var(--text, #545454);
  font-size: 14px;
}
.desc-tab-item .nav-link.active {
  background-color: var(--primary, #ff6f61);
  border-color: var(--primary, #ff6f61);
  color: var(--white, #fff);
}

/* شريط تقدّم الحملة في صفحتها */
.progress-bar-area .progress-bar,
.progress-bar-area {
  border-radius: 999px;
}
.progress-bar-area .progress-bar {
  height: 8px;
  background-color: var(--line-2, #f2f4f7);
  overflow: hidden;
}
.progress-bar-inner {
  height: 100%;
  border-radius: inherit;
  background-color: var(--primary, #ff6f61);
}

/* المرافق والوسوم */
.ammenities a,
.room-cat a {
  display: inline-flex;
  margin: 0 6px 6px 0;
  padding: 6px 14px;
  border-radius: 999px;
  background-color: var(--primary-4, #fff1ef);
  color: var(--primary, #ff6f61);
  font-size: 13px;
}

/* المعرض */
.post-thumb .main-slider img,
.single-work-img img,
.thumb img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.dots-slider {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.dots-slider .single-dots img {
  width: 90px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
}
.price-tag {
  display: inline-flex;
  padding: 8px 18px;
  border-radius: 999px;
  background-color: var(--primary, #ff6f61);
  color: var(--white, #fff);
  font-weight: 600;
}