/* =========================================
   بومب ستور — قالب عالي
   نسخة موحدة بديلة للأكواد السابقة
========================================= */

/* الألوان */
body#app {
  --bomb-primary: #211a47;
  --bomb-surface: #eef0f4;
  --bomb-text: #262626;
  --bomb-border: #e1e3e9;

  --color-primary: #211a47;
  --header-bg-color: #eef0f4;
  --header-text-color: #262626;
  --product-card-bg: #eef0f4;
  --product-card-text: #262626;
  --product-radius: 8px;
}

html:not(.dark) body#app {
  background: #fff;
  color: var(--bomb-text);
}

/* ===== الهيدر ===== */

html:not(.dark) body#app #mainnav {
  background: var(--bomb-surface) !important;
  color: var(--bomb-text) !important;
  border-radius: 0 0 30px 30px !important;
}

body#app .top-navbar {
  padding-block: 0;
}

body#app :is(.navbar-brand img, .footer_logo img) {
  object-fit: contain;
  animation: bomb-logo-float 3s ease-in-out infinite;
}

@keyframes bomb-logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ===== عناوين الرئيسية ===== */

body#app :is(.features--title-outer, .faqs-title) {
  text-align: center;
  margin-bottom: 28px;
}

body#app :is(.features--title-outer h3, .faqs-title h3) {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.6;
}

/* ===== مميزات المتجر ===== */

body#app .s-block--features__item {
  padding: 20px !important;
  border: 0 !important;
  border-radius: 24px !important;
  text-align: center;
  box-shadow: none !important;
}

html:not(.dark) body#app .s-block--features__item {
  background: var(--bomb-surface) !important;
  color: var(--bomb-text) !important;
}

body#app .s-block--features__item .feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  border-radius: 15px;
}

body#app .s-block--features__item h4 {
  margin-top: 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}

/* ===== الأسئلة الشائعة ===== */

body#app .faq-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

body#app .faq-item {
  min-width: 0;
  border: 0 !important;
  border-radius: 24px !important;
  overflow: hidden;
}

html:not(.dark) body#app .faq-item {
  background: var(--bomb-surface) !important;
}

body#app .question-outer {
  gap: 14px;
}

body#app .question {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

body#app .faq-inner .faq-icon {
  flex-shrink: 0;
  background: #33236a !important;
  color: #fff !important;
}

/* ===== بطاقات المنتجات العمودية ===== */

body#app custom-salla-product-card.product-block
.product-block-outer {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

body#app custom-salla-product-card.product-block
.product-block__info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  text-align: center;
}

body#app custom-salla-product-card.product-block {
  min-width: 0;
  box-sizing: border-box;
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: none !important;
}

html:not(.dark) body#app
custom-salla-product-card.product-block {
  background: var(--bomb-surface) !important;
  color: var(--bomb-text) !important;
  border: 0 !important;
}

/* إطار الصورة: يحافظ على طريقة القالب الأصلية */
body#app custom-salla-product-card.product-block
.product-block__thumb:not(.s-product-card-image) {
  position: relative;
  width: 100%;
  flex-shrink: 0;
}

body#app custom-salla-product-card.product-block
.product-block__thumb:not(.s-product-card-image)
.thumb-wrapper {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  padding: 100% 0 0 !important;
  aspect-ratio: auto !important;
  box-sizing: border-box !important;
  overflow: hidden;
}

/* صورة كاملة دون قص أو تشويه */
body#app custom-salla-product-card.product-block
.product-block__thumb:not(.s-product-card-image)
.thumb-wrapper img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* اسم المنتج */
body#app custom-salla-product-card.product-block
.product-title {
  display: flex;
  flex-direction: column;
  padding-inline: 12px;
  text-align: center;
}

body#app custom-salla-product-card.product-block
.product-title .title {
  order: 1;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 3.2em;
  margin: 8px 0 4px !important;
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1.6 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

body#app custom-salla-product-card.product-block
.product-subtitle {
  order: 2;
  margin-bottom: 5px;
  font-size: 12px;
  line-height: 1.6;
}

body#app custom-salla-product-card.product-block
.product-subtitle:empty {
  display: none;
}

/* السعر */
body#app custom-salla-product-card.product-block
.price-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 6px;
}

body#app custom-salla-product-card.product-block
.before-price {
  font-size: 12px;
  font-weight: 400;
}

/* ===== زر السلة: بعرض البطاقة مثل عبادي ===== */

