/* Diyafah Shop — Site Stylesheet
   Colors updated to match the real Al Diyafah (bluesea) product labels and
   banner photography: navy-blue calligraphy logo, gold jar/tin lids, and
   olive-grove green from the banner backdrop.
   Primary:  #1B3A63 (navy blue from the "AL DIYAFAH" label calligraphy)
   Accent:   #C9922B (gold from the jar/tin lids)
   Olive:    #4B6B3A (olive green from the grove backdrop, used sparingly)
   Badge bg: #F2EFE6 (warm cream, echoes the label's off-white background) */
:root {
    --ds-primary:   #1B3A63;
    --ds-primary-d: #12283F;
    --ds-primary-l: #2C517F;
    --ds-accent:    #C9922B;
    --ds-accent-d:  #A67518;
    --ds-accent-l:  #E8CE8F;
    --ds-olive:     #4B6B3A;
    --ds-olive-d:   #354E29;
    --ds-light-bg:  #F2EFE6;
    --ds-dark:      #1a1a1a;
    --ds-gray:      #6c757d;
    --ds-border:    #e9ecef;
    --ds-radius:    10px;
    --ds-shadow:    0 2px 12px rgba(0,0,0,.07);
}
body { font-family:'Cairo','Segoe UI',sans-serif; background:#fff; color:var(--ds-dark); }
.btn-primary { background-color:var(--ds-primary); border-color:var(--ds-primary); }
.btn-primary:hover,.btn-primary:focus { background-color:var(--ds-primary-d); border-color:var(--ds-primary-d); }
.btn-outline-primary { color:var(--ds-primary); border-color:var(--ds-primary); }
.btn-outline-primary:hover { background-color:var(--ds-primary); border-color:var(--ds-primary); }
a { color:var(--ds-primary); } a:hover { color:var(--ds-primary-d); }
.top-bar { font-size:.8rem; }
.navbar { border-bottom:2px solid var(--ds-accent); }
.brand-name { font-family:'Playfair Display',serif; font-weight:700; font-size:1.3rem; color:var(--ds-primary); letter-spacing:1px; }
.nav-icon-link { color:var(--ds-dark); text-decoration:none; transition:color .2s; }
.nav-icon-link:hover { color:var(--ds-primary); }
.cart-badge { font-size:.6rem; top:-6px; right:-8px; background-color:var(--ds-accent)!important; color:#fff; min-width:16px; height:16px; line-height:16px; padding:0 4px; border-radius:50%; }
.product-card { border:1px solid var(--ds-border); border-radius:var(--ds-radius); transition:box-shadow .25s,transform .25s; overflow:hidden; background:#fff; }
.product-card:hover { box-shadow:var(--ds-shadow); transform:translateY(-3px); }
.product-card .card-img-top { object-fit:cover; height:220px; background:var(--ds-light-bg); }
.product-card .badge-sale { position:absolute; top:10px; inset-inline-start:10px; background:var(--ds-primary); color:#fff; font-size:.7rem; padding:3px 8px; border-radius:20px; }
.product-card .price-current { font-weight:700; color:var(--ds-primary); }
.product-card .price-old { text-decoration:line-through; color:var(--ds-gray); font-size:.85rem; }
.stars { color:var(--ds-accent); }
.section-title { font-family:'Playfair Display',serif; font-weight:700; position:relative; padding-bottom:12px; margin-bottom:32px; }
.section-title::after { content:''; position:absolute; bottom:0; inset-inline-start:0; width:48px; height:3px; background:var(--ds-accent); border-radius:2px; }
.hero-carousel .carousel-item img { height:480px; object-fit:cover; }
.hero-carousel .carousel-caption { text-shadow:0 1px 4px rgba(0,0,0,.7); }
.category-card { border-radius:var(--ds-radius); overflow:hidden; position:relative; cursor:pointer; }
.category-card img { width:100%; height:180px; object-fit:cover; transition:transform .3s; }
.category-card:hover img { transform:scale(1.05); }
.category-card .overlay { position:absolute; inset:0; background:rgba(27,58,99,.6); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:1.1rem; }
footer a { transition:color .2s; }
footer a:hover { color:var(--ds-accent)!important; }

/* Bootstrap's .dropdown-menu (z-index:1000) sits BELOW our sticky navbar
   (z-index:1020 from .sticky-top), so an open top-bar dropdown gets painted
   over by the navbar -- only the portion poking out past the navbar's
   bottom edge is visible, which looked like a stray floating menu over the
   hero image. Bumping it above every sticky/fixed element fixes that. */
.top-bar .dropdown-menu { z-index: 1031; }

/* If a banner's image fails to load, the onerror handler in Home/Index.cshtml
   paints the slide with --ds-primary as a plain block -- make sure the
   caption text is never hidden behind/below that fallback color, and always
   shows regardless of viewport width (was d-none d-md-block, which hid it
   entirely on narrow screens with nothing to replace it). */
.hero-carousel .carousel-caption { display: block !important; }


/* Bootstrap's .text-muted resolves to a dark grey (--bs-secondary-color),
   designed for light backgrounds. The footer background is dark navy
   (--ds-primary-d), so that dark-on-dark grey text was nearly invisible --
   only visible once a text selection's highlight changed the background
   behind it. Override to a light, semi-transparent white instead. */
footer.text-light .text-muted { color: rgba(255,255,255,.7) !important; }
footer.text-light a.text-muted:hover { color: #fff !important; }
footer.text-light hr.border-secondary { border-color: rgba(255,255,255,.2) !important; opacity: 1; }