/* SSA Streaming – Minimal theme overrides for Salla */

/*
 * This CSS is designed to be pasted into the “CSS ط¥ط¶ط§ظپظٹâ€‌ (custom CSS) field of
 * your Salla store.  It updates the primary colour palette and font to
 * match SSA Streaming and tweaks card and button styles for a darker,
 * modern look.  Keep the snippet concise to ensure it is accepted by
 * Salla’s customisation system.
 */

/* Update primary colours and default font */
:root {
  --font-main: 'Tajawal';
  --color-primary: #ef4444;        /* SSA red */
  --color-primary-dark: #b91c1c;   /* darker red */
  --color-primary-light: #fca5a5;  /* lighter red */
  --color-primary-reverse: #ffffff;/* text on primary */
}

/* Dark background for the site and light text */
html.dark body, body.dark {
  background-color: #0b1220;
  color: #e5e7eb;
}

/* Card styling: products, blog, categories */
.product-card, .product-item, .blog-card, .category-card, .card {
  background-color: #111827;
  border: 1px solid #1f2937;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.product-card:hover, .product-item:hover, .blog-card:hover, .category-card:hover, .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* Primary button styling */
.btn-primary, .button.primary, .btn--primary {
  background: linear-gradient(to bottom, #ef4444, #b91c1c) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
}
.btn-primary:hover, .button.primary:hover, .btn--primary:hover {
  box-shadow: 0 10px 28px rgba(239, 68, 68, 0.5);
  transform: translateY(-2px);
}

/* تعديل النقاط */

salla-slider .swiper-pagination-bullet {
  height: 30px;
  min-height: 30px;
  width: 30px;
  min-width: 30px;
}

/* تعديلات الجوال */

@media (max-width: 671px) {
  /* الخطوات  */

  #main-content
    > section.s-block.s-block--features.cards-view.container
    > div.flex.flex-col.lg\:flex-row.gap-6.items-center.justify-center {
    flex-direction: row;
    gap: 0.5rem !important;
  }

  /* الأسهم  */

  .s-block--features.cards-view .arrow {
    transform: none !important;
    width: 8vw !important;
  }

  /* العناصر */

  .s-block--features.cards-view .s-block--features__item {
    align-self: start;
    text-align: center;
  }

  /*  */

  .s-block--features.cards-view .s-block--features__item p {
    font-size: 0.9rem !important;
  }

  footer > div.store-footer__inner > div {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  .s-product-options-option-container {
    width: 50%;
    padding-left: 5px;
  }
  form > salla-product-options > salla-conditional-fields {
    display: flex;
    flex-wrap: wrap;
  }

  .product-single .swiper-wrapper.s-slider-swiper-wrapper > a > img {
    margin: auto;
    width: 50%;
  }

  .product-single .swiper-wrapper.s-slider-swiper-wrapper {
    height: 60vw !important;
  }
  salla-slider.details-slider .s-slider-container {
    border: none !important;
  }
  .product-single .swiper-wrapper.s-slider-swiper-wrapper > a {
    width: auto;
    height: 100%;
    margin: auto;
  }

  .product-single .swiper-wrapper.s-slider-swiper-wrapper > a > img {
    width: 100%;
    height: 100%;
  }

  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

form
  > section.sticky-product-bar.bg-white.dark\:bg-darker.p-5.rounded-b
  > salla-add-product-button
  > div
  > salla-button {
  display: none !important;
}