/* =========================================================
   EAH Studios — PUBLIC STYLE (style.css) — FULL (HOME + PACKAGES + GALLERY)
   ✅ Works with your current HTML/PHP (NO changes needed)
   ✅ Packages cards: SAME HEIGHT + buttons aligned + image frame + separate text boxes
   ✅ Gallery: image frame + separate caption box
   ========================================================= */

/* =========================
   TOKENS
   ========================= */
:root{
  --purple:#6a1b9a;
  --pink:#ec407a;
  --gold:#f2c94c;

  --bg1:#120820;
  --bg2:#1a0b2e;

  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.085);
  --line:rgba(255,255,255,.12);

  --text:#fff;
  --muted:rgba(255,255,255,.75);
  --muted2:rgba(255,255,255,.55);

  --radius:18px;
  --radius2:22px;

  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow2: 0 18px 55px rgba(0,0,0,.55);

  --ease:cubic-bezier(.2,.8,.2,1);

  --glass: rgba(10,4,18,.62);
  --glass2: rgba(10,4,18,.88);
  --ring: rgba(236,64,122,.28);
}

/* =========================
   BASE
   ========================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(236,64,122,.20), transparent 60%),
    radial-gradient(900px 520px at 80% 18%, rgba(242,201,76,.14), transparent 60%),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}

.wrap,.container{max-width:1120px;margin:0 auto;padding:0 18px}
.section{padding:36px 0}

/* =========================
   ANIMATIONS
   ========================= */
@keyframes floatGlow{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(236,64,122,.22)}100%{box-shadow:0 0 0 18px rgba(236,64,122,0)}}
@keyframes navGlow{0%,100%{opacity:.35}50%{opacity:.80}}

.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{animation: fadeUp .7s var(--ease) forwards}
.fade-in{animation: fadeUp .55s var(--ease) both}

/* =========================
   TYPOGRAPHY
   ========================= */
h1{
  font-size:48px;
  line-height:1.05;
  margin:0 0 12px;
  letter-spacing:-.4px;
}
h2{margin:0 0 14px;letter-spacing:-.2px}
h3{margin:0 0 8px}
.lead{font-size:18px;color:var(--muted);margin:0 0 18px}
.muted{color:var(--muted)}
.muted2{color:var(--muted2)}
.small{font-size:13px;color:var(--muted2);line-height:1.55}

@media (max-width:900px){
  h1{font-size:38px}
}

/* =========================
   NAVBAR
   ========================= */
.topbar{
  position:sticky;
  top:0;
  z-index:999;
  background:var(--glass);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.topbar::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(242,201,76,.30), rgba(236,64,122,.30), transparent);
  opacity:.55;
}

.topbarInner{
  max-width:1120px;
  margin:0 auto;
  padding:12px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brandLink{
  display:flex;
  align-items:center;
  gap:14px;
  color:#fff;
  text-decoration:none;
  min-width:260px;
}

.logo{
  height:90px;
  width:220px;
  border-radius:14px;
  object-fit:cover;            /* ✅ FIX */
  object-position:center;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
}

.logo:hover{animation: pulseRing 1.2s ease-out 1}

.brandText{display:flex;flex-direction:column;line-height:1.05}
.brandTitle{font-weight:950;letter-spacing:.2px}
.brandSub{font-size:12px;color:var(--muted);margin-top:2px}

.nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  position:relative;
}
.nav a{
  padding:9px 12px;
  border-radius:999px;
  font-weight:950;
  color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), filter .18s var(--ease);
  position:relative;
  overflow:hidden;
}
.nav a::before{
  content:"";
  position:absolute;inset:-40%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 55%);
  opacity:0;
  transition:opacity .18s var(--ease);
}
.nav a:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16);
  filter:brightness(1.05);
}
.nav a:hover::before{opacity:.9}
.nav a.isActive{
  background:rgba(255,255,255,.10);
  border-color:rgba(242,201,76,.20);
}
.nav a.isActive::after{
  content:"";
  position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:999px;
  background:linear-gradient(90deg, rgba(242,201,76,.85), rgba(236,64,122,.85));
  animation: navGlow 2.4s ease-in-out infinite;
}

.navCta{
  border:1px solid rgba(255,255,255,.14) !important;
  background:linear-gradient(135deg,var(--purple),var(--pink)) !important;
  background-size:200% 200% !important;
  animation: shimmer 7s linear infinite;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

.navToggle{
  display:none;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.18);
  color:#fff;
  padding:10px 12px;
  border-radius:14px;
  font-weight:950;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
@media (max-width:900px){
  .nav{display:none}
  .navToggle{display:inline-flex}
  body.navOpen .nav{
    display:flex;
    position:absolute;
    right:18px;
    top:74px;
    flex-direction:column;
    gap:8px;
    padding:12px;
    background:var(--glass2);
    border:1px solid rgba(255,255,255,.14);
    border-radius:16px;
    box-shadow: var(--shadow2);
    min-width:220px;
  }
  body.navOpen .nav a{border-radius:14px}
  .brandLink{min-width:auto}
  .logo{width:150px;height:50px}
}

/* =========================
   HERO
   ========================= */
.hero{padding:42px 0}

.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  align-items:stretch;
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
}

