/* =========================================================
   Athath El-Barakat - site.css
   ========================================================= */

/* ===================== Variables ===================== */
:root{
  --nav-grad: linear-gradient(90deg, #0d6efd, #198754);
  --text-light: #f8f9fa;
}

/* ===================== Base / Theme ===================== */
body {
  transition: background-color .25s ease, color .25s ease;
  background-color: #f8f9fa;
}

body.dark-mode {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

/* ===================== Navbar ===================== */
nav.navbar {
  background: var(--nav-grad);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.navbar .nav-link {
  color: var(--text-light) !important;
  font-weight: 600;
  margin-right: .5rem;
  padding: .4rem .6rem;
  border-radius: .6rem;
  transition: background-color .2s ease, color .2s ease;
  white-space: nowrap;
}

.navbar .nav-link:hover {
  color: #212529 !important;
  background: rgba(255,255,255,.85);
}

.navbar-toggler {
  border: none !important;
  box-shadow: none !important;
}

/* زر الوضع الليلي */
#themeToggle {
  border: 0;
  background: transparent;
  color: white;
  font-size: 1.25rem;
  padding: .25rem .45rem;
  border-radius: .6rem;
}

#themeToggle:hover{
  background: rgba(255,255,255,.15);
}

/* ===================== Notification bar (اختياري) ===================== */
.notification-bar {
  background: linear-gradient(90deg, #ffc107, #ffcd39);
  color: #212529;
  text-align: center;
  padding: 8px 44px 8px 12px;
  font-weight: 700;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1050;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  animation: slideDown .45s ease;
}

@keyframes slideDown {
  from { top: -50px; opacity: 0; }
  to   { top: 0; opacity: 1; }
}

.notification-close {
  background: none;
  border: none;
  color: #212529;
  font-size: 1.2rem;
  position: absolute;
  right: 12px;
  top: 4px;
  cursor: pointer;
}

body.dark-mode .notification-bar {
  background: linear-gradient(90deg, #444, #555);
  color: #fff;
}

body.dark-mode .notification-close{
  color:#fff;
}

/* ===================== Body Container Offset ===================== */
/* بدل قيم ثابتة: بنحسب padding-top من الـNavbar بالـJS */
.container-body { padding-top: 0; }

/* ===================== Compact Navbar (mobile first) ===================== */
.brand-compact{
  display:flex;
  align-items:center;
  gap:.4rem;
  padding: .1rem 0;
  margin: 0;
  max-width: 55vw;
  white-space: nowrap;
  overflow:hidden;
  text-decoration:none;
}

.brand-compact i{
  font-size: 1.05rem;
  opacity: .95;
  flex:0 0 auto;
}

.brand-compact .brand-title{
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .2px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.login-compact{
  display:flex;
  align-items:center;
  white-space: nowrap;
  font-size: .9rem;
}

.toggler-compact{
  padding: .22rem .42rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: .7rem;
  line-height: 1;
  background: rgba(255,255,255,.06);
}

.toggler-compact:hover{
  background: rgba(255,255,255,.14);
}

.toggler-compact i{
  font-size: 1.35rem;
}

@media (min-width: 992px){
  .brand-compact{ max-width: none; }
  .brand-compact .brand-title{ font-size: 1.05rem; }
  .toggler-compact i{ font-size: 1.55rem; }
}

.cart-btn{
  border-radius: .85rem;
  padding: .35rem .6rem;
}

/* =========================================================
   WhatsApp Button Styles (لو انت عاملها في partial)
   لو مش مستخدمها حالياً، سيبها هتنفع لاحقاً
   ========================================================= */

.whats-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  height:44px;
  border-radius:14px;
  text-decoration:none;
  color:#fff;
  font-weight:800;
  font-size:16px;
  white-space:nowrap;

  background:#25D366;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.whats-btn:hover{
  transform:translateY(-1px);
  filter:brightness(.97);
  box-shadow:0 14px 30px rgba(0,0,0,.22);
  color:#fff;
}

.whats-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(255,255,255,.16);
  flex:0 0 34px;
}

.whats-ic i{
  font-size:20px;
  line-height:1;
}

@media (max-width: 480px){
  .whats-btn{
    font-size:15px;
    height:46px;
    padding:12px 14px;
  }
}

/* ===== Pulse (mobile only) - اختياري ===== */
@keyframes waPulse {
  0%   { transform: translateY(0) scale(1); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
  50%  { transform: translateY(-1px) scale(1.02); box-shadow: 0 14px 30px rgba(0,0,0,.22); }
  100% { transform: translateY(0) scale(1); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
}

@keyframes waShine {
  0%   { opacity: 0; transform: translateX(-140%) skewX(-20deg); }
  25%  { opacity: .35; }
  60%  { opacity: 0; transform: translateX(140%) skewX(-20deg); }
  100% { opacity: 0; transform: translateX(140%) skewX(-20deg); }
}

@media (max-width: 768px){
  .whats-btn{
    position: relative;
    overflow: hidden;
    /* لو عايزها دايمًا */
    /* animation: waPulse 2.6s ease-in-out infinite; */
  }

  /* لمعان خفيف */
  .whats-btn::after{
    content:"";
    position:absolute;
    top:-20%;
    left:-60%;
    width:45%;
    height:140%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    /* animation: waShine 6s ease-in-out infinite; */
    pointer-events:none;
  }

  /* ✅ لو عايزها أول فترة فقط: استخدم class wa-attn على الزر */
  .wa-attn{
    animation: waPulse 2.6s ease-in-out 8; /* ~20 ثانية */
  }
  .wa-attn::after{
    animation: waShine 6s ease-in-out 3;
  }
}

@media (prefers-reduced-motion: reduce){
  .whats-btn, .whats-btn::after{ animation: none !important; }
}






/* ===== WhatsApp Button (Partial) ===== */
.whats-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:12px 16px;
    height:44px;
    border-radius:14px;
    text-decoration:none;
    color:#fff;
    font-weight:800;
    font-size:16px;
    white-space:nowrap;

    background:#25D366;
    box-shadow:0 10px 24px rgba(0,0,0,.18);
    transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.whats-btn:hover{
    transform:translateY(-1px);
    filter:brightness(.97);
    box-shadow:0 14px 30px rgba(0,0,0,.22);
    color:#fff;
}

.whats-ic{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:10px;
    background:rgba(255,255,255,.16);
    flex:0 0 34px;
}

.whats-ic i{
    font-size:20px;
    line-height:1;
}

/* النص */
.whats-txt{
    line-height:1;
}

/* Responsive */
@media (max-width: 480px){
    .whats-btn{
        font-size:15px;
        height:46px;
        padding:12px 14px;
    }
}






/* ================= ElNahar Images ================= */

/* يمنع القص ويخلي الصور ثابتة الحجم (CLS أقل) */
.nahar-img{
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #f3f4f6;
}

/* صور الشبكة */
.nahar-thumb{
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .2s ease;
  background: #f3f4f6;
}

a:hover .nahar-thumb{
  transform: scale(1.02);
}

/* تحسين موبايل */
@media (max-width: 576px){
  .nahar-img{ aspect-ratio: 3 / 4; }   /* مناسب لصور طولية */
  .nahar-thumb{ aspect-ratio: 1 / 1; } /* مربعات لطيفة */
}




    /* تحسينات خفيفة بدون الاعتماد على CSS خارجي */
    .lp-wrap {
        max-width: 1100px;
    }

    .lp-hero {
        border-radius: 18px;
        border: 1px solid rgba(0, 0, 0, .08);
    }

    .lp-title {
        font-weight: 800;
        letter-spacing: .2px;
    }

    .lp-meta {
        font-size: .95rem;
        color: #6c757d;
    }

    .price-badge {
        font-size: 1.3rem;
        font-weight: 800;
    }

    .gallery-img {
        height: 220px;
        object-fit: cover;
        border-radius: 12px;
    }

    .action-bar {
        position: sticky;
        bottom: 12px;
        z-index: 10;
    }

    .whats-btn {
        border-radius: 14px;
        font-weight: 700;
    }

    .chip {
        background: #f1f3f5;
        border-radius: 999px;
        padding: .25rem .6rem;
        font-size: .9rem;
    }

    .shadow-soft {
        box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
    }