@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Poppins:wght@400;600;700&display=swap');
:root{
  --brand:#6f42c1;
  --brand-2:#ff7f50;
}
body{font-family:Poppins, Cairo, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";}
[dir="rtl"] body{font-family:Cairo, Poppins, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";}
.navbar-brand{color:var(--brand) !important}
.btn-primary{background:var(--brand); border-color:var(--brand)}
.btn-primary:hover{background:#5f3ab0;border-color:#5f3ab0}
.card{border:0}
.card .card-body{position:relative}
.badge{font-weight:600}
/* Section action pill link */
.section-action{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:999px;color:var(--brand);background:rgba(111,66,193,.08);text-decoration:none;font-weight:700;font-size:.875rem;border:1px solid rgba(111,66,193,.15)}
.section-action:hover{background:rgba(111,66,193,.15);color:#4f2e9a}
.section-action:focus-visible{outline:2px solid rgba(111,66,193,.35);outline-offset:2px}
.section-action .arrow{display:inline-block;transition:transform .18s ease}
.section-action:hover .arrow{transform:translateX(3px)}
[dir="rtl"] .section-action:hover .arrow{transform:translateX(-3px)}
/* Glass navbar */
.glass-nav{background:rgba(255,255,255,0.85)!important;backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid rgba(0,0,0,.05)}
.glass-nav .nav-link{color:#495057}
.glass-nav .nav-link:hover{color:#212529}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;font-size:16px}
.cart-count{top:-.25rem; inset-inline-start:100%; transform:translate(-50%,-30%);}
.locale-switch .btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}

/* Utility */
.icon-circle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;font-size:20px}

/* Scroll mask to hint overflow (removed fade to avoid white overlay on card edges) */
.scroll-mask{mask-image:linear-gradient(to right, black 0, black 100%);-webkit-mask-image:linear-gradient(to right, black 0, black 100%)}

/* Home hero */
.hero{
  background:
    linear-gradient(rgba(255,255,255,0.0), rgba(255,255,255,0.6)),
    radial-gradient(1200px 600px at 10% 10%, rgba(111,66,193,0.10), transparent),
    radial-gradient(1200px 600px at 90% 0%, rgba(255,127,80,0.08), transparent);
  border-radius: 16px;
}
.hero h1{font-weight:700;font-size:clamp(2rem,4vw,3rem)}
.hero .lead{color:#6c757d;font-size:clamp(1.05rem,2.2vw,1.25rem)}

/* Featured category banner */
.featured-banner{background:linear-gradient(135deg, var(--brand) 0%, #8f62e6 60%, #ff7f50 100%);color:#fff;border-radius:18px;overflow:hidden;position:relative}
.featured-banner h3{font-weight:700}
.featured-banner .overlay{position:absolute;inset:0;background:linear-gradient(to right, rgba(0,0,0,0.25), rgba(0,0,0,0));}
.featured-items-scroll{display:flex;gap:1rem;overflow-x:auto;padding:.5rem .5rem 1rem .5rem}
.featured-items-scroll > *{min-width:240px;max-width:240px}
[dir="rtl"] .scroll-x{direction:rtl}
[dir="rtl"] .featured-items-scroll{direction:rtl}
[dir="rtl"] .discount-badge{right:auto;left:.6rem}
[dir="rtl"] .price .old{margin-inline-start:0;margin-inline-end:.25rem}

/* Category chip buttons */
.category-chip{display:flex;align-items:center;justify-content:center;border:1px solid var(--brand);color:var(--brand);background:#fff;border-radius:999px;padding:.75rem 1.25rem;font-weight:700;white-space:nowrap;transition:all .15s;font-size:1rem}
.category-chip:hover{background:var(--brand);color:#fff;text-decoration:none}
/* Category image cards */
.category-img-card{position:relative;display:block;border-radius:12px;overflow:hidden;box-shadow:0 .25rem .75rem rgba(0,0,0,.06);transition:transform .2s ease, box-shadow .2s ease}
.category-img-card::before{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 60%);pointer-events:none}
.category-img-card:hover{transform:translateY(-3px);box-shadow:0 .75rem 1.5rem rgba(0,0,0,.12)}
.category-img-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.category-img-card .cat-label{position:absolute;inset-inline:8px;bottom:8px;background:rgba(255,255,255,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:.35rem .6rem;border-radius:999px;font-weight:700;color:#212529}
.category-img-card .cat-count-badge{position:absolute;top:8px;inset-inline-end:8px;background:rgba(255,255,255,.9);color:#212529;border-radius:999px;padding:.2rem .45rem;font-weight:700;font-size:.8rem}
[dir="rtl"] .category-img-card .cat-count-badge{inset-inline-start:8px;inset-inline-end:auto}

/* Skeleton shimmer */
.skeleton{position:relative;overflow:hidden;background:#e9ecef}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* Section spacing tweaks */
.section-block{margin-bottom:3.5rem}

/* Card polish */
.card-hover{transition:transform .2s ease, box-shadow .2s ease}
.card-hover:hover{transform:translateY(-3px); box-shadow:0 .5rem 1rem rgba(0,0,0,.12)!important}
.ratio-1x1{position:relative; width:100%; padding-top:100%}
.ratio-1x1 > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-top-left-radius:.6rem; border-top-right-radius:.6rem}
.price{font-weight:700;font-size:.95rem}
.price .old{color:#6c757d; text-decoration:line-through; margin-inline-start:.25rem}
.discount-badge{position:absolute; top:.6rem; right:.6rem; background:var(--brand-2); color:#fff}

/* Horizontal scroller */
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; gap:1.1rem}
.scroll-x > *{scroll-snap-align:start}

@media (max-width: 575.98px){
  .hero h1{font-size:1.9rem}
  .hero .lead{font-size:1rem}
}

/* Item detail gallery */
.item-main-img{width:100%;aspect-ratio:1/1;height:auto;border-radius:12px;box-shadow:0 .5rem 1rem rgba(0,0,0,.1);object-fit:cover;max-height:560px}
.thumb-strip{display:flex;gap:.75rem;margin-top:1rem}
.thumb-strip button{border:0;background:transparent;padding:0;cursor:pointer}
.thumb-strip img{width:92px;height:92px;object-fit:cover;border-radius:10px;border:2px solid transparent;transition:border-color .15s ease}

/* Larger card wrapper widths for scrollers */
.card-wrap{min-width:240px;max-width:240px}
.thumb-strip img.active{border-color:var(--brand)}

/* Favorite button */
.favorite-btn{border:0;background:transparent;color:#dc3545;font-size:1.5rem;line-height:1}
.favorite-btn.active{color:#bd2130}
/* Mini thumbnail for admin orders */
.mini-thumb{width:40px;height:40px;object-fit:cover;border-radius:6px;background:#f8f9fa;display:block}
/* Admin orders responsive tweaks */
.orders-row-actions{position:relative}
.orders-status-select{min-width:130px}
@media (max-width: 575.98px){
  .table-responsive{overflow:visible}
  .orders-row-actions{flex-direction:column!important;align-items:stretch!important}
  .orders-status-select{width:100%!important}
  .orders-row-actions .btn{width:100%}
}

/* Stock meter */
.stock-meter{height:8px;background:#e9ecef;border-radius:999px;overflow:hidden}
.stock-meter > span{display:block;height:100%;background:var(--brand);width:0}

/* Admin dashboard styling */
.admin-header{background:linear-gradient(135deg, rgba(111,66,193,.12), rgba(255,127,80,.12));border:1px solid rgba(111,66,193,.15)}
.stat-card{position:relative;overflow:hidden}
.stat-card .card-body{padding:1rem .9rem}
.stat-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:#6c757d}
.stat-value{font-size:1.6rem;font-weight:700;line-height:1.1}
.stat-sub{font-size:.7rem;font-weight:600}
[dir="rtl"] .stat-label{text-transform:none;letter-spacing:0}
.panel .card-header{background:#fff;border-bottom:1px solid rgba(0,0,0,.08);font-weight:600}
.panel table tbody tr{transition:background .15s}
.panel table tbody tr:hover{background:rgba(111,66,193,.05)}
.panel h5{font-weight:700}

/* Admin nav pills */
.admin-nav .nav-link{border:1px solid rgba(111,66,193,.25);color:var(--brand);background:#fff;border-radius:999px;padding:.5rem .9rem;font-weight:700;display:inline-flex;align-items:center;gap:.4rem}
.admin-nav .nav-link:hover{background:rgba(111,66,193,.08);color:#4f2e9a}
.admin-nav .nav-link.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.admin-nav .pill-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:999px;background:rgba(111,66,193,.12);color:var(--brand);font-size:.75rem;font-weight:700;padding:0 .45rem;margin-inline-start:.25rem}
[dir="rtl"] .admin-nav .nav-link{gap:.4rem}

/* Site footer */
.site-footer{background:#fff;border-top:1px solid rgba(0,0,0,.06)}
.contact-pill{display:inline-flex;align-items:center;gap:.4rem;background:rgba(111,66,193,.08);color:#4f2e9a;border:1px solid rgba(111,66,193,.15);padding:.4rem .75rem;border-radius:999px;text-decoration:none;font-weight:700}
.contact-pill:hover{background:rgba(111,66,193,.15);color:#3d257c}

/* Logout button styling */
.btn-logout{background:#dc3545;color:#fff;font-weight:700;border-radius:999px;padding:.55rem 1.1rem;border:1px solid #dc3545;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.btn-logout:hover{background:#c82333;border-color:#bd2130;color:#fff}
[dir="rtl"] .btn-logout{font-weight:700}