/* ===== AI Packages Section – Glowing Glass Panel (FINAL) ===== */
#packageSection {
  --pkg-section-bg: none;
  position: relative;
  margin-top: 1.5rem;
  padding: 20px 24px 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(247,147,30,0.30), transparent 55%),
    radial-gradient(circle at bottom right, rgba(0,0,0,0.85), #050814 70%);
  border: 1px solid rgba(247,147,30,0.45);
  box-shadow:
    0 0 40px rgba(247,147,30,0.25),
    0 18px 35px rgba(0,0,0,0.85);
  overflow: hidden;
}

/* When JS sets a background image */
#packageSection.has-bg {
  background-image:
    linear-gradient(130deg, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.80)),
    var(--pkg-section-bg);
  background-size: cover;
  background-position: center;
}

/* subtle glow layer */
#packageSection::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: conic-gradient(
    from 180deg,
    rgba(247,147,30,0.4),
    transparent,
    rgba(247,147,30,0.2),
    transparent
  );
  opacity:0.18;
  animation: hkeSpinGlow 18s linear infinite;
}
#packageSection::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:20px;
  background: radial-gradient(circle at top, rgba(255,255,255,0.12), transparent 55%);
  mix-blend-mode: screen;
  pointer-events:none;
}
@keyframes hkeSpinGlow{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/* content on top of glow */
#packageSection > *{
  position:relative;
  z-index:2;
}

#packageSection .badge-soft {
  background: rgba(247, 147, 30, 0.18);
  border: 1px solid rgba(247, 147, 30, 0.6);
  color: #fef3c7;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#packageSection .small,
#packageNote {
  color: #d1d5db !important;
}

/* ===== Package Cards – equal height, readable text ===== */

#packageContainer .col-12,
#packageContainer .col-md-6,
#packageContainer .col-lg-4 {
  display: flex;
}

.package-card {
  --pkg-bg: none;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: 18px;
  background-image:
    linear-gradient(135deg, rgba(0, 0, 0, 0.45), rgba(15, 23, 42, 0.85)),
    var(--pkg-bg);
  background-size: cover;
  background-position: center;
  color: #f9fafb;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(148, 163, 184, 0.35);
  min-height: 190px;
}

.package-card h6 {
  font-size: 1rem;
  margin-bottom: 2px;
  color: #fefefe;
  font-weight: 700;
}

.package-card .small,
.package-card li {
  color: #e5e7eb;
}

.package-card ul {
  margin: 6px 0 10px;
  padding-left: 18px;
  font-size: 0.85rem;
}

/* Code badge in top-right */
.package-code-badge {
  font-size: 0.7rem;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(15, 23, 42, 0.8);
  color: #f9fafb;
}

/* ===== Select Package button – always visible, orange pill ===== */
.package-card .btn,
.package-card .btn-hke {
  background: linear-gradient(135deg, #f7931e, #ffb347);
  color: #111 !important;
  border: none;
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 600;
  font-size: 0.85rem;
  box-shadow: 0 0 14px rgba(247, 147, 30, 0.9);
  margin-top: 8px;
  align-self: flex-start;
}

.package-card .btn:hover,
.package-card .btn-hke:hover {
  box-shadow: 0 0 18px rgba(255, 193, 107, 1);
  transform: translateY(-1px);
}

/* Selected package info bar */
#selectedPackageBox .alert {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(248, 250, 252, 0.18);
  color: #e5e7eb;
}
/* ===============================
   HERO + AI PLANNER ALIGNMENT FIX
   =============================== */

/* Hero must create space below */
.hero-banner{
  position: relative;
  padding-bottom: 180px; /* creates safe gap */
  z-index: 1;
}

/* AI planner section must stay below hero */
#ai-planner{
  position: relative !important;
  margin-top: -120px; /* floating look */
  z-index: 5;
}

/* AI card itself */
.ai-card,
#aiPlannerForm{
  position: relative !important;
  transform: none !important;
  margin-top: 0 !important;
}

/* Prevent navbar overlap issues */
.navbar,
.navbar-custom{
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* Mobile safety */
@media (max-width: 768px){
  .hero-banner{
    padding-bottom: 220px;
  }

  #ai-planner{
    margin-top: -80px;
  }
}
/* ===== FIX: STOP AI PLANNER OVERLAP WITH HERO ===== */

/* Make hero a normal block (not fixed height) and give real bottom spacing */
.hero-banner{
  height: auto !important;          /* overrides 80vh */
  min-height: 80vh;                 /* keeps hero tall */
  padding-bottom: 260px !important; /* space for floating card */
  overflow: visible !important;
  position: relative !important;
}

/* If your AI Planner section/card is being pulled up, force it down */
#ai-planner{
  position: relative !important;
  margin-top: -180px !important;    /* floating look */
  z-index: 50 !important;
}

