/* ===================================================================
   Akhil Construction — Mobile Drawer Navigation
   Premium App-Style Sliding Drawer Menu
   ================================================================= */

/* ─── CSS Variables (Drawer-specific) ───────────────────────── */
:root {
  --drawer-width:        320px;
  --drawer-bg:           #ffffff;
  --drawer-text:         #1A2332;
  --drawer-muted:        #6B7280;
  --drawer-border:       rgba(0,0,0,.08);
  --drawer-hover:        rgba(255,107,0,.06);
  --drawer-active-bg:    rgba(255,107,0,.10);
  --drawer-active-text:  #FF6B00;
  --drawer-icon-bg:      rgba(255,107,0,.08);
  --drawer-icon-color:   #FF6B00;
  --drawer-overlay:      rgba(15,25,35,.55);
  --drawer-header-from:  #1A2332;
  --drawer-header-to:    #253347;
  --drawer-transition:   0.32s cubic-bezier(0.32, 0.73, 0, 1);
  --drawer-radius:       20px;
  --drawer-item-radius:  14px;
  --drawer-shadow:       0 24px 64px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08);
}

/* Dark mode overrides */
body.drawer-dark {
  --drawer-bg:           #111827;
  --drawer-text:         #F9FAFB;
  --drawer-muted:        #9CA3AF;
  --drawer-border:       rgba(255,255,255,.07);
  --drawer-hover:        rgba(255,107,0,.08);
  --drawer-active-bg:    rgba(255,107,0,.15);
  --drawer-icon-bg:      rgba(255,107,0,.12);
  --drawer-header-from:  #0D1117;
  --drawer-header-to:    #1A2332;
}

/* ─── Hamburger Button ───────────────────────────────────────── */
.drawer-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--bg-light);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  z-index: 1100;
  flex-shrink: 0;
  order: -1;
  left: -18px;
}

.drawer-hamburger:hover {
  background: rgba(255,107,0,.1);
  transform: scale(1.05);
}

.drawer-hamburger:active {
  transform: scale(0.95);
}

/* Animated hamburger icon lines */
.hamburger-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.hamburger-lines span {
  display: block;
  height: 2px;
  background: var(--secondary);
  border-radius: 4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.hamburger-lines span:nth-child(2) { width: 75%; }

/* Open state animation */
.drawer-hamburger.is-open .hamburger-lines span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.drawer-hamburger.is-open .hamburger-lines span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.drawer-hamburger.is-open .hamburger-lines span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─── Overlay ────────────────────────────────────────────────── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: var(--drawer-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1199;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--drawer-transition), visibility var(--drawer-transition);
}

.drawer-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ─── Drawer Panel ───────────────────────────────────────────── */
.drawer-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--drawer-width);
  max-width: 85vw;
  background: var(--drawer-bg);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  box-shadow: var(--drawer-shadow);
  border-radius: 0 var(--drawer-radius) var(--drawer-radius) 0;
  transform: translateX(-100%);
  transition: transform var(--drawer-transition);
  overflow: hidden;
  will-change: transform;
}

.drawer-panel.is-open {
  transform: translateX(0);
}

/* Push mode: shifts body content */
body.drawer-push-active {
  overflow: hidden;
}

/* ─── Drawer Header ──────────────────────────────────────────── */
.drawer-header {
  background: linear-gradient(135deg, var(--drawer-header-from) 0%, var(--drawer-header-to) 100%);
  padding: 0;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* Header decorative glow */
.drawer-header::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(255,107,0,.25) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.drawer-header::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: -20px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(255,107,0,.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Close button */
.drawer-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  color: rgba(255,255,255,.9);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 2;
  backdrop-filter: blur(8px);
}

.drawer-close-btn:hover {
  background: rgba(255,107,0,.5);
  border-color: rgba(255,107,0,.6);
  transform: rotate(90deg);
}

/* Profile area */
.drawer-profile {
  padding: 28px 20px 22px;
  position: relative;
  z-index: 1;
}

.drawer-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 14px;
}

.drawer-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25);
  object-fit: cover;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.drawer-avatar:hover {
  transform: scale(1.05);
  border-color: rgba(255,107,0,.6);
}

.drawer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Online indicator */
.drawer-online-dot {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 14px;
  height: 14px;
  background: #22C55E;
  border: 2.5px solid var(--drawer-header-from);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(34,197,94,.25);
  animation: onlinePulse 2.5s ease-in-out infinite;
}

