/* ════════════════════════════════════════
   B2M PET HOTEL — Shared Design System
   ════════════════════════════════════════ */
:root{
  --bg:#EBECF2; --white:#FFFFFF;
  --p1:#D2C8F0; --p2:#C8DFF0; --p3:#B8D0F0;
  --p4:#F0C8D8; --p5:#E8D4B8; --p6:#C8EAD8;
  --ink:#1C1C2E; --ink-sub:#6B6B80; --ink-lite:#A0A0B8;
  --accent:#5B4FC8; --accent-s:#7B6FE8;
  --green:#3ECF8E;
  --sh-sm:0 2px 12px rgba(80,80,130,.09);
  --sh-md:0 6px 28px rgba(80,80,130,.14);
  --sh-lg:0 12px 40px rgba(80,80,130,.20);
  --nav-h:68px;
  --r-card:20px; --r-lg:24px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{
  font-family:'Sarabun','Nunito',sans-serif;
  background:var(--bg); min-height:100dvh;
  display:flex; justify-content:center; align-items:flex-start;
  padding-bottom:calc(var(--nav-h) + 16px);
  overflow-x:hidden;
}
.page{width:min(480px,100vw);padding:0 18px 0;display:flex;flex-direction:column;align-items:center}

/* ── Animations ── */
@keyframes popIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fadeUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.a0{animation:popIn .55s cubic-bezier(.34,1.56,.64,1) both}
.a1{animation:fadeUp .45s .10s ease both}
.a2{animation:fadeUp .45s .18s ease both}
.a3{animation:fadeUp .45s .26s ease both}
.a4{animation:fadeUp .45s .34s ease both}
.a5{animation:fadeUp .45s .42s ease both}
.a6{animation:fadeUp .45s .50s ease both}

/* ── Bottom Nav ── */
.bottom-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:min(480px,100vw);height:var(--nav-h);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid rgba(200,200,220,.35);
  display:flex;align-items:center;justify-content:space-around;
  padding:0 8px 6px;z-index:100;
  box-shadow:0 -4px 24px rgba(80,80,130,.10);
}
.nav-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  text-decoration:none;padding:6px 10px;border-radius:14px;
  transition:background .18s ease, transform .18s ease;
  flex:1;
}
.nav-item:active{transform:scale(.92)}
.nav-icon{font-size:1.35rem;line-height:1;transition:transform .2s ease}
.nav-label{font-size:.6rem;font-weight:700;color:var(--ink-sub);font-family:'Nunito',sans-serif;letter-spacing:.2px;transition:color .18s}
.nav-item.active .nav-icon{transform:scale(1.12)}
.nav-item.active .nav-label{color:var(--accent)}
.nav-item.active{background:rgba(91,79,200,.08)}

/* ── Page Header (inner pages) ── */
.page-header{
  width:100%;padding:48px 0 20px;
  display:flex;flex-direction:column;align-items:flex-start;
}
.page-back{
  display:flex;align-items:center;gap:6px;
  font-size:.82rem;font-weight:700;color:var(--accent);
  text-decoration:none;margin-bottom:16px;
  background:var(--white);padding:7px 14px;border-radius:999px;
  box-shadow:var(--sh-sm);
}
.page-title{font-family:'Nunito',sans-serif;font-size:1.7rem;font-weight:900;color:var(--ink)}
.page-sub{font-size:.86rem;color:var(--ink-sub);margin-top:4px;line-height:1.5}

/* ── Section Head ── */
.sec-head{width:100%;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sec-title{font-family:'Nunito',sans-serif;font-size:1.1rem;font-weight:800;color:var(--ink)}
.sec-more{font-size:.78rem;color:var(--accent);font-weight:700;text-decoration:none}

/* ── White Card ── */
.card{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:20px}
.card-sm{background:var(--white);border-radius:var(--r-card);box-shadow:var(--sh-sm);padding:16px}

/* ── Divider ── */
.divider{
  width:100%;display:flex;align-items:center;gap:10px;margin:22px 0 16px;
}
.divider::before,.divider::after{
  content:'';flex:1;height:1.5px;
  background:linear-gradient(90deg,transparent,#C8C8D8,transparent);
}
.div-lbl{font-size:.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-lite);white-space:nowrap}

/* ── CTA Button ── */
.cta-btn{
  display:block;width:100%;padding:17px;
  background:var(--ink);color:var(--white);
  border-radius:var(--r-card);border:none;cursor:pointer;
  text-align:center;text-decoration:none;
  font-family:'Nunito',sans-serif;font-size:1.05rem;font-weight:800;
  box-shadow:0 6px 24px rgba(28,28,46,.22);
  transition:transform .18s ease,box-shadow .18s ease;
}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(28,28,46,.3)}
.cta-btn:active{transform:scale(.98)}
.cta-btn.outline{background:var(--white);color:var(--accent);border:2px solid var(--accent);box-shadow:none}

/* ── Toast ── */
.toast{
  position:fixed;bottom:calc(var(--nav-h) + 14px);left:50%;
  transform:translateX(-50%) translateY(60px);
  background:var(--ink);color:var(--white);
  padding:11px 22px;border-radius:999px;font-size:.84rem;font-weight:600;
  box-shadow:var(--sh-lg);z-index:999;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .3s;
  opacity:0;pointer-events:none;white-space:nowrap;
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ── Footer ── */
.footer{margin-top:28px;font-size:.7rem;color:var(--ink-lite);text-align:center;line-height:1.7}
.footer a{color:var(--accent);text-decoration:none}