/* The planner card itself must NOT be absolute/fixed */
#aiPlannerForm,
.ai-card{
  position: relative !important;
  bottom: auto !important;
  top: auto !important;
  transform: none !important;
}

/* Ensure hero overlay stays behind planner */
.hero-banner > div[style*="background:rgba"]{
  z-index: 1 !important;
}
.hero-banner .container{
  z-index: 2 !important;
}

/* Mobile tuning */
@media (max-width: 768px){
  .hero-banner{ padding-bottom: 320px !important; }
  #ai-planner{ margin-top: -120px !important; }
}
/* ===== FIX: stop AI Planner overlapping HERO ===== */

/* Hero should NOT hide content below */
.hero-banner{
  height: auto !important;          /* override 80vh */
  min-height: 80vh !important;      /* keep hero tall */
  padding-bottom: 40px !important;  /* small spacing */
}

/* Force the AI planner section to sit below hero */
#ai-planner{
  position: relative !important;
  margin-top: 30px !important;      /* push below hero */
  padding-top: 0 !important;
  z-index: 2 !important;
}

/* If your planner card is using absolute/transform, kill it */
#aiPlannerForm,
.ai-card{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin-top: 0 !important;
}

/* If you have a wrapper that was pulling it up, neutralize */
.hero-banner + #ai-planner,
.hero-banner + section#ai-planner{
  margin-top: 30px !important;
}

/* Mobile */
@media (max-width: 768px){
  #ai-planner{ margin-top: 20px !important; }
}
/* ===== AI Trip Planner – Theme matched ===== */
.ai-wrap{
  padding: 40px 0 20px;
}

.ai-panel{
  border-radius: 22px;
  border: 1px solid rgba(247,147,30,.35);
  background: linear-gradient(180deg, rgba(0,47,75,.55), rgba(10,12,18,.92));
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 40px rgba(247,147,30,.12);
  overflow: hidden;
}

.ai-head{
  padding: 18px 18px 12px;
  background: linear-gradient(90deg, rgba(0,47,75,.9), rgba(220,66,37,.85));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.ai-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:#fff;
  letter-spacing:.3px;
}

.ai-dot{
  width:10px;height:10px;border-radius:50%;
  background:#f7931e;
  box-shadow:0 0 14px rgba(247,147,30,.9);
}

.ai-sub{
  color: rgba(255,255,255,.85);
  font-size: .9rem;
  margin-top: 6px;
}

.ai-tip{
  color: rgba(255,255,255,.75);
  font-size: .82rem;
  margin-top: 6px;
}

.ai-form{ padding: 18px; }

.ai-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.ai-field{
  grid-column: span 4;
}

@media (max-width: 992px){
  .ai-field{ grid-column: span 6; }
}
@media (max-width: 576px){
  .ai-field{ grid-column: span 12; }
}

.ai-field label{
  display:block;
  color: rgba(255,255,255,.9);
  font-weight: 700;
  margin-bottom: 6px;
}

.ai-field input,
.ai-field select{
  width:100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,12,18,.35);
  color: #fff;
  outline:none;
}

.ai-field input::placeholder{ color: rgba(255,255,255,.55); }

.ai-field input:focus,
.ai-field select:focus{
  border-color: rgba(247,147,30,.7);
  box-shadow: 0 0 0 3px rgba(247,147,30,.18);
}

.ai-help{
  font-size:.78rem;
  color: rgba(255,255,255,.65);
  margin-top: 6px;
}

.ai-packages{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}

.ai-pack-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ai-chip{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  background: rgba(247,147,30,.16);
  border: 1px solid rgba(247,147,30,.55);
  color: #ffe8c7;
}

.ai-pack-note{
  color: rgba(255,255,255,.7);
  font-size: .82rem;
}

.ai-pack-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.ai-pack-card{
  grid-column: span 4;
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, rgba(0,0,0,.55), rgba(15,23,42,.85));
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
  color:#fff;
}

@media (max-width: 992px){ .ai-pack-card{ grid-column: span 6; } }
@media (max-width: 576px){ .ai-pack-card{ grid-column: span 12; } }

.ai-pack-card h6{
  font-weight: 900;
  margin: 0 0 6px;
}

.ai-pack-card ul{
  margin: 8px 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,.85);
  font-size: .86rem;
}

.ai-pack-card small{ color: rgba(255,255,255,.78); }