@keyframes onlinePulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
  50%      { box-shadow: 0 0 0 6px rgba(34,197,94,.08); }
}

.drawer-username {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
  font-family: 'Poppins', sans-serif;
}

.drawer-tagline {
  font-size: 0.78rem;
  color: rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  gap: 5px;
}

.drawer-tagline i { font-size: 0.7rem; color: rgba(255,107,0,.9); }

/* Quick stats row */
.drawer-profile-stats {
  display: flex;
  gap: 0;
  margin-top: 16px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  overflow: hidden;
}

.drawer-stat-item {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}

.drawer-stat-item:hover { background: rgba(255,107,0,.15); }

.drawer-stat-item + .drawer-stat-item::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: rgba(255,255,255,.1);
}

.drawer-stat-num {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-family: 'Poppins', sans-serif;
}

.drawer-stat-label {
  font-size: 0.65rem;
  color: rgba(255,255,255,.55);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ─── Drawer Body (Scrollable) ──────────────────────────────── */
.drawer-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,107,0,.2) transparent;
}

.drawer-body::-webkit-scrollbar { width: 4px; }
.drawer-body::-webkit-scrollbar-track { background: transparent; }
.drawer-body::-webkit-scrollbar-thumb { background: rgba(255,107,0,.25); border-radius: 4px; }

/* ─── Drawer Section ────────────────────────────────────────── */
.drawer-section {
  margin-bottom: 6px;
}

.drawer-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--drawer-muted);
  padding: 10px 12px 6px;
  opacity: 0.7;
}

.drawer-divider {
  height: 1px;
  background: var(--drawer-border);
  margin: 6px 12px;
  border: none;
}

/* ─── Nav Items ─────────────────────────────────────────────── */
.drawer-nav-item {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border-radius: var(--drawer-item-radius);
  margin-bottom: 3px;
  overflow: hidden;
  position: relative;
}

/* Main link */
.drawer-nav-link {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 12px;
  color: var(--drawer-text);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--drawer-item-radius);
  transition: all 0.22s ease;
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

/* Ripple effect */
.drawer-nav-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,107,0,.0);
  border-radius: var(--drawer-item-radius);
  transition: background 0.3s ease;
}

.drawer-nav-link:hover::after { background: rgba(255,107,0,.04); }

.drawer-nav-link:hover {
  color: var(--drawer-active-text);
  background: var(--drawer-hover);
  transform: translateX(2px);
  text-decoration: none;
}

.drawer-nav-link.active {
  color: var(--drawer-active-text);
  background: var(--drawer-active-bg);
  font-weight: 600;
}

/* Active left accent bar */
.drawer-nav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 3px;
  background: linear-gradient(to bottom, #FF8C33, #FF6B00);
  border-radius: 0 4px 4px 0;
}

/* Icon wrapper */
.drawer-nav-icon {
  width: 38px;
  height: 38px;
  background: var(--drawer-icon-bg);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--drawer-icon-color);
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.drawer-nav-link:hover .drawer-nav-icon,
.drawer-nav-link.active .drawer-nav-icon {
  background: rgba(255,107,0,.18);
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(255,107,0,.2);
}

/* Label text */
.drawer-nav-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge */
.drawer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  background: var(--primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 0 5px;
  flex-shrink: 0;
  animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes badgePop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

.drawer-badge.badge-success { background: #22C55E; }
.drawer-badge.badge-info    { background: #3B82F6; }

/* Chevron for dropdown */
.drawer-chevron {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--drawer-muted);
  font-size: 0.75rem;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.25s ease;
  flex-shrink: 0;
  margin-right: 4px;
  background: transparent;
  border: none;
}

.drawer-chevron:hover { background: var(--drawer-hover); color: var(--drawer-active-text); }
.drawer-chevron.is-open {
  transform: rotate(180deg);
  color: var(--drawer-active-text);
}

/* ─── Submenu ────────────────────────────────────────────────── */
.drawer-submenu {
  display: none;
  padding: 4px 0 4px 20px;
  margin: 0 4px;
  border-left: 2px solid rgba(255,107,0,.18);
  margin-left: 24px;
}

.drawer-submenu.is-open { display: block; }

.drawer-submenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: var(--drawer-muted);
  font-size: 0.845rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.2s ease;
  margin-bottom: 2px;
}

.drawer-submenu-item:hover {
  color: var(--drawer-active-text);
  background: var(--drawer-hover);
  padding-left: 16px;
  text-decoration: none;
}

.drawer-submenu-item.active {
  color: var(--drawer-active-text);
  font-weight: 600;
}

.drawer-submenu-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,107,0,.4);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.drawer-submenu-item:hover .drawer-submenu-dot,
.drawer-submenu-item.active .drawer-submenu-dot {
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,107,0,.15);
}

