/* Bali Belly Recovery — shared visual language, matched to the homepage.
   Keep this file as the single design layer for every public page. */
:root{
  --bbr-forest:#133E3D;
  --bbr-forest-deep:#0D302F;
  --bbr-cream:#F4EFE2;
  --bbr-page:#FAF8F3;
  --bbr-ink:#111418;
  --bbr-body:#4A545E;
  --bbr-muted:#68736C;
  --bbr-sand:#EAE4D6;
  --bbr-line:#E6E1D5;
  --bbr-white:#FFFFFF;
  --bbr-accent:#A97835;
  --bbr-body-font:'DM Sans',system-ui,sans-serif;
  --bbr-display-font:'Playfair Display',Georgia,serif;
}
html{scroll-behavior:smooth;background:var(--bbr-page)}
body{
  margin:0;
  background:var(--bbr-page)!important;
  color:var(--bbr-ink)!important;
  font-family:var(--bbr-body-font)!important;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,
.bbr-brand,.brand-name{
  font-family:var(--bbr-display-font),Georgia,serif!important;
  color:var(--bbr-forest);
  letter-spacing:-.018em;
}
h1{font-size:clamp(2.5rem,4.5vw,3.5rem)!important;line-height:1.08!important;font-weight:600!important}
h2{font-size:clamp(2rem,3.2vw,2.55rem)!important;line-height:1.14!important;font-weight:600!important}
h3{font-size:clamp(1.35rem,2.3vw,1.75rem)!important;line-height:1.2!important;font-weight:600!important}
h4{font-size:clamp(1.25rem,2vw,1.65rem)!important;line-height:1.2!important;font-weight:600!important}
p,li,label,input,select,textarea,button,a,small,strong,figcaption{
  font-family:var(--bbr-body-font),system-ui,sans-serif;
}
p{color:var(--bbr-body)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .18s ease,background-color .18s ease,border-color .18s ease}
img{max-width:100%;height:auto}
button,.button,.btn,[class*="cta"]{transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
button:hover,.button:hover,.btn:hover{transform:translateY(-1px)}
:focus-visible{outline:3px solid rgba(169,120,53,.45);outline-offset:3px}

/* =====================================================================
   SHARED TOP BAR — promo banner + header. Same markup and same layout on
   every page (public pages, blog, 404):
     <div class="bbr-promo-banner"> + <header class="bbr-site-header">
       brand · <nav class="bbr-main-nav"> · booking button
   Desktop: brand left, nav + booking button grouped right.
   Mobile : brand + booking button on row 1, scrollable nav on row 2.
   ===================================================================== */
.bbr-promo-banner,header,header *,footer,footer *{box-sizing:border-box}
body>header,body>div>header,header.bbr-site-header{
  position:relative;
  box-sizing:border-box;
  width:100%!important;
  max-width:1200px!important;
  margin:0 auto!important;
  padding:20px 32px!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:12px 20px!important;
  background:transparent!important;
}
header.bbr-site-header>.bbr-brand{margin:0 auto 0 0!important}
header>a:first-child{
  color:var(--bbr-forest)!important;
  text-decoration:none!important;
  display:flex!important;
  flex-direction:column!important;
  line-height:1.02!important;
  font-family:var(--bbr-display-font),Georgia,serif!important;
  font-size:26px!important;
  font-weight:600!important;
}
header>a:first-child span{
  display:block;
  font-family:var(--bbr-display-font),Georgia,serif!important;
  font-size:inherit!important;
  line-height:inherit!important;
  color:var(--bbr-forest)!important;
}
header>a:first-child span+span{font-style:italic!important;font-weight:500!important}
header nav{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:10px 20px!important;
  margin:0!important;
  padding:0!important;
  color:#3D4650!important;
  font-size:14px!important;
  font-weight:500!important;
}
header nav a:not(.btn){
  color:#3D4650!important;
  text-decoration:none!important;
  padding:7px 0!important;
  white-space:nowrap;
}
header nav a:not(.btn):hover,
header nav a.nav.on,
header nav a[aria-current="page"]{
  color:var(--bbr-forest)!important;
  text-decoration:underline!important;
  text-decoration-color:var(--bbr-accent)!important;
  text-underline-offset:6px!important;
}
header .btn,header>a.btn,header nav a.btn,.bbr-header-booking{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:44px!important;
  padding:12px 22px!important;
  border:1px solid var(--bbr-forest)!important;
  border-radius:999px!important;
  background:var(--bbr-forest)!important;
  color:#fff!important;
  text-decoration:none!important;
  font-size:14px!important;
  font-weight:600!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}
header .btn:hover,header>a.btn:hover,header nav a.btn:hover{
  background:var(--bbr-forest-deep)!important;
  box-shadow:0 7px 18px rgba(19,62,61,.14);
}

/* Common page rhythm and content typography. */
main{color:var(--bbr-ink)}
main section{scroll-margin-top:24px}
main section>p,main p{line-height:1.65}
main section[style*="max-width"]{box-sizing:border-box}
main nav[aria-label="Breadcrumb"]{font-size:13px!important;color:var(--bbr-muted)!important}
main nav[aria-label="Breadcrumb"] a{color:var(--bbr-forest)!important}
main h1 em,main h2 em,main h3 em{color:var(--bbr-forest)}
hr{border:0;border-top:1px solid var(--bbr-line)}

/* Shared cards, panels, forms and action controls. */
article,.card,.bbr-card{
  border-color:var(--bbr-line);
}
input,select,textarea{
  max-width:100%;
  border:1px solid #D5DCD7;
  border-radius:10px;
  background:#fff;
  color:var(--bbr-ink);
  font-size:15px;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--bbr-forest);
  box-shadow:0 0 0 3px rgba(19,62,61,.10);
  outline:0;
}
button[type="submit"],form button[type="submit"]{
  border-radius:999px;
  font-weight:700;
}
.bbr-promo-banner{
  display:block;
  width:100%;
  min-height:0;
  box-sizing:border-box;
  background:var(--bbr-forest)!important;
  color:var(--bbr-cream)!important;
  text-align:center!important;
  font-family:var(--bbr-body-font),sans-serif!important;
  font-size:clamp(11px,1vw,12.5px)!important;
  font-weight:600!important;
  letter-spacing:.02em!important;
  line-height:1.4!important;
  padding:8px 16px!important;
  white-space:normal!important;
  overflow-wrap:anywhere;
}
.bbr-promo-note{
  border:1px solid #DCE7E0;
  background:#EAF0EC!important;
  color:#334B43!important;
  border-radius:14px!important;
}
.bbr-package{
  background:var(--bbr-white)!important;
  border:1px solid var(--bbr-line)!important;
  border-radius:20px!important;
  box-shadow:0 8px 28px rgba(19,62,61,.045)!important;
}
.bbr-package h4,.bbr-packages-head h2,.bbr-finder-head h3{color:var(--bbr-forest)!important}
.bbr-category,.bbr-finder,.bbr-panel{border-color:var(--bbr-line)!important}
.bbr-book,.bbr-finder-step-title>span{background:var(--bbr-forest)!important}
.bbr-promo{background:#F5EDE0!important;color:#986B2E!important}

/* Footer follows the restrained homepage palette. */
footer{
  background:#fff!important;
  border-top:1px solid var(--bbr-line)!important;
  color:#55606A!important;
}
footer a{color:var(--bbr-forest)}
footer a:hover{color:var(--bbr-accent)}
footer p,footer li,footer span{color:inherit}

/* Mobile layout: consistent spacing and prevent navigation overflow. */
@media(max-width:760px){
  body>header,body>div>header,header.bbr-site-header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"brand booking" "nav nav"!important;
    align-items:center!important;
    column-gap:10px!important;
    row-gap:12px!important;
    padding:14px 20px 13px!important;
  }
  header.bbr-site-header>.bbr-brand{grid-area:brand!important;min-width:0!important;margin:0!important}
  header.bbr-site-header>.bbr-header-booking{
    grid-area:booking!important;
    justify-self:end!important;
    margin:0!important;
    min-height:42px!important;
    padding:10px 15px!important;
    font-size:13px!important;
  }
  header.bbr-site-header>.bbr-main-nav{
    grid-area:nav!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    width:100%!important;
    min-width:0!important;
    gap:clamp(12px,4vw,20px)!important;
    font-size:13px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    scrollbar-width:none!important;
  }
  header.bbr-site-header>.bbr-main-nav::-webkit-scrollbar{display:none!important}
  header.bbr-site-header>.bbr-main-nav>a{flex:0 0 auto!important;padding:3px 0!important}
  h1{font-size:clamp(2.15rem,8vw,3rem)!important}
  h2{font-size:clamp(1.8rem,6.5vw,2.25rem)!important}
  main section[style*="padding:"]{padding-left:20px!important;padding-right:20px!important}
  .bbr-promo-banner{font-size:11.5px!important;line-height:1.35!important;padding:8px 12px!important;white-space:normal!important}
}
@media(max-width:380px){
  body>header,body>div>header,header.bbr-site-header{padding-left:14px!important;padding-right:14px!important;column-gap:7px!important}
  header.bbr-site-header>.bbr-header-booking{padding:9px 11px!important}
}
@media(max-width:520px){
  .bbr-promo-banner{font-size:11px!important;padding:8px 10px!important;letter-spacing:.01em!important}
  header>a:first-child{font-size:24px!important}
  .bbr-package{padding:19px!important}
  .bbr-package-top{flex-direction:column!important}
  .bbr-price{text-align:left!important;min-width:0!important}
  .bbr-new{white-space:normal!important}
  .bbr-package-columns{grid-template-columns:1fr!important}
  .bbr-finder{padding:18px!important}
  .bbr-finder-options{grid-template-columns:1fr!important}
}

/* Admin-managed package imagery */
.bbr-admin-package-image{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:14px;margin:0 0 16px}

/* =====================================================================
   TYPOGRAPHY SCALE — one scale for every public page (desktop + mobile)
   Headings : h1 56/34 · h2 41/29 · h3 & h4 24/21 (card titles)
   Text     : lead 18 · body 16 · secondary 15 · small 14 · caption 13 · eyebrow 12
   Fonts    : Playfair Display (headings) · DM Sans (everything else)
   ===================================================================== */
:root{
  --bbr-fs-lead:18px;
  --bbr-fs-body:16px;
  --bbr-fs-secondary:15px;
  --bbr-fs-small:14px;
  --bbr-fs-caption:13px;
  --bbr-fs-eyebrow:12px;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
:root body main h3,
:root body main h4{
  font-size:clamp(1.3rem,2vw,1.5rem)!important;
  line-height:1.22!important;
  font-weight:600!important;
}
:root body h1+p{font-size:var(--bbr-fs-lead)!important;line-height:1.6!important}
button,input,select,textarea{font-family:var(--bbr-body-font),system-ui,sans-serif}
:where(button){font-size:var(--bbr-fs-small)}
:root body input,:root body select,:root body textarea{font-size:var(--bbr-fs-body)!important}
.bbr-finder-choice{font-family:var(--bbr-body-font),system-ui,sans-serif}
@media(max-width:760px){
  :root body main h3,
  :root body main h4{font-size:clamp(1.2rem,5.4vw,1.3rem)!important}
  :root body h1+p{font-size:var(--bbr-fs-lead)!important}
}

/* Mobile cards: with the shared text scale, keep card grids to one readable column. */
@media(max-width:640px){
  :root body .bbr-why-choose>div>div{grid-template-columns:1fr!important;gap:14px!important}
  :root body .bbr-why-choose>div>div>div{padding:20px!important;border-radius:16px!important;gap:8px!important}
}

/* Italic accent words inside dark call-to-action bands must stay light, not forest green. */
:root body main h1[style*="color:#fff"] em,
:root body main h2[style*="color:#fff"] em,
:root body main h3[style*="color:#fff"] em{color:inherit!important}

/* Appointment form: label text and required * on one line; entered values in regular weight. */
:root body #appt label{display:block;font-size:var(--bbr-fs-small)}
:root body #appt label>input,
:root body #appt label>select,
:root body #appt label>textarea{display:block;width:100%;box-sizing:border-box;margin-top:6px;font-weight:400}
:root body #appt label small{font-weight:400}

/* Shared footer layout (contact row + bottom bar) — identical on every page. */
footer .bbr-footer-contact{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding-top:18px;border-top:1px solid #E6EAE7;line-height:1.6}
footer .bbr-footer-contact a,footer .bbr-footer-bottom a{color:#40545A;text-decoration:underline;text-decoration-color:#AAB8B4;text-underline-offset:3px}
footer .bbr-footer-contact a:hover,footer .bbr-footer-bottom a:hover{color:#133E3D}
footer .bbr-footer-separator{color:#AAB4B0}
footer .bbr-footer-bottom{display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;gap:12px;padding-top:18px;border-top:1px solid #E6EAE7;font-size:13px;line-height:1.5;color:#68747A}
footer .bbr-footer-domain{text-align:center}
footer .bbr-footer-credit{text-align:right}
@media(max-width:640px){
  footer>div{padding:20px 18px!important;gap:12px!important}
  footer .bbr-footer-contact{gap:7px 10px;padding-top:15px}
  footer .bbr-footer-bottom{grid-template-columns:1fr;gap:7px;padding-top:15px;text-align:left}
  footer .bbr-footer-domain,footer .bbr-footer-credit{text-align:left}
}

/* "Why choose us" di HP: 2 kolom, kartu ringkas agar tidak memakan tempat. */
@media(max-width:640px){
  :root body main .bbr-why-choose>div{padding:28px 16px!important;gap:16px!important}
  :root body main .bbr-why-choose h2{font-size:26px!important;line-height:1.15!important}
  :root body main .bbr-why-choose>div>div{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  :root body main .bbr-why-choose>div>div>div{padding:14px 13px!important;border-radius:14px!important;gap:6px!important}
  :root body main .bbr-why-choose h3{font-size:15px!important;line-height:1.25!important}
  :root body main .bbr-why-choose p{font-size:13px!important;line-height:1.45!important}
}
@media(max-width:340px){
  :root body main .bbr-why-choose>div>div{grid-template-columns:1fr!important}
}

/* Footer: tautan halaman utama (membantu pengunjung dan Google menemukan halaman penting). */
footer .bbr-footer-links{display:flex;flex-wrap:wrap;gap:8px 20px;padding-top:18px;margin-top:8px;border-top:1px solid #D9E0DF}
footer .bbr-footer-links a{color:#133E3D;font-weight:600;font-size:14px;text-decoration:none}
footer .bbr-footer-links a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){footer .bbr-footer-links{gap:8px 16px}}