/* ============================================================
   Nail It Up - v2 additions
   Loaded after style.css. Hero imagery, manual-payment pages,
   floating action stack, and the richer motion pass.
   ============================================================ */

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--rose); color: #fff; padding: 12px 22px; border-radius: 0 0 10px 0;
  font-size: .88rem; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Brand logo ---------- */
.brand__logo { display: block; width: auto; object-fit: contain; }

/* ---------- Announcement ---------- */
.announce span { display: inline-block; padding-right: 6px; }

/* ---------- Hero with a real photo ---------- */
.hero__slide--photo::after {
  /* Neutral white veil so the overlay works with every theme. */
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, calc(var(--hero-overlay, 82) * 1%)) 0%,
    rgba(255, 255, 255, calc(var(--hero-overlay, 82) * 0.84%)) 42%,
    rgba(255, 255, 255, calc(var(--hero-overlay, 82) * 0.28%)) 100%
  );
}
.hero__scroll {
  position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%);
  z-index: 3; color: var(--rose); font-size: .68rem; letter-spacing: .24em;
  text-transform: uppercase; display: grid; justify-items: center; gap: 8px;
  opacity: .8;
}
.hero__scroll i {
  width: 1px; height: 34px; background: linear-gradient(var(--rose), transparent);
  display: block; animation: scrollHint 1.9s var(--ease) infinite;
}
@keyframes scrollHint {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  45%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  55%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* Floating decorative blobs behind the hero copy */
.hero__blob {
  position: absolute; border-radius: 50%; filter: blur(50px); opacity: .5; z-index: 1;
  pointer-events: none;
}
.hero__blob--1 { width: 320px; height: 320px; background: var(--rose-light); right: 8%; top: 12%;
                 animation: floaty 13s ease-in-out infinite; }
.hero__blob--2 { width: 240px; height: 240px; background: var(--champagne); right: 26%; bottom: 8%;
                 animation: floaty 17s ease-in-out infinite reverse; }
@keyframes floaty {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-26px, 24px) scale(1.09); }
}

/* ---------- "How it works" ---------- */
.steps-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px;
  position: relative;
}
.step-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 24px; text-align: center; position: relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.step-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--rose-light); }
.step-card__n {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--rose), var(--rose-light)); color: #fff;
  display: grid; place-items: center; font-family: var(--serif); font-size: 1.35rem;
  box-shadow: none;
}
.step-card h3 { font-size: 1.06rem; margin-bottom: 8px; }
.step-card p { font-size: .87rem; color: var(--ink-soft); }

/* ---------- Floating action stack ---------- */
.float-stack {
  position: fixed; bottom: 22px; z-index: 90;
  display: flex; flex-direction: column-reverse; gap: 12px; align-items: flex-end;
}
.float-stack--right { right: 22px; }
.float-stack--left  { left: 22px; align-items: flex-start; }
.float-btn {
  width: 56px; height: 56px; border-radius: var(--pill); display: flex;
  align-items: center; justify-content: center; gap: 0;
  color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); position: relative;
  transition: transform .3s var(--ease), width .35s var(--ease), background .3s;
  overflow: hidden; white-space: nowrap;
}
.float-btn:hover { transform: translateY(-3px) scale(1.04); color: #fff; }
.float-btn--wa   { background: #25d366; }
.float-btn--call { background: var(--rose); width: 48px; height: 48px; }
.float-btn__label {
  max-width: 0; opacity: 0; font-size: .84rem; font-weight: 600;
  transition: max-width .35s var(--ease), opacity .25s var(--ease), margin .35s var(--ease);
}
.float-btn--wa:hover { width: 178px; }
.float-btn--wa:hover .float-btn__label { max-width: 120px; opacity: 1; margin-left: 9px; }
.float-btn--wa::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
  animation: waPulse 2.4s var(--ease) infinite;
}
@keyframes waPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
  70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.float-stack--left ~ .to-top { left: 22px; right: auto; }

/* ---------- Payment page ---------- */
.pay-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; align-items: start; }