/* Submenu open/close animation */
.drawer-submenu-inner {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease;
  opacity: 0;
}

.drawer-submenu.is-open .drawer-submenu-inner {
  max-height: 600px;
  opacity: 1;
}

/* ─── CTA Buttons in Drawer ──────────────────────────────────── */
.drawer-cta-section {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 14px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
  border: 2px solid transparent;
}

.drawer-cta-btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.drawer-cta-primary {
  background: linear-gradient(135deg, var(--primary) 0%, #FF8C33 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255,107,0,.35);
}

.drawer-cta-primary:hover {
  box-shadow: 0 6px 20px rgba(255,107,0,.5);
  color: #fff;
}

.drawer-cta-outline {
  background: transparent;
  color: var(--drawer-active-text);
  border-color: rgba(255,107,0,.3);
}

.drawer-cta-outline:hover {
  background: var(--drawer-active-bg);
  border-color: rgba(255,107,0,.6);
  color: var(--drawer-active-text);
}

/* ─── Drawer Footer ──────────────────────────────────────────── */
.drawer-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--drawer-border);
  padding: 10px 12px;
  background: var(--drawer-bg);
}

/* Dark mode toggle row */
.drawer-footer-row {
  display: flex;
  align-items: center;
  gap: 3px;
}

.drawer-footer-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  color: var(--drawer-muted);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 12px;
  flex: 1;
  transition: all 0.2s ease;
}

.drawer-footer-link:hover {
  color: var(--drawer-text);
  background: var(--drawer-hover);
  text-decoration: none;
}

.drawer-footer-link i {
  font-size: 0.9rem;
  width: 16px;
  text-align: center;
}

/* Logout */
.drawer-footer-link.logout-link {
  color: #EF4444;
}
.drawer-footer-link.logout-link:hover {
  background: rgba(239,68,68,.08);
  color: #DC2626;
}

/* ─── Dark Mode Toggle ───────────────────────────────────────── */
.drawer-dark-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  color: var(--drawer-muted);
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: 12px;
  cursor: pointer;
  flex: 1;
  transition: all 0.2s ease;
  user-select: none;
}

.drawer-dark-toggle:hover {
  background: var(--drawer-hover);
  color: var(--drawer-text);
}

.drawer-dark-toggle i {
  font-size: 0.9rem;
  width: 16px;
  text-align: center;
}

/* Toggle switch */
.drawer-toggle-switch {
  width: 36px;
  height: 20px;
  background: rgba(107,114,128,.3);
  border-radius: 10px;
  position: relative;
  margin-left: auto;
  transition: background 0.3s ease;
  flex-shrink: 0;
}

.drawer-toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.drawer-dark .drawer-toggle-switch {
  background: var(--primary);
}

body.drawer-dark .drawer-toggle-switch::after {
  transform: translateX(16px);
}

