/* boa-path.css — the guided path to WhatsApp (28 Sep 2026). See boa-guide-path.php. */

/* ── Step trail ─────────────────────────────────────────────────────────── */
.bpath{list-style:none;margin:0 0 1.1rem;padding:0;display:flex;gap:.4rem;counter-reset:none}
.bpath__s{flex:1 1 0;min-width:0;position:relative}
.bpath__s+.bpath__s::before{content:"";position:absolute;left:-.4rem;top:50%;width:.4rem;height:1px;background:rgba(200,178,138,.35)}
.bpath__s button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:.45rem;width:100%;
  padding:.5rem .6rem;border-radius:12px;border:1px solid rgba(200,178,138,.22);background:rgba(255,255,255,.03);
  color:rgba(245,241,232,.62);font-size:.8rem;line-height:1.2;transition:border-color .35s,background .35s,color .35s}
.bpath__s button:focus-visible{outline:2px solid #c8b28a;outline-offset:2px}
.bpath__s b{flex:none;display:grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;font-size:.72rem;font-weight:700;
  border:1px solid rgba(200,178,138,.5);color:#c8b28a;transition:background .35s,color .35s,border-color .35s}
.bpath__s span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bpath__s.is-now button{border-color:rgba(200,178,138,.7);background:rgba(200,178,138,.1);color:#f5f1e8}
.bpath__s.is-done b{background:#c8b28a;color:#14110d;border-color:#c8b28a;font-size:0}
.bpath__s.is-done b::after{content:"✓";font-size:.75rem}
.bpath__s[data-s="3"].is-now button{border-color:rgba(37,211,102,.75);background:rgba(37,211,102,.1)}
.bpath__s[data-s="3"].is-now b{background:#25d366;border-color:#25d366;color:#141312}
@media (max-width:420px){.bpath__s button{flex-direction:column;gap:.25rem;text-align:center;font-size:.72rem;padding:.45rem .3rem}}

/* ── Hand-drawn arrow toward the WhatsApp button ────────────────────────── */
.bpath-hint{display:flex;align-items:flex-end;flex-direction:row;gap:.35rem;margin:.2rem 0 .35rem;min-height:0;max-height:0;overflow:hidden;
  opacity:0;transition:max-height .5s ease,opacity .5s ease,margin .5s ease}
.bpath-hint.is-in{max-height:90px;opacity:1;margin:.4rem 0 .5rem}
.boatc__cta .bpath-hint{flex:1 0 100%}
.bpath-hint__t{flex:1;align-self:center;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:1.05rem;line-height:1.3;color:#e8d7b8}
.bpath-arrow{flex:none;width:64px;height:48px;overflow:visible;margin-left:.6rem}
.bpath-arrow path{fill:none;stroke:#c8b28a;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bpath-arrow__line{stroke-dasharray:120;stroke-dashoffset:120}
.bpath-arrow__head{stroke-dasharray:40;stroke-dashoffset:40}
.bpath-hint.is-in .bpath-arrow__line{animation:bpathDraw .9s .15s ease-out forwards}
.bpath-hint.is-in .bpath-arrow__head{animation:bpathDraw .35s 1s ease-out forwards}
@keyframes bpathDraw{to{stroke-dashoffset:0}}

/* The button breathes three times, then rests — enough to be noticed, never nagging. */
.bpath-go{position:relative}
.bpath-go::after{content:"";position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:bpathRing 1.8s .9s ease-out 3}
@keyframes bpathRing{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}80%,100%{box-shadow:0 0 0 14px rgba(37,211,102,0)}}

/* ── One gentle nudge per visit ─────────────────────────────────────────── */
.bpath-nudge{position:fixed;right:16px;bottom:18px;z-index:9310;width:min(340px,calc(100vw - 24px));
  padding:1rem 1rem .9rem;border-radius:16px;background:#161514;isolation:isolate;color:#f5f1e8;
  border:1px solid rgba(37,211,102,.35);box-shadow:0 18px 44px rgba(0,0,0,.45);
  transform:translateY(16px);opacity:0;transition:transform .35s ease,opacity .35s ease}
.bpath-nudge.is-in{transform:none;opacity:1}
.bpath-nudge__p{margin:0 1.4rem .75rem 0;font-size:.88rem;line-height:1.5;color:rgba(245,241,232,.88)}
.bpath-nudge__p strong{display:block;color:#fff;font-size:.95rem;margin-bottom:.15rem}
.bpath-nudge__go{display:inline-flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;padding:.7rem 1rem;border-radius:999px;
  background:#25d366;color:#141312!important;font-weight:700;font-size:.9rem;text-decoration:none!important}
.bpath-nudge__x{position:absolute;top:.35rem;right:.5rem;background:none;border:0;color:#fff;opacity:.65;font-size:1.4rem;line-height:1;cursor:pointer;padding:.2rem}
.bpath-nudge__x:hover{opacity:1}
@media (max-width:1099px){.bpath-nudge{right:12px;left:12px;width:auto}.bpath-nudge.has-bar{bottom:78px}}
@media (min-width:1100px){.bpath-nudge{bottom:24px;right:24px}}

@media (prefers-reduced-motion:reduce){
  .bpath-hint,.bpath-nudge,.bpath__s button,.bpath__s b{transition:none}
  .bpath-arrow path{stroke-dashoffset:0!important;animation:none!important}
  .bpath-go::after{animation:none}
}
@media print{.bpath,.bpath-hint,.bpath-nudge{display:none}}

/* ── Guide tips (hover / focus) ─────────────────────────────────────────── */
.bpath-tip{position:absolute;top:0;left:0;z-index:9320;display:none;width:max-content;max-width:min(290px,calc(100vw - 24px));
  padding:.7rem .85rem .65rem;border-radius:12px;background:#161514;color:#f5f1e8;border:1px solid rgba(200,178,138,.45);
  box-shadow:0 12px 30px rgba(0,0,0,.4);font-size:.82rem;line-height:1.45;opacity:0;transform:translateY(4px);
  transition:opacity .18s ease,transform .18s ease;pointer-events:auto}
.bpath-tip.is-on{display:block}
.bpath-tip.is-in{opacity:1;transform:none}
.bpath-tip::after{content:"";position:absolute;left:var(--ax,50%);bottom:-6px;width:10px;height:10px;margin-left:-5px;background:#161514;
  border-right:1px solid rgba(200,178,138,.45);border-bottom:1px solid rgba(200,178,138,.45);transform:rotate(45deg)}
.bpath-tip.is-below::after{bottom:auto;top:-6px;transform:rotate(225deg)}
.bpath-tip__t{margin:0}
.bpath-tip__ask{display:inline-block;margin-top:.4rem;font-weight:700;font-size:.8rem;color:#25d366!important;text-decoration:none!important}
.bpath-tip__ask:hover{text-decoration:underline!important}
.bpath-tip__ask[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.bpath-tip{transition:none;transform:none}}
@media print{.bpath-tip{display:none!important}}

/* ── Town pages: hero price + WhatsApp first (both /arusha/ and /moshi/) ── */
.ar-hero__price{font-size:.95rem;color:#c8b28a;margin:.2rem 0 1.35rem;letter-spacing:.01em}
.ar-hero__price strong{color:#fff;font-weight:600}
.ar-btn--wa.ar-btn--lead{background:#25d366;border-color:#25d366;color:#141312}
.ar-btn--wa.ar-btn--lead:hover{background:#2ee273;color:#141312}
@media(max-width:600px){.ar-hero__price{font-size:.88rem}}

/* ── Spotlight: the three trips to push ─────────────────────────────────── */
.gpspot{padding:clamp(2.2rem,5vw,3.6rem) 16px;background:linear-gradient(180deg,rgba(20,19,18,.0),rgba(20,19,18,.85) 18%,rgba(20,19,18,.92));position:relative;z-index:2}
.gpspot__in{max-width:1180px;margin:0 auto}
.gpspot__kick{margin:0 0 .5rem;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:#c8b28a}
.gpspot__h{margin:0 0 .6rem;font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.08;color:#f5f1e8}
.gpspot__lead{margin:0 0 1.1rem;max-width:720px;font-size:1rem;line-height:1.6;color:rgba(245,241,232,.78)}
.gpspot__lead strong{color:#e8d7b8}
.gpspot__steps{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.8rem;color:rgba(245,241,232,.7)}
.gpspot__steps li{display:flex;align-items:center;gap:.4rem}
.gpspot__steps b{display:grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%;border:1px solid rgba(200,178,138,.55);color:#c8b28a;font-size:.7rem}
.gpspot__steps li:last-child b{background:#25d366;border-color:#25d366;color:#141312}
.gpspot__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.gpspot__card{display:flex;flex-direction:column;border-radius:18px;border:1px solid rgba(200,178,138,.25);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));transition:border-color .3s,transform .3s,box-shadow .3s}
.gpspot__card:hover{border-color:rgba(200,178,138,.6);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.gpspot__link{display:block;flex:1;padding:1.3rem 1.3rem .6rem;color:inherit!important;text-decoration:none!important}
.gpspot__icon{font-size:1.6rem;line-height:1}
.gpspot__name{margin:.55rem 0 .45rem;font-size:1.2rem;line-height:1.25;color:#fff}
.gpspot__hook{margin:0 0 .55rem;font-size:.92rem;line-height:1.5;color:rgba(245,241,232,.85)}
.gpspot__meta{margin:0 0 .8rem;font-size:.76rem;line-height:1.45;color:rgba(245,241,232,.55)}
.gpspot__price{margin:0;font-size:.9rem;color:#c8b28a}
.gpspot__price strong{font-size:1.45rem;color:#fff;font-weight:700}
.gpspot__price small{display:block;margin-top:.15rem;font-size:.72rem;color:rgba(245,241,232,.55)}
.gpspot__acts{display:flex;gap:.5rem;padding:.4rem 1.3rem 1.3rem}
.gpspot__see,.gpspot__wa{flex:1;display:inline-flex;align-items:center;justify-content:center;padding:.7rem .6rem;border-radius:999px;font-size:.84rem;font-weight:700;text-decoration:none!important;text-align:center}
.gpspot__see{border:1px solid rgba(200,178,138,.55);color:#f5f1e8!important}
.gpspot__see:hover{background:rgba(200,178,138,.12)}
.gpspot__wa{background:#25d366;color:#141312!important}
.gpspot__wa:hover{background:#2ee273}
@media (max-width:900px){
  .gpspot__grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:.6rem;margin:0 -16px;padding-left:16px;padding-right:16px;scroll-padding-inline:16px;scrollbar-width:none}
  .gpspot__grid::-webkit-scrollbar{display:none}
  .gpspot__card{scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){.gpspot__card{transition:none}.gpspot__card:hover{transform:none}}

/* ── Desktop: "scan with your phone" window (2 Oct 2026) ────────────────── */
.bpath-wa{position:fixed;inset:0;z-index:9400;display:grid;place-items:center;padding:16px;background:rgba(8,7,6,.62);
  opacity:0;transition:opacity .22s ease}
.bpath-wa.is-in{opacity:1}
.bpath-wa__box{position:relative;width:min(380px,100%);padding:1.5rem 1.4rem 1.2rem;border-radius:18px;background:#161514;color:#f5f1e8;
  border:1px solid rgba(37,211,102,.35);box-shadow:0 30px 70px rgba(0,0,0,.5);text-align:center;transform:translateY(10px);transition:transform .25s ease}
.bpath-wa.is-in .bpath-wa__box{transform:none}
.bpath-wa__x{position:absolute;top:.4rem;right:.6rem;background:none;border:0;color:#fff;opacity:.65;font-size:1.5rem;line-height:1;cursor:pointer}
.bpath-wa__x:hover{opacity:1}
.bpath-wa__h{margin:0 0 .45rem;font-size:1.25rem;line-height:1.25;color:#fff}
.bpath-wa__p{margin:0 0 1rem;font-size:.9rem;line-height:1.5;color:rgba(245,241,232,.82)}
.bpath-wa__p strong{color:#fff}
.bpath-wa__qr{display:grid;place-items:center;min-height:210px;margin:0 auto 1rem;padding:10px;width:max-content;max-width:100%;border-radius:14px;background:#fff;color:#333;font-size:.8rem}
.bpath-wa__qr svg{display:block;max-width:100%;height:auto}
.bpath-wa__app{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;padding:.75rem 1rem;border-radius:999px;
  background:#25d366;color:#141312!important;font-weight:700;font-size:.92rem;text-decoration:none!important}
.bpath-wa__app:hover{background:#2ee273}
.bpath-wa__alt,.bpath-back__alt{margin:.8rem 0 0;font-size:.8rem;color:rgba(245,241,232,.6)}
.bpath-wa__alt a,.bpath-back__alt a{color:#e8d7b8!important}
.bpath-wa__copy,.bpath-back__copy{background:none;border:0;padding:0;font:inherit;color:#e8d7b8;text-decoration:underline;cursor:pointer}

/* ── Back from WhatsApp ─────────────────────────────────────────────────── */
.bpath-back__row{display:flex;gap:.5rem}
.bpath-back__row .bpath-nudge__go{flex:1.3;width:auto}
.bpath-back__yes{flex:1;padding:.7rem .8rem;border-radius:999px;border:1px solid rgba(200,178,138,.55);background:transparent;color:#f5f1e8;font:inherit;font-weight:700;font-size:.85rem;cursor:pointer}
.bpath-back__yes:hover{background:rgba(200,178,138,.12)}
@media (prefers-reduced-motion:reduce){.bpath-wa,.bpath-wa__box{transition:none}}
/* The "did it go through?" note must sit above the quote ticket on phones. */
.bpath-back{z-index:2147483100}
.bpath-wa__qr svg{width:min(260px,70vw)}
.gpspot__tr{margin:1.2rem 0 0;font-size:.9rem;color:rgba(245,241,232,.75)}
.gpspot__tr a{color:#e8d7b8!important;text-decoration:underline}

/* Email fallback in the desktop window (22 Oct 2026) */
.bpath-wa__box{max-height:calc(100vh - 32px);overflow:auto}
.bpath-wa__mailbtn{display:block;width:100%;margin:.9rem 0 0;padding:.6rem;border:1px solid rgba(232,215,184,.4);border-radius:999px;background:none;color:#e8d7b8;font:inherit;font-size:.85rem;cursor:pointer}
.bpath-wa__mailbtn:hover{border-color:#e8d7b8;color:#fff}
.bpath-wa__mail{margin:.8rem 0 0;display:grid;gap:.6rem;text-align:left}
.bpath-wa__mail[hidden]{display:none}
.bpath-wa__mail label{display:grid;gap:.25rem;font-size:.8rem;color:rgba(245,241,232,.8)}
.bpath-wa__mail input,.bpath-wa__mail textarea{width:100%;box-sizing:border-box;padding:.55rem .7rem;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:#0f0e0d;color:#fff;font:inherit;font-size:.9rem}
.bpath-wa__send{padding:.7rem 1rem;border:0;border-radius:999px;background:#d4a574;color:#1a120a;font-weight:700;font:inherit;font-weight:700;cursor:pointer}
.bpath-wa__send[disabled]{opacity:.6}
.bpath-wa__msg{margin:0;font-size:.8rem;color:#f0c27b;min-height:1em}
.bpath-wa__ok{margin:0;font-size:.9rem;line-height:1.5;color:#f5f1e8}