.ai-pack-btn{
  margin-top: 10px;
  display:inline-flex;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
  background: linear-gradient(135deg, #f7931e, #ffb347);
  color:#111;
  box-shadow: 0 0 16px rgba(247,147,30,.55);
}

.ai-pack-btn:hover{ transform: translateY(-1px); }

.ai-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-btn{
  border:none;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 900;
  background: linear-gradient(135deg, #f7931e, #ffb347);
  color:#111;
  box-shadow: 0 0 18px rgba(247,147,30,.55);
}

.ai-btn-ghost{
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  text-decoration: none;
  background: rgba(0,0,0,.22);
}

.ai-msg{
  margin-top: 12px;
  color: rgba(255,255,255,.85);
  font-size: .92rem;
}
/* ================================
   HKE STANDARD PAGE SYSTEM (v1)
   Works for mystic.html, adventure.html, spiritual.html
   ================================ */

:root{
  --navy:#002f4b;
  --orange:#dc4225;
  --accent:#f7931e;
  --ink:#0b1220;
  --paper:#ffffff;

  --radius:22px;
  --shadow: 0 18px 40px rgba(0,0,0,.22);
}

html, body{ height:100%; }
body{
  font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  background: linear-gradient(to bottom,#eef2f3,#8e9eab);
  color:#1f2937;
}

/* Fix sticky navbar overlap on all pages */
main{ padding-top: 86px; }

/* Navbar (use your existing class names) */
.navbar-custom{
  background: linear-gradient(to right, var(--navy), var(--orange));
}
.navbar-custom .nav-link{ color:#fff !important; font-weight:600; letter-spacing:.3px; }
.navbar-custom .nav-link:hover{ color:#ffe600 !important; text-decoration:none; }
.navbar-brand img{
  height:58px;
  background:#fff;
  border-radius:12px;
  padding:6px;
  box-shadow:0 0 10px rgba(247,147,30,.55);
}

/* HERO (standard) */
.hke-hero{
  position:relative;
  min-height: 62vh;
  border-radius: 28px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.hke-hero::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 20% 10%, rgba(247,147,30,.25), transparent 45%),
              linear-gradient(120deg, rgba(0,0,0,.65), rgba(0,0,0,.35));
  z-index:1;
}
.hke-hero-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transform: scale(1.03);
  filter: contrast(1.02) saturate(1.05);
}
.hke-hero-content{
  position:relative;
  z-index:2;
  padding: 60px 20px;
  text-align:center;
  color:#fff;
}
.hke-hero-badge{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  font-weight:600;
  margin-bottom:18px;
}
.hke-hero-title{
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height:1.1;
  margin-bottom:10px;
}
.hke-hero-sub{
  color: rgba(255,255,255,.88);
  max-width: 820px;
  margin: 0 auto 18px;
}
.hke-hero-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.btn-hke-primary{
  background: linear-gradient(135deg, var(--accent), #ffb347);
  border:none;
  color:#111 !important;
  font-weight:800;
  border-radius:999px;
  padding:12px 18px;
  box-shadow: 0 0 18px rgba(247,147,30,.65);
}
.btn-hke-ghost{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.25);
  color:#fff !important;
  font-weight:700;
  border-radius:999px;
  padding:12px 18px;
  backdrop-filter: blur(10px);
}
.btn-hke-ghost:hover{ background: rgba(255,255,255,.16); }

/* SECTION TITLES */
.hke-section-title{
  text-align:center;
  font-weight:900;
  color: var(--orange);
  margin: 28px 0 14px;
}

/* DESTINATION GRID */
.hke-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.hke-col-4{ grid-column: span 4; }
@media (max-width: 992px){ .hke-col-4{ grid-column: span 6; } }
@media (max-width: 576px){ .hke-col-4{ grid-column: span 12; } }

.hke-card{
  background: rgba(255,255,255,.95);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hke-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 52px rgba(0,0,0,.28);
}
.hke-card img{
  width:100%;
  height: 210px;
  object-fit: cover;
}
.hke-card-body{ padding:16px; }
.hke-card-title{
  font-weight:900;
  margin:0 0 6px;
  color:#111827;
}
.hke-card-text{ color:#4b5563; margin:0 0 12px; }
.hke-pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(247,147,30,.14);
  border: 1px solid rgba(247,147,30,.35);
  color:#7c2d12;
  font-weight:700;
  font-size:.82rem;
}

/* FOOTER */
.hke-footer{
  background:#0b1220;
  color:#cbd5e1;
  padding: 32px 0;
  margin-top: 60px;
}
.hke-footer a{ color:#cbd5e1; text-decoration:underline; }
.hke-footer a:hover{ color:#fff; }

/* FLOATING CONTACT (fix huge whatsapp issue) */
.hke-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
}
.hke-float a{ text-decoration:none; }
.hke-float .float-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background:#fff;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  overflow:hidden;
}
.hke-float .float-btn img{
  width: 28px !important;
  height: 28px !important;
  object-fit: contain;
}
.hke-float .float-book{
  padding:10px 16px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--accent), #ffb347);
  font-weight:900;
  color:#111;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding-top: 90px;
    padding-bottom: 30px;
  }
}