.hero-grid > :first-child{
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.045));
  border-radius:var(--radius2);
  padding:18px;
  box-shadow: var(--shadow);
}
.hero-grid > :first-child:hover{border-color: rgba(242,201,76,.20)}

.hero-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  color:var(--muted);
  margin-top:12px;
  font-size:14px;
}
.trust-row span{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}

.hero-card{
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
  border-radius: var(--radius2);
  padding: 18px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  animation: fadeUp .7s var(--ease) both;
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 20% 15%, rgba(242,201,76,.14), transparent 55%),
    radial-gradient(circle at 80% 65%, rgba(236,64,122,.16), transparent 60%);
  opacity:0;
  transition: opacity .25s var(--ease);
}
.hero-card:hover::before{opacity:1}

.hero-card-title{
  font-weight: 950;
  font-size: 16px;
  letter-spacing: .2px;
  margin-bottom: 8px;
}

.hero-card-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.hero-card-actions br{display:none}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:#fff;
  font-weight: 950;
  font-size: 13px;
  transition: transform .18s var(--ease),
              background .18s var(--ease),
              border-color .18s var(--ease),
              filter .18s var(--ease),
              box-shadow .18s var(--ease);
  position:relative;
  overflow:hidden;
}
.chip::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 55%);
  opacity:0;
  transition: opacity .18s var(--ease);
}
.chip:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  filter: brightness(1.06);
  box-shadow: 0 12px 24px rgba(0,0,0,.20);
}
.chip:hover::before{opacity:1}
.hero-card-actions .chip:first-child{
  background: linear-gradient(135deg,var(--purple),var(--pink));
  background-size:200% 200%;
  animation: shimmer 7s linear infinite;
  border-color: rgba(255,255,255,.18);
}
.hero-card-actions .chip[href^="tel:"]{border-color: rgba(242,201,76,.35)}
.hero-card-actions .chip[href^="mailto:"]{border-color: rgba(236,64,122,.35)}

@media (max-width:520px){
  .hero-card-actions{flex-direction:column}
  .chip{width:100%}
}

/* =========================
   BUTTONS
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--purple),var(--pink));
  background-size:200% 200%;
  animation: shimmer 6s linear infinite;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  font-weight:950;
  color:#fff;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.btn:hover{
  transform: translateY(-2px);
  filter:brightness(1.08);
  box-shadow: var(--shadow2);
}
.btn:active{transform: translateY(0)}

.btn-ghost, .btn.btn-ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.20);
  box-shadow:none;
  animation:none;
}
.btn-ghost:hover{background:rgba(255,255,255,.06)}

/* =========================
   FORMS
   ========================= */
label{display:block;margin:10px 0;color:var(--muted);font-weight:900}
input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  color:#fff;
  outline:none;
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
}
input:focus,select:focus,textarea:focus{
  border-color: rgba(236,64,122,.50);
  box-shadow:0 0 0 4px rgba(236,64,122,.16);
}
textarea{resize:vertical}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:520px){.grid-2{grid-template-columns:1fr}}

/* =========================
   GENERIC GRID (your .cards)
   ========================= */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  align-items:stretch; /* IMPORTANT for equal height */
}
@media (max-width:980px){
  .cards{grid-template-columns:1fr}
}

/* =========================
   PACKAGES PAGE (YOUR PHP)
   ✅ image has its own frame box
   ✅ text blocks become separate boxed panels
   ✅ ALL cards become SAME HEIGHT + buttons aligned
   ✅ NO PHP changes needed
   ========================= */

/* Each package card becomes a column stack (not one giant card) */
.cards .card{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  overflow:visible;

  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;              /* SAME HEIGHT */
  min-height: 100%;
}

/* ---------- IMAGE FRAME BOX ----------
   Targets your inline wrapper div around <img> */
.cards .card > div[style*="margin:-16px"]{
  margin:0 !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.04) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.25) !important;
  overflow:hidden !important;
  transition: transform .35s var(--ease), border-color .35s var(--ease), filter .35s var(--ease);
}

.cards .card img{
  width:100% !important;
  height:450px !important;
  display:block !important;

  object-fit:contain !important;
  object-position:center !important;

  background: linear-gradient(
    135deg,
    rgba(106,27,154,.35),
    rgba(236,64,122,.25)
  );

  transform: translateZ(0);
}


/* Hover image frame */
.cards .card:hover > div[style*="margin:-16px"]{
  transform: scale(1.01);
  border-color: rgba(242,201,76,.22) !important;
  filter: brightness(1.02);
}

/* ---------- TEXT BOXES ----------
   Box the title row, description, and actions as separate panels */
