/* Souqora custom styles (works together with Tailwind) */
:root { --ink:#0e2a28; --brand:#0e3b38; --saffron:#e8a33d; }
body { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #0f766e; outline-offset: 2px; }
.no-scrollbar { scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }

/* Marquee: moves right to left, continuous */
.marquee-track { display: flex; width: max-content; padding: 8px 0; animation: marquee 40s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.mq-item { white-space: nowrap; padding: 0 3rem; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Header */
.nav-link { position: relative; padding: 4px 0; transition: color .2s; }
.nav-link::after { content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--saffron); transition:width .25s; }
.nav-link:hover { color: var(--brand); } .nav-link:hover::after { width:100%; }
.icon-btn { display:grid; place-items:center; width:42px; height:42px; border-radius:9999px; color:var(--ink); transition:background .2s; }
.icon-btn:hover { background:#e2e8f0; }
.slider-btn { display:grid; place-items:center; width:42px; height:42px; border-radius:9999px; border:1px solid #cbd5e1; background:#fff; transition:all .2s; }
.slider-btn:hover { background:var(--brand); color:#fff; border-color:var(--brand); }

/* Category cards */
.cat-card img { transition: transform .5s ease; }
.cat-card:hover img { transform: scale(1.08); }
.cat-card:hover span { color: #0f766e; }

/* Filters */
.filter-btn { flex:none; padding:8px 18px; border-radius:9999px; border:1px solid #cbd5e1; background:#fff; font-weight:500; font-size:.9rem; transition:all .2s; }
.filter-btn:hover { border-color:var(--brand); }
.filter-btn.is-active { background:var(--brand); color:#fff; border-color:var(--brand); }

/* Product cards */
.product-card { transition: box-shadow .3s, transform .3s; }
.img-wrap img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: opacity .5s ease, transform .6s ease; }
.img-wrap .img-hover { opacity:0; }
@media (hover: hover) {
  .product-card:hover { box-shadow: 0 18px 40px -12px rgba(14,42,40,.25); transform: translateY(-4px); }
  .product-card:hover .img-main { opacity:0; }
  .product-card:hover .img-hover { opacity:1; }
  .product-card:hover .img-wrap img { transform: scale(1.07); }
}

/* Contact + social */
.contact-card { display:flex; flex-direction:column; align-items:center; gap:6px; padding:24px; border-radius:20px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); transition:background .2s, transform .2s; }
.contact-card:hover { background:rgba(255,255,255,.16); transform:translateY(-3px); }

/* Forms */
.lbl { display:block; margin-bottom:4px; font-size:.875rem; font-weight:600; color:var(--ink); }
.fld { width:100%; border:1px solid #cbd5e1; border-radius:12px; padding:10px 14px; background:#fff; }
.fld:focus { outline:none; border-color:#0f766e; box-shadow:0 0 0 3px rgba(15,118,110,.2); }
.fld.invalid { border-color:#e11d48; }
.pay-opt { display:flex; align-items:center; gap:8px; padding:12px 14px; border:1px solid #cbd5e1; border-radius:12px; cursor:pointer; font-weight:500; }
.pay-opt:has(input:checked) { border-color:#0f766e; background:#f0fdfa; }

/* Modal animations (answer to user actions) */
.modal.is-open { display:flex; animation: fadeIn .25s ease; }
#detail-modal.is-open { display:block; }
.modal.is-open .panel, #detail-modal.is-open #detail-body { animation: popIn .3s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes popIn { from { opacity:0; transform: translateY(24px) scale(.98); } to { opacity:1; transform:none; } }
#toast.show { opacity:1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .marquee-track { animation: none; }
}