/* ---------- Root + Reset ---------- */
*{box-sizing:border-box}
:root{
  --bg:#0f0d10;
  --panel:#151217;
  --ink:#f7f3f5;
  --muted:#dac9cf;
  --rose:#e4b0bf;
  --rose-2:#f2cad4;
  --accent:#c26685;
  --accent-2:#b54e6d;
}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(197,110,146,.25), transparent 60%),
    radial-gradient(1000px 500px at -10% 10%, rgba(246,202,213,.18), transparent 55%),
    linear-gradient(180deg,#0e0b10,#120e13 40%, #140f15);
  background-attachment: fixed;
  line-height:1.6;
}

/* ---------- Header & Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(140%) blur(8px);
  background:rgba(16,12,16,.6);
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:40px;height:40px;border-radius:10px;
  display:grid;place-items:center;
  color:#1a0c11;font-weight:800;
  background: linear-gradient(135deg,#ffe0ea,#f7b7c9 40%,#d989a7 70%, #c96b8a);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 25px rgba(201,107,138,.25);
}
.titles h1{font-family:"Playfair Display",serif; font-size:18px; margin:0}
.titles .tag{margin:2px 0 0; color:var(--muted); font-size:12px}

.nav{display:flex; gap:14px}
.nav a{color:var(--ink);text-decoration:none;opacity:.9}
.nav a:hover{opacity:1; text-decoration:underline}
.hamburger{display:none;background:none;border:0;color:var(--ink);padding:8px}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px}

/* ---------- Hero ---------- */
.hero{padding:64px 18px 16px}
.hero-inner{max-width:1100px;margin:0 auto;text-align:center}
.hero h2{font-family:"Playfair Display",serif;font-size:34px;line-height:1.2;margin:0 0 12px}
.hero .lede{color:var(--muted);max-width:760px;margin:0 auto 20px}
.cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:10px 0 18px}
.btn{
  display:inline-block; padding:12px 18px; border-radius:999px;
  text-decoration:none; border:1px solid var(--rose-2);
  color:#1a0c11;background: linear-gradient(180deg,#ffe8f0,#f5c3d3);
  font-weight:700; box-shadow:0 10px 25px rgba(197,99,130,.24)
}
.btn:hover{filter:saturate(110%) brightness(103%)}
.btn.ghost{background:transparent;color:var(--ink);border-color:rgba(255,255,255,.22)}
.btn.small{padding:10px 14px;font-size:14px}
.btn.wide{width:100%;max-width:520px}
.ribbons{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;list-style:none;padding:0;margin:18px auto 0;max-width:900px}
.ribbons li{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.04)}
.ribbons li strong{display:block}

/* badges */
.hero-badges{display:flex;gap:8px;flex-wrap:wrap; justify-content:center; margin:18px auto 0;max-width:900px}
.hero-badges span{border:1px dashed rgba(255,255,255,.16);border-radius:999px;padding:6px 10px;color:var(--muted);font-size:12px}

/* ---------- Sections ---------- */
section{max-width:1100px;margin:26px auto;padding:0 18px}
section h3{font-family:"Playfair Display",serif; font-size:28px; margin:0 0 12px}
.muted{color:var(--muted)}
.center{text-align:center}

/* Why */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.why-grid article{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:16px}

/* FAQ */
.faq details{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:0;margin:10px 0;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq .answer{padding:0 16px 16px;color:var(--muted)}

/* Session style & Etiquette */
.bullet{padding-left:18px}
.numbered{padding-left:18px}
.numbered li{margin:6px 0}

/* About */
.about-grid{display:grid; grid-template-columns:2fr 1.2fr; gap:22px}
.bio{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:16px}
.specs{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:16px}
.spec-list{list-style:none;padding:0;margin:0}
.spec-list li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.spec-list li:last-child{border-bottom:0}
.spec-list span{color:var(--muted)}
.offer-list{padding-left:18px}
.about-ctas{display:flex;gap:8px;margin-top:12px}

/* Rates */
.table-wrap{overflow:auto;border-radius:14px;border:1px solid rgba(255,255,255,.06)}

.rate-table th,.rate-table td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06)}
.rate-table thead th{background:rgba(255,255,255,.03);text-align:left}
.pill-list{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:8px 0 18px}
.pill-list li{border:1px solid rgba(255,255,255,.08);padding:6px 10px;border-radius:999px}
.extra-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.extra-grid li{display:flex;justify-content:space-between;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:10px 12px}

/* Gallery */
.gallery .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gallery img{width:100%;height:220px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.06)}

