/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CLOUD STORE — Custom Storefront CSS             (Salla: mtjrcloud.com)     ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

: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; }
.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 only) --------------------- 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; } }

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