/* =====================================================================
   v896 — Airbnb-style listing page on phones.
   This file is linked with media="(max-width: 900px)", so the computer
   page cannot change. Layout and looks only: no booking or price logic.
   ===================================================================== */

/* ---------- Booking sheet + bottom price bar (phones and small tablets) ---------- */
html body.pdp16 #bookingBox .msite-booking-sheet-head{position:relative;padding-top:18px}
html body.pdp16 #bookingBox .msite-booking-sheet-head::before{content:"";position:absolute;top:7px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:#D5DCE5}
html body.pdp16 #bookingBox .msite-booking-sheet-head strong{font-size:17px;font-weight:800;color:#1D2635}
/* dates as one joined box */
html body.pdp16 #bookingBox .ys-booking-fields-row{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid #CDD8E4;border-radius:12px;overflow:hidden}
html body.pdp16 #bookingBox .ys-booking-fields-row .ys-field{min-width:0;padding:8px 8px 6px 10px;margin:0;overflow:hidden}
html body.pdp16 #bookingBox .ys-booking-fields-row .ys-field + .ys-field{border-left:1.5px solid #CDD8E4}
html body.pdp16 #bookingBox .ys-booking-fields-row .ys-field > span{margin:0 0 2px;font-size:10.5px;letter-spacing:.05em}
/* v897: smaller date text so the full date and the calendar icon always fit (no cut-off) */
html body.pdp16 #bookingBox .ys-booking-fields-row input{display:block;width:100% !important;min-width:0;max-width:100%;height:30px !important;padding:0 !important;border:0 !important;box-shadow:none !important;font-size:12.5px !important;font-weight:700;letter-spacing:-.01em;background:transparent;box-sizing:border-box}
html body.pdp16 #bookingBox .ys-booking-fields-row input::-webkit-calendar-picker-indicator{margin-left:2px;padding:0;width:14px;height:14px}
html body.pdp16 #bookingBox .ys-booking-fields-row input::-webkit-date-and-time-value{text-align:left}
@media (max-width:360px){html body.pdp16 #bookingBox .ys-booking-fields-row input{font-size:11.5px !important}html body.pdp16 #bookingBox .ys-booking-fields-row .ys-field{padding-left:8px;padding-right:6px}}
/* guests and rooms as rows: label left, round − / + right */
html body.pdp16 #bookingBox .ys886-row{grid-template-columns:1fr;gap:0;margin-top:6px}
html body.pdp16 #bookingBox .ys886-row .ys886-f{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #EEF1F5}
html body.pdp16 #bookingBox .ys886-row .ys886-l{margin:0;font-size:14.5px !important;font-weight:800;letter-spacing:0 !important;text-transform:none !important;color:#1D2635 !important}
html body.pdp16 #bookingBox .ys886-row .ys886-st,html body.pdp16 #bookingBox .ys-field > span.ys886-st{border:0;padding:0;gap:10px;background:transparent}
html body.pdp16 #bookingBox .ys886-row .ys886-st input[type=number]{width:34px !important;flex:0 0 34px;font-size:15px}
html body.pdp16 #bookingBox .ys886-row .ys886-b{flex:0 0 32px;width:32px;height:32px;border-radius:50%;border:1.5px solid #B8C4D3;background:#fff;font-size:17px}
/* bottom price bar */
html body.pdp16 .pdp9-sticky.sticky-bar{padding:12px 18px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #E6EAF0;box-shadow:0 -4px 16px rgba(16,40,67,.08);background:#fff}
html body.pdp16 .pdp9-sticky .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px;font-size:18px;color:#0B2A55;line-height:1.2}
html body.pdp16 .pdp9-sticky .price .pdp9-from{display:none}
html body.pdp16 .pdp9-sticky .price #stickyUnit{font-size:13px;font-weight:600;color:#6B7A8C}
html body.pdp16 .pdp9-sticky .ys896-when{display:block;flex-basis:100%;margin-top:2px;font-size:12px !important;font-weight:600 !important;color:#1D2635 !important;text-decoration:underline}
html body.pdp16 .pdp9-sticky .sticky-actions .btn{min-height:46px;padding:0 18px;border-radius:12px;font-size:14.5px;white-space:nowrap}
html body.pdp16 .pdp9-sticky .sticky-actions .btn .sticky-book-full{display:none}
html body.pdp16 .pdp9-sticky .sticky-actions .btn .sticky-book-short{display:inline}

/* ---------- Phones: the Airbnb-style page ---------- */
@media (max-width:800px){
  html body.pdp16,html body.pdp16 .pdp9-main{background:#fff}
  html body.pdp16 .pdp9-main{padding-top:0 !important}
  html body.pdp16 .pdp9-main > .container{padding-left:20px;padding-right:20px}

  /* photos: full width, buttons and counter on top */
  html body.pdp16 .pdp9-gallery{height:300px;margin-top:0}
  html body.pdp16 .pdp9-gallery > button{height:300px}
  html body.pdp16 .pdp9-gallery > .pdp9-g-all{display:none}
  html body.pdp16 .pdp9-gallery .pdp9-g-chip{display:none}
  html body.pdp16 .ys896-gtop{display:flex;align-items:center;gap:10px;position:absolute;z-index:4;top:12px;left:calc(50% - 50vw + 14px);right:calc(50% - 50vw + 14px);order:0;pointer-events:none}
  html body.pdp16 .ys896-gsp{flex:1}
  html body.pdp16 .ys896-fb{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.95);color:#1D2635;box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer}
  html body.pdp16 .ys896-fb.is-on{color:#E8412F}
  html body.pdp16 .ys896-fb.is-on svg{fill:currentColor}
  html body.pdp16 .ys896-count{display:block;position:absolute;z-index:4;top:244px;right:calc(50% - 50vw + 14px);order:0;padding:4px 10px;border:0;border-radius:12px;background:rgba(17,24,39,.72);color:#fff;font:700 12px/1.3 Inter,system-ui,sans-serif;cursor:pointer}

  /* name card becomes a white sheet sliding over the photos */
  html body.pdp16 .pdp9-main > .container > .ys880-hero{position:relative;z-index:3;margin:-24px calc(50% - 50vw) 0;padding:20px 20px 4px;border:0;border-radius:24px 24px 0 0;background:#fff;box-shadow:none}
  html body.pdp16 .ys880-hero .pdp9-crumbs{display:none}
  html body.pdp16 .ys880-hero .pdp9-badges{display:none}
  html body.pdp16 .ys880-hero .pdp9-head{padding:0 !important;gap:0}
  html body.pdp16 .ys880-hero .pdp9-title{margin:0;font-size:23px;line-height:1.2;color:#0B2A55;letter-spacing:-.02em}
  html body.pdp16 .ys896-type{display:block;margin:6px 0 0;font-size:14px;color:#4A5A70}
  html body.pdp16 .ys896-facts{display:block;margin:3px 0 0;font-size:13.5px;color:#6B7A8C}
  html body.pdp16 .ys880-hero .pdp9-meta{display:none}
  /* one rating card: score | label | verified; share/save live on the photos */
  html body.pdp16 .ys892-side{margin-top:14px}
  html body.pdp16 .ys892-side .ys892-acts{display:none}
  html body.pdp16 .ys892-side .ys880-why{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0;padding:10px 0;border:1px solid #E6EAF0;border-radius:14px;background:#fff}
  html body.pdp16 .ys892-side .ys880-why-score{width:auto;height:auto;padding:0 14px;border:0;border-right:1px solid #E6EAF0;border-radius:0;background:none !important;box-shadow:none}
  html body.pdp16 .ys892-side .ys880-why-score b{font-size:20px;color:#0B2A55}
  html body.pdp16 .ys892-side .ys880-why-score span{display:none}
  html body.pdp16 .ys892-side .ys880-why-txt{padding:0 10px;text-align:center;align-items:center}
  html body.pdp16 .ys892-side .ys880-why-txt .ys880-stars{display:none}
  html body.pdp16 .ys892-side .ys880-why-txt strong{font-size:13px}
  html body.pdp16 .ys892-side .ys880-why-txt small{font-size:11.5px}
  html body.pdp16 .ys896-ver{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 14px;border-left:1px solid #E6EAF0;font-size:11.5px;font-weight:800;color:#0A7A47}
  /* host row and highlights */
  html body.pdp16 .ys896-host{display:flex;align-items:center;gap:12px;margin:18px 0 0;padding:18px 0 0;border-top:1px solid #EEF1F5}
  html body.pdp16 .ys896-hav{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;overflow:hidden;background:#0B2A55;color:#FFC861;font-weight:800}
  html body.pdp16 .ys896-hav img{width:100%;height:100%;object-fit:cover}
  html body.pdp16 .ys896-host b{display:block;font-size:15px;color:#1D2635}
  html body.pdp16 .ys896-host small{font-size:12.5px;color:#6B7A8C}
  html body.pdp16 .ys896-hl{display:block;margin:18px 0 0;padding:18px 0 0;border-top:1px solid #EEF1F5;list-style:none}
  html body.pdp16 .ys896-hl li{display:flex;gap:14px;align-items:flex-start;margin:0 0 16px}
  html body.pdp16 .ys896-hl svg{flex:none;color:#0B2A55;margin-top:1px}
  html body.pdp16 .ys896-hl b{display:block;font-size:14.5px;color:#1D2635}
  html body.pdp16 .ys896-hl small{font-size:12.5px;color:#6B7A8C;line-height:1.4}

  /* sections: flat, divided by thin lines (no boxed cards) */
  html body.pdp16 .pdp16-panel,html body.pdp16 .pdp13-recommendations{margin:0;padding:24px 0;border:0;border-radius:0;box-shadow:none;background:#fff;border-top:1px solid #EEF1F5}
  html body.pdp16 .pdp16-panel .pdp9-h2,html body.pdp16 .pdp16-panel h2{font-size:19px;color:#1D2635}
  /* slim tabs */
  html body.pdp16 .pdp16-tabs{max-width:none;width:auto;margin:0 -20px;padding:0 16px;z-index:95;border:0;border-bottom:1px solid #E6EAF0;border-radius:0;box-shadow:none;background:#fff}
  html body.pdp16 .pdp16-tabs .tab-link{font-size:13.5px !important;font-weight:700;color:#6B7A8C;text-transform:none}
  html body.pdp16 .pdp16-tabs .tab-link.active{color:#0B2A55 !important;border-bottom:2.5px solid #0B2A55 !important}
  /* highlights: the tiles are now at the top, keep the AI summary here */
  html body.pdp16 .ys882-hl .ys882-grid{display:none}
  /* rooms: swipe cards */
  html body.pdp16 .pdp16-rooms .rc-list{display:flex;flex-direction:row;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(50% - 50vw);padding:2px 16px 6px 0;scrollbar-width:none}
  html body.pdp16 .pdp16-rooms .rc-list::-webkit-scrollbar{display:none}
  html body.pdp16 .pdp16-rooms .rc-card.rr-card{flex:0 0 86%;scroll-snap-align:start;border-radius:16px}
  html body.pdp16 .pdp16-room-filters{margin-bottom:12px}
  /* amenities: 6 first, the rest after "Show all" */
  html body.pdp16 .pdp16-amenities .am-grid{grid-template-columns:1fr 1fr;gap:12px 10px}
  html body.pdp16 .pdp16-amenities:not(.ys896-open) .am-item:nth-child(n+7){display:none}
  html body.pdp16 .ys896-amall{display:block;width:100%;margin-top:16px;padding:12px;border:1.5px solid #1D2635;border-radius:10px;background:#fff;color:#1D2635;font:800 14px/1.2 Inter,system-ui,sans-serif;cursor:pointer}
  /* location: distances as chips */
  html body.pdp16 .ys891-dist{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
  html body.pdp16 .ys891-dist li{gap:6px;padding:6px 11px;border:0;border-radius:18px;background:#F4F6F9}
  html body.pdp16 .ys891-dist i{width:auto;height:auto;background:none;font-size:14px}
  html body.pdp16 .ys891-dist small{display:inline;font-size:12.5px;color:#1D2635}
  html body.pdp16 .ys891-dist b{display:inline;font-size:12.5px;margin-left:3px}
  html body.pdp16 .ys891-dist small::after{content:":"}
  /* things to know: rows; full details open in a sheet */
  html body.pdp16 .pdp16-cancellation{display:none}
  html body.pdp16 .pdp16-policies .pdp9-policy-grid,html body.pdp16 .pdp16-policies .ys887{display:none}
  html body.pdp16 .ys896-know{display:block}
  html body.pdp16 .ys896-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 0;border:0;border-bottom:1px solid #EEF1F5;background:none;text-align:left;cursor:pointer;font-family:inherit}
  html body.pdp16 .ys896-row b{display:block;font-size:14.5px;color:#1D2635}
  html body.pdp16 .ys896-row small{display:block;margin-top:2px;font-size:12.5px;color:#6B7A8C}
  html body.pdp16 .ys896-row small.is-free{color:#0A7A47;font-weight:700}
  html body.pdp16 .ys896-row i{font-style:normal;font-size:22px;color:#9AA6B6}
}

/* bottom sheet for "Things to know" */
html body.pdp16 .ys896-sheet{display:block;position:fixed;inset:0;z-index:1400;visibility:hidden}
html body.pdp16 .ys896-sheet.is-open{visibility:visible}
html body.pdp16 .ys896-sheet-bg{position:absolute;inset:0;background:rgba(10,20,35,.45);opacity:0;transition:opacity .2s}
html body.pdp16 .ys896-sheet.is-open .ys896-sheet-bg{opacity:1}
html body.pdp16 .ys896-sheet-in{position:absolute;left:0;right:0;bottom:0;max-height:82vh;overflow:auto;padding:10px 20px calc(24px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;background:#fff;transform:translateY(100%);transition:transform .25s}
html body.pdp16 .ys896-sheet.is-open .ys896-sheet-in{transform:none}
html body.pdp16 .ys896-grab{width:40px;height:5px;margin:0 auto 10px;border-radius:3px;background:#D5DCE5}
html body.pdp16 .ys896-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
html body.pdp16 .ys896-sheet-head b{font-size:17px;color:#1D2635}
html body.pdp16 .ys896-sheet-head button{width:34px;height:34px;border:0;border-radius:50%;background:#F1F4F8;font-size:20px;line-height:1;cursor:pointer}
html body.pdp16 .ys896-in-sheet{display:block !important;margin:0 !important;padding:0 !important;border:0 !important}
html body.pdp16 .ys896-in-sheet.pdp9-policy-grid{display:grid !important;grid-template-columns:1fr !important;gap:10px}
html body.pdp16 .ys896-in-sheet .ys887-grid{grid-template-columns:1fr}
html body.pdp16 .ys896-in-sheet .pdp16-cancel-timeline{grid-template-columns:1fr}
html body.pdp16.ys896-sheet-open{overflow:hidden}
/* the sheet already shows the title - hide the copied section heading */
html body.pdp16 .ys896-in-sheet .pdp9-h3,html body.pdp16 .ys896-in-sheet .pdp13-section-intro h2,html body.pdp16 .ys896-in-sheet > .pdp9-h2{display:none}