/* Booking */
.booking form{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:16px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-weight:600}
.form-grid input,.form-grid select,.form-grid textarea{
  width:100%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--ink);
  border-radius:10px;padding:10px 12px;outline:none
}
.form-grid input::placeholder,.form-grid textarea::placeholder{color:#b8aab1}
.form-grid .full{grid-column:1 / -1}
.after{color:var(--muted);margin:10px 0 0}
.toast{position:sticky;bottom:10px;background:linear-gradient(180deg,#e8ffef,#c7f1d6);color:#0a3d1f;padding:10px 14px;border-radius:999px;border:1px solid #b8e6cb;box-shadow:0 10px 25px rgba(8,56,26,.12);max-width:430px;margin:12px auto 0;text-align:center}

/* Reviews */
.reviews .review-list{display:grid;gap:12px}
.review{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px}
.review-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-bottom:6px}
.review-top .date{color:var(--muted);font-size:12px}
.review-top .user{margin-left:auto;color:var(--muted);font-size:12px}
.stars{--s:16px;display:inline-grid;grid-auto-flow:column;gap:4px}
.stars::before{
  content: '★★★★★';
  letter-spacing:4px;
  font-size:var(--s); 
  background: linear-gradient(90deg, #ffd36e calc(var(--val)*20%), rgba(255,255,255,.18) 0);
  -webkit-background-clip:text; background-clip:text;color:transparent;
}

/* Leave review */
.leave-review form{display:grid;gap:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px;margin-top:12px}
.leave-review input,.leave-review textarea,.leave-review select{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--ink);border-radius:10px;padding:10px 12px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.contact-card{display:flex;gap:10px;align-items:center;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);border-radius:14px;padding:12px;text-decoration:none;color:var(--ink)}
.verifications{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* Footer */
.site-footer{padding:40px 18px;color:var(--muted);text-align:center}

/* Floating bubble */
.float-menu{position:fixed;right:16px;bottom:16px;z-index:30}
.fab{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;cursor:pointer;border:1px solid rgba(255,255,255,.14);
  background: radial-gradient(circle at 30% 20%, #ffe3ed, #f7b7c9 60%, #d989a7); color:#1a0c11;
  box-shadow:0 14px 30px rgba(197,99,130,.28); font-weight:800; font-size:20px
}
.fab-menu{position:absolute;right:70px;bottom:6px;display:flex;gap:8px;transform:translateX(20px);opacity:0;pointer-events:none;transition:all .25s ease}
.fab-item{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;text-decoration:none;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); color:var(--ink)}
#fab-toggle{display:none}
#fab-toggle:checked ~ .fab-menu{transform:none;opacity:1;pointer-events:all}

/* Mobile */
@media (max-width: 860px){
  .about-grid{grid-template-columns:1fr}
  .gallery .grid{grid-template-columns:1fr 1fr}
  .hero h2{font-size:28px}
  .nav{display:none;position:absolute;right:10px;top:60px;background:rgba(16,12,16,.9);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px}
  .nav a{display:block;padding:8px 10px}
  .hamburger{display:inline-block}
  .form-grid{grid-template-columns:1fr}
}





.rate-table {
  background: url('../images/rate-bg.jpg') center center / cover no-repeat;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  color: #fff;
  width: 100%;
  border-collapse: collapse;
}
.rate-table th,
.rate-table td {
  background: rgba(0, 0, 0, 0.5);
  padding: 0.75rem;
  text-align: left;
}


/* --- Overlay + Text Stroke for WHY CHOOSE TIANNA --- */
section.why {
  position: relative;
  background-image: url("../images/IMG_1265.jpeg") !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

section.why::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

section.why * {
  position: relative;
  z-index: 2;
}

section.why h3,
section.why h4,
section.why p {
  color: #ffffff !important;
  text-shadow:
      -1px -1px 1px rgba(0,0,0,0.9),
       1px -1px 1px rgba(0,0,0,0.9),
      -1px  1px 1px rgba(0,0,0,0.9),
       1px  1px 1px rgba(0,0,0,0.9);
}


.contact-grid .ico {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  vertical-align: middle;
}
.contact-grid img.ico {
  border-radius: 6px;
}


/* Prevent input zoom on iOS by setting font-size >= 16px */
input,
select,
textarea {
  font-size: 16px;
}

/* --- Enforced soft pink theme overrides --- */ 
.btn.gold, .gold, .accent-gold, .tag-gold, .badge.gold {
  background: #ffb6c1 !important;
  border-color: #ffb6c1 !important;
  color: #1f1f1f !important;
}
.btn.gold:hover, .gold:hover {
  filter: brightness(0.95);
}
a.gold, .link.gold {
  color: #ffb6c1 !important;
}
a.gold:hover, .link.gold:hover {
  opacity: .85;
}
.outline.gold, .btn-outline.gold {
  background: transparent !important;
  color: #ffb6c1 !important;
  border: 2px solid #ffb6c1 !important;
}




/* Force modal header text to black */
.payNow-modal-title {
    color: black !important;
}





/* Pink box for instruction text */


/* Clean and correct pink instruction box, without affecting other boxes */
.pink-instruction-box {
    background: #ffb6c1 !important;
    padding: 14px !important;
    border-radius: 12px !important;
    color: black !important;
    font-weight: 600;
    line-height: 1.5;
}