/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CLOUD STORE — Custom Storefront CSS             (Salla: mtjrcloud.com)     ║
   ║                                                                             ║
   ║  v1.12.0 — BILINGUAL. One stylesheet for the Arabic (RTL) and the English   ║
   ║  (LTR) theme versions. Every RTL-only rule has an LTR counterpart keyed on  ║
   ║  dir="ltr" (stamped by custom_bilingual.js and/or on the html tag);         ║
   ║  Arabic rendering is unchanged.                                             ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

:root {
  --cs-accent:        #0ea5e9;
  --cs-accent-2:      #22d3ee;
  --cs-text:          #cbd5e1;
  --cs-text-strong:   #ffffff;
  --cs-surface:       rgba(255,255,255,.04);
  --cs-border:        rgba(255,255,255,.16);
  --cs-border-hover:  rgba(255,255,255,.34);
  --cs-radius:        10px;
  --cs-shadow:        0 4px 12px rgba(0,0,0,.35);
  --cs-gap:           6px;
}

/* --- Product Description Tabs ----------------------------------- cs-pack- */
.cs-pack-tabs  { margin: 14px 0; direction: rtl; }
/* English / LTR: tabs, intro and panels read left-to-right. */
.cs-pack-tabs[dir="ltr"],
html[dir="ltr"] .cs-pack-tabs { direction: ltr; }
/* ...and an English description that still carries the editor's Arabic direction/alignment
   classes (copied from the Arabic text) must not flip back to RTL inside the tabs. */
.cs-pack-tabs[dir="ltr"] .ql-direction-rtl { direction: ltr; text-align: left; }
.cs-pack-tabs[dir="ltr"] .ql-align-right   { text-align: left; }
.cs-pack-intro { margin-bottom: 10px; line-height: 1.8; font-size: 14.5px; color: var(--cs-text); }

