/* =========================================
   BLISSLY — COMPLETE CSS
   ========================================= */

:root {
  --bliss-blue: #747FC4;
  --bliss-coral: #F59C91;
  --bliss-cream: #F7F4ED;
  --bliss-white: #FFFDF8;
  --bliss-dark: #35354A;

  --bliss-text-space: clamp(32px, 4vw, 56px);
  --bliss-banner-space: 20px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: var(--bliss-cream);
  color: var(--bliss-dark);
}

/* الحفاظ على الخط العربي المختار في إعدادات الثيم */
h1,
h2,
h3 {
  color: var(--bliss-dark);
  margin-bottom: 1rem;
}


/* =========================================
   شريط الإعلانات أعلى الصفحة
   ========================================= */

body.index #main-content {
  padding-top: 0 !important;
}

body.index .store-header {
  margin-bottom: 0 !important;
}

body.index #main-content > .s-block--bundle-marquee {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.index #main-content > .s-block--bundle-marquee + .s-block {
  margin-top: 0 !important;
}

body.index #main-content > .s-block:has(
  + .s-block--bundle-marquee
) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* =========================================
   البنر الرئيسي والقسم الذي يليه
   ========================================= */

body.index #main-content > .s-block--bundle-main-slider {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* مساحة داخل القسم التالي حتى لا يلتصق النص بالبنر */
body.index #main-content
  > .s-block--bundle-main-slider
  + .s-block:not(.s-block--bundle-marquee) {
  margin-top: 0 !important;
  padding-top: var(--bliss-text-space) !important;
}


/* =========================================
   قسم المحتوى النصي
   أسماء محتملة حسب مكونات الثيم
   ========================================= */

body.index #main-content > :is(
  .s-block--bundle-text,
  .s-block--bundle-text-content,
  .s-block--bundle-rich-text,
  .s-block--text,
  .s-block--text-content,
  .s-block--rich-text
) {
  margin-top: 0 !important;
  padding-top: var(--bliss-text-space) !important;
  padding-bottom: 28px !important;
}

body.index #main-content > :is(
  .s-block--bundle-text,
  .s-block--bundle-text-content,
  .s-block--bundle-rich-text,
  .s-block--text,
  .s-block--text-content,
  .s-block--rich-text
) :is(h1, h2, h3) {
  margin-top: 0 !important;
  margin-bottom: 16px;
  line-height: 1.5;
}

body.index #main-content > :is(
  .s-block--bundle-text,
  .s-block--bundle-text-content,
  .s-block--bundle-rich-text,
  .s-block--text,
  .s-block--text-content,
  .s-block--rich-text
) p {
  line-height: 1.9;
}


/* =========================================
   تقليل الفراغ أسفل البانر الإعلاني
   أسماء محتملة حسب مكونات الثيم
   ========================================= */

body.index #main-content > :is(
  .s-block--bundle-banner,
  .s-block--bundle-banners,
  .s-block--bundle-ad-banner,
  .s-block--bundle-advertisement,
  .s-block--banner,
  .s-block--banners,
  .s-block--full-banner
) {
  margin-bottom: 0 !important;
  padding-bottom: var(--bliss-banner-space) !important;
}

body.index #main-content > :is(
  .s-block--bundle-banner,
  .s-block--bundle-banners,
  .s-block--bundle-ad-banner,
  .s-block--bundle-advertisement,
  .s-block--banner,
  .s-block--banners,
  .s-block--full-banner
) + .s-block {
  margin-top: 0 !important;
}

/* إزالة فراغ السطر أسفل صور البانر */
body.index #main-content > :is(
  .s-block--bundle-banner,
  .s-block--bundle-banners,
  .s-block--bundle-ad-banner,
  .s-block--bundle-advertisement,
  .s-block--banner,
  .s-block--banners,
  .s-block--full-banner
) img {
  display: block;
}


/* =========================================
   المنتجات
   التخطيط الداخلي يعتمد على JavaScript المرافق
   ========================================= */

