/* ===== 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;
}