.cards .card > div[style*="justify-content:space-between"],
.cards .card > p.muted,
.cards .card > div[style*="display:flex"][style*="gap:10px"]{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045));
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  padding:12px 14px;
}

/* Make the top info row clean and consistent */
.cards .card > div[style*="justify-content:space-between"]{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}

/* Consistent description block and make it "grow" to equalize heights */
.cards .card > p.muted{
  margin:0 !important;
  color: rgba(255,255,255,.86) !important;
  line-height:1.55 !important;
  flex:1 1 auto;          /* ✅ KEY: equal height cards */
}

/* Actions row stays at bottom */
.cards .card > div[style*="display:flex"][style*="gap:10px"]{
  display:flex !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  margin-top:auto;        /* ✅ KEY: buttons align */
}

/* Hover lift on text boxes */
.cards .card:hover > div[style*="justify-content:space-between"],
.cards .card:hover > p.muted,
.cards .card:hover > div[style*="display:flex"][style*="gap:10px"]{
  border-color: rgba(236,64,122,.22);
  transform: translateY(-1px);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}

/* Make price stand out */
.cards .card div[style*="font-weight:900"]{
  font-weight:950 !important;
}

/* Optional: keep titles aligned even with different title lengths */
.cards .card h3{
  min-height: 46px;
}

/* =========================
   GALLERY (separated image + caption)
   ========================= */
.mediaGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
@media (max-width:1000px){.mediaGrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.mediaGrid{grid-template-columns:1fr}}

.mediaCard{
  background:transparent;
  border:none;
  box-shadow:none;
  overflow:visible;
  border-radius:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mediaCard img,
.mediaCard video{
  width:100%;
  height:600px;
  object-fit:cover;
  display:block;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  transform: translateZ(0);
  transition: transform .35s var(--ease), border-color .35s var(--ease), filter .35s var(--ease);
}
.mediaCard:hover img,
.mediaCard:hover video{
  transform: scale(1.02);
  border-color: rgba(242,201,76,.22);
  filter: brightness(1.02);
}

.mediaCard p{
  margin:0;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045));
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  font-size:14px;
  color: rgba(255,255,255,.86);
  line-height:1.55;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.mediaCard:hover p{
  transform: translateY(-1px);
  border-color: rgba(236,64,122,.22);
}

/* =========================
   SOCIAL FLOAT
   ========================= */
.social-float{
  position:fixed;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:1200;
}
.soc{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.22);
  font-size:13px;
  font-weight:950;
  transition: transform .18s var(--ease), background .18s var(--ease), filter .18s var(--ease);
  backdrop-filter: blur(10px);
}
.soc:hover{
  background:rgba(255,255,255,.10);
  transform:translateX(-3px);
  filter:brightness(1.06);
}
@media (max-width:520px){.social-float{display:none}}

/* =========================
   FOOTER
   ========================= */
.footer{
  margin-top:30px;
  border-top:1px solid var(--line);
  background:rgba(10,4,18,.55);
}
.footerInner{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:16px;
  padding:22px 0;
}
.footerBox{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:16px;
  padding:14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.footerBox:hover{
  transform: translateY(-2px);
  border-color: rgba(242,201,76,.18);
}
.footerTitle{font-weight:950;margin-bottom:8px}
.footerText{color:rgba(255,255,255,.86);font-weight:750;line-height:1.6}
.footerLink{color:#fff;text-decoration:none}
.footerLink:hover{text-decoration:underline}
.footerBottom{
  grid-column:1/-1;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.10);
  color:var(--muted);
  font-size:13px;
}
@media (max-width:900px){
  .footerInner{grid-template-columns:1fr}
  .logo{width:160px;height:50px}
}

/* =========================
   SMALL HELPERS
   ========================= */
.hr{
  height:1px;
  background:rgba(255,255,255,.10);
  border:0;
  margin:16px 0;
}

/* =========================
   BOOKING FORM: dropdown colors
   ========================= */

/* The closed dropdown (what you see before opening) */
select{
  background: rgba(0,0,0,.28);      /* ✅ change this */
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
}

/* The opened list items (browser-dependent) */
select option{
  background: #140a22;             /* ✅ change this */
  color: #fff;
}

/* If you use optgroup headers */
select optgroup{
  background: #140a22;             /* ✅ change this */
  color: #fff;
}

/* =========================
   SOCIAL FLOAT — MOBILE ALWAYS VISIBLE
   ========================= */
@media (max-width: 520px){
  .social-float{
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 12px;
    top: auto;
    transform: none;

    display: flex;
    flex-direction: row;      /* row bar */
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;

    padding: 10px;
    border-radius: 18px;
    background: rgba(10,4,18,.78);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(12px);
    z-index: 2000;
  }

  .soc{
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
  }

  /* so it doesn't cover footer/content */
  body{
    padding-bottom: 90px;
  }
}