/* =========================
   DESTINATION DRAWER
   ========================= */

.dest-drawer{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
}
.dest-drawer.open{display:block;}

.drawer-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

.drawer-panel{
  position:absolute;
  right:0; top:0;
  width:420px;
  max-width:100%;
  height:100%;
  background:#0b1530;
  border-left:1px solid var(--border);
  display:flex;
  flex-direction:column;
}

@media(max-width:700px){
  .drawer-panel{width:100%;}
}

.drawer-head{
  padding:16px;
  border-bottom:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.drawer-title{
  display:flex;
  gap:10px;
  align-items:center;
}
.drawer-title img{width:32px;}
.drawer-title h3{margin:0;font-size:16px;}
.drawer-title span{font-size:12px;color:var(--muted);}
.drawer-close{
  background:none;
  border:0;
  font-size:26px;
  color:white;
  cursor:pointer;
}

.drawer-controls{
  padding:14px;
  display:flex;
  gap:10px;
}

.drawer-content{
  padding:14px;
  overflow:auto;
  flex:1;
}

.drawer-plan{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  margin-bottom:10px;
  background:rgba(255,255,255,.04);
}
.drawer-plan small{display:block;color:var(--muted);font-size:12px;}
.drawer-plan-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.drawer-plan .price{
  font-weight:900;
  color:var(--green);
}

/* Price stack (Regular + Student) */
.price-stack{
  display:flex;
  flex-direction:column;
  gap:2px;
  text-align:right;
  min-width:110px;
}

.price-regular{
  font-weight:950;
  color:#fff;
  font-size:14px;
  line-height:1.1;
}

.price-student{
  font-size:12px;
  color:var(--green);
  opacity:.92;
  line-height:1.1;
}

.price-student small{
  color:rgba(255,255,255,.55);
  font-weight:800;
  margin-left:4px;
}

/* Drawer controls layout */
.drawer-controls{
  padding:14px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Make inputs look consistent */
.drawer-controls .input{
  height:44px;
  border-radius:14px;
}

/* Give the select a fixed-ish width, let search expand */
#sortPlans{
  flex:0 0 160px;
  min-width:160px;
}

#drawerSearch{
  flex:1 1 220px;
  min-width:220px;
}

/* Mobile: stack nicely */
@media (max-width:700px){
  .drawer-controls{
    flex-direction:column;
    align-items:stretch;
  }
  #sortPlans,
  #drawerSearch{
    flex:1 1 auto;
    min-width:100%;
    width:100%;
  }
 
}