/* ─── Swipe hint bar ────────────────────────────────────────── */
.drawer-swipe-hint {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 60px;
  background: rgba(255,107,0,.3);
  border-radius: 0 4px 4px 0;
  z-index: 1100;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* ─── Item entrance animation ───────────────────────────────── */
.drawer-nav-item {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.drawer-panel.is-open .drawer-nav-item {
  opacity: 1;
  transform: translateX(0);
}

/* Staggered animation delays */
.drawer-panel.is-open .drawer-nav-item:nth-child(1)  { transition-delay: 0.05s; }
.drawer-panel.is-open .drawer-nav-item:nth-child(2)  { transition-delay: 0.09s; }
.drawer-panel.is-open .drawer-nav-item:nth-child(3)  { transition-delay: 0.13s; }
.drawer-panel.is-open .drawer-nav-item:nth-child(4)  { transition-delay: 0.17s; }
.drawer-panel.is-open .drawer-nav-item:nth-child(5)  { transition-delay: 0.21s; }
.drawer-panel.is-open .drawer-nav-item:nth-child(6)  { transition-delay: 0.25s; }
.drawer-panel.is-open .drawer-nav-item:nth-child(7)  { transition-delay: 0.29s; }
.drawer-panel.is-open .drawer-nav-item:nth-child(8)  { transition-delay: 0.33s; }
.drawer-panel.is-open .drawer-nav-item:nth-child(9)  { transition-delay: 0.37s; }
.drawer-panel.is-open .drawer-nav-item:nth-child(10) { transition-delay: 0.41s; }

/* ─── Responsive: show drawer only on mobile/tablet ─────────── */
@media (min-width: 992px) {
  .drawer-hamburger { display: none !important; }
  .drawer-overlay   { display: none !important; }
  .drawer-panel     { display: none !important; }
  .drawer-swipe-hint { display: none !important; }
}

@media (max-width: 991px) {
  .drawer-hamburger { display: flex; }

  /* Hide Bootstrap's default toggler on mobile when drawer is active */
  .navbar-toggler.d-none-drawer { display: none !important; }
}

/* ─── Micro-animations & Interactions ───────────────────────── */
@keyframes drawerItemWiggle {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-3px); }
  75%     { transform: translateX(3px); }
}

.drawer-nav-link:active { animation: drawerItemWiggle 0.25s ease; }

/* Shimmer loading state */
@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}

/* ─── Dark mode body styles ─────────────────────────────────── */
body.drawer-dark {
  background-color: #111827 !important;
  color: #F9FAFB;
}

body.drawer-dark #mainNavbar {
  background: #1F2937 !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

body.drawer-dark .brand-name { color: #F9FAFB !important; }
body.drawer-dark .brand-tagline { color: rgba(249,250,251,.5) !important; }

body.drawer-dark .drawer-hamburger {
  background: rgba(255,255,255,.07);
}
body.drawer-dark .drawer-hamburger .hamburger-lines span {
  background: #F9FAFB;
}

/* ─── Scroll lock ────────────────────────────────────────────── */
body.drawer-open {
  overflow: hidden;
  height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════
   SUB-PANEL — Services slide-over (native app pattern)
   The main drawer content slides LEFT while sub-panel slides in
   from the RIGHT within the same drawer container.
════════════════════════════════════════════════════════════════ */

/* Drawer inner wrapper — needed for horizontal sliding */
.drawer-panel {
  overflow: hidden; /* contain child panel animation */
}

/* When subpanel is open, push main content left */
.drawer-panel.subpanel-active .drawer-header,
.drawer-panel.subpanel-active .drawer-body,
.drawer-panel.subpanel-active .drawer-footer {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.32, 0.73, 0, 1),
              opacity 0.25s ease;
}

/* ─── Sub-panel Panel ───────────────────────────────────────── */
.drawer-subpanel {
  position: absolute;
  inset: 0;
  background: var(--drawer-bg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.73, 0, 1);
  z-index: 10;
  border-radius: 0 var(--drawer-radius) var(--drawer-radius) 0;
}

.drawer-subpanel.is-active {
  transform: translateX(0);
}

/* ─── Sub-panel Header ──────────────────────────────────────── */
.drawer-subpanel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 14px;
  background: linear-gradient(135deg, var(--drawer-header-from) 0%, var(--drawer-header-to) 100%);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* Decorative radial glow */
.drawer-subpanel-header::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(255,107,0,.2) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Back button */
.drawer-back-btn {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: #fff;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.22s ease;
  flex-shrink: 0;
  z-index: 1;
  backdrop-filter: blur(8px);
}

.drawer-back-btn:hover {
  background: rgba(255,107,0,.45);
  border-color: rgba(255,107,0,.55);
  transform: translateX(-2px);
}

.drawer-back-btn:active {
  transform: translateX(-4px) scale(0.93);
}

/* Title area */
.drawer-subpanel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  z-index: 1;
}

.drawer-subpanel-icon {
  width: 34px;
  height: 34px;
  background: rgba(255,107,0,.25);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #fff;
  flex-shrink: 0;
}

/* ─── Sub-panel Body ────────────────────────────────────────── */
.drawer-subpanel-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,107,0,.2) transparent;
}

