body { margin: 0; font-family: "Noto Kufi Arabic", Tahoma, Arial, sans-serif; background: #fff; color: #333; }
    a { text-decoration: none; }

    .social-bar { background: #f1f1f1; padding: 6px 16px; display: flex; gap: 12px; justify-content: flex-end; align-items: center; }
    .social-bar a img { width: 26px; height: 26px; transition: transform .3s; }
    .social-bar a img:hover { transform: scale(1.2); }

    header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 3px solid #ddd; }
    .container{ max-width: 1200px; margin: 0 auto; padding: 12px; }
    .nav{ display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
    .brand{ display:flex; align-items:center; gap:20px; font-weight:800; }
    .brand img.logo{ width:80px; height:80px; border-radius:70%; object-fit:cover; }

    .brand-text { font-style: italic; line-height: 1.12; font-size: 25px; font-weight: bold;
      font-family: "Poppins", "Tajawal", sans-serif; -webkit-text-stroke: 1px; }
    .brand-text .black { color:#000; display:block; }
    .brand-text .yellow { color:#ffd900; display:block; }

    .toolbar{ display:flex; gap:50px; align-items:center; flex-wrap:wrap; margin-top:10px; }

    .search-box { position: relative; display: inline-block; }
    .search-box input[type="search"] {
      width: 300px; padding: 10px 40px 10px 15px;
      border-radius: 25px; border: 1px solid #dcdcdc;
      outline: none; font-size: 16px;
      box-shadow: 0 1px 6px rgba(32,33,36,.28);
      transition: 0.3s;
    }
    .search-box input[type="search"]:focus { border-color: #4285f4; }
    .search-box img {
      position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
      width: 20px; height: 20px; opacity: 0.6; cursor: pointer;
    }

    .btn{ background: #22c55e; color:#fff; border:none; padding:8px 14px; border-radius:10px; cursor:pointer; font-weight:700; font-size:14px; position:relative; }
    .btn:hover{ background:#16a34a; }

    #cart-count {
      position: absolute; top: -8px; right: -8px; background: red;
      color: #fff; font-size: 12px; font-weight: bold;
      padding: 2px 6px; border-radius: 50%; display: none;
    }

    .slider { max-width: 500px; margin: 20px auto; overflow: hidden; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); text-align: center; }
    .slider img { width: 100%; height: auto; border-radius: 16px; transition: opacity 0.5s ease-in-out; }

    h2.section-title {
      text-align: center;
      font-size: 24px;
      color: #000;
      margin: 40px 0 20px;
      border-bottom: 3px solid #ffd900;
      display: inline-block;
      padding-bottom: 6px;
    }

    .grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:14px; margin-top:20px; }
    .card{ background: #fff; border:1px solid #ddd; border-radius:14px; padding:12px; text-align:center; transition:.3s; cursor:pointer; }
    .card img { width:100%; height:140px; object-fit:cover; border-radius:10px; margin-bottom:8px; }
    .card:hover{ transform: translateY(-4px); box-shadow:0 4px 14px rgba(0,0,0,0.1); }
    .card h3{ font-size:14px; margin:6px 0 0; color:#000; }

    .price { font-size: 15px; color: #000; font-weight: bold; }
    .old-price { text-decoration: line-through; color: gray; font-size: 13px; margin-right: 4px; }

    .cart-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); justify-content: center; align-items: center; z-index: 100; }
    .cart-content { background: #fff; border-radius: 16px; padding: 16px; width: 300px; max-height: 80%; overflow-y: auto; box-shadow:0 4px 14px rgba(0,0,0,0.3); }
    .cart-content h2{ margin-top:0; font-size:18px; }
   .close-cart { background: red; color: #fff; border: none; padding: 4px 10px; border-radius: 8px; float: left; cursor: pointer; font-size: 12px; }
   .footer-section {
  position: relative;
  text-align: center;
  color: #000;
  font-size: 18px;
  margin-top: 50px;
  padding-bottom: 30px; /* مساحة للفاصل السفلي */
}

/* النص اللي في المنتصف */
.footer-center {
  font-weight: bold;
}

/* النص اللي في آخر الصفحة */
.footer-bottom {
  position: absolute;
  bottom: 10px;
 left:20px; /* لو عايزها في اليسار استبدل بـ left:20px; */
  font-size: 18px;
}

.footer-bottom a {
  color: #FFD700; /* ذهبي */
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;
}

.footer-bottom a:hover {
  color: #ffbf00; /* ذهبي أفتح عند المرور */
}

/* متجاوب مع الموبايل */
@media (max-width: 768px) {
  .footer-bottom {
    position: static;
    text-align: center;
    margin-top: 10px;
  }
}