body#app custom-salla-product-card.product-block
.btn--add-to-cart {
  position: static !important;
  display: block !important;
  align-self: stretch !important;
  width: calc(100% - 12px) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 8px 6px 6px !important;
  padding: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

body#app custom-salla-product-card.product-block
.btn--add-to-cart :is(
  salla-add-product-button,
  salla-add-product-button > div,
  salla-button
) {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body#app custom-salla-product-card.product-block
.btn--add-to-cart .s-button-element {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 5px !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  font-size: 12.8px !important;
  line-height: 1.6 !important;
}

body#app custom-salla-product-card.product-block
.btn--add-to-cart .s-button-primary.s-button-solid {
  background: var(--bomb-primary) !important;
  border-color: var(--bomb-primary) !important;
  color: #fff !important;
}

body#app custom-salla-product-card.product-block
.btn--add-to-cart .s-button-text {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  white-space: nowrap !important;
  color: inherit !important;
}

/* المعاينة السريعة */
body#app .showPreviewBtn:not(.preview-btn-down) {
  margin: 6px;
  border-radius: 50%;
}

/* ===== التصنيفات ===== */

body#app.product-index #page-main-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

body#app.product-index
.container--products-list .main-content {
  min-width: 0;
}

body#app.product-index
.index-inner > .center-between {
  flex-wrap: wrap;
  gap: 12px;
}

body#app.product-index
.s-products-list-wrapper.s-products-list-vertical-cards {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch;
}

/* ===== صفحة المنتج ===== */

body#app.product-single .prod-main-content {
  min-width: 0;
}

body#app.product-single .product-main-title {
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 800;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

body#app.product-single .product__description {
  font-size: 15px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

body#app.product-single .product__description img {
  max-width: 100%;
  height: auto;
}

body#app.product-single
salla-slider.details-slider .s-slider-container {
  border: 0 !important;
  border-radius: 18px;
  overflow: hidden;
}

body#app.product-single
.details-slider .magnify-wrapper img {
  max-width: 100%;
  object-fit: contain !important;
}

html:not(.dark) body#app.product-single
:is(
  .s-product-options-wrapper,
  .lm-bg-sec:not(.self-clr)
) {
  background: var(--bomb-surface) !important;
  border-radius: 18px !important;
  margin-bottom: 18px;
}

body#app.product-single
.s-product-options-wrapper :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
) {
  max-width: 100%;
  min-height: 44px;
  border-radius: 20px;
  font-size: 16px;
  box-sizing: border-box;
}

body#app.product-single .total-price {
  font-weight: 800;
}

body#app.product-single
.sticky-product-bar__btn .s-button-element {
  min-height: 44px;
  border-radius: 999px;
}

body#app.product-single
.sticky-product-bar__btn .s-button-primary.s-button-solid {
  background: var(--bomb-primary) !important;
  border-color: var(--bomb-primary) !important;
  color: #fff !important;
}

/* ===== آراء العملاء ===== */

body#app .testimonials-slider :is(
  .s-block__title,
  .s-slider-block__title
) {
  justify-content: center;
  text-align: center;
}

body#app .testimonials-slider .section-main-title {
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.6;
}

body#app .testimonials-slider .testimonial {
  box-sizing: border-box;
  padding: 24px !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

html:not(.dark) body#app
.testimonials-slider .testimonial {
  background: var(--bomb-surface) !important;
  color: var(--bomb-text) !important;
}

body#app .testimonials-slider .testimonial img {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

body#app .testimonials-slider .testimonial p {
  font-size: 15px;
  line-height: 1.9;
}

body#app .testimonials-slider .swiper {
  padding-inline: 5px;
}

/* ===== الفوتر ===== */

body#app .store-footer {
  width: 100%;
  max-width: none;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 40px 40px 0 0 !important;
  box-shadow: none !important;
}

html:not(.dark) body#app .store-footer {
  background: var(--bomb-surface) !important;
  color: var(--bomb-text) !important;
}

html:not(.dark) body#app .store-footer :is(
  .store-footer__inner,
  .footer-bottom,
  .store-footer__bottom,
  .copyrights
) {
  background: var(--bomb-surface) !important;
  border: 0 !important;
}

body#app .store-footer h3 {
  margin-top: 18px;
  font-size: 20px;
  line-height: 1.6;
}

html:not(.dark) body#app .store-footer :is(
  .s-contacts-icon,
  .s-social-link a
) {
  background: #fff;
  border: 0;
}

/* ===== التابلت ===== */

@media (min-width: 768px) and (max-width: 1023px) {
  body#app.product-index
  .s-products-list-wrapper.s-products-list-vertical-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

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

@media (max-width: 767px) {
  html:not(.dark) body#app #mainnav {
    border-radius: 0 0 22px 22px !important;
  }

  body#app .faq-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body#app .question {
    font-size: 16px;
  }

  body#app .s-block--features__item {
    padding: 16px 12px !important;
  }

  body#app .s-block--features__item h4 {
    font-size: 16px;
  }

  body#app.product-index
  .s-products-list-wrapper.s-products-list-vertical-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body#app.product-index #page-main-title {
    font-size: 20px;
  }

  body#app custom-salla-product-card.product-block
  .product-title {
    padding-inline: 8px;
  }

  body#app custom-salla-product-card.product-block
  .product-title .title {
    font-size: 13px !important;
  }

  /* مساحة لمس أكبر للجوال */
  body#app custom-salla-product-card.product-block
  .btn--add-to-cart .s-button-element {
    min-height: 44px !important;
  }

  body#app.product-single
  .container--product-details > [p-id] {
    flex-direction: column !important;
  }

  body#app.product-single
  .container--product-details .sidebar {
    position: static !important;
    width: 100% !important;
    margin-inline: 0 !important;
    padding-bottom: 20px;
  }

  body#app.product-single .prod-main-content {
    width: 100% !important;
  }

  body#app.product-single .product__description {
    font-size: 14px;
  }

  body#app .testimonials-slider .testimonial {
    padding: 18px !important;
  }

  body#app .testimonials-slider .testimonial p {
    font-size: 14px;
  }

  body#app .store-footer {
    border-radius: 26px 26px 0 0 !important;
  }
}

