:root{
  --gold:#C5A059;
  --dark:#0A0A0A;
  --white:#fff;
  --light-gold:#fffaf0;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --bshadow:0 18px 55px rgba(0,0,0,.25);
}

*{margin:0;padding:0;box-sizing:border-box;font-family:'Plus Jakarta Sans',sans-serif}
html{scroll-behavior:smooth}
body{
  background:var(--white);
  color:var(--dark);
  overflow-x:hidden;
  width:100%;
  padding-bottom:80px;
}

/* ✅ Add top spacing because header is fixed */
body{ padding-top:120px; }
@media(min-width:768px){ body{ padding-top:95px; } }

/* =========================
   HEADER (RESPONSIVE)
   ========================= */
header{
  position:fixed; top:0; left:0; width:100%;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  z-index:1000;
  padding:10px 5%;
  border-bottom:1px solid #eee;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.logo-box{
  display:flex;align-items:center;gap:8px;
  text-decoration:none;color:inherit;
}
.logo-box img{height:35px; flex:0 0 auto}
.logo-box h1{
  font-family:'Playfair Display',serif;
  font-size:.95rem;
  font-weight:700;
  text-transform:uppercase;
  line-height:1.1;
}
.logo-box span{color:var(--gold)}

nav{ width:100%; margin-top:6px; overflow:visible; }
.nav-pills{
  display:flex;
  gap:10px;
  list-style:none;
  padding-bottom:5px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-start;
}

/* pills */
.nav-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid #ddd;
  background:#fff;
  color:#111;
  text-decoration:none;
  font-weight:900;
  text-transform:uppercase;
  font-size:.65rem;
  transition:.2s;
  white-space:nowrap;
}
.nav-pill i{color:var(--gold)}
.nav-pill:hover{border-color:rgba(197,160,89,.8); transform:translateY(-1px)}
.nav-pill:active{transform:translateY(0)}
.nav-pill-btn{cursor:pointer;outline:none}

@media(min-width:768px){
  header{flex-wrap:nowrap;padding:15px 5%}
  nav{width:auto;margin-top:0}
  .logo-box h1{font-size:1.1rem}
  .logo-box img{height:40px}
  .nav-pill{font-size:.70rem}
}

/* ✅ Extra mobile tightening */
@media(max-width:480px){
  header{padding:10px 4%}
  .logo-box h1{font-size:.85rem}
  .logo-box img{height:32px}
  .nav-pills{gap:8px; justify-content:center}
  .nav-pill{padding:8px 12px; font-size:.60rem}
}

/* =========================
   HERO (MOBILE + DESKTOP)
   ========================= */
#home{
  position:relative;
  overflow:hidden;
  background:#000;
  min-height: clamp(260px, 55vh, 620px);
}
@media(min-width:768px){ #home{ min-height: 100vh; } }

#home::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:#000 url('/static/hero.png') center/cover no-repeat;
  filter:grayscale(100%);
  opacity:.30;
  transform:scale(1);
  transform-origin:center;
  animation: heroKenBurns 18s ease-in-out infinite alternate;
  transition: transform 1.1s ease, filter .6s ease, opacity .6s ease;
}

/* ✅ MOBILE: show FULL hero image (like your 3rd screenshot) */
@media(max-width:767px){
  #home{
    min-height:0;
    height:auto;
    aspect-ratio: 16 / 9;       /* keeps hero nicely sized */
    background:#000;
  }
  #home::before{
    background:#000 url('/static/hero.png') center/contain no-repeat;
    filter:none;
    opacity:1;
    animation:none;
    transform:scale(1);
  }
}

@media (hover:hover) and (pointer:fine){
  #home:hover::before{
    animation-play-state: paused;
    transform:scale(1.10);
    filter:grayscale(0%);
    opacity:1;
  }
}

#home.tap-zoom::before{
  animation-play-state: paused;
  transform:scale(1.06);
  filter:grayscale(0%);
  opacity:1;
}