body.index
  .s-block--bundle-products-grid
  [component-name="products-grid"] {
  --bliss-blue: #747FC4;
}

/* شارات المنتجات بلون بلسلي المشمشي */
custom-salla-product-card .s-product-card-promotion-title {
  background: var(--bliss-coral, #F59C91) !important;
  color: var(--bliss-dark, #35354A) !important;
}


/* =========================================
   الأزرار
   ========================================= */

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 28px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
  font-size: 16px;
}

.btn-primary {
  background-color: var(--bliss-blue);
  color: #fff;
  width: 100%;
}

.btn-primary:hover:not(:disabled) {
  background-color: #6470B8;
  transform: translateY(-2px);
}

.btn-primary:disabled {
  background-color: #D8D8E8;
  color: #9999A8;
  cursor: not-allowed;
}


/* =========================================
   التقويم
   ========================================= */

.blissly-calendar {
  background-color: var(--bliss-white);
  border: 1px solid #E8E8E8;
  border-radius: 16px;
  padding: 20px;
  max-width: 400px;
  margin: 20px auto;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.calendar-month-year {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  flex: 1;
}

.calendar-nav-btn {
  background: transparent;
  border: none;
  color: var(--bliss-blue);
  cursor: pointer;
  padding: 8px;
  font-size: 20px;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 15px;
}

.weekday {
  text-align: center;
  font-weight: 600;
  color: #9999A8;
  font-size: 12px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 500;
  border: 1px solid #E8E8E8;
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.calendar-day.available:hover {
  background-color: #C7A9E4;
}

.calendar-day.booked,
.calendar-day.past {
  background-color: #F0F0F0;
  color: #9999A8;
  cursor: not-allowed;
  text-decoration: line-through;
}

.calendar-day.selected {
  background-color: var(--bliss-blue);
  color: #fff;
  font-weight: 700;
}

.calendar-day.other-month {
  color: #E8E8E8;
}

.calendar-legend {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding-top: 15px;
  border-top: 1px solid #E8E8E8;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
}


/* =========================================
   شعار الفوتر
   تكبيره ومحاذاته مع بداية المحتوى
   ========================================= */

.store-footer
  .store-footer__inner
  > .container
  > div:first-child
  > a:first-child {
  display: block !important;
  width: 240px !important;
  max-width: 100% !important;
  align-self: flex-start !important;

  margin-block: 0 12px !important;
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;

  padding: 0 !important;
}

.store-footer
  .store-footer__inner
  > .container
  > div:first-child
  > a:first-child
  > h3 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100px !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 0 !important;
  line-height: 0 !important;

  background-image: url("https://cdn.salla.sa/gZaQNv/stores/logos/pV0NESgyoR5705xcLccPyCvEYkOEn1LYHiwPA1io.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
}

/* محاذاة الشعار عند استخدام المتجر بالإنجليزية */
html[dir="ltr"] .store-footer
  .store-footer__inner
  > .container
  > div:first-child
  > a:first-child
  > h3 {
  background-position: left center;
}

/* تقليل المسافة بين رابط الشعار والوصف */
.store-footer
  .store-footer__inner
  > .container
  > div:first-child
  > a:first-child
  + :is(p, div) {
  margin-top: 0 !important;
}


/* =========================================
   الجوال
   ========================================= */

@media (max-width: 767px) {
  :root {
    --bliss-text-space: 28px;
    --bliss-banner-space: 14px;
  }

  .store-footer
    .store-footer__inner
    > .container
    > div:first-child
    > a:first-child {
    width: 220px !important;
    margin-bottom: 10px !important;
  }

  .store-footer
    .store-footer__inner
    > .container
    > div:first-child
    > a:first-child
    > h3 {
    height: 92px !important;
  }
}


/* =========================================
   تقليل الحركة
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .calendar-day {
    transition: none;
  }

  .btn-primary:hover:not(:disabled) {
    transform: none;
  }
}