/* ═══════════════════════════════════════════
   eDalab — Brand: Green #1DB954-style vibrant
   Humanized, warm, community-forward
═══════════════════════════════════════════ */
:root{
  --g:       #16A34A;
  --g-dark:  #15803D;
  --g-deep:  #14532D;
  --g-light: #DCFCE7;
  --g-pale:  #F0FDF4;
  --g-grad:  linear-gradient(135deg,#16A34A 0%,#22C55E 100%);
  --g-grad2: linear-gradient(135deg,#15803D 0%,#16A34A 60%,#4ADE80 100%);

  --food-c: #EF4444; --food-bg:#FEF2F2;
  --shop-c: #8B5CF6; --shop-bg:#F5F3FF;
  --doc-c:  #3B82F6; --doc-bg: #EFF6FF;
  --hotel-c:#F59E0B; --hotel-bg:#FFFBEB;
  --ride-c: #06B6D4; --ride-bg: #ECFEFF;
  --rx-c:   #10B981; --rx-bg:  #ECFDF5;
  --svc-c:  #F97316; --svc-bg: #FFF7ED;
  --wash-c: #6366F1; --wash-bg:#EEF2FF;

  --bg:    #F8FBF8;
  --white: #FFFFFF;
  --text:  #111827;
  --sub:   #6B7280;
  --muted: #9CA3AF;
  --border:#E5E7EB;

  --r-sm: 12px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --sh-sm: 0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
  --sh-md: 0 4px 20px rgba(0,0,0,0.07),0 1px 4px rgba(0,0,0,0.04);
  --sh-lg: 0 12px 48px rgba(0,0,0,0.1),0 4px 12px rgba(0,0,0,0.05);
  --sh-xl: 0 24px 72px rgba(0,0,0,0.12),0 8px 24px rgba(0,0,0,0.06);
  --sh-green: 0 8px 32px rgba(22,163,74,0.25);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.6}
body.has-unified-nav-offset{padding-top:70px}
h1,h2,h3,h4{font-family:'Bricolage Grotesque',sans-serif;line-height:1.1;letter-spacing:-0.03em}
a{text-decoration:none;color:inherit}
button{font-family:'Nunito',sans-serif;cursor:pointer;border:none}
input,textarea{font-family:'Nunito',sans-serif;border:none;outline:none}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--g);border-radius:2px}

.ui-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;line-height:1;vertical-align:middle;flex-shrink:0}
.ui-icon svg{width:100%;height:100%;display:block}
.ui-icon-xs{width:14px;height:14px}
.ui-icon-sm{width:16px;height:16px}
.ui-icon-md{width:20px;height:20px}
.ui-icon-lg{width:24px;height:24px}
.icon-chip{width:42px;height:42px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(17,24,39,.08);box-shadow:var(--sh-sm)}
.icon-chip img,.icon-chip svg{width:20px;height:20px;display:block}

/* ═══ LAYOUT ═══ */
.wrap{max-width:1260px;margin:0 auto;padding:0 28px}
@media(max-width:640px){.wrap{padding:0 16px}}

