@font-face{
  font-family:"Cairo";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/cairo/cairo-400.ttf") format("truetype");
}
@font-face{
  font-family:"Cairo";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("fonts/cairo/cairo-700.ttf") format("truetype");
}
@font-face{
  font-family:"Cairo";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("fonts/cairo/cairo-800.ttf") format("truetype");
}
:root{
  --bs-font-sans-serif:"Cairo",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
}
html,
body,
button,
input,
select,
textarea,
.store-appbar,
.store-tabs,
.store-main{
  font-family:"Cairo",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif !important;
}

/* ===== public/assets/app.css ===== */
/* ===== WOW Showcase + Search + Crisp Images (BEST FULL) ===== */

/* خلي الصور أوضح وما تتبهدلش مع الـ transform */
.project-img,
.project-cover{
  aspect-ratio: 16/9;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  image-rendering: auto;
  filter: saturate(1.03) contrast(1.03);
}

/* إلغاء أي blur محتمل من hover قديم */
.card:hover .project-img,
.card:hover .project-cover{
  transform: translateZ(0);
}

/* Hero مبهر */
.showcase{
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) + 8px);
  border: 1px solid rgba(255,255,255,.35);
  background:
    radial-gradient(900px 420px at 12% 18%, rgba(79,70,229,.22), transparent 60%),
    radial-gradient(900px 420px at 88% 65%, rgba(13,110,253,.20), transparent 60%),
    radial-gradient(700px 360px at 55% 25%, rgba(22,163,74,.14), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.55));
  box-shadow: 0 18px 55px rgba(17,24,39,.14);
}
.showcase::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 25% 35%, rgba(255,255,255,.40), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.20), transparent 60%);
  transform: rotate(10deg);
  pointer-events:none;
}
.showcase::after{
  content:"";
  position:absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  right: -220px;
  top: -180px;
  background: radial-gradient(circle, rgba(13,110,253,.22), transparent 60%);
  filter: blur(2px);
  pointer-events:none;
}

/* Search box مبهر (Gradient Border + Glass) */
.search-shell{
  position: relative;
  padding: 2px;
  border-radius: calc(var(--radius) + 10px);
  background: linear-gradient(90deg, rgba(79,70,229,.55), rgba(13,110,253,.55), rgba(22,163,74,.45));
  box-shadow: 0 16px 40px rgba(13,110,253,.18);
}
.search-glass{
  border-radius: calc(var(--radius) + 9px);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
}
.search-glass:focus-within{
  box-shadow: 0 0 0 .30rem rgba(13,110,253,.18);
}
.search-input{
  border: 0 !important;
  background: transparent !important;
  padding: 1rem 1rem !important;
}
.search-input:focus{
  box-shadow: none !important;
}
.search-btn{
  border-radius: calc(var(--radius) + 8px) !important;
  padding: .9rem 1.1rem !important;
  font-weight: 800;
}

/* Chips */
.chip{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.70);
  text-decoration: none;
  color: rgba(17,24,39,.85);
  transition: transform .15s ease, box-shadow .15s ease;
}
.chip:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(17,24,39,.10);
}
.chip.active{
  border-color: rgba(13,110,253,.35);
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.12);
}

/* Card احترافي + زر يظهر فوق الصورة */
.project-card{
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 10px 26px rgba(17,24,39,.08);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.project-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(17,24,39,.14);
  border-color: rgba(13,110,253,.18);
}
.project-media{
  position: relative;
}
.project-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.22));
  opacity: .55;
  pointer-events:none;
}
.project-action{
  position:absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  opacity: 0;
  transform: translateY(6px);
  transition: .18s ease;
}
.project-card:hover .project-action{
  opacity: 1;
  transform: translateY(0);
}

/* Price pill فوق الصورة */
.price-pill{
  position:absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  padding: .55rem .75rem;
  border-radius: 999px;
  font-weight: 900;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
}

/* ===== WOW Project Details Page (BEST + SMALL HERO IMAGE) ===== */
.project-hero{
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 18px 55px rgba(17,24,39,.14);
  background: #fff;
}

/* ✅ أفضل تعديل: مش aspect-ratio - نخليها Height ثابت */
.project-hero img{
  width: 100%;
  height: 340px;          /* ✅ Desktop */
  object-fit: cover;
  object-position: center;
  transform: translateZ(0);
}

/* Tablet */
@media (max-width: 992px){
  .project-hero img{ height: 300px; }
}

/* Mobile */
@media (max-width: 576px){
  .project-hero img{ height: 220px; }
}

.project-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35));
  pointer-events:none;
}
.project-hero .hero-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding: 18px;
  z-index:2;
}
.project-hero .hero-meta{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 12px;
}
.hero-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  font-weight: 900;
}
.hero-pill.dark{
  background: rgba(17,24,39,.65);
  border-color: rgba(255,255,255,.18);
  color:#fff;
}
.project-title-on-hero{
  color:#fff;
  font-weight: 900;
  text-shadow: 0 14px 30px rgba(0,0,0,.35);
  margin:0;
}
.project-sub-on-hero{
  color: rgba(255,255,255,.90);
  margin:0;
  font-size:.95rem;
}

/* Project hero image visibility override */
.project-hero{
  background:
    radial-gradient(700px 280px at 50% 0%, rgba(255,255,255,.24), transparent 68%),
    linear-gradient(135deg, #0f172a 0%, #183b7a 46%, #0f766e 100%);
}
.project-hero .carousel-item{
  background: transparent;
}
.project-hero img{
  display: block;
  height: 360px;
  object-fit: contain;
  object-position: center;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.project-hero img.hero-media--cover{
  object-fit: cover;
  object-position: top center;
}
.project-hero img.hero-media--contain{
  object-fit: contain;
  object-position: center;
}
.project-hero::after{
  background: linear-gradient(180deg, rgba(2,6,23,.08), rgba(2,6,23,.42));
}
@media (max-width: 992px){
  .project-hero img{ height: 320px; }
}
@media (max-width: 576px){
  .project-hero img{ height: 240px; }
}

.feature-tile{
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.75);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(17,24,39,.08);
}
.action-bar{
  position: sticky;
  top: 12px;
}
.action-box{
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border-radius: calc(var(--radius) + 8px);
  box-shadow: 0 18px 55px rgba(17,24,39,.12);
}
.big-price{
  font-size: 1.55rem;
  font-weight: 1000;
  letter-spacing: .2px;
}
/* ===== Orders Page Enhancements ===== */

/* Card containing table */
.card{
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(17,24,39,.08);
  background: rgba(255,255,255,.85);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(17,24,39,.14);
}

/* Table Enhancements */
.table thead {
  background: rgba(13,110,253,.1);
  border-radius: var(--radius);
}
.table th {
  color: rgba(17,24,39,.85);
  font-weight: 700;
  text-align: center;
  padding: 1rem;
}
.table td {
  text-align: center;
  font-size: .95rem;
}
.table tbody tr:hover{
  background: rgba(13,110,253,.05);
  transition: background-color .2s ease;
}

/* Badge for order status */
.badge {
  padding: .5rem 1rem;
  font-weight: 600;
  border-radius: 999px;
  text-transform: capitalize;
}
.badge.text-bg-success {
  background-color: rgba(22,163,74,.2);
  color: rgba(22,163,74,.85);
}
.badge.text-bg-danger {
  background-color: rgba(220,53,69,.2);
  color: rgba(220,53,69,.85);
}
.badge.text-bg-warning {
  background-color: rgba(255,193,7,.2);
  color: rgba(255,193,7,.85);
}

/* Action buttons */
.btn-outline-primary {
  font-weight: 600;
  border-radius: var(--radius);
  padding: .7rem 1.1rem;
  transition: all .2s ease;
}
.btn-outline-primary:hover {
  background: rgba(13,110,253,.15);
  color: rgba(13,110,253,.85);
  transform: translateY(-2px);
}

/* Empty state message */
.text-muted {
  color: rgba(17,24,39,.45);
  font-size: 1.1rem;
}
/* ===== Login Page Enhancements ===== */

/* Form card container with shadows and smooth transition */
.card {
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(17,24,39,.1);
  background-color: #ffffff;
  transition: transform .3s ease, box-shadow .3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 60px rgba(17,24,39,.12);
}

/* Form label styles */
.form-label {
  font-weight: 600;
  color: rgba(17,24,39,.75);
}

/* Input fields with rounded borders and soft shadow */
.form-control {
  border-radius: var(--radius);
  border: 1px solid rgba(17,24,39,.1);
  box-shadow: 0 4px 10px rgba(17,24,39,.05);
  font-size: 1rem;
  padding: 1rem;
}

.form-control:focus {
  border-color: rgba(13,110,253,.5);
  box-shadow: 0 0 0 0.2rem rgba(13,110,253,.1);
}

/* Button with gradient background and hover effects */
.btn-primary {
  background: linear-gradient(90deg, rgba(79,70,229,.9), rgba(13,110,253,.9));
  border: none;
  color: #fff;
  font-weight: 700;
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  transition: background .3s ease, transform .3s ease;
}

.btn-primary:hover {
  background: linear-gradient(90deg, rgba(13,110,253,.8), rgba(79,70,229,.8));
  transform: translateY(-2px);
}

.btn-primary:active {
  background: linear-gradient(90deg, rgba(13,110,253,.9), rgba(79,70,229,.9));
  transform: translateY(1px);
}

/* Style the "small" text for additional information */
.small.text-muted {
  color: rgba(17,24,39,.5);
  font-size: .9rem;
  text-align: center;
}

/* Card header for login page */
.card-body h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: rgba(13,110,253,.85);
}

.card-body .form-label {
  font-weight: 600;
  color: rgba(17,24,39,.65);
}

/* Layout adjustments for small screens (responsive) */
@media (max-width: 768px) {
  .card-body {
    padding: 3rem;
  }

  .small.text-muted {
    font-size: .85rem;
  }
}
/* ===== Cart Page Enhancements ===== */

