/* =========================================================
   SHAHMIE TRAVEL & TOURS — V20 PANEL & PACKAGE FORM FIXES
   ========================================================= */
:root{
  --v20-maroon-950:#230207;
  --v20-maroon-900:#33040b;
  --v20-maroon-850:#430710;
  --v20-maroon-800:#5c0b1a;
  --v20-maroon-700:#761428;
  --v20-gold:#d9aa3d;
  --v20-gold-soft:#f4d77d;
  --v20-cream:#fff7e9;
  --v20-paper:#fffdf9;
  --v20-line:#ead6bc;
  --v20-ink:#351f24;
}

/* 1. Panel sidebar — target the actual injected container and all roles */
html body.panel-body[data-layout="admin"] #panel-sidebar,
html body.panel-body[data-layout="agent"] #panel-sidebar,
html body.panel-body[data-layout="customer"] #panel-sidebar{
  position:fixed!important;
  inset:0 auto 0 0!important;
  z-index:200!important;
  width:264px!important;
  height:100dvh!important;
  overflow:hidden!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  background:#33040b!important;
  background-image:linear-gradient(180deg,#230207 0%,#3b050e 52%,#5c0b1a 100%)!important;
  border-right:1px solid rgba(244,215,125,.20)!important;
  box-shadow:12px 0 34px rgba(35,2,7,.18)!important;
}
html body.panel-body[data-layout="admin"] #panel-sidebar>.sidebar,
html body.panel-body[data-layout="agent"] #panel-sidebar>.sidebar,
html body.panel-body[data-layout="customer"] #panel-sidebar>.sidebar{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  padding:16px 12px 24px!important;
  opacity:1!important;
  visibility:visible!important;
  color:#fff!important;
  background:#33040b!important;
  background-image:linear-gradient(180deg,#230207 0%,#3b050e 52%,#5c0b1a 100%)!important;
  border:0!important;
  box-shadow:none!important;
}
#panel-sidebar>.sidebar::-webkit-scrollbar{width:6px}
#panel-sidebar>.sidebar::-webkit-scrollbar-track{background:rgba(255,255,255,.025)}
#panel-sidebar>.sidebar::-webkit-scrollbar-thumb{background:rgba(244,215,125,.34);border-radius:99px}

html body.panel-body #panel-sidebar .sidebar-brand{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:96px!important;
  margin:0 3px 14px!important;
  padding:12px 15px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
html body.panel-body #panel-sidebar .sidebar-brand img{
  display:block!important;
  width:100%!important;
  max-width:210px!important;
  height:auto!important;
  max-height:67px!important;
  object-fit:contain!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  opacity:1!important;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))!important;
}
html body.panel-body #panel-sidebar .sidebar-role{
  margin:0 4px 13px!important;
  padding:12px 14px!important;
  border-radius:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  color:#f7e8da!important;
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(255,255,255,.10)!important;
}
html body.panel-body #panel-sidebar .sidebar-role span{color:#f7e8da!important;font-size:.8rem!important}
html body.panel-body #panel-sidebar .sidebar-role strong{color:var(--v20-gold-soft)!important;font-size:.8rem!important}
html body.panel-body #panel-sidebar .sidebar-section{
  margin:16px 14px 7px!important;
  padding:0!important;
  color:var(--v20-gold-soft)!important;
  font-size:.72rem!important;
  line-height:1.35!important;
  letter-spacing:.12em!important;
  font-weight:900!important;
}
html body.panel-body #panel-sidebar .sidebar-nav a{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-height:45px!important;
  margin:3px 4px!important;
  padding:10px 13px!important;
  border-radius:12px!important;
  color:#fff3e5!important;
  background:transparent!important;
  border:1px solid transparent!important;
  font-size:.94rem!important;
  line-height:1.3!important;
  font-weight:750!important;
  opacity:1!important;
}
html body.panel-body #panel-sidebar .sidebar-nav a span{color:inherit!important;opacity:1!important}
html body.panel-body #panel-sidebar .sidebar-nav a i{width:22px!important;text-align:center!important;color:#efca67!important;opacity:1!important}
html body.panel-body #panel-sidebar .sidebar-nav a:hover{
  color:#fff!important;
  background:rgba(255,255,255,.09)!important;
  border-color:rgba(244,215,125,.16)!important;
}
html body.panel-body #panel-sidebar .sidebar-nav a:hover i{color:#fff2b7!important}
html body.panel-body #panel-sidebar .sidebar-nav a.active{
  color:#691021!important;
  background:linear-gradient(135deg,#fff9ed,#f7e5c9)!important;
  border-color:rgba(217,170,61,.45)!important;
  box-shadow:inset 4px 0 0 var(--v20-gold),0 11px 25px rgba(20,0,4,.18)!important;
}
html body.panel-body #panel-sidebar .sidebar-nav a.active i{color:#7a1326!important}
html body.panel-body #panel-sidebar .sidebar-footer{border-top-color:rgba(255,255,255,.11)!important}
html body.panel-body .panel-main{margin-left:264px!important}