/* ═══ NAV ═══ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:200;height:70px;
  display:flex;align-items:center;padding:0 28px;
  background:rgba(248,251,248,0.9);backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(0,0,0,0.05);transition:box-shadow .3s;
}
#nav.scrolled{box-shadow:var(--sh-md)}
.nav-w{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo{display:flex;align-items:center;gap:4px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;letter-spacing:-0.04em;white-space:nowrap;flex-shrink:0;margin-right:20px}
.nav-logo-icon{width:88px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-logo-icon svg{width:22px;height:22px;fill:#fff}
.nav-logo-icon img{width:100%;height:100%;object-fit:contain;display:block}
.nav-logo span{color:var(--g);display:inline-flex;align-items:center;line-height:1}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-a{padding:8px 14px;border-radius:10px;font-size:14px;font-weight:600;color:var(--sub);transition:all .2s}
.nav-a:hover{color:var(--text);background:rgba(0,0,0,0.04)}
.nav-a.on{color:var(--g);background:var(--g-light)}
.nav-right{display:flex;align-items:center;gap:10px}
.n-ghost{padding:8px 18px;border-radius:10px;border:1.5px solid var(--border);background:transparent;font-size:14px;font-weight:700;color:var(--text);transition:all .2s}
.n-ghost:hover{border-color:var(--g);color:var(--g)}
.n-solid{padding:9px 20px;border-radius:10px;background:var(--g-grad);color:#fff;font-size:14px;font-weight:800;box-shadow:var(--sh-green);transition:all .2s;display:flex;align-items:center;gap:6px}
.n-solid:hover{transform:translateY(-1px);box-shadow:0 10px 36px rgba(22,163,74,0.35)}
.nav-w-unified{gap:16px}
.nav-links-unified{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;white-space:nowrap;padding-bottom:2px;margin-left:8px}
.nav-links-unified::-webkit-scrollbar{display:none}
.nav-right-unified{flex-shrink:0;gap:8px}
.nav-language-picker{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border-radius:12px;border:1.5px solid var(--border);background:#fff;box-shadow:var(--sh-sm);color:var(--text);flex-shrink:0;overflow:hidden;box-sizing:border-box}
.nav-language-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--g)}
.nav-language-select{position:absolute;inset:0;border:none;background:transparent;color:transparent;font-size:0;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer;opacity:0}
.nav-language-select:focus{color:var(--g)}
.nav-quick-actions{display:flex;align-items:center;gap:8px}
.nav-menu-toggle{display:none;border:1.5px solid var(--border);background:#fff;color:var(--text);box-shadow:var(--sh-sm);align-items:center;justify-content:center;flex-shrink:0;font-size:13px;font-weight:800;transition:all .2s;box-sizing:border-box}
.nav-menu-toggle:hover{border-color:var(--g);color:var(--g)}
.nav-menu-toggle.nav-icon-btn-compact{width:42px;height:42px;padding:0;border-radius:12px}
.nav-menu-toggle .ui-icon{width:16px;height:16px}
.nav-icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;border-radius:12px;border:1.5px solid var(--border);background:#fff;color:var(--text);font-size:13px;font-weight:800;box-shadow:var(--sh-sm);transition:all .2s;box-sizing:border-box}
.nav-icon-btn:hover{border-color:var(--g);color:var(--g);transform:translateY(-1px)}
.nav-icon-symbol{display:inline-flex;align-items:center;justify-content:center;line-height:1;color:currentColor}
.nav-icon-label{font-size:13px;font-weight:800}
.nav-icon-btn-compact{width:42px;height:42px;padding:0}
.nav-icon-btn-compact .nav-icon-label{display:none}
.nav-badge{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--g-light);color:var(--g);font-size:11px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.nav-icon-btn-compact .nav-badge{position:absolute;top:-5px;right:-5px}
.nav-badge.is-empty{display:none}
.nav-auth-slot{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:110px;min-height:42px;flex-shrink:0}
.nav-profile-menu{position:relative}
.nav-profile-trigger{position:relative}
.nav-profile-trigger.nav-icon-btn-compact{width:42px;height:42px;padding:0;border-radius:12px}
.nav-profile-trigger.is-open{border-color:var(--g);color:var(--g)}
.nav-profile-dropdown{position:absolute;top:calc(100% + 10px);right:0;min-width:190px;padding:8px;background:#fff;border:1.5px solid var(--border);border-radius:16px;box-shadow:var(--sh-md);display:none;z-index:220}
.nav-profile-dropdown.is-open{display:grid;gap:4px}
.nav-profile-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:12px;background:transparent;color:var(--text);font-size:14px;font-weight:700;text-align:left}
.nav-profile-item:hover{background:var(--g-pale);color:var(--g)}
.nav-mobile-panel{position:absolute;top:calc(100% + 12px);left:16px;right:16px;padding:14px;background:rgba(255,255,255,.98);border:1.5px solid var(--border);border-radius:20px;box-shadow:var(--sh-lg);display:none;z-index:215}
.nav-mobile-panel.is-open{display:grid;gap:8px}
.nav-mobile-links{display:grid;gap:6px}
.nav-mobile-language{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 2px 10px;border-bottom:1px solid rgba(0,0,0,.06);margin-bottom:4px}
.nav-mobile-language-label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.nav-mobile-language .nav-language-picker{width:42px;height:42px;min-width:42px}
.nav-mobile-link{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:14px;background:#fff;color:var(--text);font-size:14px;font-weight:700;border:1px solid transparent}
.nav-mobile-link:hover,.nav-mobile-link.on{background:var(--g-pale);color:var(--g);border-color:rgba(22,163,74,.12)}
@media(max-width:900px){.nav-links{display:none}}
@media(max-width:600px){.n-ghost{display:none}}
@media(max-width:1180px){.nav-icon-label{display:none}.nav-icon-btn:not(.nav-icon-btn-compact){padding:8px 10px}.nav-icon-btn-compact{padding:0}}
@media(max-width:900px){.nav-links.nav-links-unified{display:none}.nav-menu-toggle{display:inline-flex}.nav-w-unified{gap:12px}.nav-right-unified{margin-left:auto}.nav-auth-slot .n-ghost{display:inline-flex;padding:8px 12px}.nav-auth-slot .n-solid{padding:9px 14px}}
@media(max-width:640px){.nav-logo span{display:none}.nav-logo-icon{width:72px;height:38px}.nav-auth-slot{min-width:94px;min-height:38px}.nav-auth-slot .n-solid{padding:9px 12px}.nav-quick-actions{gap:6px}.nav-right-unified{gap:6px}}
@media(max-width:520px){#nav{padding:0 16px}.nav-w-unified{gap:8px}.nav-icon-btn:not(.nav-icon-btn-compact){padding:7px 9px;border-radius:10px}.nav-menu-toggle.nav-icon-btn-compact,.nav-profile-trigger.nav-icon-btn-compact,.nav-language-picker,.nav-icon-btn.nav-icon-btn-compact{width:38px;height:38px;padding:0;border-radius:10px}.nav-logo-icon{width:64px;height:34px}.nav-auth-slot{min-width:84px;min-height:38px}.nav-auth-slot .n-solid,.nav-auth-slot .n-ghost{padding:8px 10px;font-size:13px}.nav-mobile-language{align-items:flex-start;flex-direction:column}}

html[dir="rtl"] body{direction:rtl}
html[dir="rtl"] .nav-w,
html[dir="rtl"] .nav-right,
html[dir="rtl"] .nav-quick-actions,
html[dir="rtl"] .nav-auth-slot{flex-direction:row-reverse}
html[dir="rtl"] .nav-logo{margin-right:0;margin-left:20px}
html[dir="rtl"] .nav-links-unified{direction:rtl;margin-left:0;margin-right:8px}
html[dir="rtl"] .nav-logo{flex-direction:row-reverse}
html[dir="rtl"] .nav-mobile-language{flex-direction:row-reverse}
html[dir="rtl"] .n-solid,
html[dir="rtl"] .n-ghost,
html[dir="rtl"] .nav-icon-btn{direction:rtl}
html[dir="rtl"] .nav-profile-dropdown{right:auto;left:0}
html[dir="rtl"] .nav-profile-item{text-align:right}
html[dir="rtl"] .nav-mobile-link{direction:rtl}

/* ═══ UTILITIES ═══ */
.au{opacity:0;transform:translateY(20px);animation:au-fade 0.6s ease forwards}
@keyframes au-fade{to{opacity:1;transform:translateY(0)}}
.d1{animation-delay:0.1s}
.d2{animation-delay:0.2s}
.d3{animation-delay:0.3s}
.d4{animation-delay:0.4s}

.visible{opacity:1;transform:translateY(0)}