/* Card container for cart with smooth hover effect */
.card {
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(17,24,39,.10);
  background-color: #ffffff;
  transition: transform .3s ease, box-shadow .3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 60px rgba(17,24,39,.12);
}

/* Table styling for cart items */
.table thead {
  background-color: rgba(13,110,253,.15);
  border-radius: var(--radius);
}
.table th {
  color: rgba(17,24,39,.85);
  font-weight: 700;
  text-align: center;
  padding: 1rem;
}
.table td {
  text-align: center;
  font-size: .95rem;
}
.table tbody tr:hover {
  background-color: rgba(13,110,253,.05);
  transition: background-color .2s ease;
}

/* Cart item details */
.table img {
  width: 72px;
  height: 48px;
  object-fit: cover;
  border-radius: 12px;
}

/* Price formatting */
h5 .text-success {
  color: #2a9d8f;
  font-weight: 800;
}

/* Buttons (Delete and Clear cart) */
.btn-outline-danger {
  font-weight: 600;
  border-radius: var(--radius);
  padding: .7rem 1rem;
  transition: background-color .2s ease, transform .2s ease;
}
.btn-outline-danger:hover {
  background-color: rgba(220,53,69,.15);
  transform: translateY(-2px);
}

.btn-outline-secondary {
  font-weight: 600;
  border-radius: var(--radius);
  padding: .7rem 1rem;
  transition: background-color .2s ease, transform .2s ease;
}
.btn-outline-secondary:hover {
  background-color: rgba(0, 111, 222, 0.75);
  transform: translateY(-2px);
}

.btn-primary {
  background: linear-gradient(90deg, rgba(79, 16, 16, 0.9), rgba(0, 0, 0, 0.9));
  border: none;
  color: #ffffff;
  font-weight: 700;
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  transition: background .3s ease, transform .3s ease;
}

.btn-primary:hover {
  background: linear-gradient(90deg, rgba(13,110,253,.8), rgba(79,70,229,.8));
  transform: translateY(-2px);
}

/* Empty cart message styling */
.text-muted {
  color: rgba(17,24,39,.5);
  font-size: 1.1rem;
}
/* ===== Chat Styles ===== */