.cs-pack-nav { display: flex; flex-wrap: wrap; gap: var(--cs-gap); margin-bottom: 12px; }
.cs-pack-btn {
  flex: 0 1 auto; padding: 8px 16px;
  border: 1px solid var(--cs-border); border-radius: var(--cs-radius);
  background: var(--cs-surface); color: var(--cs-text);
  font-family: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.2;
  cursor: pointer; transition: all .15s ease;
}
.cs-pack-btn:hover     { border-color: var(--cs-border-hover); color: var(--cs-text-strong); }
.cs-pack-btn.is-active { background: var(--cs-accent); border-color: var(--cs-accent); color: #fff; box-shadow: var(--cs-shadow); }

.cs-pack-panel { display: none; line-height: 1.85; font-size: 14.5px; color: var(--cs-text); animation: cs-fade .18s ease; }
.cs-pack-panel.is-active { display: block; }
.cs-pack-panel img { max-width: 100%; height: auto; border-radius: 8px; }

@media (max-width: 480px) { .cs-pack-btn { flex: 1 1 auto; text-align: center; } }

/* --- Image Lightbox -------------------------------------------- cs-img- */
.cs-pack-panel img.cs-img {
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  cursor: zoom-in;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cs-pack-panel img.cs-img:hover { transform: scale(1.01); box-shadow: 0 12px 30px rgba(0,0,0,.5); }

.cs-img-lightbox {
  position: fixed; inset: 0; z-index: 999999;
  background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; transition: opacity .2s ease;
}
.cs-img-lightbox.is-open { opacity: 1; }
.cs-img-lightbox img {
  max-width: 100%; max-height: 100%;
  border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.9);
  cursor: zoom-out;
}
.cs-img-close {
  position: absolute; top: 18px; right: 18px;
  width: 44px; height: 44px; padding: 0;
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
  font-size: 26px; line-height: 1; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.cs-img-close:hover { background: #e11d48; border-color: #e11d48; transform: scale(1.08); }

/* --- Product FAQ -------------------------------------------------- cs-faq- */
.cs-faq { margin: 24px 0 8px; padding-top: 18px; border-top: 2px solid var(--cs-border); }
.cs-faq-title { font-size: 18px; font-weight: 800; color: var(--cs-text-strong); margin: 0 0 14px; }

.cs-faq-item {
  border: 1px solid var(--cs-border); border-radius: var(--cs-radius);
  background: var(--cs-surface); margin-bottom: 8px; overflow: hidden;
}
.cs-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; background: transparent; border: none; cursor: pointer;
  color: var(--cs-text-strong); font-family: inherit; font-size: 14.5px; font-weight: 700;
  line-height: 1.6; text-align: start;
}
.cs-faq-q:hover { background: rgba(255,255,255,.03); }
.cs-faq-qt { flex: 1 1 auto; }
.cs-faq-ic {
  flex: 0 0 auto; font-style: normal; font-size: 22px; font-weight: 400; line-height: 1;
  color: var(--cs-accent); transition: transform .2s ease;
}
.cs-faq-item.is-open .cs-faq-ic { transform: rotate(45deg); }
.cs-faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.cs-faq-item.is-open .cs-faq-a { max-height: 1200px; }
.cs-faq-p { padding: 2px 16px 8px; color: var(--cs-text); font-size: 14px; line-height: 1.9; }
.cs-faq-p:last-child { padding-bottom: 14px; }

/* --- Telegram Channel Button (Arabic + English) ---------------- cs-tg- */
.cs-tg-btn {
  position: fixed; bottom: 20px; left: 20px; z-index: 99997;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #229ED9; color: #fff; text-decoration: none;
  box-shadow: 0 8px 22px rgba(34,158,217,.45);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cs-tg-btn:hover { transform: scale(1.08); box-shadow: 0 10px 28px rgba(34,158,217,.6); color: #fff; }
.cs-tg-btn svg  { width: 28px; height: 28px; }
@media (max-width: 480px) { .cs-tg-btn { left: 14px; bottom: 14px; width: 50px; height: 50px; } }
/* English / LTR: the theme parks its own WhatsApp button at the bottom-LEFT on
   LTR pages (ltr:left-4), so the Telegram button mirrors to the bottom-RIGHT. */
.cs-tg-btn[dir="ltr"],
html[dir="ltr"] .cs-tg-btn { left: auto; right: 20px; }
@media (max-width: 480px) {
  .cs-tg-btn[dir="ltr"],
  html[dir="ltr"] .cs-tg-btn { left: auto; right: 14px; }
}

/* --- Shared --------------------------------------------------------------- */
@keyframes cs-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; } }

/* --- Layout-shift guard (Core Web Vitals CLS) ------------------- cs-cls- */
/* Everything Salla renders late (header pin, breadcrumb, product cards, sliders, options, Tamara)
   gets its final space from the first paint, so the page never jumps while it loads.            */

/* Header. The theme sizes #mainnav only after window load, often too late: the page jumped up when
   the header pinned on scroll. The JS keeps the exact height; this holds it until then. */
#mainnav { min-height: 98px; }
@media (min-width: 768px) { #mainnav { min-height: 106px; } }

/* Breadcrumb (listing + product pages): one swipeable line, its row kept before it renders. */
/* the row keeps the theme's own 24px (py-3) from first paint: the breadcrumb sits over it instead of adding
   20px when this CSS or the component arrives (that late growth pushed the whole page down) */
nav.breadcrumbs { position: relative; }
nav.breadcrumbs salla-breadcrumb { display: block; position: absolute; inset-inline: 0; top: 2px; height: 20px; overflow: hidden; }
nav.breadcrumbs .s-breadcrumb-wrapper { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
nav.breadcrumbs .s-breadcrumb-wrapper::-webkit-scrollbar { display: none; }
nav.breadcrumbs .s-breadcrumb-wrapper > li { flex-shrink: 0; white-space: nowrap; }
.category_title_wrapper { min-width: 0; max-width: 100%; }

/* Listing pages (category, tag, offers, search): the reviews and the footer wait for the product
   cards; they used to sit on screen and get pushed ~2,700px down. The JS lets go after 20 s. */
body[class^="product-index"]:not(.cs-pl-done):not(:has(salla-products-list :is(.s-product-card-entry, .s-products-list-placeholder))) :is(.s-after-products-list, .s-after-testimonials, footer.store-footer) { display: none !important; }
/* the reviews slider is only folded away (not display:none) so its slides are measured right */
body[class^="product-index"]:not(.cs-pl-done):not(:has(salla-products-list :is(.s-product-card-entry, .s-products-list-placeholder))) section.s-block--testimonials { height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; visibility: hidden !important; }

/* Product page: what sits under the description (payment icons, related products, footer) stays
   folded away until the tabs script opens the description; it used to be on screen and get pushed
   ~4,000px down when the tab opened. The JS lets go after 20 s. */
body.product-single:not(.cs-tabs-done):has(.tabs-wrapper__product):not(:has(.tabs__item.is-active)) :is(.main-content > form.product-form ~ *, div:has(> .main-content > form.product-form) ~ *) { height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; visibility: hidden !important; }

/* Product page: payment icons, the first option (two when there are two or more) and the Tamara
   box keep their space. Tamara only shows for Gulf currencies, so only those reserve it. */
.s-block--payment salla-payments { display: block; min-height: 32px; }
salla-product-options[options*='"id"'] { display: block; min-height: 92px; }
salla-product-options[options*='"format":null},{"id"'] { min-height: 204px; }
@media (min-width: 600px) {
  salla-product-options[options*='"id"'] { min-height: 43px; }
  salla-product-options[options*='"format":null},{"id"'] { min-height: 106px; }
}
/* Tamara: before Salla renders the box a placeholder line holds its height (+4 for the margin it
   shares with the next row); afterwards the box itself keeps that height until Tamara fills it. */
:root { --cs-tam: 97px; }
@media (min-width: 418px) { :root { --cs-tam: 76px; } }
@media (min-width: 440px) { :root { --cs-tam: 66px; } }
@media (min-width: 768px) { :root { --cs-tam: 97px; } }
@media (min-width: 810px) { :root { --cs-tam: 76px; } }
@media (min-width: 1024px) { :root { --cs-tam: 66px; } }
html:has(meta[property="product:price:currency"]:is([content="SAR"], [content="AED"], [content="KWD"], [content="BHD"], [content="OMR"], [content="QAR"])) .product-form salla-installment:not(.hydrated)::before { content: ""; display: block; height: calc(var(--cs-tam) + 4px); }
html:has(meta[property="product:price:currency"]:is([content="SAR"], [content="AED"], [content="KWD"], [content="BHD"], [content="OMR"], [content="QAR"])) .product-form salla-installment > .mb-5:has(> tamara-widget) { min-height: var(--cs-tam); }
html.cs-cls-noinst .product-form salla-installment > .mb-5 { min-height: 0 !important; }

/* Home: the two product sliders keep their final height until Salla's script fills them. */
[component-id="549551493"] salla-products-slider:not(.hydrated), [component-id="1748957569"] salla-products-slider:not(.hydrated) { display: block; }
[component-id="549551493"] salla-products-slider:not(.hydrated) { min-height: calc(50vw + 176px); }
[component-id="1748957569"] salla-products-slider:not(.hydrated) { min-height: calc(50vw + 117px); }
@media (min-width: 481px) and (max-width: 767px) { [component-id="549551493"] salla-products-slider:not(.hydrated) { min-height: min(calc(50vw + 176px), calc(41.9vw + 200px)); } }
@media (min-width: 768px) {
  [component-id="549551493"] salla-products-slider:not(.hydrated) { min-height: 339px; }
  [component-id="1748957569"] salla-products-slider:not(.hydrated) { min-height: 264px; }
}
@media (min-width: 1024px) {
  [component-id="549551493"] salla-products-slider:not(.hydrated) { min-height: min(calc(16.667vw + 180px), 429px); }
  [component-id="1748957569"] salla-products-slider:not(.hydrated) { min-height: min(calc(16.667vw + 105px), 354px); }
}

/* Home: banner and slider pictures keep their real shape before they load (keyed on the picture
   address, so a replaced banner just falls back to the theme). */
img[src="https://cdn.files.salla.network/homepage/1137578866/6270bd0d-2ed8-4604-96ec-bf9e867cc86e.webp"]{aspect-ratio:auto 1102/320;height:auto}
img[src="https://cdn.files.salla.network/homepage/1137578866/609a9cca-9046-4f4f-8ed4-ca384894bd53.webp"]{aspect-ratio:auto 1440/408;height:auto}
@media (min-width:768px){img[data-src="https://cdn.files.salla.network/homepage/1137578866/86a64345-409e-425a-a76c-5d02048e3914.gif"]{aspect-ratio:auto 3840/278;height:auto}}
@media (max-width:767px){img[data-src="https://cdn.files.salla.network/homepage/1137578866/e4eb1319-8cd8-4bd3-ba39-6c0c1a119c20.gif"]{display:block;aspect-ratio:auto 800/100;height:auto}}
img[src="https://cdn.files.salla.network/homepage/1137578866/3be453e5-a952-484b-a31a-4e22769c6352.webp"]{aspect-ratio:auto 1440/483;height:auto}
@media (min-width:768px){img[data-src="https://cdn.files.salla.network/homepage/1137578866/7fbf9ec2-1c7c-4956-a018-aed252107059.gif"]{aspect-ratio:auto 3840/278;height:auto}}
@media (max-width:767px){img[data-src="https://cdn.files.salla.network/homepage/1137578866/08af1fe9-d3de-4c5e-963c-7f953ea2a8a3.gif"]{display:block;aspect-ratio:auto 800/100;height:auto}}
@media (min-width:768px){img[data-src="https://cdn.files.salla.network/homepage/1137578866/d3c9812e-b316-4ab0-98a8-33b870f5b4be.webp"]{aspect-ratio:auto 1440/28;height:auto}}
@media (max-width:767px){img[data-src="https://cdn.files.salla.network/homepage/1137578866/aa727017-c17f-4032-b492-b8dcf98e2456.webp"]{display:block;aspect-ratio:auto 1440/28;height:auto}}
img[data-src="https://cdn.files.salla.network/homepage/1137578866/df874e0e-6960-438b-99c0-b18496896f22.webp"]{aspect-ratio:auto 1440/528;height:auto}