/* ═══════════════════════════════════════════════════════
   SHALABY STORE — Custom Theme v4
   أسود #0a0a0a | تيل #00bcd4 | أبيض #fff
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;900&display=swap');

/* ══════════════════════════════════
   1. BASE
══════════════════════════════════ */
* { font-family: 'Cairo', sans-serif !important; box-sizing: border-box; }

body { background: #f5f5f5 !important; color: #0a0a0a !important; }

h1,h2,h3,h4,h5,h6 {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 900 !important;
  color: #0a0a0a !important;
}

a {
  text-decoration: none !important;
  transition: color 0.2s !important;
}

/* ══════════════════════════════════
   2. ANNOUNCEMENT BAR
══════════════════════════════════ */
[class*="announcement"],
[class*="header-banner"],
div[class*="marquee"],
.announcement-bar {
  background: #0a0a0a !important;
  color: #00bcd4 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border: none !important;
}

/* ══════════════════════════════════
   3. HEADER — بدون خطوط
══════════════════════════════════ */
header,
div#__next > header {
  background: #fff !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
}

/* شيل أي border من داخل الهيدر */
header *,
div#__next > header * {
  border-top: none !important;
  border-bottom: none !important;
}

header a, nav a {
  color: #0a0a0a !important;
  font-weight: 600 !important;
}
header a:hover, nav a:hover { color: #00bcd4 !important; }

header svg, nav svg {
  color: #0a0a0a !important;
  transition: color 0.2s !important;
}
header a:hover svg { color: #00bcd4 !important; }

[class*="cart-count"] {
  background: #00bcd4 !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: none !important;
}

/* قائمة الهاتف */
[class*="mobile-menu"],
[class*="drawer"] {
  background: #0a0a0a !important;
  border: none !important;
}
[class*="mobile-menu"] a,
[class*="drawer"] a {
  color: #fff !important;
  border: none !important;
  padding: 14px 20px !important;
  font-weight: 600 !important;
  display: block !important;
}
[class*="mobile-menu"] a:hover,
[class*="drawer"] a:hover {
  color: #00bcd4 !important;
  background: rgba(0,188,212,0.08) !important;
}

/* ══════════════════════════════════
   4. BUTTONS
══════════════════════════════════ */
button, [class*="btn"], input[type="submit"] {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.25s !important;
  border: none !important;
}

/* زر الشراء */
button[type="submit"],
[class*="add-to-cart"],
[class*="buy-now"] {
  background: linear-gradient(135deg, #00bcd4, #0097a7) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 22px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 14px rgba(0,188,212,0.3) !important;
}
button[type="submit"]:hover,
[class*="add-to-cart"]:hover {
  background: linear-gradient(135deg, #0097a7, #00838f) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0,188,212,0.4) !important;
}

/* ══════════════════════════════════
   5. PRODUCT CARDS
══════════════════════════════════ */
[class*="product-card"],
[class*="product_card"],
[class*="ProductCard"],
[class*="item-card"] {
  background: #fff !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07) !important;
  overflow: hidden !important;
  transition: all 0.3s !important;
}
[class*="product-card"]:hover,
[class*="product_card"]:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 28px rgba(0,188,212,0.14) !important;
}
[class*="product-card"] img,
[class*="product_card"] img {
  transition: transform 0.35s !important;
}
[class*="product-card"]:hover img,
[class*="product_card"]:hover img {
  transform: scale(1.04) !important;
}

[class*="price"], [class*="Price"] {
  color: #00bcd4 !important;
  font-weight: 900 !important;
}
s, del, [class*="compare-price"], [class*="old-price"] {
  color: #aaa !important;
  font-size: 13px !important;
}

/* ══════════════════════════════════
   6. FORMS & INPUTS — بدون borders غريبة
══════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
  font-family: 'Cairo', sans-serif !important;
  background: #fff !important;
  border: 1.5px solid #e8e8e8 !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 15px !important;
  color: #0a0a0a !important;
  width: 100% !important;
  box-shadow: none !important;
  transition: border-color 0.2s !important;
  outline: none !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #00bcd4 !important;
  box-shadow: 0 0 0 3px rgba(0,188,212,0.1) !important;
}

label {
  font-weight: 600 !important;
  color: #333 !important;
  font-size: 14px !important;
}

/* حقل الكمية — شكل طبيعي */
[class*="quantity"],
[class*="qty"] {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
[class*="quantity"] input,
[class*="qty"] input,
input[type="number"] {
  width: 52px !important;
  min-width: unset !important;
  text-align: center !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 8px !important;
  padding: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
[class*="quantity"] button,
[class*="qty"] button {
  background: #f2f2f2 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  width: 34px !important;
  height: 34px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #333 !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
}
[class*="quantity"] button:hover,
[class*="qty"] button:hover {
  background: #00bcd4 !important;
  border-color: #00bcd4 !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════
   7. ORDER FORM
══════════════════════════════════ */
[class*="order-form"],
[class*="checkout-form"],
[class*="OrderForm"] {
  background: #fff !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
  padding: 24px !important;
}

[class*="order-summary"],
[class*="cart-summary"] {
  background: #f0fafc !important;
  border-radius: 16px !important;
  border: none !important;
  padding: 18px !important;
}

/* ══════════════════════════════════
   8. FOOTER — بدون خطوط داخلية
══════════════════════════════════ */
footer,
[class*="footer"] {
  background: #0a0a0a !important;
  color: #aaa !important;
  border: none !important;
  border-top: 2px solid #00bcd4 !important;
  padding: 36px 20px 24px !important;
}

/* شيل كل borders داخل الفوتر */
footer *, [class*="footer"] * {
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
}

footer h3, footer h4,
[class*="footer"] h3, [class*="footer"] h4 {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  margin-bottom: 12px !important;
}

footer a, [class*="footer"] a {
  color: #888 !important;
  font-size: 14px !important;
  line-height: 2.2 !important;
  display: block !important;
}
footer a:hover, [class*="footer"] a:hover {
  color: #00bcd4 !important;
}

footer p, [class*="footer"] p, [class*="footer"] li {
  color: #777 !important;
  font-size: 13px !important;
}

/* أيقونات السوشيال */
footer svg, [class*="footer"] svg {
  color: #888 !important;
  fill: #888 !important;
  width: 22px !important;
  height: 22px !important;
  transition: all 0.2s !important;
}
footer a:hover svg, [class*="footer"] a:hover svg {
  color: #00bcd4 !important;
  fill: #00bcd4 !important;
  transform: scale(1.1) !important;
}

footer [class*="social"],
[class*="footer"] [class*="social"] {
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* Copyright */
[class*="copyright"] {
  color: #555 !important;
  font-size: 12px !important;
  padding-top: 14px !important;
}

/* ══════════════════════════════════
   9. STICKY BUY BUTTON
   زر الشراء يظهر fixed أسفل الشاشة
   في صفحة المنتج عند الـ scroll
══════════════════════════════════ */

/* نضيف padding أسفل الصفحة عشان الزر ما يغطيش المحتوى */
div#product-id {
  padding-bottom: 80px !important;
}

/* الزر الثابت */
div#product-id button[type="submit"]:first-of-type,
div#product-id [class*="add-to-cart"]:first-of-type {
  position: fixed !important;
  bottom: 16px !important;
  left: 16px !important;
  right: 16px !important;
  width: calc(100% - 32px) !important;
  z-index: 998 !important;
  border-radius: 14px !important;
  padding: 16px !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #00bcd4, #0097a7) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 24px rgba(0,188,212,0.45) !important;
  text-align: center !important;
}

/* على الشاشات الكبيرة — الزر مش sticky */
@media (min-width: 1024px) {
  div#product-id button[type="submit"]:first-of-type,
  div#product-id [class*="add-to-cart"]:first-of-type {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    padding: 14px 28px !important;
    font-size: 16px !important;
    box-shadow: 0 3px 14px rgba(0,188,212,0.3) !important;
  }
  div#product-id {
    padding-bottom: 0 !important;
  }
}

/* ══════════════════════════════════
   10. PRODUCT PAGE
══════════════════════════════════ */
[class*="product-image"],
[class*="gallery"] {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

[class*="thumbnail"],
[class*="thumb"] {
  border-radius: 10px !important;
  border: 2px solid transparent !important;
  transition: border-color 0.2s !important;
  cursor: pointer !important;
}
[class*="thumbnail"]:hover,
[class*="thumbnail"][class*="active"] {
  border-color: #00bcd4 !important;
}

/* ══════════════════════════════════
   11. SCROLLBAR
══════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: #00bcd4; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #0097a7; }

/* ══════════════════════════════════
   12. MOBILE
══════════════════════════════════ */
@media (max-width: 768px) {
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }

  [class*="product-card"],
  [class*="product_card"] {
    border-radius: 14px !important;
  }

  [class*="order-form"] {
    padding: 18px !important;
    border-radius: 16px !important;
  }
}

/* ══════════════════════════════════
   13. GLOBAL — شيل أي border زيادة
══════════════════════════════════ */
hr {
  border: none !important;
  border-top: 1px solid #f0f0f0 !important;
  margin: 16px 0 !important;
}

/* pagination */
[class*="pagination"] button,
[class*="pagination"] a {
  border-radius: 8px !important;
  border: 1px solid #e8e8e8 !important;
  color: #333 !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
}
[class*="pagination"] button:hover,
[class*="pagination"] a:hover,
[class*="pagination"] button[class*="active"],
[class*="pagination"] a[class*="active"] {
  background: #00bcd4 !important;
  border-color: #00bcd4 !important;
  color: #fff !important;
}

/* selection */
::selection {
  background: rgba(0,188,212,0.2) !important;
  color: #0a0a0a !important;
}