@keyframes heroKenBurns{
  0%   { transform: scale(1); }
  100% { transform: scale(1.12); }
}

/* =========================
   SECTIONS
   ========================= */
section{padding:60px 5%;max-width:1400px;margin:0 auto;width:100%}

.title{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.5rem,5vw,2.5rem);
  margin-bottom:30px;
  text-align:center;
  position:relative;
}
.title::after{
  content:'';
  width:50px;height:3px;background:var(--gold);
  position:absolute;bottom:-8px;left:50%;
  transform:translateX(-50%);
}

.about-content{max-width:800px;margin:0 auto;text-align:center}
.about-text p{font-size:1rem;line-height:1.6;color:#444;margin-bottom:20px}

/* ✅ About icons */
.about-social{
  margin-top:16px;
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.about-social-btn{
  width:54px;height:54px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:1px solid #e9e9e9;
  background:#fff;
  box-shadow: var(--shadow);
  transition:.2s;
}
.about-social-btn i{font-size:1.55rem;color:var(--gold)}
.about-social-btn:hover{transform:translateY(-2px);border-color:rgba(197,160,89,.8)}
.about-social-btn:active{transform:translateY(0)}
.about-social-btn.yt i{color:#c4302b}
.about-social-btn.ig i{color:#c13584}
.about-social-btn.wa i{color:#25D366}

/* booking cards */
.selection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}

/* ✅ upgraded card feel */
.option-card{
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
  border: 1.5px solid rgba(197,160,89,.55);
  padding: 18px 12px;
  border-radius: 18px;
  text-align:center;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: .25s ease;
}
.option-card:hover{
  transform: translateY(-2px);
  border-color: rgba(197,160,89,.85);
  box-shadow: 0 16px 45px rgba(0,0,0,.12);
}
.option-card h3{
  font-weight: 1000;
  letter-spacing: .2px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.option-card h3 i{ color: var(--gold); }

.sub-container{display:flex;flex-direction:column;gap:8px;margin-top:12px}

.sub-btn{
  background:#fff;border:1px solid #ddd;padding:12px;border-radius:12px;font-weight:800;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:8px;transition:.25s;font-size:.85rem
}
.sub-btn.row{flex-direction:row;justify-content:center}
.sub-btn i{font-size:1.2rem;color:var(--gold)}
.sub-btn:hover{border-color:rgba(197,160,89,.55); transform: translateY(-1px);}
.sub-btn:active{transform: translateY(0);}
.sub-btn.selected{background:var(--gold);color:#fff;border-color:var(--gold)}
.sub-btn.selected i{color:#fff}

#other-input-box{display:none;margin-top:20px;width:100%}
#other-details{width:100%;padding:15px;border-radius:15px;border:2px solid var(--gold);outline:none;font-size:1rem}

/* Occasion Tabs */
.occasion-tabs{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin: 0 auto 18px;
}
.occ-tab{
  border:1px solid #ddd;
  background:#fff;
  padding:10px 14px;
  border-radius:999px;
  font-weight:1000;
  cursor:pointer;
  transition:.2s;
  box-shadow: var(--shadow);
  text-transform:uppercase;
  font-size:.72rem;
}
.occ-tab.active{
  border-color: rgba(197,160,89,.9);
  background: rgba(197,160,89,.12);
}

/* calendar */
.calendar-card{background:#fff;padding:15px;border-radius:20px;box-shadow:var(--shadow);width:100%;max-width:420px;margin:0 auto}
.cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;font-weight:800}
.cal-nav{border:none;background:none;cursor:pointer;font-size:16px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center}
.day-label{font-weight:900;color:var(--gold);font-size:.8rem;margin-bottom:10px}

.cal-date{
  padding:10px 5px;cursor:pointer;border-radius:50%;
  font-weight:800;font-size:.9rem;user-select:none;
  border:1px solid transparent;
}
.cal-date:hover{border-color:#eee}

/* booked (ADMIN ONLY - users won't get this class from JS) */
.cal-date.booked{
  background:#ffd7d7 !important;
  color:#7a0b0b !important;
  border-color:#ffbcbc !important;
}

/* ✅ user selected date (no red booked marks shown) */
.cal-date.selected-user{
  background: rgba(197,160,89,.18);
  border: 2px solid rgba(197,160,89,.85);
  color:#111;
  font-weight: 900;
}

/* admin selected */
.cal-date.selected-admin{
  outline:3px solid rgba(197,160,89,.55);
  border-color:rgba(197,160,89,.35) !important;
}

.step-box{display:none}
.step-box.active{display:block;animation:fadeInUp .6s ease}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.btn{padding:12px 25px;border-radius:50px;font-weight:900;cursor:pointer;border:none;text-transform:uppercase;transition:.3s;font-size:.8rem}
.btn-dark{background:var(--dark);color:#fff}
.btn-light{background:#eee}

.whatsapp{background:#25D366 !important;width:100%;max-width:500px}
.nav-row{text-align:center;margin-top:30px;display:flex;justify-content:center;gap:10px}

.summary-box{background:#f9f9f9;padding:20px;border-radius:20px;max-width:500px;margin:0 auto;border:1px solid #eee}

#sheet-box{display:none;margin-top:10px;gap:10px;align-items:center;justify-content:center}
#sheet-box input{width:70px;padding:8px;border:1px solid var(--gold);border-radius:5px;outline:none}

/* gallery */
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
@media(min-width:768px){.work-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px}}

.gallery-item{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:14px;
  cursor:zoom-in;
  background:#eee;
  transition:transform .45s ease, filter .45s ease, box-shadow .45s ease;
  will-change:transform;
}
@media(min-width:768px){.gallery-item{height:320px}}
.gallery-item:hover{
  transform:scale(1.06);
  filter:saturate(1.05) contrast(1.05);
  box-shadow:0 18px 45px rgba(0,0,0,.22);
}

#lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.95);z-index:2000;justify-content:center;align-items:center}
#lightbox img{max-width:95%;max-height:70%;border:2px solid var(--gold);border-radius:5px}
.lb-close{position:absolute;top:20px;right:25px;color:#fff;font-size:35px;cursor:pointer}
.lb-btn{position:absolute;top:50%;background:rgba(0,0,0,.5);border:none;color:#fff;font-size:24px;cursor:pointer;padding:15px;border-radius:50%}
.lb-left{left:10px}.lb-right{right:10px}

/* footer */
footer{padding:40px 5% 30px;background:#000;color:#fff;margin-top:50px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:30px}
@media(min-width:768px){.footer-grid{grid-template-columns:1fr 1fr}}

.office-info h2{font-size:1.3rem;margin-bottom:14px}
.office-info h2 span{color:var(--gold)}

.info-list{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.info-row{display:flex;gap:12px;align-items:flex-start}
.info-row i{margin-top:4px;font-size:16px}
.info-title{font-weight:900;color:#fff;font-size:.9rem}
.info-text{color:#b7b7b7;font-weight:700;font-size:.88rem;line-height:1.35}
.info-link{color:#fff;text-decoration:none;border-bottom:1px dashed rgba(197,160,89,.65)}
.info-link:hover{color:var(--gold)}
.pin{color:var(--gold)}

.social-icons{display:flex;gap:18px;margin-top:18px}
.social-icons a{font-size:1.7rem;color:var(--gold);transition:.3s}
.social-icons a:hover{color:#fff;transform:scale(1.06)}

.map-box{height:280px;border-radius:20px;overflow:hidden;border:1px solid #333;background:#111}
.map-box iframe{width:100%;height:100%;border:none}

.map-direct{margin-top:16px}
.map-link{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  padding:10px 14px;border-radius:999px;
  color:#fff;text-decoration:none;font-weight:900;
}
.map-link i{color:var(--gold)}
.map-link:hover{border-color:rgba(197,160,89,.7)}

/* PV watermark */
.footer-copy{
  margin-top: 18px;
  padding-top: 10px;
  display: flex;
  justify-content: center;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-copy-inner.pv-watermark{
  width: auto;
  max-width: 92%;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  justify-content: center;
}
.footer-copy-inner.pv-watermark .pv-text{
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  text-align: center;
}
.footer-copy-inner.pv-watermark .pv-title{
  font-weight: 900;
  font-size: .78rem;
  color: rgba(255,255,255,.70);
  letter-spacing: .2px;
}
.footer-copy-inner.pv-watermark .pv-sub{
  margin-top: 3px;
  font-weight: 800;
  font-size: .68rem;
  color: rgba(255,255,255,.45);
}
@media(max-width:480px){
  .footer-copy-inner.pv-watermark .pv-text{ padding: 6px 12px; }
  .footer-copy-inner.pv-watermark .pv-title{ font-size: .74rem; }
  .footer-copy-inner.pv-watermark .pv-sub{ font-size: .64rem; }
}

/* ✅ FIXED TOTAL BAR (no breaking text) */
#total-bar{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:#000;
  color:#fff;
  padding:14px 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  z-index:1001;
  border-top:1px solid var(--gold);
  white-space:nowrap;
}

#total-bar span{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#totalDisplay{
  color:var(--gold);
  font-weight:1000;
  flex:0 0 auto;
  white-space:nowrap;
}

@media(max-width:480px){
  #total-bar{ padding:12px 4%; }
  #total-bar span{ font-size:.88rem; }
}

/* admin tools */
.admin-tools{
  display:none;
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #eee;
  background:#fafafa;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.admin-tools-left{display:flex;flex-direction:column;gap:4px}
.admin-badge{display:inline-flex;align-items:center;gap:8px;font-weight:900;color:#111;font-size:.8rem}
.admin-badge i{color:var(--gold)}
.admin-selected{color:#555;font-weight:900;font-size:.85rem}
.admin-mini-note{color:#777;font-weight:800;font-size:.78rem}
.admin-tools-right{display:flex;gap:10px}

.icon-btn{
  width:42px;height:42px;border-radius:12px;
  border:1px solid #ddd;background:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:.2s;
}
.icon-btn:disabled{opacity:.45;cursor:not-allowed}
.icon-btn.save i{color:#15803d}
.icon-btn.remove i{color:#b91c1c}
.icon-btn.cancel i{color:#0f172a}
.icon-btn:hover{border-color:rgba(197,160,89,.8);transform:translateY(-1px)}

.booked-hint{margin-top:10px;font-size:.85rem;font-weight:900;color:#7a0b0b;min-height:18px}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;z-index:3000;align-items:center;justify-content:center;padding:18px}
.modal-card{width:100%;max-width:420px;background:#fff;border-radius:18px;box-shadow:var(--bshadow);overflow:hidden}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #eee}
.modal-head h3{font-family:'Playfair Display',serif;font-size:1.05rem;display:flex;align-items:center;gap:10px}
.modal-head i{color:var(--gold)}
.modal-x{border:none;background:none;font-size:26px;cursor:pointer;color:#333}
.modal-body{padding:16px}
.modal-body label{display:block;font-weight:900;margin:10px 0 6px;color:#111}
.modal-body input{width:100%;padding:12px 12px;border-radius:12px;border:1px solid #ddd;outline:none;font-weight:900}
.modal-body input:focus{border-color:rgba(197,160,89,.7)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.modal-note{margin-top:10px;font-size:.85rem;font-weight:900;color:#b91c1c;min-height:18px}

/* =========================
   ✅ STEP2 WOW LOOK + WATERMARK
   ========================= */

/* Reduce too much white space feeling */
#step2.step2-wrap{
  padding-top: 35px !important;
  padding-bottom: 45px !important;
  position: relative;
  overflow: hidden;
}

/* Big wedding header card */
.wedding-head{
  margin: 0 auto 18px;
  max-width: 980px;
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(197,160,89,.35);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 60px rgba(0,0,0,.06);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.wedding-head-title{
  font-weight: 1000;
  letter-spacing: .22em;
  font-size: .85rem;
  color: #111;
  text-transform: uppercase;
}
.wedding-head-sub{
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--gold);
}

/* Watermark behind services area */
#step2.step2-wrap::before{
  content: "MANA PHOTOGRAPHY";
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%,-50%) rotate(-6deg);
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  color: rgba(197,160,89,.08); /* super light watermark */
  letter-spacing: .08em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
#step2.step2-wrap *{
  position: relative;
  z-index: 1;
}

/* Make wedding cards look wider and premium */
.wide-card{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* Album note */
.album-note{
  margin-top: 10px;
  font-weight: 900;
  font-size: .85rem;
  color: rgba(10,10,10,.70);
}
/* ✅ Step2: make services grid wide like screenshot */
#servicesGrid.selection-grid{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ✅ Slightly reduce too much empty spacing feeling */
#step2.step2-wrap{
  padding-top: 20px !important;
  padding-bottom: 35px !important;
}

/* ✅ User name/phone form in Step4 */
.user-form{
  max-width: 520px;
  margin: 0 auto 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media(max-width:640px){
  .user-form{ grid-template-columns: 1fr; }
}
.user-field label{
  display:block;
  font-weight: 900;
  color:#111;
  margin: 4px 0 6px;
}
.user-field input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid #ddd;
  outline:none;
  font-weight: 900;
  box-shadow: var(--shadow);
}
.user-field input:focus{
  border-color: rgba(197,160,89,.75);
}

/* ✅ Thank you box */
.thankyou-box{
  max-width: 520px;
  margin: 18px auto 0;
  padding: 20px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
  border: 1.5px solid rgba(197,160,89,.45);
  box-shadow: var(--shadow);
  text-align: center;
}
.thank-title{
  font-family:'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: #111;
}
.thank-sub{
  margin-top: 10px;
  font-weight: 900;
  font-size: 1.05rem;
  color: rgba(10,10,10,.85);
}
.thank-note{
  margin-top: 10px;
  font-weight: 800;
  color: rgba(10,10,10,.65);
  font-size: .95rem;
}
/* ✅ STEP4: use full width, no wasted left/right */
#step4.booking-step{
  max-width: 1200px;
  margin: 0 auto;
}

/* ✅ Bigger summary card */
#summaryBox.summary-box{
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}

/* ✅ Inputs spacing/width match summary */
.user-form{
  max-width: 760px;
  margin: 0 auto 14px;
}

/* ✅ WATERMARK on ALL booking steps */
.booking-step{
  position: relative;
  overflow: hidden;
}
.booking-step::before{
  content: "MANA PHOTOGRAPHY";
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%,-50%) rotate(-6deg);
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 7vw, 5rem);
  color: rgba(197,160,89,.08);
  letter-spacing: .08em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
/* make content above watermark */
.booking-step *{
  position: relative;
  z-index: 1;
}

/* ✅ admin panel (footer) */
.admin-panel{
  margin-top: 22px;
  padding: 16px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}
.admin-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.admin-panel-title{
  font-weight: 1000;
  font-size: 1.05rem;
  color:#fff;
  display:flex;
  align-items:center;
  gap:10px;
}
.admin-panel-title i{ color: var(--gold); }
.admin-panel-logout{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  font-weight:1000;
  cursor:pointer;
}
.admin-panel-logout:hover{
  border-color: rgba(197,160,89,.7);
}
.admin-mini-help{
  color: rgba(255,255,255,.85);
  font-weight: 800;
  line-height: 1.4;
}