/* احترام إعداد تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  body#app :is(.navbar-brand img, .footer_logo img) {
    animation: none;
  }
}



/* مسافة أسفل الأسئلة الشائعة */
body#app .faqs-section,
body#app .bomb-faq {
  margin-bottom: 50px !important;
}

@media (max-width: 767px) {
  body#app .faqs-section,
  body#app .bomb-faq {
    margin-bottom: 32px !important;
  }
}




.bomb-installments .container {
  max-width: 1440px;
  margin-inline: auto;
}

.bomb-installments img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .bomb-installments .container {
    padding-inline: 12px;
  }
}




/* ===== عرض المنتجات: 3 بطاقات في الصف ===== */

.s-products-list-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.s-products-list-wrapper > * {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ===== مؤشرات السلايدر ===== */

:root {
  --slider-dot-color: #dfe1e6;
  --slider-dot-active: #352474;
}

.swiper-pagination .swiper-pagination-bullet {
  width: 37px !important;
  height: 14px !important;
  margin: 7px 9px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50px !important;
  background: var(--slider-dot-color) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  transition: background-color .25s ease;
}

.swiper-pagination .swiper-pagination-bullet-active {
  background: var(--slider-dot-active) !important;
  outline: 1px solid var(--slider-dot-active);
  outline-offset: 4px;
}

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

@media (max-width: 767px) {
  .s-products-list-wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .s-products-list-wrapper .s-product-card-content {
    padding: 8px !important;
  }

  .s-products-list-wrapper .s-product-card-content-title {
    font-size: 12px !important;
    line-height: 1.6 !important;
    overflow-wrap: anywhere;
  }

  .swiper-pagination .swiper-pagination-bullet {
    width: 18px !important;
    height: 7px !important;
    margin: 6px 4px !important;
  }

  .swiper-pagination .swiper-pagination-bullet-active {
    outline-offset: 3px;
  }
}



/* منع ظهور طرف البطاقة الرابعة على الجوال */
@media (max-width: 767px) {
  salla-slider:has(.s-product-card) .swiper,
  salla-slider:has(salla-product-card) .swiper,
  .swiper:has(.s-product-card),
  .swiper:has(salla-product-card) {
    overflow: hidden !important;
  }
}


@media (max-width: 767px) {

  /* حدود سلايدر المنتجات */
  :is(.swiper, .swiper-container):has(
    :is(salla-product-card, .s-product-card)
  ) {
    overflow: hidden !important;
    padding-inline: 0 !important;
  }


  @media (max-width: 767px) {

  /* قسم البطاقات في قالب عالي */
  #main-links-4 {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 0 !important;
  }

  #main-links-4 :is(
    .swiper,
    .swiper-container,
    .s-slider-container
  ) {
    width: 100% !important;
    padding-inline: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #main-links-4 .swiper-wrapper {
    gap: 0 !important;
    padding-inline: 0 !important;
  }

  /* عرض البطاقة: ثلث المساحة بعد خصم الفواصل */
  #main-links-4 .banner-outer.swiper-slide {
    box-sizing: border-box !important;
    width: calc((100% - 16px) / 3) !important;
    min-width: calc((100% - 16px) / 3) !important;
    max-width: calc((100% - 16px) / 3) !important;
    flex: 0 0 calc((100% - 16px) / 3) !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 8px !important;
  }

  /* إظهار الصورة كاملة بتناسبها الأصلي */
  #main-links-4 .banner-entry {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }

  #main-links-4 img.banner-img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}



  @media (max-width: 767px) {
  #main-links-4 .swiper-pagination {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    padding: 6px !important;
    box-sizing: border-box !important;
  }

  #main-links-4 .swiper-pagination-bullet {
    width: 18px !important;
    min-width: 0 !important;
    height: 7px !important;
    flex: 0 1 18px !important;
    margin: 0 !important;
  }
}


@media (max-width: 767px) {
  #main-links-4 {
    position: relative !important;
    padding-bottom: 22px !important;
  }

  #main-links-4 .swiper-pagination {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 4px !important;
  }
}



  @media (max-width: 767px) {
  .bomb-features > .grid {
    gap: 8px !important;
  }

  .bomb-features .s-block--features__item {
    min-width: 0 !important;
    padding-inline: 4px !important;
    text-align: center !important;
  }

  .bomb-features .s-block--features__item h4,
  .bomb-features .injaz_count {
    white-space: nowrap !important;
    font-size: clamp(9px, 2.7vw, 12px) !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }
}