.drawer-subpanel-body::-webkit-scrollbar { width: 4px; }
.drawer-subpanel-body::-webkit-scrollbar-track { background: transparent; }
.drawer-subpanel-body::-webkit-scrollbar-thumb { background: rgba(255,107,0,.25); border-radius: 4px; }

/* "View All" pill */
.drawer-subpanel-viewall {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: linear-gradient(135deg, rgba(255,107,0,.1) 0%, rgba(255,140,51,.06) 100%);
  border: 1px solid rgba(255,107,0,.2);
  border-radius: 14px;
  color: var(--drawer-active-text);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 14px;
  transition: all 0.22s ease;
}

.drawer-subpanel-viewall:hover {
  background: linear-gradient(135deg, rgba(255,107,0,.18) 0%, rgba(255,140,51,.12) 100%);
  border-color: rgba(255,107,0,.4);
  color: var(--drawer-active-text);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255,107,0,.15);
}

/* Section label inside subpanel */
.drawer-subpanel-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--drawer-muted);
  padding: 4px 4px 8px;
  opacity: 0.7;
}

/* ─── Sub-panel Service Items ───────────────────────────────── */
.drawer-subpanel-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--drawer-text);
  transition: all 0.22s ease;
  margin-bottom: 4px;
  position: relative;
  overflow: hidden;
}

.drawer-subpanel-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,107,0,.0), rgba(255,107,0,.0));
  border-radius: 14px;
  transition: background 0.25s ease;
}

.drawer-subpanel-item:hover {
  background: var(--drawer-hover);
  text-decoration: none;
  color: var(--drawer-text);
  transform: translateX(3px);
}

.drawer-subpanel-item:hover::before {
  background: linear-gradient(90deg, rgba(255,107,0,.04), transparent);
}

.drawer-subpanel-item:active {
  transform: scale(0.98);
}

/* Icon */
.drawer-subpanel-item-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform 0.22s ease;
}

.drawer-subpanel-item:hover .drawer-subpanel-item-icon {
  transform: scale(1.1);
}

/* Text */
.drawer-subpanel-item-text { flex: 1; min-width: 0; }

.drawer-subpanel-item-name {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-subpanel-item-desc {
  font-size: 0.73rem;
  color: var(--drawer-muted);
  margin-top: 2px;
  line-height: 1;
}

/* Arrow chevron */
.drawer-subpanel-item-arrow {
  font-size: 0.7rem;
  color: var(--drawer-muted);
  flex-shrink: 0;
  transition: all 0.22s ease;
  opacity: 0.5;
}

.drawer-subpanel-item:hover .drawer-subpanel-item-arrow {
  color: var(--drawer-active-text);
  opacity: 1;
  transform: translateX(2px);
}

/* ─── Nav arrow on subpanel trigger ────────────────────────── */
.drawer-nav-arrow {
  font-size: 0.7rem;
  color: var(--drawer-muted);
  margin-left: auto;
  flex-shrink: 0;
  transition: all 0.22s ease;
  opacity: 0.6;
}

.drawer-nav-link:hover .drawer-nav-arrow,
.drawer-nav-link.active .drawer-nav-arrow {
  color: var(--drawer-active-text);
  opacity: 1;
  transform: translateX(2px);
}

/* ─── Staggered entrance for subpanel items ─────────────────── */
.drawer-subpanel.is-active .drawer-subpanel-item {
  animation: subpanelItemIn 0.3s ease both;
}

.drawer-subpanel.is-active .drawer-subpanel-item:nth-child(1) { animation-delay: 0.06s; }
.drawer-subpanel.is-active .drawer-subpanel-item:nth-child(2) { animation-delay: 0.10s; }
.drawer-subpanel.is-active .drawer-subpanel-item:nth-child(3) { animation-delay: 0.14s; }
.drawer-subpanel.is-active .drawer-subpanel-item:nth-child(4) { animation-delay: 0.18s; }
.drawer-subpanel.is-active .drawer-subpanel-item:nth-child(5) { animation-delay: 0.22s; }
.drawer-subpanel.is-active .drawer-subpanel-item:nth-child(6) { animation-delay: 0.26s; }
.drawer-subpanel.is-active .drawer-subpanel-item:nth-child(7) { animation-delay: 0.30s; }

@keyframes subpanelItemIn {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Also animate viewall & label */
.drawer-subpanel.is-active .drawer-subpanel-viewall {
  animation: subpanelItemIn 0.28s ease 0.02s both;
}