/* ===== Paws & Places ===== */
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/figtree-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/fraunces-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --red:#D61310; --red-deep:#8A0F0C; --red-tint:#FDECEA; --red-band:#FBDCDA;
  --ink:#17140F; --ink-70:#4C443A; --ink-60:#6B6257; --ink-40:#9A9084; --ink-25:#C7BFB3;
  --ivory:#FBF5EC; --sand:#F0E2CE; --sand-2:#F1E9DD; --card:#FFFFFF;
  --pine:#2C3F3C; --amber:#E09A1B; --water:#84A4BA;
  --line:rgba(23,20,15,.10); --line-2:rgba(23,20,15,.06);
  --shadow:0 1px 4px rgba(23,20,15,.05), 0 12px 28px rgba(23,20,15,.09);
  --shadow-lg:0 2px 6px rgba(23,20,15,.05), 0 18px 40px rgba(23,20,15,.10);
  --glow:0 8px 20px rgba(214,19,16,.26);
  --r:15px; --r-lg:24px; --r-xl:28px;
  --ease:cubic-bezier(.22,1,.36,1);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--ivory);color:var(--ink);-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button{font:inherit;color:inherit;cursor:pointer}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.2em;height:1.2em;fill:currentColor;flex:none}
.ic--flip{transform:rotate(180deg)}

#app{position:relative;min-height:100%;max-width:520px;margin:0 auto;background:var(--ivory);overflow:hidden}

.screen{display:none;min-height:100dvh;animation:fade .3s var(--ease)}
.screen.is-active{display:block}
.screen--results.is-active,.screen--detail.is-active{animation:slideIn .34s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slideIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* ===== hero ===== */
.screen--search{position:relative;padding-bottom:26px}
.hero{position:relative;padding:0 24px 0;text-align:center}
.hero__img{position:absolute;top:0;left:0;width:100%;height:352px;object-fit:cover;object-position:50% 45%;z-index:0;display:block}
.hero__fade{position:absolute;top:286px;left:0;right:0;height:66px;z-index:1;
  background:linear-gradient(180deg,rgba(251,245,236,0) 0%,rgba(251,245,236,.82) 52%,var(--ivory) 100%)}
.hero__brand{position:relative;z-index:2;padding-top:336px}

.wordmark{margin:0;font-family:var(--serif);font-size:clamp(30px,9vw,38px);font-weight:600;letter-spacing:-.015em;line-height:1.05}
.wordmark span{color:var(--red)}
.slogan{margin:9px auto 0;max-width:21em;font-size:14px;line-height:1.5;font-weight:500;color:var(--ink-60);white-space:pre-line}
.lang{
  position:absolute;top:calc(16px + var(--safe-t));right:18px;z-index:3;
  display:flex;align-items:center;gap:6px;height:34px;padding:0 13px;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.78);
  backdrop-filter:blur(8px);font-size:12.5px;font-weight:700;letter-spacing:.04em;
}
.lang:active{transform:scale(.95)}

/* ===== search card ===== */
.searchcard{
  position:relative;z-index:2;margin:26px 16px 0;padding:18px 16px 16px;
  background:var(--card);border-radius:26px;box-shadow:var(--shadow-lg);
}
.lbl{display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40)}
.dest{display:flex;align-items:center;gap:11px;margin-top:7px;padding:0 2px 14px;border-bottom:1px solid rgba(23,20,15,.09);transition:border-color .18s}
.dest:focus-within{border-bottom-color:var(--red)}
.dest__ic{font-size:20px;color:var(--red)}
.dest input{
  flex:1;min-width:0;border:0;padding:0;background:none;outline:none;
  font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink);
}
.dest input::placeholder{font-family:'Figtree',sans-serif;font-size:17px;font-weight:600;color:var(--ink-40)}

.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips--sugg{margin-top:12px}
.chip{
  flex:none;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  font-size:13px;font-weight:700;color:var(--ink-60);white-space:nowrap;
}
.chip:active{transform:scale(.95)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.chips--filter{padding:12px 16px 0}

.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.trio__btn{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:10px 11px;border:1px solid var(--line);border-radius:var(--r);background:var(--ivory);
  text-align:left;overflow:hidden;
}
.trio__btn:active{transform:scale(.97)}
.trio__lbl{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-40)}
.trio__val{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:700;white-space:nowrap}
.trio__val .ic{font-size:15px}
.trio__btn--pet{border-color:var(--red);background:var(--red-tint)}
.trio__btn--pet .trio__lbl,.trio__btn--pet .trio__val{color:var(--red-deep)}
.trio__btn--sel select{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;font:inherit}