.pay-steps {
  display: flex; gap: 6px; margin-bottom: 26px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--pill); padding: 7px;
  box-shadow: var(--shadow-sm);
}
.pay-step {
  flex: 1; min-width: 108px; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 12px; border-radius: var(--pill); font-size: .8rem; color: var(--muted);
  transition: all .3s var(--ease);
}
.pay-step span {
  width: 21px; height: 21px; border-radius: 50%; background: var(--blush-2); color: var(--muted);
  display: grid; place-items: center; font-size: .7rem; font-weight: 700; flex: none;
}
.pay-step.is-active { background: var(--blush); color: var(--rose-dark); font-weight: 600; }
.pay-step.is-active span { background: var(--rose); color: #fff; }
.pay-step.is-done { color: var(--success); }
.pay-step.is-done span { background: var(--success); color: #fff; }
.pay-step.is-done span::after { content: "✓"; }
.pay-step.is-done span { font-size: 0; }
.pay-step.is-done span::after { font-size: .72rem; }

.pay-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(20px, 3vw, 30px); box-shadow: var(--shadow-sm);
}
.pay-card--ok   { border-color: #bfe3d0; background: linear-gradient(180deg, #f2fbf6, #fff); text-align: center; }
.pay-card--wait { border-color: #f0d9a8; background: linear-gradient(180deg, #fffaf0, #fff); text-align: center; }
.pay-tick {
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 14px;
  background: var(--success); color: #fff; display: grid; place-items: center; font-size: 1.7rem;
  animation: pop .45s var(--ease);
}
.pay-tick--wait { background: var(--warn); }

.acct-list { display: grid; gap: 13px; }
.acct {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px;
  transition: border-color .25s, box-shadow .25s;
}
.acct:hover { border-color: var(--rose-light); box-shadow: var(--shadow-sm); }
.acct__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.acct__badge {
  width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--rose);
}
.acct__badge--jazzcash  { background: #b01e2e; }
.acct__badge--easypaisa { background: #1f7a3f; }
.acct__badge--bank      { background: #2b4a7a; }
.acct__badge--raast     { background: #6b4fa0; }
.acct__head strong { display: block; font-size: .96rem; }
.acct__head span   { font-size: .8rem; color: var(--muted); }
.acct__num {
  display: flex; align-items: center; gap: 9px; margin-bottom: 8px;
  background: var(--blush); border-radius: 10px; padding: 10px 12px;
}
.acct__num code {
  flex: 1; font-family: "SFMono-Regular", Consolas, monospace; font-size: 1rem;
  letter-spacing: .06em; color: var(--ink); word-break: break-all;
}
.copy-btn {
  border: 1px solid var(--rose-light); background: #fff; color: var(--rose);
  padding: 6px 14px; border-radius: var(--pill); font: 600 .74rem var(--sans);
  cursor: pointer; flex: none; transition: all .2s var(--ease);
}
.copy-btn:hover { background: var(--rose); color: #fff; }
.copy-btn.is-copied { background: var(--success); border-color: var(--success); color: #fff; }
.acct__note { font-size: .82rem; color: var(--muted); margin-top: 6px; }
.acct__qr { max-width: 130px; border-radius: 10px; margin-top: 10px; }

.pay-summary {
  background: linear-gradient(170deg, var(--blush) 0%, #fff 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(20px, 3vw, 26px); position: sticky; top: calc(var(--header-h) + 16px);
  box-shadow: var(--shadow-sm);
}
.pay-summary h4 {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.pay-ref {
  font-family: var(--serif); font-size: 1.25rem; color: var(--rose-dark);
  letter-spacing: .04em; margin-bottom: 16px;
}
.pay-due {
  margin-top: 16px; background: #fff; border: 1px dashed var(--rose-light);
  border-radius: var(--radius-sm); padding: 16px; text-align: center;
}
.pay-due small { color: var(--muted); font-size: .76rem; display: block; }
.pay-due__big { font-family: var(--serif); font-size: 2rem; color: var(--rose-dark); line-height: 1.2; }

/* ---------- Booking-status badges on public pages ---------- */
.badge--pending_payment       { background: #fff4e0; color: var(--warn); }
.badge--awaiting_verification { background: #e7f0fa; color: #2b6cb0; }
.badge--in_progress           { background: #e6f0fb; color: #2b6cb0; }
.badge--no_show               { background: #f0eef0; color: var(--muted); }

/* ---------- Blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.post-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.post-card__media { aspect-ratio: 16/9; overflow: hidden; background: var(--blush-2); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.06); }
.post-card__body { padding: 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.post-card__body h3 { font-size: 1.14rem; }
.post-card__body p { font-size: .88rem; color: var(--ink-soft); flex: 1; }
.post-meta { font-size: .76rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.post-body { max-width: 760px; margin-inline: auto; font-size: 1.02rem; line-height: 1.8; color: var(--ink-soft); }
.post-body h2, .post-body h3 { color: var(--ink); margin: 28px 0 12px; }
.post-body p { margin-bottom: 16px; }
.post-body img { border-radius: var(--radius-sm); margin: 20px 0; }

/* ---------- Motion polish ---------- */
[data-aos="up"]    { transform: translateY(34px); }
[data-aos="fade"]  { transform: none; }
[data-aos="flip"]  { transform: perspective(800px) rotateX(-9deg) translateY(24px); }
[data-aos].is-in   { transform: none; }

/* Stagger children of a marked container */
[data-stagger] > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > *:nth-child(1) { transition-delay: .00s; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: .07s; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: .14s; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: .21s; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: .28s; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: .35s; }
[data-stagger].is-in > *:nth-child(7) { transition-delay: .42s; }
[data-stagger].is-in > *:nth-child(8) { transition-delay: .49s; }

/* Buttons get a subtle sheen on hover */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; top: 0; left: -85%; width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-22deg); transition: left .6s var(--ease);
}
.btn--primary:hover::after { left: 130%; }

/* Cards lift with a soft glow */
.card, .pkg, .step-card, .post-card { will-change: transform; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .pay-grid { grid-template-columns: 1fr; }
  .pay-summary { position: static; }
}
@media (max-width: 640px) {
  .float-stack { bottom: 16px; }
  .float-stack--right { right: 14px; }
  .float-stack--left  { left: 14px; }
  .float-btn { width: 50px; height: 50px; }
  .float-btn--call { width: 44px; height: 44px; }
  .float-btn--wa:hover { width: 50px; }
  .float-btn--wa:hover .float-btn__label { max-width: 0; opacity: 0; margin-left: 0; }
  .to-top { bottom: 130px; }
  .pay-steps { padding: 5px; }
  .pay-step { min-width: 0; flex: 1 1 44%; font-size: .72rem; }
  .hero__blob { display: none; }
  .hero__scroll { display: none; }
}

/* ============================================================
   THEME-AWARE POLISH
   Applies whichever palette / font / corner style the salon picked.
   ============================================================ */

/* Headings pick up the theme's letter-spacing so the serif can breathe
   the way the NIU logotype does. */
h1, h2, h3, h4 { letter-spacing: var(--heading-spacing, 0); }

/* Cormorant is a lighter face than Playfair - give it more size and air. */
h1 { font-weight: 500; }
h2 { font-weight: 500; }

.hero h1 { line-height: 1.08; }
.hero__sub { font-weight: 300; }

/* The eyebrow label is the strongest brand cue after the logo. */
.eyebrow {
  font-size: .7rem;
  letter-spacing: .38em;
  font-weight: 500;
}

/* Buttons: when the theme is "sharp" the pill token collapses, so lean into
   a flat editorial button instead of a rounded one. */
.btn {
  letter-spacing: .14em;
  font-weight: 500;
  font-size: .8rem;
}
.btn--primary {
  background: var(--rose);
  box-shadow: none;
  border-color: var(--rose);
}
.btn--primary:hover {
  background: var(--rose-dark);
  border-color: var(--rose-dark);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
}
.btn--ghost { border-color: var(--rose); color: var(--rose); }
.btn--ghost:hover { background: var(--rose); color: #fff; }

/* Cards sit on hairlines rather than heavy shadows. */
.card, .pkg, .step-card, .post-card, .booking-wrap, .pay-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.card:hover, .step-card:hover, .post-card:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, .09);
}

/* Service cards read as a catalogue, not as buttons. */
.card__tag {
  background: var(--rose);
  color: #fff;
  letter-spacing: .16em;
  font-size: .62rem;
}
.card__time {
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  border: 1px solid var(--line);
}
.price { font-weight: 500; }
.price small { letter-spacing: .14em; text-transform: uppercase; }

/* Section headings get a hairline flourish instead of a coloured bar. */
.section-head h2 { position: relative; display: inline-block; }
.section-head h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  background: var(--rose);
  margin: 18px auto 0;
  opacity: .5;
}

/* Trust strip: quieter, more editorial. */
.trust__icon {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--rose);
  font-size: 1.15rem;
}
.trust__item strong { letter-spacing: .02em; }

/* The brand lettermark mirrors the logo's spacing when no image is set. */
.brand__mark {
  background: var(--rose);
  font-weight: 500;
  letter-spacing: .04em;
  box-shadow: none;
}
.brand__text { letter-spacing: .16em; font-size: 1.15rem; }
.brand__text small { letter-spacing: .4em; }

/* Header hairline instead of a drop shadow. */
.site-header.is-stuck {
  box-shadow: none;
  border-bottom-color: var(--line);
}

/* Package cards. */
.pkg__ribbon { background: var(--rose); letter-spacing: .18em; }
.pkg__price { font-weight: 500; }

/* Testimonials read as pull quotes. */
.testi__card { box-shadow: none; border-color: var(--line); }
.testi__quote { font-weight: 400; }
.testi__stars { letter-spacing: .3em; font-size: .95rem; }

/* Footer: match the theme's darkest tone rather than a fixed brown. */
.site-footer { background: var(--rose-dark); }
.site-footer h4 { letter-spacing: .3em; }
.socials a { border: 1px solid rgba(255, 255, 255, .18); background: transparent; }

/* CTA strip becomes a flat block of the primary colour. */
.cta-strip { background: var(--rose); }

/* Booking wizard steps. */
.step { letter-spacing: .14em; font-size: .72rem; }
.step__n { font-weight: 600; }

/* Inputs: hairline boxes, no rounded pills. */
.field input, .field select, .field textarea { border-radius: var(--radius-sm); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rose) 16%, transparent);
}

/* Announcement bar sits flat in the primary colour. */
.announce {
  background: var(--rose);
  letter-spacing: .1em;
  font-size: .78rem;
  text-transform: uppercase;
}

/* Gallery captions. */
.gallery figcaption { letter-spacing: .1em; font-size: .78rem; text-transform: uppercase; }

/* The floating call button follows the theme; WhatsApp keeps its own green. */
.float-btn--call { background: var(--rose); }

/* Hero decorative blobs are too playful for the sharp themes - soften them. */
.hero__blob { opacity: .35; }

/* Preloader mark matches the logotype spacing. */
.preloader-mark { letter-spacing: .3em; font-weight: 500; }

/* Print: never waste ink on the tinted backgrounds. */
@media print {
  .cta-strip, .announce, .site-footer { background: #fff !important; color: #000 !important; }
}

/* ---------- Floating stack: keep scroll-to-top clear of the buttons ---------- */
/* The stack is call (48px) + gap (12px) + WhatsApp (56px) = 116px tall. */
.to-top {
  bottom: 152px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--rose);
  border-radius: var(--pill);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.float-stack--left ~ .to-top { left: 22px; right: auto; }

@media (max-width: 640px) {
  .to-top { bottom: 128px; }
}

/* ---------- Hero text placement ---------- */
/* Centred variant, for photos that read better with copy in the middle. */
.hero__inner--center {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}
.hero__inner--center .hero__cta,
.hero__inner--center .hero__stats { justify-content: center; }
.hero__inner--center .hero__sub { margin-inline: auto; }

/* When the hero photo carries the branding, the actions live in their own
   strip directly beneath it - guaranteed never to collide with the artwork. */
.hero-bar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
}
.hero-bar__inner {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  justify-content: space-between;
}
.hero-bar__text { flex: 1; min-width: 260px; }
.hero-bar__text .eyebrow { margin-bottom: 8px; }
.hero-bar__text p {
  color: var(--ink-soft); font-size: 1rem; max-width: 58ch; margin: 0; font-weight: 300;
}
.hero-bar__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-bar__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line);
}
.hero-bar__stats div { text-align: center; }
.hero-bar__stats strong {
  display: block; font-family: var(--serif); font-size: 2rem; line-height: 1;
  color: var(--rose); font-weight: 500;
}
.hero-bar__stats span {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 760px) {
  .hero-bar__inner { flex-direction: column; align-items: stretch; text-align: center; }
  .hero-bar__cta { justify-content: center; }
  .hero-bar__cta .btn { flex: 1; }
}

/* ---------- Floating stack: keep scroll-to-top clear of the buttons ---------- */
/* The stack is call (48px) + gap (12px) + WhatsApp (56px) = 116px tall. */
.to-top {
  bottom: 152px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--rose);
  border-radius: var(--pill);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.float-stack--left ~ .to-top { left: 22px; right: auto; }

@media (max-width: 640px) {
  .to-top { bottom: 128px; }
}

/* ---------- Hero text placement ---------- */
/* Centred variant, for photos that read better with copy in the middle. */
.hero__inner--center {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}
.hero__inner--center .hero__cta,
.hero__inner--center .hero__stats { justify-content: center; }
.hero__inner--center .hero__sub { margin-inline: auto; }

/* "Minimal" = the photo already carries the branding, so only the buttons sit
   on top of it, low and centred, letting the artwork breathe. */
.hero__inner--minimal {
  padding: 46vh 0 48px;
  max-width: none;
  text-align: center;
}
.hero__inner--minimal .hero__cta,
.hero__inner--minimal .hero__stats { justify-content: center; }
.hero__inner--minimal .hero__cta { margin-bottom: 22px; }
/* The scroll hint would sit on top of the artwork - drop it in this mode. */
.hero__inner--minimal ~ .hero__scroll,
.hero:has(.hero__inner--minimal) .hero__scroll { display: none; }
@media (max-width: 860px) {
  .hero__inner--minimal { padding: 40vh 0 40px; }
  .hero__inner--minimal .hero__cta .btn { width: auto; }
}

/* ============================================================
   MOBILE HARDENING & PERFORMANCE
   ============================================================ */

/* Nothing may ever cause a sideways scroll on a phone. */
html { overflow-x: hidden; }

/* The scroll-reveal animations slide elements in horizontally, which pushed the
   page 15px wide before they settled. Vertical-only on small screens. */
@media (max-width: 860px) {
  [data-aos="left"], [data-aos="right"] { transform: translateY(24px); }
  [data-aos="left"].is-in, [data-aos="right"].is-in { transform: none; }
}

/* Below-the-fold sections are only painted once they are near the viewport.
   contain-intrinsic-size keeps the scrollbar honest while they are skipped. */
@media (min-width: 1px) {
  .section:not(.hero):not(#booking),
  .cta-strip,
  .site-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
  }
}

/* ---------- Tap targets (Apple/Google want ~44px) ---------- */
.announce button {
  width: 40px; height: 40px; right: 4px;
  display: grid; place-items: center; font-size: 1.35rem;
}
.announce { padding-right: 48px; }

/* Slider dots are 8px visually but need a finger-sized hit area. */
.hero__dots button, .testi-dots button { position: relative; }
.hero__dots button::after, .testi-dots button::after {
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
}
.hero__dots, .testi-dots { gap: 14px; }

/* Footer and info links get more room to be tapped. */
@media (max-width: 860px) {
  .site-footer ul a, .info-item a { display: inline-block; padding: 5px 0; }
  .nav__links a { padding: 15px 6px; }
}

/* ---------- Charts must scroll, not stretch the page ---------- */
.bars {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 6px;
}
.bars .bar { min-width: 26px; }

/* ---------- Any auto-fill grid must collapse below its minimum ---------- */
@media (max-width: 560px) {
  [class*="grid--"], .cards, .pkg-grid, .team-grid, .post-grid, .steps-row, .ig-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Small-screen refinements ---------- */
@media (max-width: 560px) {
  .section { padding: 54px 0; }
  .section-head { margin-bottom: 32px; }
  h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  h2 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .eyebrow { letter-spacing: .28em; font-size: .66rem; }
  .eyebrow::before, .eyebrow::after { width: 16px; margin: 0 8px 4px; }

  /* Buttons stack full-width so they are easy to hit. */
  .hero-bar__cta .btn, .section-head + * .btn--full { width: 100%; }

  /* Booking wizard */
  .booking-main { padding: 18px 14px; }
  .booking-side { padding: 18px 14px; }
  .pick-grid { grid-template-columns: 1fr; }
  .slots { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .date-chip { width: 66px; }

  /* Payment page */
  .acct__num { flex-wrap: wrap; }
  .acct__num code { font-size: .92rem; }
  .copy-btn { width: 100%; }

  /* Keep long references and emails from bursting their box. */
  .pay-ref, .kv span, .acct__num code, td, .t-muted { overflow-wrap: anywhere; }
}

/* ---------- Admin & dashboard on a phone ---------- */
@media (max-width: 560px) {
  .card__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .card__head .right { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .filters-bar { flex-direction: column; align-items: stretch; }
  .filters-bar .field, .filters-bar .btn { width: 100%; }
  .stat { padding: 16px; gap: 12px; }
  .stat__value { font-size: 1.45rem; }
  .btn-row { width: 100%; }
  .btn-row .btn { flex: 1 1 auto; }
}

/* ---------- Respect reduced motion everywhere ---------- */
@media (prefers-reduced-motion: reduce) {
  .float-btn--wa::before, .hero__scroll i, .preloader-bar span { animation: none !important; }
  .hero__blob { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* Same min-width:auto guard for the public-site grids. */
.booking-body > *,
.about__grid > *,
.contact-grid > *,
.pay-grid > *,
.cards > *,
.pkg-grid > *,
.team-grid > *,
.post-grid > *,
.steps-row > *,
.trust__grid > * { min-width: 0; }

.map-frame, .testi-viewport, .gallery { max-width: 100%; }

/* Buttons never shrink their text (white-space:nowrap), so on a narrow phone
   two side-by-side CTAs got clipped. Stack them instead. */
@media (max-width: 560px) {
  .hero-bar__cta { flex-direction: column; width: 100%; }
  .hero-bar__cta .btn { width: 100%; flex: none; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
  .btn { padding-inline: 20px; }
}
/* Very small phones: let long button labels wrap rather than overflow. */
@media (max-width: 380px) {
  .btn { white-space: normal; line-height: 1.3; text-align: center; }
}

/* Three short stats fit on one row even on a small phone - 2+1 looked lopsided. */
@media (max-width: 560px) {
  .hero-bar__stats { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
  .hero-bar__stats strong { font-size: 1.5rem; }
  .hero-bar__stats span { font-size: .62rem; letter-spacing: .12em; }
}