/* 2. Dashboard package mini carousel — readable text and a taller card */
.dashboard-mini-wrap{
  min-height:350px!important;
  border-radius:26px!important;
  background:#33040b!important;
}
.dashboard-mini-carousel,
.dashboard-mini-carousel .carousel-track,
.dashboard-mini-slide{min-height:350px!important;height:100%!important}
.dashboard-mini-slide{
  padding:28px!important;
  background-size:cover!important;
  background-position:center!important;
  isolation:isolate!important;
}
.dashboard-mini-slide::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background:linear-gradient(180deg,rgba(31,2,7,.10) 14%,rgba(42,3,9,.50) 52%,rgba(32,2,7,.95) 100%)!important;
}
.dashboard-mini-slide::after{display:none!important}
.dashboard-mini-slide>div{position:relative!important;z-index:2!important;max-width:92%!important}
.dashboard-mini-slide small,
.dashboard-mini-slide h3,
.dashboard-mini-slide p{
  color:#fff!important;
  opacity:1!important;
  text-shadow:0 3px 15px rgba(0,0,0,.55)!important;
}
.dashboard-mini-slide small{display:block!important;font-size:.87rem!important;font-weight:800!important;line-height:1.45!important}
.dashboard-mini-slide h3{margin:10px 0 7px!important;font-size:clamp(1.45rem,2.5vw,2.05rem)!important;line-height:1.14!important}
.dashboard-mini-slide p{margin:0 0 18px!important;font-size:1rem!important;line-height:1.5!important;font-weight:650!important}
.dashboard-mini-slide .badge{z-index:3!important;top:20px!important;left:20px!important;font-size:.82rem!important}
.dashboard-mini-carousel .carousel-controls.mini{z-index:4!important}

