/* ── Variables (agar pehle se hain to skip) ── */
:root {
  --navy:   #07111F;
  --navy-2: #0C1A30;
  --gold:   #F59E0B;
  --gold-d: #D97706;
  --green:  #10B981;
  --fh: 'Barlow Condensed', sans-serif;
  --tr: .28s cubic-bezier(.4,0,.2,1);
}
 
/* ── Parent li must be relative ── */
.nav-pkg {
  position: relative;
  list-style: none;
}
.pkg-drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--navy-2);
  border: 1px solid rgba(245,158,11,.18);
  border-radius: 12px;
  padding: 0;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: var(--tr);
  box-shadow: 0 20px 48px rgba(0,0,0,.5);
  z-index: 400;
  overflow: visible;
}
 
/* Hover se dropdown khule */
.nav-pkg {
  position: relative;
}
.nav-pkg:hover > .pkg-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
 
/* Category row styling */
.pkg-cat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  letter-spacing: .3px;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--tr);
  margin: 5px;
}
.pkg-cat:hover {
  background: rgba(245,158,11,.1);
  color: var(--gold);
}
 
.pkg-cat .arrow {
  font-size: 10px;
  opacity: .5;
  transition: var(--tr);
}
.pkg-cat:hover .arrow {
  opacity: 1;
  transform: translateX(2px);
}
 
.pkg-cat-icon {
  font-size: 16px;
  margin-right: 4px;
}
 
/* Divider between categories */
.pkg-divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 4px 10px;
}
 
/* Sub-panel (right side flyout) */
.pkg-sub {
  position: absolute;
  top: -5px;
  left: calc(100% + 8px);
  background: var(--navy-2);
  border: 1px solid rgba(245,158,11,.18);
  border-radius: 12px;
  padding: 8px;
  min-width: 240px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: var(--tr);
  box-shadow: 0 20px 48px rgba(0,0,0,.5);
  z-index: 401;
}
.pkg-cat:hover > .pkg-sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
 
/* Sub-panel links */
.pkg-sub a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 7px;
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  transition: var(--tr);
  white-space: nowrap;
}
.pkg-sub a:hover {
  background: rgba(245,158,11,.1);
  color: var(--gold);
}
 
/* Small icons inside sub-panel */
.pkg-sub-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.pkg-sub-icon.basic {
  background: rgba(100,150,255,.12);
  border: 1px solid rgba(100,150,255,.2);
}
.pkg-sub-icon.standard {
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.2);
}
.pkg-sub-icon.premium {
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.2);
}
 
/* Badges (Popular / Best) */
.pkg-sub-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: auto;
}
.pkg-sub-badge.pop {
  background: rgba(245,158,11,.15);
  color: var(--gold);
}
.pkg-sub-badge.best {
  background: rgba(16,185,129,.15);
  color: var(--green);
}
 
/* Active nav link style */
nav > ul > li > a.active {
  color: var(--gold);
  border-bottom: 2px solid var(--gold);
}