/* ═══════════════════════════════════════════
   package-modal.css — Qatar Package Modal
   Change this file to update: the popup that
   appears when a user clicks a package card
═══════════════════════════════════════════ */

/* ── Backdrop + container ── */
.pkg-modal{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.pkg-modal.open{opacity:1;pointer-events:all;}

.pkg-backdrop{
  position:absolute;inset:0;
  background:rgba(5,2,18,.85);
  backdrop-filter:blur(6px);
}

/* ── Sliding panel ── */
.pkg-panel{
  position:relative;z-index:2;
  width:min(780px,95vw);
  max-height:90vh;
  overflow-y:auto;
  background:linear-gradient(160deg,#130638,#1a0848,#0d0521);
  border:1px solid rgba(139,92,246,.3);
  border-radius:24px;
  box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 0 1px rgba(139,92,246,.15);
  transform:translateY(40px) scale(.97);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  scrollbar-width:thin;
  scrollbar-color:rgba(139,92,246,.4) transparent;
}
.pkg-modal.open .pkg-panel{transform:translateY(0) scale(1);}

/* ── Close button ── */
.pkg-close{
  position:absolute;top:16px;right:16px;z-index:10;
  width:38px;height:38px;border-radius:50%;border:none;
  background:rgba(255,255,255,.1);backdrop-filter:blur(10px);
  color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.pkg-close:hover{background:rgba(239,68,68,.7);}

/* ── Hero image banner ── */
.pkg-hero{position:relative;height:260px;overflow:hidden;border-radius:24px 24px 0 0;}
.pkg-hero img{width:100%;height:100%;object-fit:cover;display:block;}
.pkg-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.85) 100%);
  padding:28px 32px;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.pkg-badge{
  display:inline-flex;align-items:center;
  background:rgba(139,92,246,.55);border:1px solid rgba(139,92,246,.6);
  border-radius:50px;padding:4px 14px;font-size:11.5px;font-weight:700;
  letter-spacing:.5px;margin-bottom:10px;backdrop-filter:blur(8px);
  width:fit-content;
}
.pkg-hero-overlay h2{font-size:32px;font-weight:900;letter-spacing:-.5px;margin-bottom:4px;}
.pkg-hero-overlay p{font-size:13.5px;color:rgba(255,255,255,.65);margin-bottom:10px;}
.pkg-price-tag{font-size:15px;font-weight:600;color:var(--gold2);}
.pkg-price-tag strong{font-size:22px;font-weight:800;}
.pkg-price-tag span{font-size:12px;color:rgba(255,255,255,.5);font-weight:400;}

/* ── Body content ── */
.pkg-body{padding:28px 32px 36px;}
.pkg-desc{font-size:14.5px;color:rgba(255,255,255,.75);line-height:1.75;margin-bottom:28px;}

/* ── Section titles ── */
.pkg-section-title{
  display:flex;align-items:center;gap:9px;
  font-size:15px;font-weight:700;color:var(--accent2);
  margin:24px 0 14px;letter-spacing:.1px;
}

/* ── Itinerary days ── */
.pkg-days{display:flex;flex-direction:column;gap:12px;}
.pkg-day{
  display:flex;gap:16px;align-items:flex-start;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:14px 18px;
  transition:background .2s;
}
.pkg-day:hover{background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.25);}
.pkg-day-num{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white;font-size:11.5px;font-weight:800;letter-spacing:.5px;
  padding:4px 12px;border-radius:50px;white-space:nowrap;flex-shrink:0;
}
.pkg-day-text{font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.65;padding-top:2px;}

/* ── Inclusions / Exclusions ── */
.pkg-inc-exc{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px;}
.pkg-list{list-style:none;display:flex;flex-direction:column;gap:9px;}
.pkg-list li{font-size:13.5px;color:rgba(255,255,255,.72);display:flex;align-items:center;gap:8px;}
.pkg-list-inc li::before{content:'✓';color:#22c55e;font-weight:700;font-size:13px;}
.pkg-list-exc li::before{content:'✕';color:#f87171;font-weight:700;font-size:12px;}

/* ── Pricing table ── */
.pkg-table-wrap{overflow-x:auto;border-radius:14px;border:1px solid rgba(139,92,246,.2);}
.pkg-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.pkg-table thead tr{background:rgba(139,92,246,.25);}
.pkg-table th{padding:12px 16px;text-align:left;font-size:12px;font-weight:700;letter-spacing:.8px;color:var(--accent2);text-transform:uppercase;}
.pkg-table td{padding:11px 16px;color:rgba(255,255,255,.8);border-top:1px solid rgba(255,255,255,.06);}
.pkg-table tbody tr:hover{background:rgba(139,92,246,.08);}
.pkg-table td:not(:first-child){font-weight:700;color:var(--gold2);}

/* ── Note ── */
.pkg-note{
  margin-top:20px;font-size:12.5px;color:rgba(255,255,255,.45);line-height:1.7;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:12px 16px;
}

/* ── CTA button ── */
.pkg-cta{
  display:block;text-align:center;margin-top:24px;
  background:linear-gradient(135deg,var(--accent),#c084fc);
  color:white;text-decoration:none;font-size:15px;font-weight:700;
  padding:15px;border-radius:50px;
  box-shadow:0 8px 32px rgba(139,92,246,.45);
  transition:all .25s;
}
.pkg-cta:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(139,92,246,.6);}

/* ── Mobile ── */
@media(max-width:600px){
  .pkg-hero{height:200px;}
  .pkg-hero-overlay h2{font-size:24px;}
  .pkg-body{padding:20px 18px 28px;}
  .pkg-inc-exc{grid-template-columns:1fr;}
}