/* 3. Package management form */
.package-display-options{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  margin-top:18px!important;
}
.check-option{
  position:relative!important;
  display:flex!important;
  align-items:flex-start!important;
  gap:12px!important;
  min-height:84px!important;
  padding:15px 16px!important;
  border:1px solid var(--v20-line)!important;
  border-radius:16px!important;
  background:#fffaf2!important;
  cursor:pointer!important;
}
.check-option>input{position:absolute!important;opacity:0!important;pointer-events:none!important}
.check-option .check-box{
  flex:0 0 27px!important;
  width:27px!important;
  height:27px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:8px!important;
  color:transparent!important;
  background:#fff!important;
  border:2px solid #d8b567!important;
  transition:.2s ease!important;
}
.check-option input:checked+.check-box{background:#751428!important;border-color:#751428!important;color:#fff!important}
.check-option strong{display:block!important;color:#54101d!important;font-size:.98rem!important;line-height:1.35!important}
.check-option small{display:block!important;margin-top:4px!important;color:#77656a!important;font-size:.8rem!important;line-height:1.45!important}
.check-option:has(input:checked){border-color:#d9aa3d!important;background:linear-gradient(135deg,#fff6dc,#fffaf2)!important;box-shadow:0 12px 28px rgba(92,11,26,.08)!important}

/* 4. Upload input and preview */
.image-file-input{padding:10px!important;background:#fff!important}
.image-file-input::file-selector-button{
  min-height:39px!important;
  margin:-4px 12px -4px -5px!important;
  padding:8px 14px!important;
  border:0!important;
  border-radius:10px!important;
  background:#651020!important;
  color:#fff!important;
  font-weight:800!important;
  cursor:pointer!important;
}
.image-upload-preview{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-height:86px!important;
  margin-top:10px!important;
  padding:10px!important;
  border:1px dashed #d9b76b!important;
  border-radius:14px!important;
  background:#fffaf1!important;
}
.image-upload-preview img{
  display:none;
  width:112px!important;
  height:68px!important;
  border-radius:10px!important;
  object-fit:cover!important;
  background:#eee!important;
}
.image-upload-preview img[src]{display:block!important}
.image-upload-preview span{font-size:.82rem!important;color:#765f65!important;line-height:1.4!important}
.image-upload-group.is-loading .image-upload-preview{opacity:.65!important;pointer-events:none!important}

/* 5. Full package campaign slides in all panels — taller with visible content */
.panel-content>.panel-campaign{margin-top:12px!important;margin-bottom:28px!important}
.panel-campaign{
  min-height:380px!important;
  border-radius:28px!important;
  overflow:hidden!important;
  background:#3a050d!important;
}
.panel-campaign .carousel-track,
.panel-campaign-slide{min-height:380px!important;height:100%!important}
.panel-campaign-slide{
  align-items:center!important;
  background-size:cover!important;
  background-position:center 48%!important;
}
.panel-campaign-copy{
  max-width:790px!important;
  padding:48px 50px 82px!important;
}
.panel-campaign-copy .eyebrow{font-size:.78rem!important}
.panel-campaign-copy h2{
  margin:12px 0!important;
  color:#fff!important;
  font-size:clamp(2.5rem,4.2vw,4.5rem)!important;
  line-height:1.02!important;
  text-shadow:0 6px 26px rgba(0,0,0,.38)!important;
}
.panel-campaign-copy p{
  max-width:720px!important;
  color:#fff3e6!important;
  font-size:1.02rem!important;
  line-height:1.6!important;
  font-weight:620!important;
}
.panel-campaign-meta strong,
.panel-campaign-meta span{font-size:.9rem!important;color:#fff!important}
.panel-campaign .carousel-controls{z-index:5!important;right:24px!important;bottom:20px!important}

/* Mobile panel behaviour */
@media(max-width:1050px){
  html body.panel-body[data-layout="admin"] #panel-sidebar,
  html body.panel-body[data-layout="agent"] #panel-sidebar,
  html body.panel-body[data-layout="customer"] #panel-sidebar{
    width:280px!important;
    transform:translateX(-105%)!important;
    transition:transform .25s ease!important;
  }
  html body.panel-body .panel-shell.sidebar-open #panel-sidebar{transform:translateX(0)!important}
  html body.panel-body #panel-sidebar>.sidebar{transform:none!important}
  html body.panel-body .panel-main{margin-left:0!important}
  .mobile-overlay{z-index:180!important}
}
@media(max-width:760px){
  .dashboard-mini-wrap,
  .dashboard-mini-carousel,
  .dashboard-mini-carousel .carousel-track,
  .dashboard-mini-slide{min-height:330px!important}
  .dashboard-mini-slide{padding:24px!important}
  .dashboard-mini-slide h3{font-size:1.55rem!important}
  .package-display-options{grid-template-columns:1fr!important}
  .panel-campaign,
  .panel-campaign .carousel-track,
  .panel-campaign-slide{min-height:350px!important}
  .panel-campaign-copy{padding:38px 24px 84px!important}
  .panel-campaign-copy h2{font-size:2.25rem!important}
  .panel-campaign-copy p{font-size:.94rem!important}
}
@media(max-width:520px){
  .dashboard-mini-wrap,
  .dashboard-mini-carousel,
  .dashboard-mini-carousel .carousel-track,
  .dashboard-mini-slide{min-height:315px!important}
  .panel-campaign,
  .panel-campaign .carousel-track,
  .panel-campaign-slide{min-height:335px!important}
  .panel-campaign-copy h2{font-size:2rem!important}
}