.chat-window {
    background-color: #f1f1f1;
    padding: 20px;
    border-radius: 10px;
    max-width: 600px;
    margin: 0 auto;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.chat-messages {
    overflow-y: auto;
    height: 80%;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

.message {
    padding: 10px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    max-width: 80%;
}

.message span.timestamp {
    display: block;
    font-size: 0.8rem;
    color: #888;
    margin-top: 5px;
}

.input-group {
    display: flex;
    gap: 10px;
}

input[type="text"] {
    flex: 1;
    padding: 12px;
    border-radius: 25px;
    border: 1px solid #ddd;
}

input[type="text"]:focus {
    outline: none;
    border-color: #007bff;
}

button {
    padding: 12px 18px;
    background-color: #007bff;
    border: none;
    color: white;
    border-radius: 25px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}
.chat-box {
    width: 400px;
    height: 500px;
    background-color: #f1f1f1;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 80px;
    right: 30px;
    z-index: 1000;
}

.chat-header {
    background-color: #007bff;
    color: white;
    padding: 10px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.chat-messages {
    flex-grow: 1;
    padding: 10px;
    overflow-y: scroll;
}

.chat-input {
    display: flex;
    padding: 10px;
    background-color: #fff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.message-input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.send-message {
    background-color: #007bff;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 8px;
    margin-left: 10px;
    cursor: pointer;
}

.send-message:hover {
    background-color: #0056b3;
}


/* ===== Global Loader (base) ===== */
#pageLoader{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:9999;background:rgba(0,0,0,.25);backdrop-filter:blur(6px)}
#pageLoader.show{display:flex}
#pageLoader .pl-card{background:#fff;border-radius:18px;padding:16px 16px 14px;border:1px solid rgba(0,0,0,.08);box-shadow:0 18px 45px rgba(0,0,0,.14)}
#pageLoader .pl-head{display:flex;gap:12px;align-items:center}
#pageLoader .pl-ico{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.9)}
#pageLoader .pl-ico img{width:34px;height:34px;object-fit:contain}
#pageLoader .pl-title{font-weight:800}
#pageLoader .pl-sub{font-size:13px;opacity:.75;margin-top:2px}
#pageLoader .pl-dots{display:flex;gap:6px;margin-top:12px}
#pageLoader .pl-dots span{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.55);animation:plBounce 1s infinite ease-in-out}
#pageLoader .pl-dots span:nth-child(2){animation-delay:.12s;opacity:.8}
#pageLoader .pl-dots span:nth-child(3){animation-delay:.24s;opacity:.6}
@keyframes plBounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}

/* ==========================================================
   In-app Notifications (Bell + Panel + Toast)
   ========================================================== */
.notif-bell{position:relative}
.notif-badge{position:absolute;top:-6px;left:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#dc3545;color:#fff;font-size:11px;display:none;align-items:center;justify-content:center;font-weight:800;box-shadow:0 6px 18px rgba(220,53,69,.35)}
.notif-badge.show{display:flex}
.notif-panel{position:fixed;inset-inline-end:14px;top:70px;z-index:9998;width:min(420px, calc(100vw - 28px));background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:18px;box-shadow:0 18px 45px rgba(0,0,0,.18);overflow:hidden;display:none}
.notif-panel.show{display:block;animation:notifPop .12s ease-out}
@keyframes notifPop{from{transform:translateY(-6px);opacity:.6}to{transform:translateY(0);opacity:1}}
.notif-panel .np-head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px;border-bottom:1px solid rgba(0,0,0,.06);background:linear-gradient(135deg,#f8fafc,#ffffff)}
.notif-panel .np-title{font-weight:900}
.notif-panel .np-actions{display:flex;gap:8px;align-items:center}
.notif-panel .np-body{max-height:60vh;overflow:auto}
.notif-item{display:flex;gap:10px;padding:12px 12px;border-bottom:1px solid rgba(0,0,0,.06);cursor:pointer}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:rgba(13,110,253,.05)}
.notif-item.unread{background:rgba(13,110,253,.06)}
.notif-ico{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:rgba(13,110,253,.10);color:#0d6efd;flex:0 0 auto}
.notif-main{flex:1 1 auto;min-width:0}
.notif-main .t{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-main .b{font-size:13px;opacity:.8;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-main .d{font-size:11px;opacity:.6;margin-top:4px}
.notif-empty{padding:18px 12px;text-align:center;color:rgba(0,0,0,.55)}

.notif-toast{position:fixed;inset-inline-end:14px;bottom:18px;z-index:9999;width:min(380px, calc(100vw - 28px));background:#111827;color:#fff;border-radius:18px;padding:12px 12px;box-shadow:0 18px 45px rgba(0,0,0,.22);display:none}
.notif-toast.show{display:block;animation:toastUp .18s ease-out}
@keyframes toastUp{from{transform:translateY(10px);opacity:.6}to{transform:translateY(0);opacity:1}}
.notif-toast .tt{font-weight:900}
.notif-toast .tb{font-size:13px;opacity:.9;margin-top:2px}

/* ==========================================================
   Android-ish UI Mode (Material-ish)
   ========================================================== */
.ui-android{--android-primary:#0d6efd;--android-surface:#ffffff;--android-bg:#f3f4f6;font-family:system-ui,-apple-system,Segoe UI,Roboto,Tahoma,Arial}
.ui-android body, body.ui-android{background:var(--android-bg)}
.ui-android .navbar{background:var(--android-surface)!important;box-shadow:0 10px 26px rgba(0,0,0,.06)}
.ui-android .card{border-radius:20px;box-shadow:0 18px 45px rgba(0,0,0,.06)!important;border:1px solid rgba(0,0,0,.06)}
.ui-android .btn{border-radius:16px;font-weight:800}
.ui-android .form-control,.ui-android .form-select{border-radius:16px}

.android-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:9997;background:#fff;border-top:1px solid rgba(0,0,0,.08);display:flex;gap:2px;justify-content:space-around;padding:8px 10px}
.android-bottom-nav a{flex:1 1 auto;text-align:center;text-decoration:none;color:rgba(0,0,0,.68);font-size:12px;padding:8px 6px;border-radius:16px}
.android-bottom-nav a i{display:block;font-size:16px;margin-bottom:4px}
.android-bottom-nav a.active{background:rgba(13,110,253,.10);color:#0d6efd;font-weight:900}
.has-bottom-nav{padding-bottom:84px}




/* ==========================================================
   Premium Navbar (Doulab)
   ========================================================== */
.doulab-nav{backdrop-filter: blur(10px);background: rgba(255,255,255,.92)!important;}
[data-bs-theme="dark"] .doulab-nav{background: rgba(17,24,39,.92)!important;}
.doulab-nav .navbar-top{padding:.35rem 0;}
.doulab-nav .brand-logo{width:30px;height:30px;border-radius:10px;object-fit:cover;box-shadow:0 10px 24px rgba(0,0,0,.10)}
.doulab-nav .brand-name{font-weight:900;letter-spacing:.2px}
.doulab-nav .nav-actions .btn{border-radius:16px;font-weight:900;}
.doulab-nav .nav-actions .btn i{margin-inline-start:.0rem;margin-inline-end:.25rem}
.doulab-nav .nav-icon-btn{width:42px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0}
.doulab-nav .nav-icon-btn i{margin:0;font-size:16px}
.doulab-nav .nav-badge{position:absolute;top:-6px;left:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#dc3545;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:900;box-shadow:0 6px 18px rgba(220,53,69,.35)}
.doulab-nav .doulab-user{border-radius:16px;font-weight:900}
.doulab-nav .doulab-menu{border-radius:18px;border:1px solid rgba(0,0,0,.08);box-shadow:0 18px 45px rgba(0,0,0,.15);overflow:hidden}
[data-bs-theme="dark"] .doulab-nav .doulab-menu{border-color: rgba(255,255,255,.10);box-shadow:0 18px 45px rgba(0,0,0,.45)}

.doulab-nav .nav-chips{display:flex;gap:.45rem;padding:.5rem 0 .6rem;}
.doulab-nav .nav-chips .nav-link{display:flex;align-items:center;gap:.45rem;padding:.48rem .85rem;border-radius:999px;font-weight:900;border:1px solid rgba(13,110,253,.12);background:rgba(13,110,253,.06);color:rgba(17,24,39,.86);transition:transform .12s ease, background-color .12s ease, border-color .12s ease;}
[data-bs-theme="dark"] .doulab-nav .nav-chips .nav-link{background:rgba(13,110,253,.12);border-color:rgba(13,110,253,.22);color:rgba(255,255,255,.92)}
.doulab-nav .nav-chips .nav-link:hover{transform:translateY(-1px);background:rgba(13,110,253,.10);border-color:rgba(13,110,253,.22)}
[data-bs-theme="dark"] .doulab-nav .nav-chips .nav-link:hover{background:rgba(13,110,253,.16);border-color:rgba(13,110,253,.28)}
.doulab-nav .nav-chips .nav-link.active{background:rgba(13,110,253,.16);border-color:rgba(13,110,253,.38);color:#0d6efd}
[data-bs-theme="dark"] .doulab-nav .nav-chips .nav-link.active{background:rgba(13,110,253,.22);border-color:rgba(13,110,253,.44);color:#93c5fd}

@media (min-width: 992px){
  .doulab-nav .nav-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .doulab-nav .nav-chips::-webkit-scrollbar{display:none;}
}

@media (max-width: 992px){
  .doulab-nav .nav-chips{flex-wrap:wrap;}
}
/* === Doulab Social UI (Android-like) === */
.stat-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .65rem;
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  background:rgba(255,255,255,.8);
  font-size:.9rem;
}
.review-item{background:#fff}
.review-stars i{font-size:.95rem}
.badge-verified{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  margin-inline-start:.4rem;
  background:#1d9bf0;color:#fff;
  font-size:.75rem;
}
@media (max-width: 992px){
  .navbar .navbar-toggler.doulab-toggler{
    border:1px solid rgba(0,0,0,.12);
    border-radius:14px;
    padding:.55rem .7rem;
  }
  .navbar .doulab-burger{
    position:relative;
    display:block;
    width:22px;height:14px;
  }
  .navbar .doulab-burger:before,
  .navbar .doulab-burger:after,
  .navbar .doulab-burger span{
    content:"";
    position:absolute;
    left:0;right:0;
    height:2px;
    background:currentColor;
    border-radius:2px;
    transition:transform .2s ease, top .2s ease, opacity .2s ease;
  }
  .navbar .doulab-burger span{top:6px}
  .navbar .doulab-burger:before{top:0}
  .navbar .doulab-burger:after{top:12px}

  .navbar-toggler[aria-expanded="true"] .doulab-burger span{opacity:0}
  .navbar-toggler[aria-expanded="true"] .doulab-burger:before{top:6px;transform:rotate(45deg)}
  .navbar-toggler[aria-expanded="true"] .doulab-burger:after{top:6px;transform:rotate(-45deg)}
}


/* Floating Contact + Support buttons */
.fab-wrap{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 1055;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.has-bottom-nav .fab-wrap{ bottom: 78px; } /* avoid android bottom nav overlap */
.fab{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.12);
  box-shadow: 0 12px 26px rgba(17,24,39,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.fab:hover{ transform: translateY(-1px); }
.fab i{ font-size: 20px; }
.fab-support{ }
.fab-contact{ }

.support-drawer{
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
}


/* Admin sidebar toggle */
.admin-sidebar{ transition: width .18s ease, transform .18s ease; }
body.admin-sidebar-collapsed .admin-sidebar{
  width: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
}
body.admin-sidebar-collapsed .admin-main{
  width: 100% !important;
}
@media (max-width: 991px){
  body.admin-sidebar-collapsed .admin-sidebar{ display:none !important; }
}


/* XLSX preview table */
.xlsx-preview table { font-size: 0.9rem; }
.xlsx-preview thead th { position: sticky; top: 0; background: var(--bs-body-bg); z-index: 2; }
.xlsx-preview td, .xlsx-preview th { vertical-align: middle; }
.xlsx-preview td { white-space: nowrap; }

/* XLSX tabs preview (chat/project) */
.xlsx-tabs .nav-tabs { overflow-x: auto; flex-wrap: nowrap; }
.xlsx-tabs .nav-link { white-space: nowrap; }

/* Attachment preview modal */
.att-preview-btn { font-size: .85rem; }
.att-modal-body { max-height: 72vh; overflow: auto; }
.att-modal-body iframe { width: 100%; height: 70vh; border: 0; }
.att-modal-body img { max-width: 100%; height: auto; border-radius: 10px; }



/* Contact links (social) – icon chips */
.contact-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--bs-border-color-translucent);
  background: var(--bs-body-bg);
  text-decoration:none;
  color: inherit;
  transition: transform .12s ease, filter .12s ease, background-color .12s ease, border-color .12s ease;
}
.contact-btn i{
  width: 34px;
  height: 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  font-size: 17px;
  background: var(--brand, #111827);
  color: #fff;
}
.contact-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  border-color: transparent;
}
.contact-btn:hover i{ filter: brightness(1.05); }

.contact-btn[data-platform="whatsapp"]{ --brand:#25D366; }
.contact-btn[data-platform="telegram"]{ --brand:#229ED9; }
.contact-btn[data-platform="facebook"]{ --brand:#1877F2; }
.contact-btn[data-platform="instagram"]{ --brand:#E4405F; }
.contact-btn[data-platform="tiktok"]{ --brand:#111827; }
.contact-btn[data-platform="youtube"]{ --brand:#FF0000; }
.contact-btn[data-platform="x"]{ --brand:#111827; }
.contact-btn[data-platform="linkedin"]{ --brand:#0A66C2; }
.contact-btn[data-platform="website"]{ --brand:#7A4A2A; }
.contact-btn[data-platform="email"]{ --brand:#2563EB; }
.contact-btn[data-platform="phone"]{ --brand:#16A34A; }

/* Chat rich content (AI) – nicer tables/typography */
.chat-rich{
  line-height: 1.65;
}
.chat-rich .chat-h{ margin: 0.25rem 0 0.5rem; font-weight: 800; }
.chat-rich .chat-h1{ font-size: 1.1rem; }
.chat-rich .chat-h2{ font-size: 1.02rem; }
.chat-rich .chat-h3{ font-size: .98rem; }
.chat-rich .chat-p{ margin: 0.35rem 0 0.65rem; }
.chat-rich .chat-ul{ margin: 0.35rem 0 0.65rem; padding-right: 1.1rem; }
.chat-rich .chat-ul li{ margin: .18rem 0; }
.chat-rich .chat-code{ background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 12px; padding: 10px 12px; overflow:auto; }
.chat-rich .chat-code code{ white-space: pre; }
.chat-rich .chat-code-inline{ background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 8px; padding: 1px 6px; }

.profile-avatar-lg,
.profile-avatar-md{
  border-radius: 999px;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 12px 28px rgba(37,99,235,.22);
}
.profile-avatar-lg{
  width: 76px;
  height: 76px;
  font-size: 28px;
}
.profile-avatar-md{
  width: 54px;
  height: 54px;
  font-size: 20px;
}
.profile-avatar-link{
  display: inline-flex;
  line-height: 0;
  text-decoration: none;
  border-radius: 999px;
}
.profile-avatar-link:focus-visible{
  outline: 3px solid rgba(37,99,235,.35);
  outline-offset: 4px;
}

.chat-rich .table-wrap{
  margin: 10px 0 6px;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 16px;
  overflow: auto;
  background: var(--bs-body-bg);
  -webkit-overflow-scrolling: touch;
}
.chat-rich table.chat-table{
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
}
.chat-rich table.chat-table th,
.chat-rich table.chat-table td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  border-right: 1px solid var(--bs-border-color-translucent);
  vertical-align: top;
  word-break: break-word;
}
.chat-rich table.chat-table th:last-child,
.chat-rich table.chat-table td:last-child{ border-right: 0; }
.chat-rich table.chat-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bs-tertiary-bg);
  font-weight: 800;
}
.chat-rich table.chat-table tbody tr:last-child td{ border-bottom: 0; }
.chat-rich table.chat-table td{ white-space: normal; }

[data-bs-theme="light"] .chat-rich table.chat-table tbody tr:hover{ background: rgba(0,0,0,.03); }
[data-bs-theme="dark"] .chat-rich table.chat-table tbody tr:hover{ background: rgba(255,255,255,.04); }

/* Make floating FAB icons look premium */
.fab{ border-color: transparent; }
.fab-support{ background: #111827; color: #fff; }
.fab-contact{ background: #16A34A; color: #fff; }
.fab-support i, .fab-contact i{ color: inherit; }
.fab:hover{ filter: brightness(1.03); }

/* Contact links: avoid white flash on hover */
.contact-btn{ background: var(--bs-body-bg); }


/* ===== FIX: Navbar above hero/cover (v10.1) ===== */
.navbar.sticky-top,
.navbar.fixed-top,
.doulab-nav{
  z-index: 9999 !important;
}

.navbar{
  background-color: rgba(255,255,255,.96) !important;
}

body.theme-doulab .doulab-hero,
.project-hero,
.hero,
.home-hero{
  position: relative;
  z-index: 1;
}

body.theme-doulab .doulab-hero::before,
body.theme-doulab .doulab-hero::after{
  z-index: 0;
}
body.theme-doulab .doulab-hero > *{ position: relative; z-index: 1; }

/* ===== ULTRA FIX (v10.3): Header + dropdown ALWAYS above any cover ===== */
:root{ --header-h: 84px; }
body.has-fixed-header{ padding-top: var(--header-h); }

/* Header becomes its own top-layer stacking context */
.navbar.site-header{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147483000 !important;
  isolation: isolate;
}

/* Dropdowns MUST be above everything (even cover overlays) */
.navbar.site-header .dropdown-menu{
  z-index: 2147483647 !important;
}
.navbar.site-header .navbar-collapse{
  z-index: 2147483500 !important;
}

/* Ensure hero/cover never creates a higher layer */
.hero, .showcase, .doulab-hero, .project-hero, .home-hero{ position: relative; z-index: 0 !important; }
.hero::before, .hero::after,
.showcase::before, .showcase::after,
.doulab-hero::before, .doulab-hero::after{ z-index: 0 !important; }

.offcanvas{ z-index: 2147483600 !important; }
.modal{ z-index: 2147483630 !important; }
.fab, .chat-fab{ z-index: 2147482000 !important; }


/* ==========================================================
 * Payment Methods UI
 * ========================================================== */
.pm-icon-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:12px;
  background: rgba(0,0,0,.04);
}
.pm-icon-chip i{
  font-size:18px;
}
.pm-icon-img{
  width:20px;
  height:20px;
  object-fit:contain;
  display:block;
}


/* ===== public/assets/store-ui.css ===== */
/* Store UI – v17.0 (Material Store / Google Play-like)
   هدف التصميم:
   - شكل متجر مثل Google Play (بدون تقليد حرفي للأصول).
   - No Sidebar (Option 2B): Tabs أعلى + Bottom Nav للموبايل.
   - Skin system: كل سكين يغير الـ CSS variables فقط.
*/

:root{
  /* Layout heights (synced by JS) */
  --header-h: 64px;
  --tabs-h: 48px;
  --bottom-nav-h: 0px;

  --radius: 16px;
  --radius-sm: 12px;

  /* Material-like tokens (skin overrides) */
  --md-bg: #f6f8fb;
  --md-surface: #ffffff;
  --md-surface2: #f1f3f6;
  --md-surface3: #e8eef9;
  --md-text: #202124;
  --md-muted: #5f6368;
  --md-outline: rgba(32,33,36,.14);
  --md-shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.06);

  --md-primary: #1a73e8;
  --md-on-primary: #ffffff;
  --md-chip: rgba(26,115,232,.10);
  --md-chip-active: rgba(26,115,232,.16);
}

html{ scroll-behavior: smooth; }

body{
  background: var(--md-bg) !important;
  color: var(--md-text);
  font-family: "Tajawal", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
body.lang-en{ font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Space for fixed header/tabs and bottom nav */
body.has-fixed-header{
  /* zfix.css forces body padding-top using --nav-h.
     Keep this compatible even if zfix is removed. */
  padding-top: var(--nav-h, calc(var(--header-h) + var(--tabs-h) + 10px));
  padding-bottom: calc(var(--bottom-nav-h) + 18px);
}

/* ===== Cover (Home) ===== */
.home-cover{
  position: relative;
  border-radius: var(--radius);
  overflow: visible;
  border: 1px solid var(--md-outline);
  background: radial-gradient(1200px 420px at 20% 0%, rgba(26,115,232,.20), transparent 60%),
              radial-gradient(900px 420px at 90% 20%, rgba(52,168,83,.18), transparent 55%),
              var(--md-surface);
  box-shadow: var(--md-shadow);
  min-height: 240px;
}
.home-cover.has-img{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.home-cover__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15) 55%, rgba(0,0,0,0));
  pointer-events: none;
}
body.lang-en .home-cover__overlay{
  background: linear-gradient(270deg, rgba(0,0,0,.55), rgba(0,0,0,.15) 55%, rgba(0,0,0,0));
}
.home-cover__content{
  position: relative;
  padding: 22px;
  color: #fff;
  max-width: 720px;
}
.home-cover__title{ font-size: 1.9rem; font-weight: 1000; margin: 0; }
.home-cover__sub{ margin-top: 10px; color: rgba(255,255,255,.85); line-height: 1.7; }
.home-cover__actions{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 14px; }
.home-cover__btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  text-decoration:none;
  font-weight: 900;
}
.home-cover__btn.primary{ background: var(--md-primary); border-color: rgba(0,0,0,0); color: var(--md-on-primary); }
.home-cover__btn:hover{ filter: brightness(1.03); }

@media (max-width: 575.98px){
  .home-cover{ min-height: 220px; }
  .home-cover__title{ font-size: 1.45rem; }
  .home-cover__content{ padding: 18px; }
}

/* ===== Appbar ===== */
.store-appbar{
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--md-outline);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.ui-skin-midnight .store-appbar,
body.ui-skin-carbon .store-appbar,
body.ui-skin-terminal .store-appbar,
body.ui-skin-matrix .store-appbar,
body.ui-skin-cyberpunk .store-appbar,
body.ui-skin-space .store-appbar,
body.ui-skin-boardroom .store-appbar{
  background: rgba(18,18,18,.86);
}

.store-appbar__inner{
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
}

/* Mobile: search gets its own full-width row (easier typing) */
@media (max-width: 768px){
  .store-appbar__inner{
    height: auto;
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 10px;
  }
  .store-search{
    order: 1;
    flex: 1 1 100%;
    max-width: none;
    width: 100%;
    height: 46px;
  }
  .store-brand{
    order: 2;
    min-width: 0;
    flex: 1 1 auto;
  }
  .store-actions{
    order: 3;
    flex: 0 0 auto;
    margin-inline-start: auto;
    gap: 6px;
  }
  .store-icon-btn{
    height: 40px;
    min-width: 40px;
    padding: 0 10px;
  }
}

.store-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--md-text);
  min-width: 160px;
}
.store-brand__logo{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.store-brand__logo--fallback{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--md-primary);
  color: var(--md-on-primary);
}
.store-brand__name{
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
}

.store-search{
  position: relative;
  flex: 1 1 auto;
  max-width: 820px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 44px;
  border-radius: 999px;
  background: var(--md-surface2);
  border: 1px solid rgba(0,0,0,.0);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.store-search i{ color: var(--md-muted); font-size: 1rem; }
.store-search__input{
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  font-size: 0.98rem;
  color: var(--md-text);
}
.store-search:focus-within{
  background: var(--md-surface);
  border-color: var(--md-outline);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.store-actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.store-icon-btn{
  height: 42px;
  min-width: 42px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--md-outline);
  background: var(--md-surface);
  color: var(--md-text);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.store-icon-btn:hover{ background: var(--md-surface2); }
.store-user-avatar-img{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  object-fit: cover;
  display: inline-block;
  flex: 0 0 auto;
}
.store-pill-btn{
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.0);
  background: var(--md-primary);
  color: var(--md-on-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.store-pill-btn:hover{ filter: brightness(.97); }

.store-badge{
  position: absolute;
  top: 6px;
  inset-inline-start: 24px;
  background: #ea4335;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  padding: 1px 6px;
  display: inline-block;
  line-height: 1.4;
  border: 2px solid var(--md-surface);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.store-badge.show{ display: inline-block; }
.store-lang{ font-size: 12px; font-weight: 800; opacity: .85; }
.dd-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--md-chip);
  color: var(--md-text);
  font-weight: 800;
  font-size: 11px;
  margin-inline-end: 8px;
}

@media (max-width: 575.98px){
  .store-brand{ min-width: auto; }
  .store-brand__name{ display: none !important; }
  .store-search{ height: 42px; padding: 0 12px; }
  .store-search__input{ font-size: .95rem; }
}

/* ===== Tabs ===== */
.store-tabs{
  border-top: 1px solid rgba(0,0,0,.06);
  background: transparent;
}
.store-tabs__inner{
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 10px 10px;
  scrollbar-width: none;
}
.store-tabs__inner::-webkit-scrollbar{ display:none; }

.store-tab{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--md-text);
  opacity: .82;
  background: transparent;
  border: 1px solid transparent;
  white-space: nowrap;
  font-weight: 700;
}
.store-tab i{ font-size: 1rem; }
.store-tab:hover{ background: var(--md-surface2); color: var(--md-text); opacity: 1; }
.store-tab.active{
  background: var(--md-chip-active);
  color: var(--md-text);
  opacity: 1;
  border-color: rgba(0,0,0,.04);
}

/* ===== Main ===== */
.store-main .container{ max-width: 1200px; }

.store-alert{ border-radius: var(--radius-sm); }

/* ===== Home shelves ===== */
.home-cover{
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--md-outline);
  box-shadow: var(--md-shadow);
  overflow: visible;
  background: var(--md-surface);
  background-size: cover;
  background-position: center;
  min-height: 240px;
}
.home-cover__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.25) 55%, rgba(0,0,0,.05)),
    linear-gradient(135deg, rgba(26,115,232,.15), rgba(0,230,118,.10));
}
.home-cover__content{
  position: relative;
  z-index: 1;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.home-cover__title{
  margin: 0;
  font-size: 1.6rem;
  font-weight: 950;
  letter-spacing: .2px;
}
.home-cover__sub{ margin: 8px 0 0; color: rgba(255,255,255,.86); max-width: 54rem; }
.home-cover__actions{ display: flex; flex-wrap: wrap; gap: 10px; }

/* Make cover text readable across skins */
.home-cover, .home-cover *{ color: #fff; }
.home-cover .btn-outline-primary{ color: #fff; border-color: rgba(255,255,255,.55); }
.home-cover .btn-outline-primary:hover{ background: rgba(255,255,255,.10); }
.home-cover .chip{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.home-cover .chip:hover{ background: rgba(255,255,255,.12); }

@media (max-width: 560px){
  .home-cover{ min-height: 200px; }
  .home-cover__title{ font-size: 1.3rem; }
  .home-cover__sub{ font-size: .95rem; }
}

.home-hero{
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--radius);
  box-shadow: var(--md-shadow);
  padding: 18px;
}
.home-hero__row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.home-hero__title{ font-size: 1.4rem; font-weight: 900; margin: 0; }
.home-hero__sub{ color: var(--md-muted); margin-top: 6px; }

.chip-row{
  display:flex;
  align-items:center;
  gap: 8px;
  overflow-x:auto;
  padding: 6px 2px;
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar{ display:none; }
.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  color: var(--md-text);
  text-decoration:none;
  font-weight: 700;
  white-space: nowrap;
}
.chip:hover{ background: var(--md-surface2); }
.chip.active{ background: var(--md-chip-active); border-color: rgba(0,0,0,.06); }

/* Home cover category menu: main category + hover sub-menu */
.home-cat-menu{
  position: relative;
  z-index: 3;
  overflow: visible;
}
.home-cat-menu .chip-dropdown{
  position: relative;
  display: inline-flex;
}
.home-cat-menu .chip-main--menu{
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.home-cat-menu .chip-main--menu i{
  font-size: .72rem;
  opacity: .9;
}
.home-cat-menu .chip-dropdown__menu{
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(100% + 8px);
  inset-block-end: auto;
  min-width: 190px;
  display: none !important;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(21,24,30,.95);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
}
.home-cat-menu .chip-dropdown:hover .chip-dropdown__menu{
  display: flex !important;
}
.home-cat-menu .chip-dropdown__item{
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}
.home-cat-menu .chip-dropdown__item:hover{
  background: rgba(255,255,255,.12);
  color: #fff;
}

.shelf{ margin-top: 18px; }
.shelf-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.shelf-title{ margin:0; font-size: 1.1rem; font-weight: 900; }
.shelf-more{ text-decoration:none; color: var(--md-primary); font-weight: 800; }
.shelf-more:hover{ text-decoration: underline; }

.shelf-row{
  display:flex;
  gap: 12px;
  overflow-x:auto;
  padding: 2px 2px 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.shelf-row::-webkit-scrollbar{ display:none; }

/* Card (tile) */
.app-tile{
  width: 190px;
  min-width: 190px;
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--md-text);
}
.app-tile:hover{ transform: translateY(-2px); box-shadow: var(--md-shadow); border-color: rgba(0,0,0,.18); }
.app-tile__img{
  width:100%;
  height: 120px;
  object-fit: cover;
  background: var(--md-surface2);
}
.app-tile__body{ padding: 12px 12px 14px; }
.app-tile__title{ font-weight: 900; font-size: .98rem; margin: 0 0 4px; }
.app-tile__sub{ font-size: .86rem; color: var(--md-muted); margin: 0; }
.app-tile__meta{ display:flex; align-items:center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.price-badge{
  display:inline-flex;
  align-items:center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--md-chip);
  color: var(--md-text);
  font-weight: 900;
  font-size: .82rem;
}
.pill-free{ background: rgba(52,168,83,.14); }
.pill-discount{ background: rgba(234,67,53,.10); }

@media (max-width: 575.98px){
  .app-tile{ width: 165px; min-width: 165px; }
  .app-tile__img{ height: 108px; }
}

/* Grid pages */
.app-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.app-grid .app-tile{ width: 100%; min-width: 0; }
@media (max-width: 575.98px){
  .app-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.page-head{
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  margin-bottom: 14px;
}
.page-head__title{ font-weight: 900; margin: 0; }
.page-head__sub{ color: var(--md-muted); margin-top: 4px; }

/* Compatibility: old project-card -> map to tiles */
.project-card{
  border-radius: 18px !important;
  border: 1px solid var(--md-outline) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) !important;
}
.project-card:hover{ box-shadow: var(--md-shadow) !important; }
.project-media{ position: relative; }
.project-cover{ width: 100%; height: 170px; object-fit: cover; background: var(--md-surface2); }
.price-pill{
  position:absolute;
  top: 10px;
  inset-inline-start: 10px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  color: var(--md-text);
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: .82rem;
}
.project-action{
  position:absolute;
  top: 10px;
  inset-inline-end: 10px;
}

/* ===== Footer ===== */
.store-footer{ border-top: 1px solid var(--md-outline); background: transparent; }

/* ===== Bottom nav (mobile) ===== */
.bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147482000;
  background: rgba(255,255,255,.94);
  border-top: 1px solid var(--md-outline);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.bottom-nav__inner{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 6px 6px 8px;
}
.bn-item{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: var(--md-muted);
  border-radius: 14px;
  padding: 6px 6px;
  gap: 3px;
  font-weight: 800;
  font-size: 11px;
}
.bn-item i{ font-size: 1.05rem; }
.bn-item.active{ background: var(--md-chip-active); color: var(--md-text); }
.bn-item:hover{ background: var(--md-surface2); color: var(--md-text); }

/* Keep chat bubble above bottom nav */
.chat-fab{ bottom: calc(var(--bottom-nav-h) + 18px) !important; }

/* ===== Notifications panel (make it match Material) ===== */
.notif-panel{
  border-radius: 18px !important;
  border: 1px solid var(--md-outline) !important;
  box-shadow: var(--md-shadow) !important;
  background: var(--md-surface) !important;
}
.notif-item{ border-bottom: 1px solid rgba(0,0,0,.06); }
.notif-item.unread{ background: rgba(26,115,232,.06); }

/* ===== Page loader (Material-ish) ===== */
#pageLoader .pl-card{
  border-radius: 18px;
  border: 1px solid var(--md-outline);
  background: var(--md-surface);
  box-shadow: var(--md-shadow);
}

/* Dark skins baseline adjustments */
body.ui-skin-midnight,
body.ui-skin-carbon,
body.ui-skin-terminal,
body.ui-skin-matrix,
body.ui-skin-cyberpunk,
body.ui-skin-space,
body.ui-skin-boardroom{
  --md-bg: #0f1115;
  --md-surface: #151821;
  --md-surface2: #1b2030;
  --md-surface3: #21263a;
  --md-text: #e7e9ee;
  --md-muted: rgba(231,233,238,.72);
  --md-outline: rgba(231,233,238,.12);
  --md-shadow: 0 2px 14px rgba(0,0,0,.35);
}
body.ui-skin-midnight .bottom-nav,
body.ui-skin-carbon .bottom-nav,
body.ui-skin-terminal .bottom-nav,
body.ui-skin-matrix .bottom-nav,
body.ui-skin-cyberpunk .bottom-nav,
body.ui-skin-space .bottom-nav,
body.ui-skin-boardroom .bottom-nav{
  background: rgba(21,24,33,.92);
}
body.ui-skin-midnight .store-appbar,
body.ui-skin-carbon .store-appbar,
body.ui-skin-terminal .store-appbar,
body.ui-skin-matrix .store-appbar,
body.ui-skin-cyberpunk .store-appbar,
body.ui-skin-space .store-appbar,
body.ui-skin-boardroom .store-appbar{
  border-bottom-color: rgba(231,233,238,.10);
}

/* Bootstrap buttons harmonization */
.btn-primary{
  background: var(--md-primary) !important;
  border-color: rgba(0,0,0,.0) !important;
  color: var(--md-on-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus-visible{
  color: var(--md-on-primary) !important;
}
.btn-outline-primary{
  color: var(--md-primary) !important;
  border-color: var(--md-primary) !important;
}
.btn-outline-primary:hover{
  background: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
}
.bg-primary,
.text-bg-primary,
.badge.bg-primary,
.badge.text-bg-primary,
.page-item.active .page-link,
.page-link.active,
.nav-pills .nav-link.active,
.dropdown-item.active,
.dropdown-item:active,
.list-group-item.active{
  background: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
  border-color: rgba(0,0,0,0) !important;
}

/* Make generic cards look consistent */
.card{ border-color: var(--md-outline); border-radius: var(--radius); }
.card.shadow-sm{ box-shadow: 0 1px 0 rgba(0,0,0,.02); }

/* ===== Support tickets and AI assistant – Messenger-like ===== */

/* Layout wrapper used by AI assistant and support tickets */
.doulab-chat-wrap{
  width: min(1200px, calc(100% - 28px));
  margin: 18px auto;
  display: grid;
  gap: 14px;
  align-items: stretch;
}

.doulab-panel{
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--radius);
  box-shadow: var(--md-shadow);
  overflow: hidden;
}

.doulab-panel .hd{
  padding: 12px 14px;
  border-bottom: 1px solid var(--md-outline);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.02), transparent);
}

.doulab-panel .hd .ttl{
  font-weight: 900;
  display:flex;
  align-items:center;
  gap: 10px;
}

.doulab-chat{
  display:flex;
  flex-direction: column;
  /* Take the remaining viewport height under the fixed header */
  height: calc(100vh - var(--nav-h, 130px) - 48px);
  min-height: 560px;
}

.doulab-msgs{
  flex: 1;
  overflow: auto;
  padding: 14px 14px 18px;
  /* Force predictable left/right alignment across RTL/LTR */
  direction: ltr;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(26,115,232,.12), transparent 60%),
    radial-gradient(700px 360px at 90% 20%, rgba(52,168,83,.10), transparent 55%),
    var(--md-bg);
}

.dmsg{
  display:flex;
  gap: 10px;
  margin: 10px 0;
  align-items: flex-end;
  justify-content: flex-start;
}
.dmsg.mine{ flex-direction: row-reverse; justify-content: flex-end; }

/* Keep Arabic message text RTL while layout stays LTR */
body.lang-ar .doulab-msgs :is(.bubble,.meta){ direction: rtl; text-align: right; }

.dmsg .avatar{
  width: 36px; height: 36px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  border: 1px solid var(--md-outline);
  background: var(--md-surface);
  color: var(--md-muted);
  flex: 0 0 auto;
}
.dmsg.mine .avatar{
  border-color: rgba(26,115,232,.22);
  background: rgba(26,115,232,.12);
  color: var(--md-primary);
}
.dmsg .avatar i{ font-size: 14px; opacity: .95; }

.dmsg .bubble{
  max-width: min(78%, 680px);
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--md-outline);
  background: var(--md-surface);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  position: relative;
  word-break: break-word;
}
.dmsg.mine .bubble{
  background: rgba(26,115,232,.12);
  border-color: rgba(26,115,232,.22);
}

.dmsg .bubble > div{ white-space: pre-wrap; }

.dmsg .meta{
  font-size: 12px;
  color: var(--md-muted);
  margin-top: 6px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.dmsg.mine .meta{ justify-content: flex-start; }

.dmsg .attach img{
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid var(--md-outline);
  display:block;
  margin-top: 8px;
}

.dmsg .attach a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  margin-top: 8px;
  font-weight: 800;
  color: var(--md-primary);
}

.dmsg.typing .bubble{ opacity: .92; }

.doulab-form{
  display:flex;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid var(--md-outline);
  background: var(--md-surface);
  align-items:center;
}

.doulab-form input[type=text]{
  flex: 1;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--md-outline);
  border-radius: 999px;
  background: var(--md-surface2);
  color: var(--md-text);
  outline: 0;
}

.doulab-form input[type=text]::placeholder{ color: rgba(95,99,104,.85); }

body.ui-skin-midnight .doulab-form input[type=text]::placeholder,
body.ui-skin-carbon .doulab-form input[type=text]::placeholder,
body.ui-skin-terminal .doulab-form input[type=text]::placeholder,
body.ui-skin-matrix .doulab-form input[type=text]::placeholder,
body.ui-skin-cyberpunk .doulab-form input[type=text]::placeholder,
body.ui-skin-space .doulab-form input[type=text]::placeholder,
body.ui-skin-boardroom .doulab-form input[type=text]::placeholder{
  color: rgba(231,233,238,.55);
}

.doulab-form input[type=text]:focus{
  background: var(--md-surface);
  border-color: rgba(26,115,232,.35);
  box-shadow: 0 0 0 3px rgba(26,115,232,.18);
}

.doulab-icon-btn{
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--md-outline);
  background: var(--md-surface2);
  color: var(--md-primary);
  display:grid;
  place-items:center;
  cursor:pointer;
  user-select:none;
}

.doulab-icon-btn i{ color: currentColor; }
.doulab-icon-btn:hover{ background: var(--md-surface3); color: var(--md-primary); }

.doulab-form .btn{
  height: 44px;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
}
.doulab-form .btn i{ margin: 0; }
.doulab-form :is(input,button)[disabled]{ opacity: .65; cursor: not-allowed; }

.doulab-note{
  padding: 10px 12px;
  font-size: 12px;
  color: var(--md-muted);
  border-top: 1px solid var(--md-outline);
  background: linear-gradient(180deg, rgba(0,0,0,.01), transparent);
}

/* Admin list panel inside chat (customers) */
.doulab-chat-wrap .list-group{
  border-radius: 0;
}
.doulab-chat-wrap .list-group-item{
  border-color: var(--md-outline);
}
.doulab-chat-wrap .list-group-item.active{
  background: rgba(26,115,232,.14);
  border-color: rgba(26,115,232,.18);
  color: var(--md-text);
}

/* Responsive: stack panels and increase message width */
@media (max-width: 992px){
  .doulab-chat-wrap{ grid-template-columns: 1fr !important; }
}

@media (max-width: 768px){
  .doulab-chat-wrap{ width: calc(100% - 18px); margin: 12px auto; gap: 12px; }
  .doulab-chat{ height: calc(100vh - var(--nav-h, 150px) - 24px); min-height: 520px; }
  .dmsg .bubble{ max-width: 88%; }
  .doulab-msgs{ padding: 12px 12px 14px; }
}



/* =========================
   v17 – fixes requested
   - Auth pages layout
   - Verified badge
   - Publish button ghost style
   - Stars rating input
   - Notifications panel position
========================= */

.store-pill-btn--ghost{
  background: transparent !important;
  color: var(--md-text) !important;
  border: 1px solid var(--md-outline) !important;
}
.store-pill-btn--ghost:hover{ background: var(--md-surface2) !important; }

.verified-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-inline-start: 6px;
  font-size: 14px;
  color: #1a73e8;
}
.verified-badge i{ filter: drop-shadow(0 1px 0 rgba(0,0,0,.08)); }

/* Developer line under title (Google Play-like) */
.app-devline{
  display:flex;
  align-items:center;
  gap:6px;
  color: var(--md-muted);
  font-size: 12.5px;
  margin-top: 3px;
}
.app-devline a{ color: inherit; text-decoration: none; }
.app-devline a:hover{ text-decoration: underline; }

/* Auth pages */
.auth-shell{
  max-width: 1040px;
  margin: 18px auto 24px;
  padding: 0 12px;
}
.auth-split{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 14px;
  align-items: stretch;
}
.auth-card{
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--radius);
  box-shadow: var(--md-shadow);
  padding: 18px;
}
.auth-hero{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--md-outline);
  background: radial-gradient(1200px 420px at 20% 0%, rgba(26,115,232,.18), transparent 60%),
              radial-gradient(900px 420px at 90% 20%, rgba(52,168,83,.16), transparent 55%),
              var(--md-surface);
  box-shadow: var(--md-shadow);
  position: relative;
  min-height: 360px;
}
.auth-hero img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  opacity: .9;
}
.auth-hero .auth-hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.02));
}
.auth-hero .auth-hero__text{
  position:absolute; inset-inline: 16px;
  bottom: 16px;
  color: #fff;
  text-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.auth-hero .auth-hero__text h2{ margin:0 0 4px; font-weight: 900; font-size: 22px; }
.auth-hero .auth-hero__text p{ margin:0; opacity:.95; font-size: 13px; }

@media (max-width: 992px){
  .auth-split{ grid-template-columns: 1fr; }
  .auth-hero{ min-height: 220px; order: -1; }
}

/* Stars rating input */
.star-input{
  display:inline-flex;
  gap: 6px;
  align-items:center;
  padding: 8px 10px;
  border: 1px solid var(--md-outline);
  border-radius: 14px;
  background: var(--md-surface);
}
.star-input button{
  appearance:none;
  border:0;
  background:transparent;
  padding: 2px;
  line-height:1;
  cursor:pointer;
  font-size: 18px;
  color: rgba(26,115,232,.28);
}
.star-input button.on{ color: #1a73e8; }
.star-input .star-val{
  margin-inline-start: 8px;
  font-size: 12px;
  color: var(--md-muted);
}

/* Fix notifications panel position under fixed header/tabs */
.notif-panel{
  top: calc(var(--header-h, 64px) + var(--tabs-h, 0px) + 12px) !important;
}

/* On very small screens, make search bar FULL width and FIRST always */
@media (max-width: 520px){
  .store-appbar__inner{ flex-wrap: wrap; gap: 10px; }
  .store-search{ order: -1; width: 100%; min-width: 0; }
  .store-search__input{ width: 100%; }
}

/* Like button (Facebook-like) */
.btn-like{
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  color: #111;
  border-radius: 999px;
}
.btn-like i{ color: #9aa0a6; }
.btn-like .badge{ background: rgba(0,0,0,.06) !important; }
.btn-like.is-liked{
  border-color: rgba(234,67,53,.35);
  background: rgba(234,67,53,.08);
  color: #d93025;
}
.btn-like.is-liked i{ color: #d93025; }
.btn-like.is-liked .badge{ background: rgba(234,67,53,.12) !important; }

/* Project gallery thumbs + viewer */
.proj-thumbs{ overflow-x: auto; padding-bottom: 4px; }
.hero-thumb{
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.15);
  border-radius: 14px;
  padding: 0;
  width: 92px;
  height: 62px;
  overflow: hidden;
}
.hero-thumb img{ width:100%; height:100%; object-fit: cover; display:block; }
.hero-thumb.active{ outline: 2px solid rgba(26,115,232,.95); outline-offset: 1px; }
.proj-zoom{ position: absolute; top: 12px; right: 12px; z-index: 5; border-radius: 999px; }
.viewer-img{ max-height: calc(100vh - 120px); object-fit: contain; }
.viewer-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: #fff;
}
.viewer-nav.prev{ left: 12px; }
.viewer-nav.next{ right: 12px; }


/* ===== public/assets/category_tree.css ===== */
/* Category Tree (Main -> Sub) */
.category-tree{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 10px;
  background: rgba(0,0,0,.015);
}
.category-tree .cat-parent{
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  margin-bottom: 10px;
}
.category-tree .cat-parent:last-child{ margin-bottom:0; }
.category-tree .cat-parent__toggle{
  width:100%;
  text-align:start;
  border:0;
  background: transparent;
  padding: 10px 12px;
  display:flex;
  gap:10px;
  align-items:center;
  font-weight: 700;
}
.category-tree .cat-parent__toggle i{
  transition: transform .2s ease;
  opacity:.75;
}
.category-tree .cat-parent[data-open="0"] .cat-parent__toggle i{ transform: rotate(-90deg); }
html[dir="rtl"] .category-tree .cat-parent[data-open="0"] .cat-parent__toggle i{ transform: rotate(90deg); }

.category-tree .cat-children{
  padding: 8px 12px 12px;
  border-top: 1px dashed rgba(0,0,0,.08);
}
.category-tree .cat-parent[data-open="0"] .cat-children{ display:none; }

.category-tree .cat-leaf{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 6px 0;
  margin:0;
}
.category-tree .cat-leaf .form-check-input{
  margin-top:0;
}


/* ===== public/assets/skins/cobalt.css ===== */
/* Skin: cobalt – Professional blue (balanced) */
:root{
  --md-primary: #2f7dff;
  --md-on-primary: #ffffff;
  --md-bg: #eef4ff;
  --md-surface: #ffffff;
  --md-surface2: #e8f0ff;
  --md-surface3: #dbe7ff;
  --md-text: #15233b;
  --md-muted: #5d6d8a;
  --md-outline: rgba(21,35,59,.11);
  --md-chip: rgba(47,125,255,.10);
  --md-chip-active: rgba(47,125,255,.18);
}


/* ===== public/assets/home-v22.css ===== */
/* Storefront V22 — polished responsive home, cards, templates and footer */
:root{
  --store-shell: min(1440px, calc(100% - 40px));
  --store-radius-xl: 30px;
  --store-radius-lg: 22px;
  --store-radius-md: 16px;
  --store-soft-shadow: 0 18px 50px rgba(15,23,42,.10);
  --store-card-shadow: 0 10px 30px rgba(15,23,42,.08);
  --store-card-shadow-hover: 0 24px 58px rgba(15,23,42,.16);
}

body.store-play{
  background:
    radial-gradient(900px 400px at 100% 0%, color-mix(in srgb, var(--md-primary) 8%, transparent), transparent 72%),
    var(--md-bg);
  color: var(--md-text);
}

body.store-play .home-page-container{
  width: var(--store-shell) !important;
  max-width: none !important;
  padding-inline: 0 !important;
  padding-top: 24px !important;
}

body.store-play .home-ad-layout__main{
  max-width: none !important;
  gap: 34px !important;
}

body.store-play .store-appbar{
  border-bottom: 1px solid var(--md-outline);
  box-shadow: 0 8px 28px rgba(15,23,42,.06);
  backdrop-filter: blur(18px) saturate(1.2);
}

body.store-play .store-appbar__inner{
  width: var(--store-shell);
  margin-inline: auto;
}

body.store-play .store-search{
  border-radius: 999px;
  min-height: 48px;
  border: 1px solid var(--md-outline);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

body.store-play .store-tabs{
  border-bottom: 1px solid var(--md-outline);
}

body.store-play .store-tabs__inner{
  width: var(--store-shell);
  margin-inline: auto;
}

/* Hero */
body.store-play .home-cover{
  min-height: 420px !important;
  border-radius: var(--store-radius-xl) !important;
  box-shadow: 0 30px 80px rgba(15,23,42,.22) !important;
  background-position: center;
  background-size: cover;
  position: relative;
}

body.store-play .home-cover__overlay{
  background:
    linear-gradient(90deg, rgba(4,11,28,.84) 0%, rgba(4,11,28,.58) 48%, rgba(4,11,28,.14) 100%) !important;
}

html[dir="rtl"] body.store-play .home-cover__overlay{
  background:
    linear-gradient(270deg, rgba(4,11,28,.84) 0%, rgba(4,11,28,.58) 48%, rgba(4,11,28,.14) 100%) !important;
}

body.store-play .home-cover__content{
  min-height: 420px;
  display: flex;
  align-items: center;
  padding: clamp(30px,5vw,72px) !important;
  position: relative;
  z-index: 2;
}

body.store-play .home-cover__text{
  max-width: 720px;
}

body.store-play .home-cover__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
  font-weight: 800;
  font-size: 13px;
  backdrop-filter: blur(12px);
  margin-bottom: 18px;
}

body.store-play .home-cover__title{
  font-size: clamp(2.25rem,5vw,4.6rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em;
  max-width: 800px;
  text-shadow: 0 12px 32px rgba(0,0,0,.28);
}

body.store-play .home-cover__sub{
  font-size: clamp(1rem,1.5vw,1.25rem) !important;
  line-height: 1.9 !important;
  max-width: 660px !important;
  color: rgba(255,255,255,.88) !important;
  margin-top: 18px !important;
}

body.store-play .home-cover__actions{
  margin-top: 26px !important;
  gap: 12px !important;
}

body.store-play .home-cover__btn{
  min-height: 50px;
  padding-inline: 22px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

body.store-play .home-cover__btn.primary{
  background: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--md-primary) 36%, transparent);
}

body.store-play .home-cover__btn.secondary{
  color: #fff !important;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.32);
  backdrop-filter: blur(14px);
}

body.store-play .home-cover__btn:hover{
  transform: translateY(-2px);
  text-decoration: none;
}

body.store-play .home-cover__mini-stats{
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 28px;
  font-size: 13px;
  color: rgba(255,255,255,.78);
}

body.store-play .home-cover__mini-stats span{
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

body.store-play .home-cover__mini-stats strong{
  color: #fff;
  font-size: 16px;
}

/* Trust strip */
.home-trust-strip{
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
  padding: 16px;
  margin-top: -22px;
  margin-inline: 24px;
  position: relative;
  z-index: 5;
  background: color-mix(in srgb, var(--md-surface) 92%, transparent);
  border: 1px solid var(--md-outline);
  border-radius: 22px;
  box-shadow: var(--store-soft-shadow);
  backdrop-filter: blur(18px);
}

.home-trust-item{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 10px 14px;
  border-inline-end: 1px solid var(--md-outline);
}

.home-trust-item:last-child{ border-inline-end: 0; }

.home-trust-item > span{
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--md-primary);
  background: color-mix(in srgb, var(--md-primary) 12%, var(--md-surface));
}

.home-trust-item strong,
.home-trust-item small{ display:block; }

.home-trust-item strong{ font-size: 14px; }
.home-trust-item small{ color: var(--md-muted); margin-top: 3px; font-size: 12px; }

/* Shelves and filters */
body.store-play .shelf{
  margin-top: 0 !important;
}

body.store-play .home-projects-shelf,
body.store-play .storefront-section{
  padding: 26px;
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--store-radius-xl);
  box-shadow: var(--store-card-shadow);
}

body.store-play .shelf-head{
  align-items: end !important;
  margin-bottom: 20px;
}

body.store-play .shelf-title{
  font-size: clamp(1.3rem,2vw,1.75rem) !important;
  font-weight: 950 !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

body.store-play .shelf-title i{ color: var(--md-primary); }

.shelf-subtitle{
  margin: 7px 0 0;
  color: var(--md-muted);
  font-size: 14px;
}

body.store-play .shelf-more{
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--md-outline);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  color: var(--md-primary);
  background: var(--md-surface2);
  text-decoration: none !important;
}

body.store-play .home-project-count{
  color: var(--md-text) !important;
  border-color: var(--md-outline) !important;
  background: var(--md-surface2) !important;
}

body.store-play .home-project-filters{
  margin-bottom: 22px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border-color: var(--md-outline) !important;
  background: var(--md-surface2) !important;
  backdrop-filter: none !important;
}

body.store-play .home-project-filters .home-cat-menu{
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

body.store-play .home-project-filters .home-cat-menu::-webkit-scrollbar{ display:none; }

body.store-play .home-project-filters .chip{
  flex: 0 0 auto;
  border-radius: 999px !important;
  min-height: 42px !important;
  padding-inline: 16px !important;
}

/* Product grid and card */
body.store-play .shelf-row.home-project-grid,
body.store-play .storefront-grid{
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 20px !important;
  overflow: visible !important;
}

body.store-play .app-tile{
  width: 100% !important;
  min-width: 0 !important;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--store-radius-lg) !important;
  border: 1px solid var(--md-outline) !important;
  background: var(--md-surface) !important;
  color: var(--md-text) !important;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(15,23,42,.05);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease !important;
}

body.store-play .app-tile:hover{
  transform: translateY(-7px) !important;
  box-shadow: var(--store-card-shadow-hover) !important;
  border-color: color-mix(in srgb, var(--md-primary) 42%, var(--md-outline)) !important;
}

.app-tile__media{
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--md-surface2);
}

.app-tile__image-link{
  display: block;
  width: 100%;
  height: 100%;
}

body.store-play .shelf-row.home-project-grid .app-tile__img,
body.store-play .app-tile__img{
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform .45s ease, filter .45s ease !important;
}

body.store-play .app-tile:hover .app-tile__img{
  transform: scale(1.055) !important;
}

.app-tile__badges{
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  pointer-events: none;
}

.product-badge{
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 5px 16px rgba(15,23,42,.18);
}

.product-badge--featured{ background:#172554; color:#fff; }
.product-badge--free{ background:#047857; color:#fff; }
.product-badge--sale{ background:#be123c; color:#fff; }

body.store-play .shelf-row.home-project-grid .app-tile__body,
body.store-play .app-tile__body{
  padding: 17px 17px 18px !important;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.app-tile__category{
  color: var(--md-primary);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 8px;
}

body.store-play .app-tile__title{
  color: var(--md-text) !important;
  font-size: 1.03rem !important;
  line-height: 1.5;
  font-weight: 950 !important;
  text-decoration: none;
  min-height: 3em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.store-play .app-devline{
  color: var(--md-muted);
  margin-top: 8px;
  font-size: 12px !important;
}

body.store-play .app-tile__sub{
  color: var(--md-muted) !important;
  line-height: 1.7 !important;
  font-size: 13px !important;
  min-height: 3.4em;
  margin-top: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.app-tile__stats{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: var(--md-muted);
  font-size: 12px;
  padding-top: 13px;
  margin-top: auto;
}

.app-tile__stats .rating-line i{ color:#f59e0b; }
.app-tile__stats small{ color: var(--md-muted); }

body.store-play .app-tile__meta{
  margin-top: 14px !important;
  padding-top: 14px;
  border-top: 1px solid var(--md-outline);
}

.app-price-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
}

body.store-play .price-badge{
  background: transparent !important;
  color: var(--md-text) !important;
  font-size: .95rem !important;
  font-weight: 950;
  padding: 0 !important;
  height: auto !important;
}

.app-price-wrap del{
  color: var(--md-muted);
  font-size: 11px;
}

.app-tile__details{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--md-primary) 11%, var(--md-surface));
  color: var(--md-primary);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.app-tile__details:hover{
  color: var(--md-on-primary);
  background: var(--md-primary);
}

/* Benefits */
.home-benefits{
  padding: 42px 30px;
  border-radius: var(--store-radius-xl);
  background:
    radial-gradient(500px 220px at 100% 0%, color-mix(in srgb, var(--md-primary) 14%, transparent), transparent 70%),
    var(--md-surface2);
  border: 1px solid var(--md-outline);
}

.home-section-heading{
  max-width: 650px;
  margin-bottom: 24px;
}

.home-section-heading > span{
  color: var(--md-primary);
  font-weight: 900;
  font-size: 13px;
}

.home-section-heading h2{
  margin: 8px 0 0;
  font-size: clamp(1.5rem,2.5vw,2.35rem);
  font-weight: 950;
  color: var(--md-text);
}

.home-benefits__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.home-benefits__grid article{
  padding: 22px;
  border-radius: 20px;
  border: 1px solid var(--md-outline);
  background: var(--md-surface);
  box-shadow: 0 8px 24px rgba(15,23,42,.05);
}

.home-benefits__grid article > span{
  width:48px;
  height:48px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: color-mix(in srgb, var(--md-primary) 12%, var(--md-surface));
  color: var(--md-primary);
  font-size:18px;
}

.home-benefits__grid h3{
  font-size:16px;
  font-weight:950;
  margin:16px 0 8px;
}

.home-benefits__grid p{
  color:var(--md-muted);
  line-height:1.8;
  font-size:13px;
  margin:0;
}

/* Seller CTA */
.home-seller-cta{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:24px;
  padding:30px;
  border-radius:var(--store-radius-xl);
  color:#fff;
  background:
    radial-gradient(460px 200px at 12% 15%, rgba(255,255,255,.18), transparent 72%),
    linear-gradient(135deg, color-mix(in srgb, var(--md-primary) 84%, #081124), #081124);
  box-shadow:0 28px 64px color-mix(in srgb, var(--md-primary) 25%, transparent);
}

.home-seller-cta__icon{
  width:72px;
  height:72px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:27px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.20);
}

.home-seller-cta__content > span{ font-size:12px; font-weight:900; opacity:.74; }
.home-seller-cta__content h2{ font-size:clamp(1.4rem,2.4vw,2rem); font-weight:950; margin:7px 0; }
.home-seller-cta__content p{ margin:0; opacity:.82; line-height:1.7; }

.home-seller-cta__btn{
  min-height:48px;
  padding:0 20px;
  border-radius:14px;
  background:#fff;
  color:#111827;
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-weight:950;
  text-decoration:none;
  white-space:nowrap;
}

/* Footer */
body.store-play .store-footer{
  margin-top: 64px !important;
  border-top: 1px solid var(--md-outline) !important;
  background: var(--md-surface) !important;
}

.store-footer__inner{
  width: var(--store-shell);
  margin-inline:auto;
  padding:48px 0 26px;
}

.store-footer__grid{
  display:grid;
  grid-template-columns:1.4fr repeat(3,minmax(0,1fr));
  gap:34px;
}

.store-footer__brand{
  font-size:1.25rem;
  font-weight:950;
  color:var(--md-text);
}

.store-footer__about{
  color:var(--md-muted);
  line-height:1.9;
  margin-top:12px;
  max-width:460px;
}

.store-footer h3{
  font-size:14px;
  font-weight:950;
  margin:0 0 14px;
}

.store-footer ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

.store-footer a{
  color:var(--md-muted);
  text-decoration:none;
}

.store-footer a:hover{ color:var(--md-primary); }

.store-footer__contact{
  display:grid;
  gap:10px;
  color:var(--md-muted);
}

.store-footer__contact span{
  display:flex;
  align-items:center;
  gap:9px;
}

.store-footer__bottom{
  margin-top:34px;
  padding-top:22px;
  border-top:1px solid var(--md-outline);
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  color:var(--md-muted);
  font-size:12px;
}

/* Templates */
body.home-template-premium .home-cover{
  min-height:500px !important;
}
body.home-template-premium .home-cover__content{ min-height:500px; }
body.home-template-premium .home-projects-shelf,
body.home-template-premium .storefront-section{
  box-shadow:0 24px 60px rgba(15,23,42,.10);
}
body.home-template-premium .app-tile{ border-radius:28px !important; }

body.home-template-compact .home-cover{
  min-height:330px !important;
}
body.home-template-compact .home-cover__content{
  min-height:330px;
  padding-block:36px !important;
}
body.home-template-compact .home-cover__title{
  font-size:clamp(2rem,4vw,3.25rem) !important;
}
body.home-template-compact .home-trust-strip{ margin-top:14px; }
body.home-template-compact .home-projects-shelf,
body.home-template-compact .storefront-section{ padding:20px; }
body.home-template-compact .shelf-row.home-project-grid,
body.home-template-compact .storefront-grid{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:14px !important;
}
body.home-template-compact .app-tile__body{ padding:13px !important; }
body.home-template-compact .app-tile__sub{ display:none !important; }

body.home-template-cinematic .home-page-container{
  width:min(1680px,calc(100% - 28px)) !important;
}
body.home-template-cinematic .home-cover{
  min-height:600px !important;
  border-radius:36px !important;
}
body.home-template-cinematic .home-cover__content{
  min-height:600px;
  align-items:flex-end;
}
body.home-template-cinematic .home-cover__text{
  padding:28px;
  border-radius:26px;
  background:rgba(5,10,24,.40);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(18px);
}
body.home-template-cinematic .home-cover__overlay{
  background:linear-gradient(0deg,rgba(3,8,20,.88),rgba(3,8,20,.12) 72%) !important;
}
body.home-template-cinematic .home-cover__mini-stats{ display:none; }

/* Responsive */
@media (max-width:1199.98px){
  :root{ --store-shell:min(100% - 28px,1120px); }
  body.store-play .shelf-row.home-project-grid,
  body.store-play .storefront-grid,
  body.home-template-compact .shelf-row.home-project-grid,
  body.home-template-compact .storefront-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .home-benefits__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-trust-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-trust-item:nth-child(2){ border-inline-end:0; }
}

@media (max-width:767.98px){
  :root{ --store-shell:calc(100% - 18px); }
  body.store-play .home-page-container{ padding-top:14px !important; }
  body.store-play .home-cover,
  body.home-template-premium .home-cover,
  body.home-template-cinematic .home-cover{
    min-height:460px !important;
    border-radius:22px !important;
  }
  body.store-play .home-cover__content,
  body.home-template-premium .home-cover__content,
  body.home-template-cinematic .home-cover__content{
    min-height:460px;
    align-items:flex-end;
    padding:24px !important;
  }
  body.store-play .home-cover__title{ font-size:2.15rem !important; }
  body.store-play .home-cover__actions{ display:grid !important; grid-template-columns:1fr; }
  body.store-play .home-cover__btn{ width:100%; }
  body.store-play .home-cover__mini-stats{ gap:10px; }
  .home-trust-strip{
    grid-template-columns:1fr;
    margin:12px 0 0;
    padding:10px;
  }
  .home-trust-item{ border-inline-end:0; border-bottom:1px solid var(--md-outline); }
  .home-trust-item:last-child{ border-bottom:0; }
  body.store-play .home-projects-shelf,
  body.store-play .storefront-section{ padding:17px; border-radius:22px; }
  body.store-play .shelf-head{ align-items:flex-start !important; }
  body.store-play .shelf-row.home-project-grid,
  body.store-play .storefront-grid,
  body.home-template-compact .shelf-row.home-project-grid,
  body.home-template-compact .storefront-grid{
    grid-template-columns:1fr !important;
  }
  .home-benefits{ padding:26px 17px; border-radius:22px; }
  .home-benefits__grid{ grid-template-columns:1fr; }
  .home-seller-cta{
    grid-template-columns:1fr;
    text-align:center;
    border-radius:22px;
  }
  .home-seller-cta__icon{ margin-inline:auto; }
  .home-seller-cta__btn{ justify-content:center; }
  .store-footer__grid{ grid-template-columns:1fr; gap:26px; }
}

@media (prefers-reduced-motion:reduce){
  body.store-play .app-tile,
  body.store-play .home-cover__btn{ transition:none !important; }
}

body.ui-skin-graphite .store-appbar,
body.ui-skin-gold .store-appbar,
body.ui-skin-graphite .store-tabs,
body.ui-skin-gold .store-tabs{
  background: color-mix(in srgb, var(--md-surface) 88%, transparent) !important;
  border-color: var(--md-outline) !important;
}
body.ui-skin-graphite .dropdown-menu,
body.ui-skin-gold .dropdown-menu{
  background: var(--md-surface);
  color: var(--md-text);
  border-color: var(--md-outline);
}


/* ===== public/assets/zfix.css ===== */
/* Navbar/Dropdown Z-INDEX + Stacking Context FIX (v10.5 patch) */
:root{
  --z-navbar: 2147483000;
  /* Dropdowns should be above the fixed header, but BELOW modals */
  --z-dropdown: 2147483200;
  /* Bootstrap expects: backdrop < modal. If equal, backdrop may block clicks/scroll. */
  --z-backdrop: 2147483637;
  --z-modal: 2147483647;
}

/*
  TRUE fixed header (targeted)
  NOTE: Do NOT force ALL <header> tags to fixed.
  Some pages/components may use <header> inside content;
  forcing it fixed can cover the whole page (looks like "blank" content).
*/
.navbar, .navbar.sticky-top, .navbar.fixed-top, .doulab-nav, .site-header, .topbar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: var(--z-navbar) !important;
}

/* Ensure dropdown menus and popovers are above content and header */
.dropdown-menu, .dropdown-menu.show,
.popover, .tooltip,
.offcanvas{
  z-index: var(--z-dropdown) !important;
}

/* Fix modal layering: backdrop must be under modal */
.modal-backdrop{ z-index: var(--z-backdrop) !important; }
.modal{ z-index: var(--z-modal) !important; }

/* Many “theme/hero” blocks accidentally sit above nav due to z-index */
.hero, .home-hero, .doulab-hero, .project-hero, .cover, .cover-hero{
  z-index: 0 !important;
  position: relative !important;
}

/* If an overlay pseudo-element is above, drop it behind */
.hero::before, .hero::after,
.home-hero::before, .home-hero::after,
.doulab-hero::before, .doulab-hero::after,
.project-hero::before, .project-hero::after,
.cover::before, .cover::after,
.cover-hero::before, .cover-hero::after{
  z-index: 0 !important;
}

/* Make sure hero content stays above its own overlay (but still below nav) */
.hero > *, .home-hero > *, .doulab-hero > *, .project-hero > *, .cover > *, .cover-hero > *{
  position: relative;
  z-index: 1;
}

/* PageSpeed accessibility: keep CodeOne blue readable on light pills. */
.store-tab.active,
.store-tab.active span,
.app-tile__details{
  color:#0a3f98 !important;
}
.store-tab.active{
  background:#e7f0ff !important;
  border-color:#8bb7ff !important;
}

/* Body spacing for fixed header (JS will set --nav-h dynamically) */
body{
  /* Safe fallback in case JS can't measure header height */
  padding-top: var(--nav-h, 120px) !important;
}