.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:17px;border:0;border-radius:17px;background:var(--red);color:#fff;
  font-size:16px;font-weight:800;box-shadow:var(--glow);transition:.16s var(--ease);
}
.btn:active{transform:scale(.975);box-shadow:0 4px 12px rgba(214,19,16,.3)}
.btn .ic{font-size:18px}
.btn--go{margin-top:14px}
.btn--sm{width:auto;flex:none;padding:15px 24px;font-size:15px}
.btn[disabled]{opacity:.45;box-shadow:none}

/* ===== teaser ===== */
.teaser{margin-top:26px;padding:0 16px}
.teaser__h{margin:0 0 11px;font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:-.01em}
.teaser__row{display:flex;gap:11px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.teaser__row::-webkit-scrollbar{display:none}
.tcard{flex:none;width:168px;border-radius:18px;overflow:hidden;background:var(--card);
  box-shadow:0 1px 3px rgba(23,20,15,.06),0 8px 18px rgba(23,20,15,.07);cursor:pointer;text-align:left}
.tcard:active{transform:scale(.98)}
.tcard__media{height:80px}
.tcard__media svg{display:block;width:100%;height:100%}
.tcard__body{padding:10px 12px 12px}
.tcard__n{font-size:13.5px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcard__m{margin-top:3px;font-size:12px;font-weight:600;color:var(--ink-60)}

.cta{margin:24px 28px 0;text-align:center;font-size:13px;line-height:1.6;font-weight:700;color:var(--ink-40);white-space:pre-line}

/* ===== top bar ===== */
.topbar{display:flex;align-items:center;gap:10px;padding:calc(14px + var(--safe-t)) 16px 12px}
.screen--results .topbar{position:sticky;top:0;z-index:5;background:rgba(251,245,236,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
.iconbtn{width:38px;height:38px;flex:none;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:50%;background:var(--card);font-size:17px}
.iconbtn:active{transform:scale(.93)}
.iconbtn[disabled]{color:var(--ink-25);cursor:default}
.summary{flex:1;min-width:0;padding:7px 15px;border:1px solid var(--line);border-radius:999px;background:var(--card);text-align:left;display:block}
.summary--flat{background:rgba(255,255,255,.8)}
.summary strong{display:block;font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.summary small{display:block;font-size:11.5px;font-weight:600;color:var(--ink-60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== searching ===== */
.screen--load{background:linear-gradient(180deg,#FAE6CC 0%,var(--ivory) 46%)}
.loadbox{padding:64px 32px 0;text-align:center}
.loadmark{width:56px;height:56px;display:block;margin:0 auto 26px;border-radius:16px;box-shadow:0 2px 6px rgba(23,20,15,.08),0 8px 20px rgba(23,20,15,.12)}
.pawtrail{display:flex;align-items:flex-end;justify-content:center;gap:13px;color:var(--red)}
.pawtrail .ic{font-size:26px;opacity:0;animation:pawpop 1.2s infinite var(--ease)}
.pawtrail .p1{animation-delay:0s}
.pawtrail .p2{font-size:28px;animation-delay:.13s;transform:translateY(9px) rotate(-8deg)}
.pawtrail .p3{font-size:30px;animation-delay:.26s;transform:rotate(6deg)}
.pawtrail .p4{font-size:32px;animation-delay:.39s;transform:translateY(10px) rotate(-4deg)}
@keyframes pawpop{0%{opacity:0;transform:scale(.7) translateY(8px)}28%{opacity:1}72%{opacity:1}100%{opacity:0}}
.loadbox__h{margin:30px 0 0;font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.loadbox__sub{margin:8px 0 0;font-size:13.5px;font-weight:600;color:var(--ink-60)}
.skel{display:flex;flex-direction:column;gap:16px;margin-top:64px;padding:0 16px;animation:skelPulse 1.7s ease-in-out infinite}
@keyframes skelPulse{0%,100%{opacity:.62}50%{opacity:1}}
.skel__card{border-radius:var(--r-lg);overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.skel__media{height:132px;background:var(--sand-2)}
.skel__body{padding:14px 15px 18px}
.skel__l1{width:186px;height:15px;border-radius:7px;background:var(--sand-2)}
.skel__l2{width:126px;height:11px;margin-top:9px;border-radius:6px;background:#F5EFE6}
.skel__l3{height:34px;margin-top:13px;border-radius:13px;background:#F7EFE7}

/* ===== results ===== */
.resultcount{margin:14px 16px 12px;font-size:13.5px;font-weight:600;color:var(--ink-60)}
.resultcount b{font-weight:800;color:var(--ink)}
.cards{display:flex;flex-direction:column;gap:16px;padding:0 16px}
.card{border-radius:var(--r-lg);overflow:hidden;background:var(--card);box-shadow:var(--shadow);
  cursor:pointer;transition:.2s var(--ease);animation:cardIn .42s var(--ease) both}
.card:active{transform:scale(.985)}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.card__media{position:relative;aspect-ratio:1.95;background:var(--sand)}
.card__media>svg{display:block;width:100%;height:100%}
.pricepill{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:baseline;gap:4px;
  padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(23,20,15,.14)}
.pricepill b{font-size:16px;font-weight:800}
.pricepill span{font-size:11.5px;font-weight:700;color:var(--ink-60)}
.fav{position:absolute;top:12px;right:12px;width:36px;height:36px;display:grid;place-items:center;
  border:0;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);font-size:17px}
.fav.is-on{color:var(--red)}
.fav.is-on .ic{fill:var(--red)}
.card__body{padding:13px 15px 15px}
.card__top{display:flex;align-items:flex-start;gap:10px}
.card__name{flex:1;margin:0;font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.rating{flex:none;display:flex;align-items:center;gap:4px;padding-top:2px;font-size:13.5px;font-weight:800}
.rating .ic{font-size:14px;color:var(--amber)}
.rating small{font-size:12px;font-weight:600;color:var(--ink-40)}
.card__where{margin:4px 0 0;font-size:12.5px;font-weight:600;color:var(--ink-60)}
.petline{display:flex;align-items:center;gap:8px;margin-top:11px;padding:9px 12px;border-radius:13px;
  background:var(--sand-2);font-size:12.5px;font-weight:700;color:var(--pine)}
.petline .ic{font-size:17px;color:var(--pine)}
.petline--free{background:var(--red-tint);color:var(--red-deep)}
.petline--free .ic{color:var(--red)}
.amenrow{display:flex;gap:14px;margin-top:11px;font-size:11.5px;font-weight:700;color:var(--ink-60);overflow:hidden}
.amenrow span{display:flex;align-items:center;gap:5px;white-space:nowrap}
.amenrow .ic{font-size:15px;color:var(--pine)}
.demonote{margin:22px 22px calc(30px + var(--safe-b));text-align:center;font-size:11.5px;line-height:1.6;font-weight:600;color:var(--ink-40)}

/* ===== detail ===== */
.detail__media{position:relative;aspect-ratio:1.32}
.detail__media>svg{display:block;width:100%;height:100%}
.detail__fade{position:absolute;left:0;bottom:0;width:100%;height:90px;
  background:linear-gradient(180deg,rgba(251,245,236,0) 0%,rgba(251,245,236,.5) 100%)}
.detail__nav{position:absolute;top:calc(16px + var(--safe-t));left:16px;right:16px;display:flex;justify-content:space-between}
.detail__nav .iconbtn,.detail__nav .fav{position:static;width:40px;height:40px;border:0;
  background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(23,20,15,.14)}
.detail__body{position:relative;margin-top:-28px;padding:22px 20px calc(120px + var(--safe-b));
  background:var(--ivory);border-radius:var(--r-xl) var(--r-xl) 0 0}
.detail__h{margin:0;font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.detail__meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0 0;font-size:13px;font-weight:600;color:var(--ink-60)}
.detail__meta .rating{font-size:13px}
.detail__tag{margin:13px 0 0;font-size:15px;line-height:1.55;font-weight:500;color:var(--ink-70)}
.sect__h{margin:22px 0 10px;font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-40)}
.policy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 14px;padding:15px 16px;border-radius:18px;background:var(--red-tint)}
.policy div{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px;font-weight:700;line-height:1.3;color:var(--red-deep)}
.policy .ic{font-size:19px;color:var(--red)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.grid2 div{display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--r);background:var(--card);
  font-size:12.5px;font-weight:700;line-height:1.25;box-shadow:0 1px 3px rgba(23,20,15,.05)}
.grid2 .ic{font-size:19px;color:var(--pine)}
.bookbar{position:fixed;left:0;right:0;bottom:0;z-index:10;max-width:520px;margin:0 auto;
  display:flex;align-items:center;gap:14px;padding:15px 20px calc(20px + var(--safe-b));
  background:rgba(251,245,236,.96);backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.bookbar__p{flex:1}
.bookbar__p b{font-size:20px;font-weight:800;letter-spacing:-.01em}
.bookbar__p b span{font-size:13px;font-weight:600;color:var(--ink-60)}
.bookbar__p small{display:block;font-size:12px;font-weight:600;color:var(--ink-60)}
.bookbar .btn{width:auto;flex:none;padding:16px 24px;font-size:15px;border-radius:16px}

/* ===== sheets ===== */
.sheet{position:fixed;inset:0;z-index:60;display:grid;align-items:end;max-width:520px;margin:0 auto}
.sheet[hidden]{display:none}
.sheet__scrim{position:absolute;inset:0;background:rgba(23,20,15,.44);animation:fade .22s var(--ease)}
.sheet__panel{position:relative;padding:10px 16px calc(22px + var(--safe-b));background:var(--ivory);
  border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:0 -10px 40px rgba(23,20,15,.22);
  animation:sheetUp .3s var(--ease)}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.sheet__grab{width:42px;height:4px;margin:2px auto 14px;border-radius:2px;background:rgba(23,20,15,.14)}
.sheet__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sheet__head strong{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.015em}
.sheet__h{margin:0 0 14px;font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.015em}
.sheet__foot{display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.sheet__sum{flex:1;font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.sheet__sum small{display:block;font-size:12px;font-weight:600;color:var(--ink-60)}

.cal__dow,.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal__dow{margin-top:16px}
.cal{margin-top:8px}
.cal__dow span{text-align:center;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--ink-40)}
.day{height:44px;display:grid;place-items:center;border:0;border-radius:14px;background:none;
  font-size:14.5px;font-weight:700;color:var(--ink);position:relative}
.day[disabled]{color:var(--ink-25);cursor:default}
.day--pad{visibility:hidden}
.day--in{background:var(--red-band);border-radius:0}
.day--edge{background:var(--red);color:#fff;font-weight:800;border-radius:14px;z-index:1}
.day--start.day--in{border-radius:14px 0 0 14px}
.day--end.day--in{border-radius:0 14px 14px 0}
.day--today::after{content:"";position:absolute;bottom:6px;width:4px;height:4px;border-radius:50%;background:var(--red)}
.day--edge.day--today::after{background:#fff}

.pets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pet{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 4px;
  border:1.5px solid var(--line);border-radius:var(--r);background:var(--card);
  font-size:13px;font-weight:800;color:var(--ink-60);transition:.18s var(--ease)}
.pet .ic{font-size:22px}
.pet.is-on{background:var(--red-tint);border-color:var(--red);color:var(--red-deep)}
.pet:active{transform:scale(.96)}
.stepper{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.stepper__lbl{font-size:14px;font-weight:700}
.stepper__ctl{display:flex;align-items:center;gap:14px}
.stepper__ctl strong{min-width:18px;text-align:center;font-size:16px;font-weight:800}

/* ===== toast ===== */
.toast{position:fixed;left:50%;bottom:34px;z-index:70;transform:translate(-50%,24px);
  display:flex;align-items:center;gap:9px;padding:14px 22px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:14px;font-weight:700;
  box-shadow:0 12px 32px rgba(23,20,15,.3);opacity:0;pointer-events:none;transition:.3s var(--ease)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast .ic{font-size:17px;color:#6FE39B}

/* short screens (iPhone SE and friends): keep the search button above the fold */
@media (max-height:720px){
  .hero__img{height:284px}
  .hero__fade{top:230px;height:54px}
  .hero__brand{padding-top:270px}
  .wordmark{font-size:30px}
}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}