/* ═══ THE SINGLE LISTING PAGE, UNDER THE PHOTOS — Design System "Single listing pages" (Chiran approved,
   23 Oct 2026). Hotels and home stays first (views/services/hotel/single/single-1.php). Everything is
   scoped to .ss-sp so the theme's other pages are untouched. Values from the reference sources:
   the section card = partner-price-layout.css (.sarisara-price-section), tokens = sarisara-tokens.css. */

.ss-sp { background: #fafafa; }
.ss-sp .ss-sp__wrap { max-width: 1312px; margin: 0 auto; padding: 32px 0 56px; box-sizing: border-box; }
.ss-sp .ss-sp__grid { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 40px; align-items: start; }
.ss-sp .ss-sp__main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ss-sp .ss-sp__aside { position: sticky; top: 84px; }
@media (max-width: 1375px) { .ss-sp .ss-sp__wrap { padding-left: 32px; padding-right: 32px; } }

/* ── the tab row under the photos (sticks; the price + button appear once stuck) ── */
.ss-sp .ss-tabs { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--border); }
.admin-bar .ss-sp .ss-tabs { top: 32px; }
/* Signed in (the WordPress admin bar), on a phone (Chiran, 25 Oct 2026): up to 782px the admin bar is 46px tall,
   and up to 600px it scrolls away with the page, so the section bar keeps no gap above it there. */
@media (max-width: 782px) { .admin-bar .ss-sp .ss-tabs { top: 46px; } }
@media (max-width: 600px) { .admin-bar .ss-sp .ss-tabs { top: 0; } }
/* THE SECTION BAR STAYS AT THE TOP ON A PHONE TOO (Chiran, 25 Oct 2026). On small screens the theme puts
   overflow-x:hidden on the page and its wrapper, which turns them into their own scroll box, and a sticky
   bar then scrolls away with the page. "clip" still stops sideways scrolling without breaking sticky. */
body:has(.ss-sp), body:has(.ss-sp) .st-style-elementor { overflow-x: clip !important; overflow-y: visible !important; }
.ss-sp .ss-tabs__in { max-width: 1312px; margin: 0 auto; display: flex; align-items: center; gap: 28px; padding: 0; font-family: var(--font-label); font-size: 14px; }
@media (max-width: 1375px) { .ss-sp .ss-tabs__in { padding: 0 32px; } }
.ss-sp .ss-tabs__in > a { padding: 18px 0 16px; color: var(--text-secondary); border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap; }
.ss-sp .ss-tabs__in > a:hover { color: var(--navy); }
.ss-sp .ss-tabs__in > a.on { color: var(--navy); font-weight: 600; border-bottom-color: var(--primary); }
.ss-sp .ss-tabs__mini { margin-left: auto; display: flex; align-items: center; gap: 14px; opacity: 0; visibility: hidden; transition: opacity .2s; }
.ss-sp .ss-tabs.is-stuck .ss-tabs__mini { opacity: 1; visibility: visible; }
.ss-sp .ss-tabs__p { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.ss-sp .ss-tabs__p small { font-size: 12px; color: var(--text-tertiary); }
.ss-sp .ss-tabs__p b { font-family: var(--font-heading); font-size: 17px; color: var(--navy); }
.ss-sp a.ss-btn.ss-tabs__go { padding: 10px 18px !important; font-size: 13px !important; }

/* ── THE section card (partner-price-layout.css .sarisara-price-section) ── */
.ss-sp .ss-sec { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px 20px; box-shadow: 0 1px 2px rgba(20,20,30,.04); scroll-margin-top: 80px; }
.ss-sp .ss-sec__head { position: relative; border-bottom: 1px solid var(--border); padding-bottom: 11px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 3px; }
.ss-sp .ss-sec__head::before { content: ""; position: absolute; left: -20px; top: 1px; bottom: 11px; width: 3px; background: var(--primary); border-radius: 0 3px 3px 0; }
.ss-sp .ss-sec__head h2.ss-sec__t { font-family: var(--font-label) !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase; color: var(--navy) !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; }
.ss-sp .ss-sec__head p.ss-sec__d { font-family: var(--font-label); font-size: 12.5px !important; color: var(--text-tertiary); margin: 0; line-height: 1.45; }
/* the theme's own headings and rules inside a card: the card's heading says it already */
.ss-sp .ss-sec__b .st-description > h2.st-heading-section, .ss-sp .ss-sec__b > .st-hr, .ss-sp .ss-sec__b .st-hr, .ss-sp .ss-sec__b > h2.st-heading-section,
.ss-sp .ss-sec__b > .st-section-single > h2.st-heading-section, .ss-sp #ss-rooms .ss-sec__b h2.st-heading-section:first-child,
.ss-sp #ss-reviews .ss-sec__b > div > h2.st-heading-section,
.ss-sp .ss-sec__b h2.st-heading-section, .ss-sp .ss-sec__b .st-map-wrapper > .st-flex, .ss-sp .ss-sec__b .st-map-wrapper > .st-hr { display: none !important; }
.ss-sp .ss-sec__b .st-section-single, .ss-sp .ss-sec__b .st-description { margin: 0 !important; padding: 0 !important; border: 0 !important; }

/* at a glance */
.ss-sp .ss-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ss-sp .ss-facts__i { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: #fff; }
.ss-sp .ss-facts__ic { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--primary-ultra-light); color: var(--primary); display: grid; place-items: center; }
.ss-sp .ss-facts__ic svg { width: 20px; height: 20px; }
.ss-sp .ss-facts small { display: block; font-family: var(--font-label); font-size: 11.5px; color: var(--text-tertiary); }
.ss-sp .ss-facts b { font-family: var(--font-label); font-size: 14px; font-weight: 600; color: var(--navy); }

/* facilities: 6 highlight tiles, then every group in three columns, 4 items each + "+N more" */
.ss-sp .ss-hl { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.ss-sp .ss-hl span { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 14px 6px; border-radius: 12px;
  background: var(--primary-ultra-light); font-family: var(--font-label); font-size: 12.5px; font-weight: 600; color: var(--navy); }
.ss-sp .ss-hl svg { width: 22px; height: 22px; color: var(--primary); }
.ss-sp .ss-fac { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 28px; align-items: start; }
.ss-sp .ss-fac > .st-hr { display: none; }
.ss-sp .ss-fac .st-attributes { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.ss-sp .ss-fac .st-attributes h2.st-heading-section { display: block !important; margin: 0 0 8px !important; font-family: var(--font-label) !important; font-size: 14px !important;
  font-weight: 700 !important; color: var(--navy) !important; line-height: 1.3 !important; text-transform: none !important; letter-spacing: 0 !important; }
.ss-sp .ss-fac .item-attribute .row { display: grid !important; gap: 6px; margin: 0 !important; }
.ss-sp .ss-fac .item-attribute .row > div { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; }
.ss-sp .ss-fac .item-attribute .item { min-height: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important; gap: 8px; font-size: 13.5px; line-height: 1.4; color: var(--text-secondary); }
.ss-sp .ss-fac .item-attribute .item i, .ss-sp .ss-fac .item-attribute .item svg { flex: none; width: 18px !important; height: 18px !important; font-size: 16px; margin: 0 !important; color: var(--text-tertiary); }
.ss-sp .ss-fac .ss-more-hidden { display: none !important; }
.ss-sp .ss-fac__more { all: unset; margin-top: 6px; font-family: var(--font-label); font-size: 13px; font-weight: 600; color: var(--primary); cursor: pointer; }

/* where it is */
.ss-sp #ss-where .sl-listing-map { height: 360px !important; border-radius: 12px !important; border: 1px solid var(--border-soft); }

/* house rules: the theme's table, as two quiet boxes */
.ss-sp #ss-rules table.st-properties { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0 8px; }
.ss-sp #ss-rules table.st-properties th, .ss-sp #ss-rules table.st-properties td { background: #fafafa; padding: 12px 14px !important; border: 0 !important; font-size: 14px; vertical-align: top; }
.ss-sp #ss-rules table.st-properties th { width: 34%; border-radius: 10px 0 0 10px; font-family: var(--font-label); font-weight: 600; color: var(--navy); }
.ss-sp #ss-rules table.st-properties td { border-radius: 0 10px 10px 0; color: var(--text-secondary); }

/* reviews, when there are none yet */
.ss-sp .ss-empty { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 12px; background: #fafafa; border: 1px dashed var(--border); }
.ss-sp .ss-empty svg { width: 26px; height: 26px; color: var(--primary); flex: none; }
.ss-sp .ss-empty b { display: block; font-family: var(--font-label); color: var(--navy); } .ss-sp .ss-empty span { font-size: 13.5px; color: var(--text-secondary); }

/* the right column */
.ss-sp .ss-sp__aside .widgets { position: static !important; top: auto !important; margin: 0 !important; }
.ss-sp .ss-sp__aside .widgets > .fixed-on-mobile { display: flex; flex-direction: column; gap: 16px; }
.ss-sp .ss-sp__aside .widgets > .fixed-on-mobile > * { margin: 0 !important; }
.ss-sp .ss-trust { padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--border); }
.ss-sp .ss-trust p { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.ss-sp .ss-trust svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--success); }

/* the same-area rows */
.ss-sp .ss-sp__nearby { margin-top: 32px; }
.ss-sp .ss-sp__nearby > * { margin-left: 0 !important; margin-right: 0 !important; }

/* phone and small screens */
@media (max-width: 991px) {
  .ss-sp .ss-sp__grid { grid-template-columns: 1fr; }
  .ss-sp .ss-sp__aside { position: static; }
  .ss-sp .ss-tabs__in { overflow-x: auto; gap: 20px; scrollbar-width: none; }
  .ss-sp .ss-tabs__mini { display: none; }
  .ss-sp .ss-fac { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-sp .ss-hl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .ss-sp .ss-sp__wrap { padding: 20px 16px 40px; }
  .ss-sp .ss-tabs__in { padding: 0 16px; }
  .ss-sp .ss-facts { grid-template-columns: 1fr 1fr; }
  .ss-sp .ss-fac { grid-template-columns: 1fr; }
}

/* THE APPLY STEP on a trip's price box (Chiran, 23 Oct 2026; Design System section 2c): after a change to
   the group, a violet panel with the Apply button and the words "it is not automatic"; the old figures are
   crossed out until the trip is priced again. Nothing about the calculation changes. */
.ss-sp .sibs-guest-apply { margin: 12px 0 !important; padding: 14px !important; border-radius: 12px !important; background: var(--primary-ultra-light) !important;
  border: 1px solid var(--primary-light) !important; text-align: center; }
.ss-sp .sibs-guest-apply .sibs-guest-apply-btn { width: 100%; height: auto !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: 0 !important; font-family: var(--font-label) !important; padding: 13px 22px !important; border-radius: 999px !important; font-size: 15px !important; font-weight: 700 !important;
  background: var(--primary) !important; color: #fff !important; border: 0 !important; box-shadow: 0 6px 18px -6px rgba(119,0,255,.55); }
/* APPLY — it must be seen and pressed (Chiran, 24 Oct 2026: "like the wave pill when you are listening").
   1. A light runs round the pill's edge (a turning colour wheel drawn only in the 2px border, so it follows the
      pill's own shape, long sides and round ends, instead of the old oversized square that ran unevenly).
   2. Inside, a soft band of light sweeps across, like the listening wave.
   3. A gentle violet glow. Hover: the face deepens and the light runs faster. Reduced motion: all still. */
@property --ss-apply-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
body .ss-sp .sibs-guest-apply button.sibs-guest-apply-btn::after { display: none !important; content: none !important; }
body .ss-sp .sibs-guest-apply button.sibs-guest-apply-btn {
  position: relative; overflow: hidden; isolation: isolate;
  border: 2px solid transparent !important;
  background: linear-gradient(135deg, #7700FF, #6A00E6) padding-box,
              conic-gradient(from var(--ss-apply-a), #7700FF 0deg, #B57BFF 40deg, #FFFFFF 90deg, #B57BFF 140deg, #7700FF 190deg, #7700FF 360deg) border-box !important;
  box-shadow: 0 6px 20px -6px rgba(119,0,255,.65), 0 0 0 4px rgba(119,0,255,.10) !important;
  animation: ss-apply-edge 2.6s linear infinite;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
body .ss-sp .sibs-guest-apply button.sibs-guest-apply-btn::before {
  content: "" !important; display: block !important; position: absolute; z-index: -1; top: -20%; left: 0; width: 60%; height: 140%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 30%, rgba(255,255,255,.26) 50%, rgba(255,255,255,.06) 70%, rgba(255,255,255,0) 100%);
  border-radius: 0; transform: translateX(-120%) skewX(-18deg); animation: ss-apply-wave 2.6s ease-in-out infinite; pointer-events: none;
}
body .ss-sp .sibs-guest-apply button.sibs-guest-apply-btn:hover,
body .ss-sp .sibs-guest-apply button.sibs-guest-apply-btn:focus-visible {
  background: linear-gradient(135deg, #6600DB, #5A00C2) padding-box,
              conic-gradient(from var(--ss-apply-a), #6600DB 0deg, #B57BFF 40deg, #FFFFFF 90deg, #B57BFF 140deg, #6600DB 190deg, #6600DB 360deg) border-box !important;
  transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(119,0,255,.75), 0 0 0 5px rgba(119,0,255,.14) !important;
  animation-duration: 1.4s;
}
body .ss-sp .sibs-guest-apply button.sibs-guest-apply-btn:active { transform: translateY(0); }
@keyframes ss-apply-edge { to { --ss-apply-a: 360deg; } }
@keyframes ss-apply-wave { 0% { transform: translateX(-120%) skewX(-18deg); } 60%, 100% { transform: translateX(220%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) {
  body .ss-sp .sibs-guest-apply button.sibs-guest-apply-btn, body .ss-sp .sibs-guest-apply button.sibs-guest-apply-btn::before { animation: none !important; }
}
.ss-sp .sibs-guest-apply-msg { margin: 8px 0 0 !important; font-family: var(--font-label); font-size: 12px !important; line-height: 16px !important; color: var(--text-secondary); }
body.sibs-pending .ss-sp .sarisara-booking-price-summary .value,
body.sibs-pending .ss-sp .sarisara-booking-price-summary .price-line > span:first-child { text-decoration: line-through; opacity: .45; }

/* ═══ ROUND 2 — Chiran's check of the hotel page against the design (23 Oct 2026) ═══ */

/* About: a few lines, then "Read all" (sarisara-single.js adds .ss-clamp + the button when the text is long) */
.ss-sp .ss-clamp { position: relative; max-height: 220px; overflow: hidden; }
.ss-sp .ss-clamp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff); pointer-events: none; }
.ss-sp .ss-readall { all: unset; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-family: var(--font-label); font-size: 13.5px; font-weight: 600; color: var(--primary); cursor: pointer; }
.ss-sp .ss-readall svg { width: 14px; height: 14px; transition: transform .2s; }
.ss-sp .ss-readall.is-open svg { transform: rotate(180deg); }
.ss-sp #ss-about .st-description, .ss-sp #ss-overview .st-description { font-family: var(--font-body); font-size: 15.5px; line-height: 1.7; color: var(--text-primary); }
.ss-sp .st-description p { margin: 0 0 12px; }

/* Rooms: one row per room — photo, name, facts with our icons, "Show price" as the outline button */
.ss-sp #ss-rooms .st-list-rooms, .ss-sp #ss-rooms .st-list-room { margin: 0 !important; }
.ss-sp #ss-rooms .item.st-border-radius { margin: 0 0 12px !important; padding: 10px !important; border: 1px solid var(--border-soft) !important; border-radius: 14px !important;
  background: #fff !important; box-shadow: none !important; overflow: visible !important; }
.ss-sp #ss-rooms .item.st-border-radius > form > .row { display: grid !important; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; margin: 0 !important; align-items: center !important; }
.ss-sp #ss-rooms .item.st-border-radius > form > .row > div { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; }
.ss-sp #ss-rooms .item .image { border-radius: 10px; overflow: hidden; }
.ss-sp #ss-rooms .item .image img { width: 100% !important; aspect-ratio: 16 / 9; height: auto !important; object-fit: cover; display: block; border-radius: 10px; }
.ss-sp #ss-rooms .item .row .row { display: flex !important; align-items: center !important; justify-content: space-between; gap: 16px; margin: 0 !important; flex-wrap: nowrap; }
.ss-sp #ss-rooms .item .row .row > div { width: auto !important; max-width: none !important; flex: 0 1 auto !important; padding: 0 !important; }
.ss-sp #ss-rooms .item .st-border-right { border: 0 !important; padding: 0 !important; }
.ss-sp #ss-rooms .item h2.heading { display: block !important; margin: 0 0 8px !important; font-family: var(--font-heading) !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; }
.ss-sp #ss-rooms .item h2.heading a { color: var(--navy) !important; text-decoration: none; }
.ss-sp #ss-rooms .st-list-facilities { display: flex !important; flex-wrap: wrap; gap: 6px 16px; margin: 0 !important; }
.ss-sp #ss-rooms .st-list-facilities .item { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; padding: 0 !important; width: auto !important; text-align: left !important;
  font-family: var(--font-label); font-size: 13px; color: var(--text-secondary); border: 0 !important; }
.ss-sp #ss-rooms .st-list-facilities .item br { display: none; }
.ss-sp #ss-rooms .st-list-facilities .item-box { width: auto !important; height: auto !important; border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; color: var(--text-tertiary); }
.ss-sp #ss-rooms .st-list-facilities .item-box i { font-size: 15px; }
.ss-sp #ss-rooms .st-list-facilities .item-box svg { width: 15px; height: 15px; }
.ss-sp #ss-rooms .st-list-facilities .infor { margin: 0 !important; font-size: 13px !important; color: var(--text-secondary) !important; }
.ss-sp #ss-rooms a.btn-show-price, .ss-sp #ss-rooms .btn-show-price { display: inline-flex !important; align-items: center; gap: 6px; white-space: nowrap; padding: 10px 18px !important; border-radius: 999px !important;
  background: #fff !important; color: var(--primary) !important; border: 1.5px solid var(--primary) !important; font-family: var(--font-label) !important; font-size: 13px !important; font-weight: 700 !important;
  text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; height: auto !important; line-height: 1.2 !important; }
.ss-sp #ss-rooms a.btn-show-price:hover { background: var(--primary) !important; color: #fff !important; }

/* Facilities: the same font and size as the rest of the page, and room between the groups */
.ss-sp .ss-fac { gap: 30px 28px; }
.ss-sp .ss-fac .st-attributes h2.st-heading-section { margin: 0 0 10px !important; font-size: 14.5px !important; }
.ss-sp .ss-fac .item-attribute .row { gap: 8px !important; }
.ss-sp .ss-fac .item-attribute .item { font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.45 !important; color: var(--text-secondary) !important; gap: 10px !important; }
.ss-sp .ss-fac .item-attribute .item svg path, .ss-sp .ss-fac .item-attribute .item svg circle, .ss-sp .ss-fac .item-attribute .item svg rect { stroke: var(--text-tertiary); }
.ss-sp .ss-hl { margin-bottom: 28px; }
.ss-sp .ss-fac + .ss-fac { margin-top: 24px; }

/* House rules: check in and check out side by side; the policies under them, full width */
.ss-sp #ss-rules table.st-properties, .ss-sp #ss-rules table.st-properties tbody { display: block; width: 100%; border-spacing: 0; }
.ss-sp #ss-rules table.st-properties tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ss-sp #ss-rules table.st-properties tr { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: #fafafa; }
.ss-sp #ss-rules table.st-properties tr:nth-child(n+3) { grid-column: 1 / -1; }
.ss-sp #ss-rules table.st-properties th, .ss-sp #ss-rules table.st-properties td { display: block; width: auto !important; padding: 0 !important; background: none !important; border-radius: 0 !important; }
.ss-sp #ss-rules table.st-properties th { font-size: 13px; color: var(--text-tertiary); font-weight: 600; }
.ss-sp #ss-rules table.st-properties td { font-family: var(--font-label); font-size: 16px; font-weight: 600; color: var(--navy); }
.ss-sp #ss-rules table.st-properties tr:nth-child(n+3) td { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--text-secondary); }

/* The right column, as designed: one white card each, violet eyebrow, the price big, two buttons */
.ss-sp .ss-card__eye { margin: 0 0 8px; font-family: var(--font-label); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.ss-sp .sl-panel { background: #fff !important; border: 1px solid var(--border) !important; border-radius: 16px !important; box-shadow: var(--sh-1) !important; padding: 20px !important; }
.ss-sp .sl-panel .sl-panel-kicker { margin: 0 0 8px !important; font-family: var(--font-label) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .08em !important;
  text-transform: uppercase !important; color: var(--primary) !important; }
/* Price under the violet line (Chiran, 4 Nov 2026): 10px clear space above it, and the amount 24px, not 30. */
.ss-sp .sl-panel .sl-panel-price { margin: 10px 0 10px !important; line-height: 1.2 !important; font-family: var(--font-label) !important; font-size: 13px !important; color: var(--text-tertiary) !important; }
.ss-sp .sl-panel .sl-panel-price b { font-family: var(--font-heading) !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -.02em; color: var(--navy) !important; margin: 0 4px; }
.ss-sp .sl-panel .sl-panel-says { margin: 0 0 14px !important; font-size: 13.5px !important; line-height: 1.55 !important; color: var(--text-secondary) !important; }
.ss-sp .sl-panel .sl-panel-count { display: inline-block; margin: 0 0 4px !important; padding: 0 !important; background: none !important; font-family: var(--font-label); font-size: 12.5px !important; color: var(--text-tertiary) !important; }
.ss-sp .sl-panel .sl-btn { display: flex !important; width: 100%; box-sizing: border-box; justify-content: center; align-items: center; margin: 8px 0 0 !important; padding: 12px 22px !important; border-radius: 999px !important;
  font-family: var(--font-label) !important; font-size: 14px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none !important; }
.ss-sp .sl-panel .sl-btn--primary { background: var(--primary) !important; color: #fff !important; border: 1.5px solid var(--primary) !important; }
.ss-sp .sl-panel .sl-btn--outline { background: #fff !important; color: var(--primary) !important; border: 1.5px solid var(--primary) !important; }
.ss-sp .sl-panel .sl-panel-small { margin: 10px 0 0 !important; text-align: center; font-size: 12.5px !important; color: var(--text-tertiary) !important; }

.ss-sp .ss-host { background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh-1); padding: 18px 20px 20px; }
.ss-sp .ss-host__top { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.ss-sp .ss-host__av { width: 56px; height: 56px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--ring); background: var(--surface-2); }
.ss-sp .ss-host__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-sp .ss-host__av--in { background: var(--tint); color: var(--ink); font-family: var(--font-label); font-weight: 700; font-size: 17px; }
.ss-sp .ss-host__av--ss { background: var(--primary); box-shadow: none; } .ss-sp .ss-host__av--ss img { width: 38px; height: auto; object-fit: contain; }
.ss-sp .ss-host__n { display: block; font-family: var(--font-heading); font-size: 18px; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.ss-sp .ss-host__role { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--tint); color: var(--ink); font-family: var(--font-label); font-size: 11.5px; font-weight: 700; }
.ss-sp .ss-host__l { list-style: none; margin: 0 0 14px; padding: 12px 0 0; border-top: 1px solid var(--border-soft); display: grid; gap: 8px; }
.ss-sp .ss-host__l li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--text-secondary); }
.ss-sp .ss-host__l svg { width: 15px; height: 15px; color: var(--primary); flex: none; }
.ss-sp .ss-host__btn { display: inline-flex; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--primary); color: var(--primary) !important; background: #fff;
  font-family: var(--font-label); font-size: 13px; font-weight: 700; text-decoration: none !important; }
.ss-sp .ss-host__btn:hover { background: var(--primary); color: #fff !important; }
/* The guide's second button, "All Ravi's trips" (trip page, design section 2, 25 Oct 2026): beside See profile. */
.ss-sp .ss-host__btn + .ss-host__btn { margin-left: 8px; }
.ss-sp .ss-host__btn--ghost { border-color: var(--border, #e4e4ec); color: var(--foreground, #090920) !important; }
.ss-sp .ss-host__btn--ghost:hover { border-color: var(--primary); background: #fff; color: var(--primary) !important; }
@media (max-width: 380px) { .ss-sp .ss-host__btn + .ss-host__btn { margin: 8px 0 0; } }
.ss-sp .ss-trust { background: #fafafa !important; box-shadow: none; }
@media (max-width: 599px) {
  .ss-sp #ss-rooms .item.st-border-radius > form > .row { grid-template-columns: 1fr; }
  .ss-sp #ss-rooms .item .row .row { flex-wrap: wrap; }
  .ss-sp #ss-rules table.st-properties tbody { grid-template-columns: 1fr; }
}

/* the same-area rows: 4 of the one listing card a row, 300px each (Chiran, 23 Oct 2026) */
.ss-sp .ss-nb__h { margin: 4px 0 12px; font-family: var(--font-label); font-size: 14px; font-weight: 700; color: var(--navy); }
.ss-sp .ss-nb__row { display: grid; grid-template-columns: repeat(4, 300px); justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.ss-sp .ss-nb__row .lc2 { width: 300px; max-width: 300px; }
.ss-sp .ss-nb__all { display: inline-flex; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--primary); color: var(--primary) !important; font-family: var(--font-label);
  font-size: 13px; font-weight: 700; text-decoration: none !important; }
@media (max-width: 1375px) { .ss-sp .ss-nb__row { grid-template-columns: repeat(auto-fill, 300px); justify-content: start; } }
@media (max-width: 699px) { .ss-sp .ss-nb__row { grid-template-columns: 1fr; } .ss-sp .ss-nb__row .lc2 { width: 100%; max-width: none; } }

/* round 2b: rooms caption, facility ticks and counts, the hotel's own activities as labels */
.ss-sp #ss-rooms .item .row .row > div:last-child { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ss-sp .ss-room-cap { font-family: var(--font-label); font-size: 12px; color: var(--text-tertiary); }
.ss-sp #ss-rooms a.btn-show-price svg { width: 14px; height: 14px; }
.ss-sp .ss-fac .st-attributes h2.st-heading-section small { margin-left: 6px; font-weight: 500; color: var(--text-tertiary); font-size: 12.5px; }
.ss-sp .ss-fac .ss-tick { display: inline-flex; flex: none; color: var(--success); }
.ss-sp .ss-fac .ss-tick svg { width: 15px !important; height: 15px !important; }
.ss-sp .ss-fac .ss-tick svg * { stroke: currentColor !important; }
.ss-sp .ss-sub { margin: 26px 0 10px; font-family: var(--font-label); font-size: 14px; font-weight: 700; color: var(--navy); }
.ss-sp .ss-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-sp .ss-chips i { font-style: normal; font-family: var(--font-label); font-size: 13px; padding: 7px 13px; border-radius: 999px; background: var(--surface-2); color: var(--navy); }

/* ═══ ROUND 3 — Chiran, 24 Oct 2026 ═══
   1. The two violet card titles in the right column are the same size and weight.
   2. The host card's lines sit closer together.
   3. ONE small button size on every inner page (the "See prices" size he liked): 13px, bold, 9px top and
      bottom, 16px left and right, line height 1.2 — about 36px tall. Full-width buttons only stretch sideways. */
.ss-sp .sl-panel p.sl-panel-kicker, .ss-sp .ss-host p.ss-card__eye {
  margin: 0 0 8px !important; font-family: var(--font-label) !important; font-size: 11.5px !important; font-weight: 700 !important;
  letter-spacing: .08em !important; line-height: 1.4 !important; text-transform: uppercase !important; color: var(--primary) !important; }
.ss-sp .ss-host__l { gap: 4px !important; line-height: 1.35; }
.ss-sp .ss-host__l li { line-height: 1.35 !important; }
.ss-sp .sl-panel .sl-btn, .ss-sp .ss-host .ss-host__btn, .ss-sp #ss-rooms a.btn-show-price, .ss-sp a.ss-nb__all, .ss-sp a.ss-btn.ss-tabs__go {
  padding: 9px 16px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; height: auto !important; min-height: 0 !important; }
.ss-sp .sl-panel .sl-btn { margin-top: 8px !important; }

/* 4. The breadcrumb on the photo banner: full white, a little larger, lifted away from the type label */
.ss-hero--gallery .ss-hero__crumb { margin: 0 0 16px !important; }
.ss-chrome.ss-hero.ss-hero--gallery .ss-hero__crumb ol { margin: 0 !important; font-size: 13px; }
.ss-chrome.ss-hero.ss-hero--gallery .ss-hero__crumb a, .ss-chrome.ss-hero.ss-hero--gallery .ss-hero__crumb span,
.ss-chrome.ss-hero.ss-hero--gallery .ss-hero__crumb li { color: #fff !important; opacity: 1 !important; font-weight: 500; }
.ss-chrome.ss-hero.ss-hero--gallery .ss-hero__crumb { text-shadow: 0 1px 2px rgba(9,9,32,.7), 0 0 14px rgba(9,9,32,.6) !important; }

/* ═══ ROUND 4 — Chiran, 24 Oct 2026 ═══
   Links on white turn violet on hover, never the theme's amber. (On a dark background white stays, with
   the amber kept for the active item only.) */
.ss-sp a:not(.ss-btn):not(.sl-btn):not(.ss-host__btn):not(.btn-show-price):not(.ss-nb__all):hover,
.ss-sp .ss-tabs__in > a:hover, .ss-sp .ss-tabs__in > a:focus-visible { color: var(--primary) !important; }
.ss-sp .lc2 a:hover .lc2__title, .ss-sp .lc2__title a:hover { color: var(--primary) !important; }
/* the breadcrumb on the photo: a white underline on hover — it is a link */
.ss-chrome.ss-hero .ss-hero__crumb a:hover, .ss-chrome.ss-hero .ss-hero__crumb a:focus-visible {
  color: #fff !important; text-decoration: underline !important; text-decoration-color: #fff !important; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* room names: "opens in a new tab" icon */
.ss-sp #ss-rooms h2.heading a { display: inline-flex; align-items: center; gap: 6px; }
.ss-sp #ss-rooms h2.heading .ss-ext { width: 14px; height: 14px; color: var(--text-tertiary); flex: none; }
.ss-sp #ss-rooms h2.heading a:hover .ss-ext { color: var(--primary); }
/* the dates bar above the rooms */
.ss-sp .ss-dates { margin: 0 0 16px; padding: 12px; border-radius: 12px; background: #fafafa; border: 1px solid var(--border-soft); }
.ss-sp .ss-dates .search-form { margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; }
.ss-sp .ss-dates form.form-check-availability-hotel { gap: 10px; flex-wrap: wrap; }
.ss-sp .ss-dates .button-search-wrapper .btn-search { padding: 9px 16px !important; border-radius: 999px !important; background: var(--primary) !important; color: #fff !important; border: 0 !important;
  font-family: var(--font-label) !important; font-size: 13px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.2 !important; height: auto !important; }
.ss-sp .ss-dates__note { margin: 8px 2px 0; font-family: var(--font-label); font-size: 12.5px; color: var(--text-tertiary); }
.ss-sp .ss-dates__note.is-warn { color: var(--warning-text); font-weight: 600; }
.ss-sp #ss-rooms .item .price-wrapper, .ss-sp #ss-rooms .item .price { font-family: var(--font-heading); color: var(--navy); }

/* a priced room: total on top, the nightly rate under it, "Room details" as the small outline button */
.ss-sp #ss-rooms .item .price-wrapper { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 2px; margin-bottom: 8px; }
.ss-sp #ss-rooms .item .price-wrapper .price { font-family: var(--font-label) !important; font-size: 17px !important; font-weight: 800 !important; color: var(--navy) !important; }
.ss-sp #ss-rooms .item .price-wrapper .unit { font-family: var(--font-label); font-size: 12px !important; color: var(--text-tertiary) !important; }
.ss-sp #ss-rooms .item .row .row > div:last-child { text-align: right; }
.ss-sp #ss-rooms a.show-detail { display: inline-flex !important; align-items: center; gap: 6px; padding: 9px 16px !important; border-radius: 999px !important; background: #fff !important;
  color: var(--primary) !important; border: 1.5px solid var(--primary) !important; font-family: var(--font-label) !important; font-size: 13px !important; font-weight: 700 !important;
  line-height: 1.2 !important; height: auto !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; }
.ss-sp #ss-rooms a.show-detail .ss-ext { width: 13px; height: 13px; }
.ss-sp #ss-rooms a.show-detail:hover { background: var(--primary) !important; color: #fff !important; }
.ss-sp #ss-rooms .item h2.heading a:hover { color: var(--primary) !important; }

/* the Rooms card's dates-and-guests pill: the Stays search bar, sitting in the card (24 Oct 2026) */
.ss-sp .ss-dates { padding: 0 !important; background: none !important; border: 0 !important; }
.ss-sp .ss-dates form.ssq--rooms { position: relative; margin: 0; max-width: none; }
.ss-sp .ss-dates form.ssq--rooms .ssq__bar { box-shadow: 0 1px 2px rgba(20,20,30,.05); border: 1px solid var(--border); }
.ss-sp .ss-dates__note { margin: 10px 4px 0; }
/* the pill sits in the card, not hanging off a photo */
.ss-sp .ss-dates.ss-chrome .ssq { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; display: inline-block; max-width: 100%; margin: 0; z-index: 20; }
.ss-sp .ss-dates.ss-chrome .ssq__panel { z-index: 40; }
/* the tab row's button once it sticks */
.ss-sp .ss-tabs a.ss-tabs__go { display: inline-flex; align-items: center; border-radius: 999px; background: var(--primary) !important; color: #fff !important; text-decoration: none !important; }
.ss-sp .ss-tabs a.ss-tabs__go:hover { background: var(--primary-dark) !important; color: #fff !important; }
@media (max-width: 899px) { .ss-sp .ss-dates.ss-chrome .ssq { display: block; } }

#ss-rooms.is-loading .st-list-rooms { opacity: .45; pointer-events: none; transition: opacity .2s; }
.ss-sp .ss-rooms-none { margin: 8px 4px; font-size: 14px; color: var(--text-secondary); }

/* the same-area rows: their titles big and bold, trips first (Chiran, 24 Oct 2026) */
.ss-sp .ss-nb__h { margin: 8px 0 14px !important; font-family: var(--font-heading) !important; font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.01em; color: var(--navy) !important; }
.ss-sp .ss-nb__row + .ss-nb__h { margin-top: 12px !important; }

/* WHITE BOXES (Chiran, 24 Oct 2026): the At a glance facts and the Facilities highlights are pure white with a
   thin #E5E5E5 border — no tinted background — so the words read clearly. */
.ss-sp .ss-facts__i, .ss-sp .ss-hl span { background: #fff !important; border: 1px solid #E5E5E5 !important; }

/* the rooms search bar sits in the CENTRE of the Rooms card, its note under it (Chiran, 24 Oct 2026) */
.ss-sp .ss-dates form.ssq--rooms { display: block !important; width: fit-content; max-width: 100%; margin: 0 auto !important; }   /* an inline-block ignores auto side margins */
.ss-sp .ss-dates__note { text-align: center; }

/* ═══ TRIP PAGE ROUND 1 (Chiran, 24 Oct 2026) ═══════════════════════════════════════════════════════════ */
/* AT A GLANCE on trips and experiences (the theme's infor row): the same white boxes as the hotel's facts —
   a violet icon tile, a small label, the value in bold; canonical icons (sarisara_sp_infor_icons). */
.ss-sp .st-service-feature { margin: 0; }
.ss-sp .st-service-feature > .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 !important; }
.ss-sp .st-service-feature > .row > [class*="col-"] { width: auto; max-width: none; flex: none; padding: 0 !important; margin: 0 !important; }
.ss-sp .st-service-feature .item { display: flex !important; align-items: center !important; gap: 12px; height: 100%; padding: 12px 14px !important; margin: 0 !important;
  border: 1px solid #E5E5E5 !important; border-radius: 12px; background: #fff !important; box-shadow: none !important; }
.ss-sp .st-service-feature .item .icon { width: 40px; height: 40px; flex: none; margin: 0 !important; border: 0 !important; border-radius: 10px; background: var(--primary-ultra-light) !important;
  color: var(--primary); display: grid; place-items: center; }
.ss-sp .st-service-feature .item .icon svg { width: 20px !important; height: 20px !important; display: block; }
.ss-sp .st-service-feature .item .icon i { font-size: 20px; color: var(--primary); }
.ss-sp .st-service-feature .item .info { min-width: 0; }
.ss-sp .st-service-feature .item .name { display: block; margin: 0 0 2px !important; font-family: var(--font-label); font-size: 11.5px !important; font-weight: 500 !important; line-height: 1.3; color: var(--text-tertiary) !important; }
.ss-sp .st-service-feature .item .value { margin: 0 !important; font-family: var(--font-label); font-size: 14px !important; font-weight: 600 !important; line-height: 1.35; color: var(--navy) !important; }
@media (max-width: 991px) { .ss-sp .st-service-feature > .row { grid-template-columns: 1fr 1fr; } }

/* DETAILS (attributes): the theme's equal-height script set the tags to 0px tall, so the card looked empty */
.ss-sp .ss-fac .item.has-matchHeight { height: auto !important; }

/* GROUP DISCOUNTS: a quiet Sarisara table */
.ss-sp #ss-discount .st-hr, .ss-sp #ss-discount .stt-discount > .st-heading-section { display: none; }
.ss-sp #ss-discount .stt-discount { border: 0; background: none; }
.ss-sp #ss-discount .accordion-body { padding: 0; }
.ss-sp #ss-discount h5 { margin: 0 0 8px; font-family: var(--font-label); font-size: 13px; font-weight: 700; color: var(--navy); }
.ss-sp #ss-discount h5.discount-child { margin-top: 18px; }
.ss-sp #ss-discount .st-program { border: 1px solid #E5E5E5; border-radius: 12px; overflow: hidden; box-shadow: none; }
.ss-sp #ss-discount table { margin: 0; font-family: var(--font-label); font-size: 13.5px; }
.ss-sp #ss-discount table th, .ss-sp #ss-discount table td { padding: 10px 14px !important; border-color: #EFEFF4 !important; color: var(--navy); font-weight: 500; vertical-align: middle; }
.ss-sp #ss-discount table thead th { background: #fafafa; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }

/* THE BOOKING BOX on a trip: one card, thin lines between rows, our steppers and buttons */
.ss-sp--trip #ss-plan .form-date-search, .ss-sp--trip #ss-plan .form-guest-search { border: 0 !important; box-shadow: none !important; background: none !important; padding: 0 !important; margin: 0 !important; }
.ss-sp--trip #ss-plan .form-date-field, .ss-sp--trip #ss-plan .guest-wrapper { padding: 14px 0 !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid #EFEFF4 !important; background: none !important; gap: 10px; }
.ss-sp--trip #ss-plan .guest-wrapper:has(.infant_number) { display: none !important; }   /* no infants on Sarisara (24 Oct 2026); the value stays 0 */
.ss-sp--trip #ss-plan label { font-family: var(--font-label); font-size: 14px !important; font-weight: 600 !important; color: var(--navy) !important; margin: 0 0 2px !important; }
.ss-sp--trip #ss-plan .guest-wrapper .render, .ss-sp--trip #ss-plan .check-in-render { font-family: var(--font-label); font-size: 12.5px !important; color: var(--text-tertiary) !important; white-space: nowrap; }
.ss-sp--trip #ss-plan .check-in-render { font-size: 14px !important; color: var(--navy) !important; font-weight: 500; }
.ss-sp--trip #ss-plan .st-number-wrapper { gap: 10px; }
.ss-sp--trip #ss-plan .st-number-wrapper span.prev, .ss-sp--trip #ss-plan .st-number-wrapper span.next { width: 32px; height: 32px; border-radius: 999px; border: 1px solid #E5E5E5; display: grid; place-items: center;
  color: var(--navy); background: #fff; cursor: pointer; transition: border-color .15s, color .15s; }
.ss-sp--trip #ss-plan .st-number-wrapper span.prev:hover, .ss-sp--trip #ss-plan .st-number-wrapper span.next:hover { border-color: var(--primary); color: var(--primary); }
.ss-sp--trip #ss-plan .st-number-wrapper span svg { width: 14px; height: 14px; display: block; }
.ss-sp--trip #ss-plan .st-number-wrapper input { width: 28px !important; padding: 0 !important; border: 0 !important; text-align: center; font-family: var(--font-label); font-size: 15px !important; font-weight: 600; color: var(--navy); background: none !important; box-shadow: none !important; }
.ss-sp--trip #ss-plan button.sarisara-next-avail-btn { padding: 9px 16px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; font-family: var(--font-label) !important; }
.ss-sp--trip #ss-plan .sarisara-booking-price-summary .price-line > span:first-child { font-weight: 500 !important; }
.ss-sp--trip #ss-plan .sarisara-booking-price-summary .price-line.total-charges > span:first-child { font-weight: 700 !important; }
.ss-sp--trip #ss-plan .submit-group button.btn-book-ajax { width: 100%; padding: 13px 22px !important; border-radius: 999px !important; border: 0 !important; background: var(--primary) !important; color: #fff !important;
  font-family: var(--font-label) !important; font-size: 15px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; }
.ss-sp--trip #ss-plan .submit-group button.btn-book-ajax:hover { background: var(--primary-dark, #5F00CC) !important; }
.ss-sp--trip #ss-plan .st-group-form { padding: 2px 18px 4px !important; }
.ss-sp--trip #ss-plan .guest-wrapper:last-of-type { border-bottom: 0 !important; }
.ss-sp--trip #ss-plan .st-number-wrapper span.prev, .ss-sp--trip #ss-plan .st-number-wrapper span.next { display: grid !important; line-height: 0 !important; padding: 0 !important; }
.ss-sp--trip #ss-plan .submit-group button.btn-book-ajax { display: block !important; height: auto !important; min-height: 48px; line-height: 1.2 !important; }

/* ═══ TRIP PAGE ROUND 2 — to the approved design, section 2 / 2b / 2c (Chiran, 24 Oct 2026) ═══════════════ */
/* the route: the stops in order above the map */
.ss-sp .ss-rs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.ss-sp .ss-rs__s { display: inline-flex; gap: 10px; align-items: center; padding: 8px 14px 8px 8px; border: 1px solid #E5E5E5; border-radius: 12px; background: #fff; }
.ss-sp .ss-rs__s > b { width: 28px; height: 28px; flex: none; border-radius: 8px; background: #2463EB; color: #fff; display: grid; place-items: center; font-family: var(--font-label); font-size: 13px; font-weight: 700; }
.ss-sp .ss-rs__s strong { display: block; font-family: var(--font-label); font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.25; }
.ss-sp .ss-rs__s small { display: block; font-family: var(--font-label); font-size: 12px; color: var(--text-tertiary); }
.ss-sp .ss-rs__s small i { font-style: normal; }
.ss-sp .ss-rs__ar { color: var(--text-tertiary); display: inline-flex; } .ss-sp .ss-rs__ar svg { width: 14px; height: 14px; }
.ss-sp #ss-route .st-map-wrapper > .st-flex, .ss-sp #ss-route .st-hr { display: none !important; }
.ss-sp #ss-route .st-map, .ss-sp #ss-route .ss-jm { margin: 0 !important; border-radius: 12px; overflow: hidden; }
/* The place in words when a listing has no point on the map (an island-wide festival), 25 Oct 2026 */
.ss-sp .ss-where__t { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 14px; color: var(--text-secondary); }
.ss-sp .ss-where__t svg { width: 18px; height: 18px; flex: none; color: var(--primary); }

/* day by day: no old "Itinerary Summary" block (the price box carries the money); Expand / Collapse as pills */
.ss-sp--trip #sarisara-frontend-itinerary-summary { display: none !important; }
.ss-sp .itinerary-controls { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 14px !important; }
.ss-sp .itinerary-controls .itinerary-control-btn { margin: 0 !important; padding: 8px 14px !important; border-radius: 999px !important; border: 1px solid #E5E5E5 !important; background: #fff !important;
  color: var(--navy) !important; font-family: var(--font-label) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important; text-transform: none !important; }
/* Neutral (white, dark words) by default; Expand All turns light violet only while EVERY day is open,
   and Collapse All puts both back to neutral (Chiran, 24 Oct 2026). Hover only colours the edge and words. */
body .ss-sp .itinerary-controls button.itinerary-control-btn { background: #fff !important; border-color: #E5E5E5 !important; color: var(--navy) !important; }
body .ss-sp .itinerary-controls button.itinerary-control-btn:hover { background: #fff !important; border-color: var(--primary) !important; color: var(--primary) !important; }
body .ss-sp .itinerary-controls button.itinerary-control-btn.is-on,
body .ss-sp .itinerary-controls button.itinerary-control-btn.is-on:hover { background: var(--primary-ultra-light) !important; border-color: #D9C2FF !important; color: var(--primary) !important; }
.ss-sp .itinerary-controls .itinerary-control-btn:hover { border-color: var(--primary) !important; color: var(--primary) !important; }

/* highlights, what is included, group discounts */
.ss-sp .ss-hl2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ss-sp .ss-hl2 > span { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 12px; background: var(--primary-ultra-light); color: var(--primary); }
.ss-sp .ss-hl2 > span svg { width: 22px; height: 22px; flex: none; }
.ss-sp .ss-hl2 b { font-family: var(--font-label); font-size: 14px; font-weight: 600; color: var(--navy); }
.ss-sp .ss-ie { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ss-sp .ss-ie__h { margin: 0 0 8px !important; font-family: var(--font-label); font-size: 13px; font-weight: 700; }
.ss-sp .ss-ie__h--y { color: var(--success-dark, #237F00); } .ss-sp .ss-ie__h--n { color: var(--text-secondary); }
.ss-sp .ss-ie__c > span { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 14px; line-height: 1.45; color: var(--text-primary); }
.ss-sp .ss-ie__c > span svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.ss-sp .ss-ie__c:first-child svg { color: var(--success); } .ss-sp .ss-ie__c:last-child svg { color: var(--text-tertiary); }
.ss-sp .ss-gd { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; background: var(--success-light, #EAF7E4); color: var(--success-dark, #237F00); }
.ss-sp .ss-gd > svg { width: 22px; height: 22px; flex: none; }
.ss-sp .ss-gd p { margin: 0 0 4px !important; font-size: 14px; line-height: 1.5; color: var(--text-primary); }
.ss-sp .ss-gd p b { font-weight: 700; color: var(--navy); }
.ss-sp .ss-gd p.ss-gd__n { margin: 6px 0 0 !important; font-size: 13px; color: var(--text-secondary); }
@media (max-width: 699px) { .ss-sp .ss-hl2, .ss-sp .ss-ie { grid-template-columns: 1fr; gap: 10px; } }

/* on this trip: the same card row as "In the same area" */
.ss-sp #ss-ontrip { margin-bottom: 24px; }

/* THE PRICE BOX (design 2 + 2c): one card — title, start date + next available date, adults and children
   side by side, the busy note in amber, plain charge lines, the total, the Apply line, one button, a note. */
.ss-sp--trip #ss-plan .st-form-book-wrapper { padding: 20px 20px 18px !important; border: 1px solid #E5E5E5 !important; border-radius: 16px !important; box-shadow: 0 1px 2px rgba(20,20,30,.05) !important; background: #fff; }
.ss-sp--trip #ss-plan .ss-pc__eye { margin: 0 0 12px !important; font-family: var(--font-label); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.ss-sp--trip #ss-plan .st-form-booking-action { padding: 0 !important; }
.ss-sp--trip #ss-plan .st-group-form { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
.ss-sp--trip #ss-plan .form-date-search { display: flex; flex-direction: column; }
.ss-sp--trip #ss-plan .sarisara-guide-busy-note { order: 3; display: flex !important; gap: 8px; align-items: flex-start; margin: 2px 0 12px !important; padding: 10px 12px !important; border: 0 !important; border-radius: 10px !important;
  background: #F8F4FF !important; color: #5C00CC !important; font-size: 12.5px !important; line-height: 1.45 !important; } /* light purple, never light yellow (Chiran, 28 Oct 2026) */
.ss-sp--trip #ss-plan .ss-pc__nic { flex: none; display: inline-flex; margin-top: 1px; } .ss-sp--trip #ss-plan .ss-pc__nic svg { width: 15px; height: 15px; }
.ss-sp--trip #ss-plan .form-date-field { order: 1; display: flex !important; gap: 8px !important; align-items: stretch !important; padding: 0 !important; margin: 0 0 10px !important; border: 0 !important; }
.ss-sp--trip #ss-plan .form-date-field .date-wrapper { position: relative; flex: 1 1 auto; display: flex !important; align-items: center; gap: 10px; padding: 10px 12px !important; border: 1px solid #E5E5E5; border-radius: 12px; cursor: pointer; background: #fff; }
.ss-sp--trip #ss-plan .form-date-field .date-wrapper > i { display: none; }
.ss-sp--trip #ss-plan .form-date-field .check-in-input, .ss-sp--trip #ss-plan .form-date-field .check-in-out-input { position: absolute !important; opacity: 0 !important; pointer-events: none; width: 1px !important; height: 1px !important; border: 0 !important; }
.ss-sp--trip #ss-plan .ss-pc__ic { flex: none; display: inline-flex; color: var(--primary); } .ss-sp--trip #ss-plan .ss-pc__ic svg { width: 18px; height: 18px; }
.ss-sp--trip #ss-plan .check-in-wrapper label { display: block; margin: 0 !important; font-family: var(--font-label); font-size: 11px !important; font-weight: 500 !important; color: var(--text-tertiary) !important; }
.ss-sp--trip #ss-plan .check-in-wrapper .check-in-render { font-family: var(--font-label); font-size: 14px !important; font-weight: 700; color: var(--navy) !important; white-space: nowrap; }
.ss-sp--trip #ss-plan button.sarisara-next-avail-btn { margin: 0 !important; padding: 0 12px !important; border-radius: 12px !important; font-size: 12px !important; white-space: nowrap; }
.ss-sp--trip #ss-plan .form-guest-search { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 10px !important; }
.ss-sp--trip #ss-plan .form-guest-search .guest-wrapper { position: relative; display: grid !important; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 6px;
  padding: 10px 12px !important; border: 1px solid #E5E5E5 !important; border-radius: 12px; background: #fff; }
.ss-sp--trip #ss-plan .form-guest-search .guest-wrapper .ss-pc__ic { grid-row: 1; grid-column: 1; }
.ss-sp--trip #ss-plan .form-guest-search .guest-wrapper .check-in-wrapper { grid-row: 1; grid-column: 2; display: flex; gap: 4px; align-items: baseline; }
.ss-sp--trip #ss-plan .form-guest-search .guest-wrapper .check-in-wrapper label { font-size: 11px !important; color: var(--text-tertiary) !important; font-weight: 500 !important; }
.ss-sp--trip #ss-plan .form-guest-search .guest-wrapper .check-in-wrapper .render { font-size: 11px !important; color: var(--text-tertiary) !important; }
.ss-sp--trip #ss-plan .form-guest-search .guest-wrapper .check-in-wrapper .render::before { content: '· '; }
.ss-sp--trip #ss-plan .form-guest-search .guest-wrapper .select-wrapper { grid-row: 2; grid-column: 1 / -1; }
.ss-sp--trip #ss-plan .form-guest-search .st-number-wrapper { justify-content: space-between !important; }
.ss-sp--trip #ss-plan .form-guest-search .st-number-wrapper input { order: -1; width: auto !important; flex: 1; text-align: left !important; font-size: 16px !important; font-weight: 700 !important; }
.ss-sp--trip #ss-plan .form-guest-search .st-number-wrapper span.prev, .ss-sp--trip #ss-plan .form-guest-search .st-number-wrapper span.next { width: 28px !important; height: 28px !important; margin-left: 6px; }
.ss-sp--trip #ss-plan .guest_name_input { display: none !important; }
/* the charge lines and the total */
.ss-sp--trip #ss-plan .sarisara-booking-price-summary { margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
.ss-sp--trip #ss-plan .sarisara-booking-price-summary .price-line { padding: 8px 0 !important; border: 0 !important; border-bottom: 1px dashed #E5E5E5 !important; font-size: 14px !important; }
.ss-sp--trip #ss-plan .sarisara-booking-price-summary .price-line > span:first-child { font-family: var(--font-body); font-weight: 400 !important; color: var(--text-secondary) !important; font-size: 14px !important; }
.ss-sp--trip #ss-plan .sarisara-booking-price-summary .price-line .value { font-family: var(--font-label); font-weight: 600 !important; color: var(--navy) !important; font-size: 14px !important; }
.ss-sp--trip #ss-plan .sarisara-booking-price-summary .price-line.total-charges { align-items: baseline; padding: 12px 0 4px !important; border: 0 !important; margin: 0 !important; }
.ss-sp--trip #ss-plan .sarisara-booking-price-summary .price-line.total-charges > span:first-child { font-family: var(--font-label); font-weight: 700 !important; color: var(--navy) !important; }
.ss-sp--trip #ss-plan .sarisara-booking-price-summary .price-line.total-charges .value { font-family: var(--font-heading); font-size: 24px !important; font-weight: 700 !important; color: var(--navy) !important; letter-spacing: -.01em; }
.ss-sp--trip #ss-plan .sarisara-total-charge, .ss-sp--trip #ss-plan .total-price-book { display: none !important; }
.ss-sp--trip #ss-plan .ss-pc__s { margin: 8px 0 0 !important; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.ss-sp--trip #ss-plan .submit-group { margin: 12px 0 0 !important; padding: 0 !important; }
.ss-sp--trip #ss-plan .submit-group button.btn-book-ajax { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100% !important; margin: 0 !important; }
.ss-sp--trip #ss-plan .submit-group button.btn-book-ajax svg { width: 16px; height: 16px; flex: none; }
.ss-sp--trip #ss-plan .submit-group button.btn-book-ajax[disabled], .ss-sp--trip #ss-plan .submit-group button.btn-book-ajax.disabled { background: var(--surface-2, #F1F1F5) !important; color: var(--text-tertiary) !important; }
.ss-sp--trip #ss-plan .message-wrapper:empty, .ss-sp--trip #ss-plan .message-wrapper-2:empty { display: none; }
/* the tabs bar shows the total too */
.ss-sp .ss-tabs__p em { font-style: normal; font-size: 13px; color: var(--text-secondary); }
/* round 2 fixes */
.ss-sp--trip #ss-plan .form-guest-search .guest-wrapper:has(.infant_number) { display: none !important; }
.ss-sp--trip #ss-plan .form-guest-search { display: flex !important; flex-wrap: wrap; gap: 10px; order: 2; }
.ss-sp--trip #ss-plan .form-guest-search > .guest-wrapper { flex: 1 1 calc(50% - 5px); min-width: 0; }
.ss-sp--trip #ss-plan .form-date-field { flex-wrap: nowrap !important; justify-content: flex-start !important; }
.ss-sp--trip #ss-plan .form-date-field .date-wrapper { justify-content: flex-start !important; }
.ss-sp--trip #ss-plan .form-date-field .date-wrapper .check-in-wrapper { text-align: left; }
.ss-sp--trip #ss-plan button.sarisara-next-avail-btn { flex: none; align-self: stretch; padding: 8px 12px !important; height: auto !important; min-height: 0 !important; }
.ss-sp--trip #ss-plan .service-charge-rate { font-weight: inherit !important; }
.ss-sp .itinerary-controls .itinerary-control-btn { height: auto !important; min-height: 0 !important; }
.ss-sp--trip .sarisara-itinerary-container, .ss-sp--trip .sarisara-itinerary-redesign { background: none !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
.ss-sp--trip #ss-plan .form-date-field { flex-direction: row !important; }
.ss-sp--trip #ss-plan .form-date-field .date-wrapper { min-width: 0; }
.ss-sp--trip #ss-plan .form-guest-search::before, .ss-sp--trip #ss-plan .form-guest-search::after { display: none !important; content: none !important; }
.ss-sp--trip #ss-plan .form-guest-search > .guest-wrapper { width: auto !important; margin: 0 !important; flex: 1 1 0 !important; }
.ss-sp--trip #ss-plan .form-guest-search .guest-wrapper .check-in-wrapper { flex-wrap: wrap; min-width: 0; }
.ss-sp--trip #ss-plan .service-charge-rate { font-size: inherit !important; color: inherit !important; font-family: inherit !important; }
body .ss-sp .itinerary-controls button.itinerary-control-btn { padding: 7px 14px !important; line-height: 1.2 !important; }
.ss-sp--trip #ss-plan .form-guest-search .guest-wrapper .select-wrapper { width: 100%; min-width: 0; }
.ss-sp--trip #ss-plan .form-guest-search .st-number-wrapper { display: flex !important; width: 100% !important; gap: 6px !important; }
.ss-sp--trip #ss-plan .form-guest-search .st-number-wrapper input { flex: 1 1 auto !important; min-width: 0 !important; width: 20px !important; }
.ss-sp--trip #ss-plan .form-guest-search .st-number-wrapper span.prev, .ss-sp--trip #ss-plan .form-guest-search .st-number-wrapper span.next { flex: none !important; margin: 0 !important; }
.ss-sp--trip #ss-plan button.sarisara-next-avail-btn { max-width: 120px; white-space: normal !important; line-height: 1.25 !important; text-align: center; }
@media (max-width: 699px) { .ss-sp .ss-rs { flex-direction: column; align-items: stretch; gap: 8px; } .ss-sp .ss-rs__ar { display: none; } }

/* an opened stay or activity in Day by day (design 2b): the photo on the left, the words on the right, the
   name not repeated, the room table under both, the room facts as a plain row — trip page only */
.ss-sp--trip .service-details-inner { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 18px; row-gap: 8px; align-items: start; }
.ss-sp--trip .service-details-inner > * { grid-column: 2; min-width: 0; }
.ss-sp--trip .service-details-inner > .image-carousel { grid-column: 1; grid-row: 1 / span 3; margin: 0 !important; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; height: auto !important; }
.ss-sp--trip .service-details-inner > .image-carousel .carousel-wrapper, .ss-sp--trip .service-details-inner > .image-carousel .carousel-item, .ss-sp--trip .service-details-inner > .image-carousel img { height: 100% !important; }
.ss-sp--trip .service-details-inner > .image-carousel img { width: 100%; object-fit: cover; }
.ss-sp--trip .service-details-inner > .image-carousel .carousel-nav { width: 30px !important; height: 30px !important; padding: 0 !important; }
.ss-sp--trip .service-details-inner > .image-carousel .carousel-nav svg { width: 14px; height: 14px; }
.ss-sp--trip .service-details-inner > .hotel-name-link, .ss-sp--trip .service-details-inner > .hotel-location-link,
.ss-sp--trip .service-details-inner > .activity-name-link, .ss-sp--trip .service-details-inner > .activity-location-link { display: none !important; }
.ss-sp--trip .service-details-inner > .details-description { margin: 0 !important; font-size: 14px; line-height: 1.6; color: var(--text-primary); }
.ss-sp--trip .service-details-inner > .read-more-toggle { justify-self: start; color: var(--primary) !important; text-decoration: none !important; font-family: var(--font-label); font-size: 13px; font-weight: 600; text-transform: lowercase; }
.ss-sp--trip .service-details-inner > .read-more-toggle::first-letter { text-transform: uppercase; }
.ss-sp--trip .service-details-inner > .room-table, .ss-sp--trip .service-details-inner > .activity-day-cards, .ss-sp--trip .service-details-inner > .facilities { grid-column: 1 / -1; margin-top: 8px !important; }
.ss-sp--trip .room-table .room-amenities { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 0 12px; padding: 10px 0 0 !important; background: none !important; }
.ss-sp--trip .room-table .room-amenities .amenity-card { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; text-align: left !important; min-height: 0 !important; }
.ss-sp--trip .room-table .room-amenities .amenity-card img { display: none !important; }
.ss-sp--trip .room-table .room-amenities .amenity-label { font-family: var(--font-label); font-size: 11px !important; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary) !important; }
.ss-sp--trip .room-table .room-amenities .amenity-value { font-family: var(--font-label); font-size: 14px !important; font-weight: 700 !important; color: var(--navy) !important; }
@media (max-width: 699px) {
  .ss-sp--trip .service-details-inner { grid-template-columns: 1fr; }
  .ss-sp--trip .service-details-inner > * , .ss-sp--trip .service-details-inner > .image-carousel { grid-column: 1; grid-row: auto; }
  .ss-sp--trip .service-details-inner > .image-carousel { order: -1; }
  .ss-sp--trip .room-table .room-amenities { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
}
.ss-sp--trip .service-details-inner > :not(.image-carousel):not(.details-description):not(.read-more-toggle):not(.hotel-name-link):not(.hotel-location-link) { grid-column: 1 / -1; }
@media (max-width: 699px) { .ss-sp--trip .service-details-inner > * { grid-column: 1 !important; } }
.ss-sp--trip #ss-plan .ss-pc__u6 { margin: -2px 0 10px !important; font-size: 12px; line-height: 1.45; color: var(--text-tertiary); }
.ss-sp--trip #ss-plan .ss-pc__u6 { order: 2; }
.ss-sp--trip #ss-plan .sarisara-login-hint { margin: 10px 0 0 !important; padding: 0 !important; text-align: center; background: none !important; border: 0 !important; }
.ss-sp--trip #ss-plan .sarisara-login-hint a.sarisara-login-hint-link { font-family: var(--font-label); font-size: 13px !important; font-weight: 600 !important; color: var(--primary) !important; text-decoration: none !important; }
.ss-sp--trip #ss-plan .sarisara-login-hint a.sarisara-login-hint-link:hover { text-decoration: underline !important; }

/* ═══ OPENED STAY / ACTIVITY — Design System 2b + 2d option B (Chiran, 24 Oct 2026) ═══════════════════════
   photos first in one row (one big 16:9, two small stacked), the words underneath, then the room table in the
   design's style. Replaces the photo-left layout above. */
.ss-sp--trip .service-details-inner { display: block !important; padding-bottom: 16px !important; }
.ss-sp--trip .service-details-inner > .image-carousel { display: none !important; }
.ss-sp--trip .ss-ph { margin: 2px 0 12px; }
.ss-sp--trip .ss-ph button.ss-ph__t { all: unset; position: relative; display: block; min-width: 0; min-height: 0; cursor: zoom-in; border-radius: 10px; overflow: hidden; }
.ss-sp--trip .ss-ph__t img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; border-radius: 10px; transition: transform .25s; }
.ss-sp--trip .ss-ph__t:hover img { transform: scale(1.02); }
.ss-sp--trip .ss-ph--b { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.ss-sp--trip .ss-ph__side { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; height: 0; min-height: 100%; }
.ss-sp--trip .ss-ph__side img { aspect-ratio: auto; }
.ss-sp--trip .ss-ph--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ss-sp--trip .ss-ph--1 .ss-ph__t img { max-height: 340px; }
.ss-sp--trip .ss-ph__n { position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(9,9,32,.62); color: #fff;
  font-family: var(--font-label); font-size: 12px; font-weight: 600; pointer-events: none; }
.ss-sp--trip .service-details-inner > .details-description { margin: 0 0 4px !important; font-family: var(--font-body); font-size: 14px !important; line-height: 1.6 !important; color: var(--text-primary) !important; }
.ss-sp--trip .service-details-inner > .details-description p { font-size: inherit !important; line-height: inherit !important; color: inherit !important; margin: 0 0 6px !important; }
.ss-sp--trip .service-details-inner > .read-more-toggle { display: inline-block; margin: 0 0 12px; font-size: 12.5px; }
@media (max-width: 699px) {
  .ss-sp--trip .ss-ph--b, .ss-sp--trip .ss-ph--2 { grid-template-columns: 1fr; }
  .ss-sp--trip .ss-ph__side { display: none; }   /* a phone shows the big photo; a tap opens all of them */
  .ss-sp--trip .ss-ph--2 .ss-ph__t + .ss-ph__t { display: none; }
}

/* the room table, as drawn in the design: white header, pale rows, thin lines, small capitals; the rooms and
   nights sit next to the price, so it reads rooms x nights x price per room = total (meals and extra bed before) */
.ss-sp--trip .room-table { margin: 4px 0 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; }
.ss-sp--trip .room-table .room-table-header, .ss-sp--trip .room-table .room-row {
  display: grid !important; grid-template-columns: minmax(0, 2.2fr) minmax(0, .8fr) minmax(0, 1.9fr) minmax(0, .9fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, .9fr) !important; }
.ss-sp--trip .room-table.room-table--no-prices .room-table-header, .ss-sp--trip .room-table.room-table--no-prices .room-row {
  grid-template-columns: minmax(0, 2.2fr) minmax(0, .8fr) minmax(0, 1.9fr) minmax(0, .9fr) minmax(0, .8fr) minmax(0, .8fr) !important; }
.ss-sp--trip .room-table .col-room-type { order: 1; } .ss-sp--trip .room-table .col-guests { order: 2; } .ss-sp--trip .room-table .col-meals { order: 3; }
.ss-sp--trip .room-table .col-extra-bed { order: 4; } .ss-sp--trip .room-table .col-count { order: 5; } .ss-sp--trip .room-table .col-nights { order: 6; }
.ss-sp--trip .room-table .col-price { order: 7; } .ss-sp--trip .room-table .col-total { order: 8; }
.ss-sp--trip .room-table .room-table-header { background: #fff !important; border: 1px solid #ECECF1 !important; border-bottom: 1px solid #ECECF1 !important; border-radius: 10px 10px 0 0; }
.ss-sp--trip .room-table .room-table-header > div { padding: 9px 10px !important; border-right: 1px solid #ECECF1 !important; background: none !important;
  font-family: var(--font-label) !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: var(--text-secondary) !important; text-align: left !important; line-height: 1.3 !important; display: flex; align-items: flex-end; }
.ss-sp--trip .room-table .room-row { background: #fafafa !important; border: 1px solid #ECECF1 !important; border-top: 0 !important; }
.ss-sp--trip .room-table .room-row:last-of-type { border-radius: 0 0 10px 10px; }
.ss-sp--trip .room-table .room-row > div { padding: 10px !important; border-right: 1px solid #ECECF1 !important; background: none !important; text-align: left !important; justify-content: flex-start !important;
  font-family: var(--font-label) !important; font-size: 13px !important; font-weight: 500 !important; color: var(--navy) !important; display: flex; align-items: center; }
.ss-sp--trip .room-table .room-table-header > div:last-child, .ss-sp--trip .room-table .room-row > div:last-child { border-right: 0 !important; }
.ss-sp--trip .room-table .room-row .col-room-type { font-weight: 600 !important; }
.ss-sp--trip .room-table .room-row .col-total { font-weight: 700 !important; }
.ss-sp--trip .room-table .room-row select.room-meal-select { display: none !important; }
.ss-sp--trip .room-table .ss-ml { display: flex; flex-wrap: wrap; gap: 4px; }
.ss-sp--trip .room-table .ss-ml button { all: unset; cursor: pointer; padding: 3px 6px; border-radius: 6px; border: 1px solid #E3E3E0; background: #fff; color: var(--text-secondary);
  font-family: var(--font-label); font-size: 10.5px; font-weight: 700; line-height: 1.2; }
.ss-sp--trip .room-table .ss-ml button:hover { border-color: var(--primary); color: var(--primary); }
.ss-sp--trip .room-table .ss-ml button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.ss-sp--trip .room-table .room-row select.room-extra-bed-select { padding: 3px 6px !important; height: auto !important; border: 1px solid #E3E3E0 !important; border-radius: 6px !important; background-color: #fff !important; font-size: 12px !important; }
/* the room facts under the table: plain, left-aligned, with room under them before the card's edge */
.ss-sp--trip .room-table .room-amenities { margin: 12px 0 0 !important; padding: 0 0 6px !important; border: 0 !important; gap: 16px !important; }
.ss-sp--trip .room-table .room-amenities .amenity-card { text-align: left !important; align-items: flex-start !important; }
.ss-sp--trip .room-table .room-amenities .amenity-label { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .05em !important; }
@media (max-width: 699px) {
  .ss-sp--trip .room-table .room-table-header { display: none !important; }
  .ss-sp--trip .room-table .room-row { grid-template-columns: 1fr 1fr !important; border-radius: 10px !important; border-top: 1px solid #ECECF1 !important; }
  .ss-sp--trip .room-table .room-row > div { border-right: 0 !important; }
  .ss-sp--trip .room-table .room-row .col-room-type { grid-column: 1 / -1; }
}
body .ss-sp--trip .room-table .ss-ml button { all: unset; box-sizing: border-box !important; display: inline-block !important; cursor: pointer; padding: 3px 6px !important; margin: 0 !important; border-radius: 6px !important; border: 1px solid #E3E3E0 !important;
  background: #fff !important; color: var(--text-secondary) !important; font-family: var(--font-label) !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: 0 !important; height: auto !important; min-height: 0 !important; opacity: 1 !important; }
body .ss-sp--trip .room-table .ss-ml button:hover { border-color: var(--primary) !important; color: var(--primary) !important; }
body .ss-sp--trip .room-table .ss-ml button.on { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
.ss-sp--trip .room-table .room-table-header > div { justify-content: flex-start !important; }
.ss-sp--trip .ss-ph--1 .ss-ph__t img { height: auto !important; aspect-ratio: 16 / 9 !important; max-height: 340px; }
.ss-sp--trip .service-details-inner > .room-allocation-section { border-top: 0 !important; padding-top: 0 !important; margin-top: 4px !important; }   /* no line between the words and the room table (as in the design) */
.ss-sp--trip #ss-plan .form-guest-search:not(:has(.guest-wrapper)) { display: none !important; }   /* a trip without guest fields (some driver trips): no empty gap */
/* the route section (Chiran, 24 Oct 2026): the pills first, then the stops with their days, then the map */
.ss-sp #ss-route .jm-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.ss-sp .ss-rs__s > b { width: auto !important; min-width: 28px; height: 28px; padding: 0 10px; border-radius: 8px; background: #7700FF !important; white-space: nowrap; font-size: 12.5px !important; }
.ss-sp .ss-rs__s small { white-space: nowrap; }
.ss-sp .ss-rs { gap: 8px; }
/* Expand all and Collapse all: one size (Chiran, 24 Oct 2026) */
body .ss-sp .itinerary-controls button.itinerary-control-btn { height: 36px !important; min-height: 36px !important; padding: 0 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; font-size: 13px !important; line-height: 1 !important; border-width: 1px !important; }
body .ss-sp .itinerary-controls button.itinerary-control-btn { min-width: 112px !important; }
.ss-sp--trip .ss-ph--1 .ss-ph__t, .ss-sp--trip .ss-ph--1 { width: 100%; } .ss-sp--trip .ss-ph--1 .ss-ph__t img { width: 100% !important; height: auto !important; aspect-ratio: 2.4 / 1 !important; max-height: none !important; }   /* one photo: the full card width, kept low */

/* ACTIVITIES OVER 2 OR 3 DAYS — Design System 2e (Chiran, 24 Oct 2026) */
.ss-sp--trip .activity-two-column-layout[data-ss-mdx] { display: none !important; }
.ss-sp--trip .ss-mdx { margin: 8px 0 4px; padding-top: 14px; border-top: 1px solid #ECECF1; }
.ss-sp--trip .service-item { --mdx-tone: #3C6B52; --mdx-tint: #DCEBE1; }
.ss-sp--trip .service-item.t-curated, .ss-sp--trip .service-item.t-local-expert { --mdx-tone: #8A6A2F; --mdx-tint: #F4EDE0; }
.ss-sp--trip .ss-mdx__h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px !important; font-family: var(--font-label); font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--navy); }
.ss-sp--trip .ss-mdx__h svg { width: 15px; height: 15px; color: var(--mdx-tone); }
.ss-sp--trip .ss-mdx__h small { margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: var(--mdx-tint); color: var(--mdx-tone); font-size: 11px; letter-spacing: 0; text-transform: none; }
.ss-sp--trip .ss-mdx__tabs { display: flex; gap: 8px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; }
.ss-sp--trip .ss-mdx__tabs::-webkit-scrollbar { display: none; }
body .ss-sp--trip button.ss-mdx__tab { all: unset; box-sizing: border-box; flex: none; display: inline-flex; flex-direction: column; gap: 1px; min-width: 104px; padding: 8px 16px; border-radius: 12px; border: 1px solid #E5E5E5; background: #fff; cursor: pointer; font-family: var(--font-label); }
body .ss-sp--trip button.ss-mdx__tab b { font-size: 14px; font-weight: 700; color: var(--navy); }
body .ss-sp--trip button.ss-mdx__tab small { font-size: 12px; color: var(--text-tertiary); }
body .ss-sp--trip button.ss-mdx__tab:hover { border-color: var(--mdx-tone); }
body .ss-sp--trip button.ss-mdx__tab.on { background: var(--mdx-tone); border-color: var(--mdx-tone); }
body .ss-sp--trip button.ss-mdx__tab.on b, body .ss-sp--trip button.ss-mdx__tab.on small { color: #fff; }
.ss-sp--trip .ss-mdx__p { background: #fafafa; border: 1px solid #ECECF1; border-radius: 12px; padding: 14px 16px; }
.ss-sp--trip .ss-mdx__pt { margin: 0 0 2px !important; font-family: var(--font-label); font-size: 15px; color: var(--navy); }
.ss-sp--trip .ss-mdx__pm { margin: 0 0 10px !important; font-size: 12.5px; color: var(--text-tertiary); }
.ss-sp--trip .ss-mdx__l { list-style: none; margin: 0 !important; padding: 0 !important; }
.ss-sp--trip .ss-mdx__l li { display: grid; grid-template-columns: 78px 1fr; gap: 12px; padding: 9px 0; border-top: 1px dashed #E3E3E0; margin: 0 !important; }
.ss-sp--trip .ss-mdx__l li:first-child { border-top: 0; }
.ss-sp--trip .ss-mdx__tm { font-family: var(--font-label); font-size: 12.5px; font-weight: 700; color: var(--mdx-tone); padding-top: 1px; }
.ss-sp--trip .ss-mdx__l b { display: block; font-family: var(--font-label); font-size: 14px; font-weight: 600; color: var(--navy); }
.ss-sp--trip .ss-mdx__l small { display: block; margin-top: 2px; font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
body .ss-sp--trip button.ss-mdx__tab.on { background: var(--mdx-tone, #3C6B52) !important; border-color: var(--mdx-tone, #3C6B52) !important; }
body .ss-sp--trip button.ss-mdx__tab { background: #fff !important; border: 1px solid #E5E5E5 !important; border-radius: 12px !important; padding: 8px 16px !important; height: auto !important; min-height: 0 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; }
body .ss-sp--trip button.ss-mdx__tab.on b, body .ss-sp--trip button.ss-mdx__tab.on small { color: #fff !important; }
.ss-sp--trip .ss-mdx__h { font-weight: 800 !important; font-size: 13px !important; }
.ss-sp--trip .ss-cu__note { margin: 8px 0 0 !important; font-size: 12.5px; color: var(--text-tertiary); }

/* ═══ THE TRIP BOX — Design System 2h (Chiran chose it, 24 Oct 2026) ═══ */
.ss-sp--trip #ss-plan.ss-tb-on .form-date-field, .ss-sp--trip #ss-plan.ss-tb-on .form-guest-search, .ss-sp--trip #ss-plan.ss-tb-on .ss-pc__u6 { display: none !important; }
.ss-sp--trip #ss-plan .ss-tb { order: 0; margin: 0 0 12px; }
.ss-sp--trip #ss-plan .sarisara-guide-busy-note { order: 3; }
.ss-sp--trip .ss-tb__p { display: flex; align-items: stretch; margin: 0 0 10px; border: 1px solid #E5E5E5; border-radius: 14px; background: #fff; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.ss-sp--trip .ss-tb__p:hover { border-color: #CDB3FF; }
.ss-sp--trip .ss-tb__p.on { border-color: #7700FF; box-shadow: 0 0 0 3px rgba(119,0,255,.12); }
body .ss-sp--trip button.ss-tb__a { all: unset; box-sizing: border-box; flex: 1; min-width: 0; display: flex; gap: 10px; align-items: center; padding: 10px 12px; cursor: pointer; }
body .ss-sp--trip button.ss-tb__a > svg { width: 18px; height: 18px; color: #7700FF; flex: none; }
.ss-sp--trip .ss-tb__a span { min-width: 0; }
.ss-sp--trip .ss-tb__a small { display: block; font-family: var(--font-label); font-size: 11px; color: var(--text-tertiary); line-height: 1.3; }
.ss-sp--trip .ss-tb__a b { display: block; font-family: var(--font-label); font-size: 14px; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-sp--trip .ss-tb__chev { margin-left: auto; color: var(--text-tertiary); display: grid; place-items: center; }
.ss-sp--trip .ss-tb__chev svg { width: 16px; height: 16px; }
.ss-sp--trip .ss-tb__p.on .ss-tb__chev svg { transform: rotate(180deg); }
body .ss-sp--trip #ss-plan .ss-tb__p button.sarisara-next-avail-btn { flex: none; align-self: center; margin: 0 8px 0 0 !important; padding: 0 14px !important; max-width: none; border-radius: 999px !important; background: #7700FF !important; color: #fff !important;
  font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; height: 34px !important; min-height: 0 !important; }
.ss-sp--trip .ss-tb__pop { margin: -2px 0 12px; border: 1px solid #E5E5E5; border-radius: 16px; background: #fff; box-shadow: 0 14px 34px rgba(9,9,32,.14); padding: 14px; }
.ss-sp--trip .ss-tb__pop[hidden] { display: none !important; }
/* our calendar */
.ss-sp--trip .ss-cal__h { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; font-family: var(--font-label); color: var(--navy); }
.ss-sp--trip .ss-cal__h b { font-size: 14px; font-weight: 700; }
body .ss-sp--trip button.ss-cal__nav { all: unset; box-sizing: border-box; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--navy); border: 1px solid #E5E5E5; }
body .ss-sp--trip button.ss-cal__nav:hover { border-color: #7700FF; color: #7700FF; }
body .ss-sp--trip button.ss-cal__nav[disabled] { opacity: .35; cursor: default; }
.ss-sp--trip .ss-cal__nav svg { width: 15px; height: 15px; }
.ss-sp--trip .ss-cal__w, .ss-sp--trip .ss-cal__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-family: var(--font-label); }
.ss-sp--trip .ss-cal__w i { font-style: normal; font-size: 11px; color: var(--text-tertiary); padding: 4px 0; }
.ss-sp--trip .ss-cal__g i { font-style: normal; font-size: 13px; padding: 7px 0; color: #C9C9D4; }
.ss-sp--trip .ss-cal__g i.off { text-decoration: line-through; }
body .ss-sp--trip .ss-cal__g button { all: unset; box-sizing: border-box; font-family: var(--font-label); font-size: 13px; color: var(--navy); padding: 7px 0; border-radius: 999px; cursor: pointer; text-align: center; }
body .ss-sp--trip .ss-cal__g button:hover { background: #F3ECFF; color: #7700FF; }
body .ss-sp--trip .ss-cal__g button.on { background: #7700FF; color: #fff; font-weight: 700; }
.ss-sp--trip .ss-cal__g.is-loading { opacity: .5; }
.ss-sp--trip .ss-tb__warn { margin: -2px 0 12px; padding: 10px 12px; border-radius: 12px; background: #FFF8E6; border: 1px solid #FFE2A0;
  font-family: var(--font-label); font-size: 12px !important; line-height: 16px !important; color: var(--navy); }
.ss-sp--trip .ss-tb__warn a { color: #7700FF; font-weight: 700; text-decoration: underline; }
.ss-sp--trip .ss-tb__warn.warning-flash { animation: ss-warn-flash .9s ease-out 1; }
@keyframes ss-warn-flash { 0% { box-shadow: 0 0 0 0 rgba(255,183,0,.55); } 100% { box-shadow: 0 0 0 10px rgba(255,183,0,0); } }
.ss-sp--trip .ss-cal__n, .ss-sp--trip .ss-stp__n { font-size: 12px !important; line-height: 16px !important; color: var(--text-tertiary); }
.ss-sp--trip .ss-cal__n { margin: 8px 0 0 !important; }
.ss-sp--trip .ss-cal__g i.wait { color: #DADAE2; }   /* still checking: no day can be picked yet */
.ss-sp--trip .ss-cal__n--wait { display: flex; align-items: center; gap: 8px; color: #7700FF; }
.ss-sp--trip .ss-cal__spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #E6D6FF; border-top-color: #7700FF; animation: ss-cal-spin .8s linear infinite; flex: none; }
@keyframes ss-cal-spin { to { transform: rotate(360deg); } }
.ss-sp--trip .ss-cal__n--err { color: #FF0A1F; }
body .ss-sp--trip button.ss-cal__retry { all: unset; cursor: pointer; color: #7700FF; font-weight: 700; text-decoration: underline; }
/* our steppers */
.ss-sp--trip .ss-stp__r { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #EFEFF4; }
.ss-sp--trip .ss-stp__r b { display: block; font-family: var(--font-label); font-size: 14px; color: var(--navy); }
.ss-sp--trip .ss-stp__r small { font-size: 12px; color: var(--text-tertiary); }
.ss-sp--trip .ss-stp__c { display: flex; align-items: center; gap: 12px; }
.ss-sp--trip .ss-stp__c output { min-width: 16px; text-align: center; font-family: var(--font-label); font-size: 15px; font-weight: 700; color: var(--navy); }
body .ss-sp--trip .ss-stp__c button { all: unset; box-sizing: border-box; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #E5E5E5; display: grid; place-items: center; cursor: pointer; color: var(--navy); }
body .ss-sp--trip .ss-stp__c button:hover { border-color: #7700FF; color: #7700FF; }
body .ss-sp--trip .ss-stp__c button[disabled] { color: #D0D0D8; cursor: default; border-color: #EFEFF4; }
.ss-sp--trip .ss-stp__c svg { width: 14px; height: 14px; }
.ss-sp--trip .ss-stp__n { margin: 10px 0 0 !important; }
.ss-sp--trip .ss-stp__n--cap { color: var(--navy) !important; font-weight: 600; }
/* Expand all and Collapse all on one line (the theme gave every button after the first a 10px top margin) */
.ss-sp .itinerary-controls { align-items: center !important; }
body .ss-sp .itinerary-controls button.itinerary-control-btn { margin: 0 !important; }
body.sibs-pending .ss-sp--trip #ss-plan .loader-wrapper { display: none !important; }   /* the group changed and waits for Apply: nothing is loading, so no cover over the Apply button (24 Oct 2026) */

/* "Experiences at this home" sits inside About the home: a sub-heading the size of a room name (17px), not a
   30px page heading (Chiran, 24 Oct 2026). */
body .ss-sp .sarisara-home-experiences__title { font-family: var(--font-label) !important; font-size: 17px !important; line-height: 24px !important; font-weight: 600 !important; color: var(--navy) !important; margin: 20px 0 4px !important; letter-spacing: 0 !important; text-transform: none !important; }
body .ss-sp .sarisara-home-experiences__note { font-size: 13px !important; line-height: 18px !important; color: var(--text-secondary) !important; margin: 0 0 12px !important; }

/* Experiences at this home in their own section card (Chiran, 24 Oct 2026): the list fills the card like the rooms do. */
body .ss-sp #ss-experiences .sarisara-home-experiences { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
body .ss-sp #ss-experiences .hx-exp-card { max-width: none !important; width: 100% !important; }
@media (max-width: 600px) { body .ss-sp #ss-experiences .hx-exp-name { -webkit-line-clamp: 3 !important; } }

/* THE PHONE BAR + PRICE SHEET (Chiran, 24 Oct 2026): under 992px the theme turns the price box into a full-screen
   sheet opened by .btn-mpopup; the bar sits at the bottom of the screen with the trip total. */
.ss-sp .ss-mbar { display: none; }
@media (max-width: 991px) {
  body #st-content-wrapper.ss-sp .ss-mbar { display: flex !important; gap: 12px; align-items: center; justify-content: space-between; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #E5E5E5; box-shadow: 0 -8px 24px -12px rgba(9,9,32,.25); }
  .ss-sp .ss-mbar__p { min-width: 0; font-family: var(--font-label); }
  .ss-sp .ss-mbar__p small { display: block; font-size: 11px; line-height: 14px; color: var(--text-tertiary); }
  .ss-sp .ss-mbar__p b { display: block; font-size: 14px; line-height: 18px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body .ss-sp .ss-mbar .btn-mpopup { flex: none; padding: 11px 18px !important; border-radius: 999px !important; background: #7700FF !important; color: #fff !important; font: 700 14px var(--font-label) !important; text-decoration: none !important; }
  body.single-st_tours { padding-bottom: 76px; }
  /* the sheet */
  body #st-content-wrapper.ss-sp--trip .fixed-on-mobile.open { padding: 64px 16px 32px !important; background: #FAFAFA; z-index: 1001; }
  body #st-content-wrapper.ss-sp--trip .fixed-on-mobile .close-icon { top: 14px !important; right: 14px !important; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #E5E5E5; background: #fff; display: grid !important; place-items: center; }
  body #st-content-wrapper.ss-sp--trip .fixed-on-mobile .close-icon svg { width: 18px; height: 18px; }
  /* THE SHEET, TIDIED (Chiran, 25 Oct 2026): no empty band above the price box; the close button sits in
     the box's own top-right corner; every card below (the guide or driver, the trust lines) keeps the same
     16px gap, the same as the 16px sides. */
  body #st-content-wrapper.ss-sp--trip .fixed-on-mobile.open { padding: 16px 16px 32px !important; display: flex !important; flex-direction: column; gap: 16px; }
  body #st-content-wrapper.ss-sp--trip .fixed-on-mobile.open > * { margin: 0 !important; flex-shrink: 0; }
  body #st-content-wrapper.ss-sp--trip .fixed-on-mobile.open .close-icon { position: absolute !important; top: 28px !important; right: 28px !important; left: auto !important; z-index: 3; }
  body #st-content-wrapper.ss-sp--trip .fixed-on-mobile.open .ss-pc__eye { padding-right: 48px; }
}
/* the theme's "From: USD 70.00" head (the guide's per-person rate) is hidden on desktop; it surfaced in the phone sheet */
body .ss-sp--trip #ss-plan .st-form-head-book { display: none !important; }
@media (max-width: 991px) {
  /* no trip request is sent from a phone (Chiran, 24 Oct 2026): the button and its line make way for the note */
  body .ss-sp--trip #ss-plan .submit-group, body .ss-sp--trip #ss-plan .ss-pc__after { display: none !important; }
  .ss-sp--trip #ss-plan .ss-pc__desk { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; padding: 12px 14px; border-radius: 12px; background: #F3ECFF; border: 1px solid #E3D3FF; color: var(--navy); }
  .ss-sp--trip #ss-plan .ss-pc__desk svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #7700FF; }
  .ss-sp--trip #ss-plan .ss-pc__desk p { margin: 0 !important; font-family: var(--font-label); font-size: 13px !important; line-height: 19px !important; color: var(--navy); }
  .ss-sp--trip #ss-plan .ss-pc__desk b { display: block; margin-bottom: 2px; }
  /* a little air between the tabs bar and the first card, and anchors land below the sticky bar */
  .ss-sp .ss-sp__wrap { padding-top: 28px !important; }
  .ss-sp .ss-sec { scroll-margin-top: 76px; }
}
@media (min-width: 992px) { .ss-sp--trip #ss-plan .ss-pc__desk { display: none; } }

/* ═════════ DAY BY DAY ON A PHONE — THE TIMELINE (Design System 2i, Chiran's pick, 24 Oct 2026) ═════════
   Phone only (≤ 600px), trip page only. The same day and service cards as on a computer, laid out as the
   timeline: a small violet label "Day 3–4 · 01–02 Nov 2026", the day's whole name (two lines when long), the
   number of services, and — for a guide or admin — the day's price alone at the right under the round button.
   Inside an open day the stays and activities hang on one thin line, each with its small coloured type dot;
   the date and time pills stay (they are the guide's edit buttons elsewhere), a little smaller. */
@media (max-width: 600px) {
  /* the day header */
  body .ss-sp--trip #ss-days .aib-day-header { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: auto 1fr !important; column-gap: 10px !important; row-gap: 6px !important; align-items: start !important; padding: 12px 12px 12px 14px !important; text-align: left; }
  body .ss-sp--trip #ss-days .aib-day-header .aib-collapse-day { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; width: 32px !important; height: 32px !important; }
  body .ss-sp--trip #ss-days .aib-day-header .day-rule { display: none !important; }
  body .ss-sp--trip #ss-days .aib-day-header .day-label { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; align-self: center !important; width: auto !important; max-width: 100%; padding: 3px 10px !important; border-radius: 999px; background: #F3ECFF !important; font-size: 11px !important; letter-spacing: .06em !important; line-height: 1.4 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left !important; }
  body .ss-sp--trip #ss-days .aib-day-header[aria-expanded="true"] .day-label { background: #7700FF !important; color: #fff !important; }
  body .ss-sp--trip #ss-days .aib-day-header[aria-expanded="true"] .day-label .day-number { color: #fff !important; }
  body .ss-sp--trip #ss-days .aib-day-header .day-label .ss-dl-d { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .85; }
  body .ss-sp--trip #ss-days .aib-day-header .day-head-main { grid-column: 1 !important; grid-row: 2 !important; min-width: 0; }
  body .ss-sp--trip #ss-days .aib-day-header .day-title-display { font-size: 15px !important; line-height: 1.3 !important; white-space: normal !important; overflow: visible !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  body .ss-sp--trip #ss-days .aib-day-header .day-head-meta .day-meta-date, body .ss-sp--trip #ss-days .aib-day-header .day-head-meta .dot { display: none !important; }
  body .ss-sp--trip #ss-days .aib-day-header .day-price-col { grid-column: 2 !important; grid-row: 2 !important; align-self: end !important; justify-self: end !important; width: auto !important; font-size: 15px !important; font-weight: 800 !important; color: #7700FF !important; white-space: nowrap; }
  /* inside a day: Day count and Direction side by side */
  body .ss-sp--trip #ss-days .day-meta-fields { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin: 0 0 14px !important; }
  body .ss-sp--trip #ss-days .day-meta-box { min-width: 0 !important; padding: 8px 10px !important; }
  /* the line and the dots */
  body .ss-sp--trip #ss-days .day-content-inner > .service-item { position: relative; margin: 0 0 0 30px !important; padding: 2px 0 14px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  body .ss-sp--trip #ss-days .day-content-inner > .service-item::before { content: ""; position: absolute; left: -19px; top: 14px; bottom: -14px; width: 2px; background: #ECE6F7; border-radius: 2px; }
  body .ss-sp--trip #ss-days .day-content-inner > .service-item:last-of-type::before { display: none; }
  body .ss-sp--trip #ss-days .service-item .service-header { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; column-gap: 8px !important; row-gap: 6px !important; padding: 0 !important; background: transparent !important; position: static !important; }
  body .ss-sp--trip #ss-days .service-item .service-header > .svc-tile { display: grid !important; place-items: center; position: absolute; left: -30px; top: 2px; width: 24px !important; height: 24px !important; border-radius: 50% !important; box-shadow: 0 0 0 3px #fff; z-index: 1; }
  body .ss-sp--trip #ss-days .service-item .service-header > .svc-tile svg { width: 12px !important; height: 12px !important; }
  body .ss-sp--trip #ss-days .service-item .service-header .service-title-column { grid-column: 1 !important; grid-row: 1 !important; order: 0 !important; }
  body .ss-sp--trip #ss-days .service-item .service-header .collapse-service-btn { grid-column: 2 !important; grid-row: 1 !important; width: 26px !important; height: 26px !important; }
  body .ss-sp--trip #ss-days .service-item .service-header .svc-header-right { grid-column: 1 / -1 !important; grid-row: 2 !important; display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 6px; order: 0 !important; }
  body .ss-sp--trip #ss-days .service-item .service-header .service-title-name { white-space: normal !important; overflow: visible !important; }
  body .ss-sp--trip #ss-days .service-item .service-datetime-col { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  body .ss-sp--trip #ss-days .service-item .dt-chip { padding: 5px 10px !important; font-size: 12px !important; gap: 5px !important; }
  body .ss-sp--trip #ss-days .service-item .dt-chip svg { width: 13px !important; height: 13px !important; }
  body .ss-sp--trip #ss-days .service-item .service-price-display { text-align: left !important; }
  body .ss-sp--trip #ss-days .service-item .service-price-display .svc-rate-ref { display: flex !important; flex-wrap: wrap; align-items: baseline !important; gap: 2px 8px; }
  body .ss-sp--trip #ss-days .aib-day-header .day-label { display: block !important; min-height: 0 !important; height: auto !important; line-height: 18px !important; }
  body .ss-sp--trip #ss-days .day-content-inner > .service-item { overflow: visible !important; }
  body .ss-sp--trip #ss-days .service-item .dt-chip span { font-size: 12px !important; }
  body .ss-sp--trip #ss-days .service-item .service-price-display, body .ss-sp--trip #ss-days .service-item .service-price-display:has(.ss-pb-total) { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: baseline !important; justify-content: flex-start !important; gap: 2px 8px; text-align: left !important; }
  body .ss-sp--trip #ss-days .service-item .service-price-display .ss-pb-total { font-size: 15px; font-weight: 800; color: var(--navy); }
  body .ss-sp--trip #ss-days .service-item .service-price-display .ss-pb-unit { display: inline !important; font-size: 11.5px !important; color: var(--text-tertiary); margin: 0 !important; }
  /* the room inside an opened stay: a short labelled list, not the wide table */
  body .ss-sp--trip #ss-days .room-table .room-table-header { display: none !important; }
  body .ss-sp--trip #ss-days .room-table .room-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px 10px !important; padding: 12px !important; border: 1px solid #ECECF1; border-radius: 12px; background: #fff; }
  body .ss-sp--trip #ss-days .room-table .room-row > div { display: block !important; width: auto !important; min-width: 0 !important; padding: 0 !important; text-align: left !important; font-size: 13.5px; font-weight: 600; color: var(--navy); }
  body .ss-sp--trip #ss-days .room-table .room-row > div::before { display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
  body .ss-sp--trip #ss-days .room-table .room-row .col-room-type { grid-column: 1 / -1 !important; font-size: 14.5px; font-weight: 700; }
  body .ss-sp--trip #ss-days .room-table .room-row .col-guests::before { content: "Guests"; }
  body .ss-sp--trip #ss-days .room-table .room-row .col-count::before { content: "Rooms"; }
  body .ss-sp--trip #ss-days .room-table .room-row .col-nights::before { content: "Nights"; }
  body .ss-sp--trip #ss-days .room-table .room-row .col-meals { grid-column: 1 / -1 !important; }
  body .ss-sp--trip #ss-days .room-table .room-row .col-meals::before { content: "Meals"; }
  body .ss-sp--trip #ss-days .room-table .room-row .col-extra-bed::before { content: "Extra bed"; }
  body .ss-sp--trip #ss-days .room-table .room-row .col-price::before { content: "Per room, per night"; }
  body .ss-sp--trip #ss-days .room-table .room-row .col-total::before { content: "Total"; }
  body .ss-sp--trip #ss-days .room-table .room-row .col-price:not(:empty)::after, body .ss-sp--trip #ss-days .room-table .room-row .col-total:not(:empty)::after { content: ""; }
  body .ss-sp--trip #ss-days .room-table .room-row .col-extra-bed select { max-width: 100%; }
  body .ss-sp--trip #ss-days .room-table .room-amenities { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 8px !important; }
  body .ss-sp--trip #ss-days .room-table .amenity-card { display: flex !important; align-items: center; gap: 8px; padding: 8px 10px !important; min-width: 0 !important; }
  body .ss-sp--trip #ss-days .room-table .amenity-card .amenity-icon { width: 18px !important; height: 18px !important; }
  body .ss-sp--trip #ss-days .room-table .amenity-card .amenity-label { display: block !important; font-size: 11px !important; color: var(--text-tertiary); }
  body .ss-sp--trip #ss-days .room-table .amenity-card .amenity-value { font-size: 13px !important; font-weight: 700; margin-left: auto; }
  body .ss-sp--trip #ss-days .room-table .room-row > .col-room-type { grid-row: 1 !important; grid-column: 1 / -1 !important; order: 0 !important; }
  body .ss-sp--trip #ss-days .room-table .room-row > .col-guests { grid-row: 2 !important; grid-column: 1 !important; order: 0 !important; }
  body .ss-sp--trip #ss-days .room-table .room-row > .col-count { grid-row: 2 !important; grid-column: 2 !important; order: 0 !important; }
  body .ss-sp--trip #ss-days .room-table .room-row > .col-nights { grid-row: 2 !important; grid-column: 3 !important; order: 0 !important; }
  body .ss-sp--trip #ss-days .room-table .room-row > .col-meals { grid-row: 3 !important; grid-column: 1 / -1 !important; order: 0 !important; }
  body .ss-sp--trip #ss-days .room-table .room-row > .col-extra-bed { grid-row: 4 !important; grid-column: 1 !important; order: 0 !important; }
  body .ss-sp--trip #ss-days .room-table .room-row > .col-price { grid-row: 4 !important; grid-column: 2 !important; order: 0 !important; }
  body .ss-sp--trip #ss-days .room-table .room-row > .col-total { grid-row: 4 !important; grid-column: 3 !important; order: 0 !important; }
  body .ss-sp--trip #ss-days .room-table .room-row > .col-price::before { content: "Per night" !important; }
  body .ss-sp--trip #ss-days .room-table .room-amenities .amenity-card { flex-direction: row !important; justify-content: flex-start !important; text-align: left !important; height: auto !important; min-height: 0 !important; border-radius: 10px !important; }
  body .ss-sp--trip #ss-days .room-table .room-amenities .amenity-card > * { margin: 0 !important; }
  body .ss-sp--trip #ss-days .room-table .room-amenities .amenity-card .amenity-value { margin-left: auto !important; order: 3; white-space: nowrap; }
  body .ss-sp--trip #ss-days .room-table .room-amenities .amenity-card .amenity-label { white-space: nowrap; }
  body .ss-sp--trip #ss-days .room-table .room-amenities .amenity-card .amenity-icon { display: none !important; }
  /* an opened service stays inside the line */
  body .ss-sp--trip #ss-days .service-item .service-details, body .ss-sp--trip #ss-days .service-item .service-details-inner { padding-left: 0 !important; padding-right: 0 !important; }
}
@media (min-width: 601px) { .ss-sp--trip #ss-days .day-label .ss-dl-d { display: none; } }

/* THE GO-TO-TOP BUTTON SITS ABOVE THE PHONE PRICE BAR (Chiran, 25 Oct 2026): on a phone it covered
   "Check trip price". It now stays 16px above the bar, also on phones with a home-bar gap at the bottom. */
@media (max-width: 991px) {
  body:has(.ss-sp .ss-mbar) #gotop { bottom: calc(var(--ss-mbar-h, 64px) + 16px) !important;   /* the bar height already holds the home-bar gap */ }
}

/* The partner card in the page on a phone (25 Oct 2026): the same card as the right column, with the page's gaps. */
.ss-sp .ss-host-phone { margin: 0 0 28px; scroll-margin-top: 72px; }
@media (min-width: 992px) { .ss-sp .ss-host-phone { display: none; } }

/* THE PRICE BAR WAITS FOR THE PAGE (Chiran, 25 Oct 2026): on a phone, while the page was still loading, the
   browser's toolbars moved and the bar showed in the middle of the screen over the content. It now appears
   once the page has loaded (the price in it is only worked out then anyway). */
@media (max-width: 991px) {
  html:not(.ss-loaded) body #st-content-wrapper.ss-sp .ss-mbar { opacity: 0 !important; pointer-events: none; }
  body #st-content-wrapper.ss-sp .ss-mbar { transition: opacity .25s ease; }
}

/* On a phone the partner card lives in the page (25 Oct 2026), so it is not shown a second time inside the price sheet. */
@media (max-width: 991px) { .ss-sp .ss-sp__aside .ss-host:not(.ss-host--phone) { display: none !important; } }

.ss-sp a.ss-nolink { cursor: default; text-decoration: none !important; }

/* ===== 25 Oct 2026 (Chiran): Not included in red; activity Highlights as the same list with gold stars;
   an activity's Day by day uses the trip's own markup and rules (block at the end). ===== */
.ss-sp .ss-ie__h--n { color: var(--error) !important; }
.ss-sp .ss-ie__c:last-child .ss-ie__h--n ~ span svg, .ss-sp .ss-ie__h--n ~ span svg { color: var(--error) !important; }
.ss-sp .ss-ie--hl .ss-ie__c > span svg { color: var(--warning) !important; }
.ss-sp .ss-ie--hl .ss-ie__c > span svg * { stroke: var(--warning-dark); }
.ss-sp .ss-ie--hl:not(:has(.ss-ie__c + .ss-ie__c)) { grid-template-columns: 1fr; }
.ss-sp .ss-ie__h--y ~ span svg { color: var(--success) !important; }
.ss-sp--activity #ss-attributes .stt-attr-languages, .ss-sp--activity #ss-attributes [class*="stt-attr-wpmf-"] { display: none !important; }   /* languages live in At a glance (25 Oct 2026) */

/* ===== ACTIVITY DAY BY DAY = THE TRIP'S (generated 25 Oct 2026) =====
   The activity's Day by day is printed in the trip's markup; these are the trip's own rules, scoped to
   .ss-sp--activity (25 Oct 2026). If the trip's day rules change, regenerate this block the same way. */
.ss-sp--activity .sarisara-itinerary-container, .ss-sp--activity .sarisara-itinerary-redesign { background: none !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
.ss-sp--activity .service-details-inner { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 18px; row-gap: 8px; align-items: start; }
.ss-sp--activity .service-details-inner > * { grid-column: 2; min-width: 0; }
.ss-sp--activity .service-details-inner > .image-carousel { grid-column: 1; grid-row: 1 / span 3; margin: 0 !important; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; height: auto !important; }
.ss-sp--activity .service-details-inner > .image-carousel .carousel-wrapper, .ss-sp--activity .service-details-inner > .image-carousel .carousel-item, .ss-sp--activity .service-details-inner > .image-carousel img { height: 100% !important; }
.ss-sp--activity .service-details-inner > .image-carousel img { width: 100%; object-fit: cover; }
.ss-sp--activity .service-details-inner > .image-carousel .carousel-nav { width: 30px !important; height: 30px !important; padding: 0 !important; }
.ss-sp--activity .service-details-inner > .image-carousel .carousel-nav svg { width: 14px; height: 14px; }
.ss-sp--activity .service-details-inner > .details-description { margin: 0 !important; font-size: 14px; line-height: 1.6; color: var(--text-primary); }
.ss-sp--activity .service-details-inner > .read-more-toggle { justify-self: start; color: var(--primary) !important; text-decoration: none !important; font-family: var(--font-label); font-size: 13px; font-weight: 600; text-transform: lowercase; }
.ss-sp--activity .service-details-inner > .read-more-toggle::first-letter { text-transform: uppercase; }
@media (max-width: 699px) {
  .ss-sp--activity .service-details-inner { grid-template-columns: 1fr; }
  .ss-sp--activity .service-details-inner > *, .ss-sp--activity .service-details-inner > .image-carousel { grid-column: 1; grid-row: auto; }
  .ss-sp--activity .service-details-inner > .image-carousel { order: -1; }
}
@media (max-width: 699px) {
  .ss-sp--activity .service-details-inner > * { grid-column: 1 !important; }
}
.ss-sp--activity .service-details-inner { display: block !important; padding-bottom: 16px !important; }
.ss-sp--activity .service-details-inner > .image-carousel { display: none !important; }
.ss-sp--activity .ss-ph { margin: 2px 0 12px; }
.ss-sp--activity .ss-ph button.ss-ph__t { all: unset; position: relative; display: block; min-width: 0; min-height: 0; cursor: zoom-in; border-radius: 10px; overflow: hidden; }
.ss-sp--activity .ss-ph__t img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; border-radius: 10px; transition: transform .25s; }
.ss-sp--activity .ss-ph__t:hover img { transform: scale(1.02); }
.ss-sp--activity .ss-ph--b { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.ss-sp--activity .ss-ph__side { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; height: 0; min-height: 100%; }
.ss-sp--activity .ss-ph__side img { aspect-ratio: auto; }
.ss-sp--activity .ss-ph--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ss-sp--activity .ss-ph--1 .ss-ph__t img { max-height: 340px; }
.ss-sp--activity .ss-ph__n { position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(9,9,32,.62); color: #fff;
  font-family: var(--font-label); font-size: 12px; font-weight: 600; pointer-events: none; }
.ss-sp--activity .service-details-inner > .details-description { margin: 0 0 4px !important; font-family: var(--font-body); font-size: 14px !important; line-height: 1.6 !important; color: var(--text-primary) !important; }
.ss-sp--activity .service-details-inner > .details-description p { font-size: inherit !important; line-height: inherit !important; color: inherit !important; margin: 0 0 6px !important; }
.ss-sp--activity .service-details-inner > .read-more-toggle { display: inline-block; margin: 0 0 12px; font-size: 12.5px; }
@media (max-width: 699px) {
  .ss-sp--activity .ss-ph--b, .ss-sp--activity .ss-ph--2 { grid-template-columns: 1fr; }
  .ss-sp--activity .ss-ph__side { display: none; }
  .ss-sp--activity .ss-ph--2 .ss-ph__t + .ss-ph__t { display: none; }
}
.ss-sp--activity .ss-ph--1 .ss-ph__t img { height: auto !important; aspect-ratio: 16 / 9 !important; max-height: 340px; }
.ss-sp--activity .ss-ph--1 .ss-ph__t, .ss-sp--activity .ss-ph--1 { width: 100%; }
.ss-sp--activity .ss-ph--1 .ss-ph__t img { width: 100% !important; height: auto !important; aspect-ratio: 2.4 / 1 !important; max-height: none !important; }
.ss-sp--activity .service-item { --mdx-tone: #3C6B52; --mdx-tint: #DCEBE1; }
.ss-sp--activity .service-item.t-curated, .ss-sp--activity .service-item.t-local-expert { --mdx-tone: #8A6A2F; --mdx-tint: #F4EDE0; }
@media (max-width: 600px) {
  body .ss-sp--activity #ss-days .aib-day-header { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: auto 1fr !important; column-gap: 10px !important; row-gap: 6px !important; align-items: start !important; padding: 12px 12px 12px 14px !important; text-align: left; }
  body .ss-sp--activity #ss-days .aib-day-header .aib-collapse-day { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; width: 32px !important; height: 32px !important; }
  body .ss-sp--activity #ss-days .aib-day-header .day-rule { display: none !important; }
  body .ss-sp--activity #ss-days .aib-day-header .day-label { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; align-self: center !important; width: auto !important; max-width: 100%; padding: 3px 10px !important; border-radius: 999px; background: #F3ECFF !important; font-size: 11px !important; letter-spacing: .06em !important; line-height: 1.4 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left !important; }
  body .ss-sp--activity #ss-days .aib-day-header[aria-expanded="true"] .day-label { background: #7700FF !important; color: #fff !important; }
  body .ss-sp--activity #ss-days .aib-day-header[aria-expanded="true"] .day-label .day-number { color: #fff !important; }
  body .ss-sp--activity #ss-days .aib-day-header .day-label .ss-dl-d { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .85; }
  body .ss-sp--activity #ss-days .aib-day-header .day-head-main { grid-column: 1 !important; grid-row: 2 !important; min-width: 0; }
  body .ss-sp--activity #ss-days .aib-day-header .day-title-display { font-size: 15px !important; line-height: 1.3 !important; white-space: normal !important; overflow: visible !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  body .ss-sp--activity #ss-days .aib-day-header .day-head-meta .day-meta-date, body .ss-sp--activity #ss-days .aib-day-header .day-head-meta .dot { display: none !important; }
  body .ss-sp--activity #ss-days .day-meta-fields { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin: 0 0 14px !important; }
  body .ss-sp--activity #ss-days .day-meta-box { min-width: 0 !important; padding: 8px 10px !important; }
  body .ss-sp--activity #ss-days .day-content-inner > .service-item { position: relative; margin: 0 0 0 30px !important; padding: 2px 0 14px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  body .ss-sp--activity #ss-days .day-content-inner > .service-item::before { content: ""; position: absolute; left: -19px; top: 14px; bottom: -14px; width: 2px; background: #ECE6F7; border-radius: 2px; }
  body .ss-sp--activity #ss-days .day-content-inner > .service-item:last-of-type::before { display: none; }
  body .ss-sp--activity #ss-days .service-item .service-header { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; column-gap: 8px !important; row-gap: 6px !important; padding: 0 !important; background: transparent !important; position: static !important; }
  body .ss-sp--activity #ss-days .service-item .service-header > .svc-tile { display: grid !important; place-items: center; position: absolute; left: -30px; top: 2px; width: 24px !important; height: 24px !important; border-radius: 50% !important; box-shadow: 0 0 0 3px #fff; z-index: 1; }
  body .ss-sp--activity #ss-days .service-item .service-header > .svc-tile svg { width: 12px !important; height: 12px !important; }
  body .ss-sp--activity #ss-days .service-item .service-header .service-title-column { grid-column: 1 !important; grid-row: 1 !important; order: 0 !important; }
  body .ss-sp--activity #ss-days .service-item .service-header .collapse-service-btn { grid-column: 2 !important; grid-row: 1 !important; width: 26px !important; height: 26px !important; }
  body .ss-sp--activity #ss-days .service-item .service-header .svc-header-right { grid-column: 1 / -1 !important; grid-row: 2 !important; display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 6px; order: 0 !important; }
  body .ss-sp--activity #ss-days .service-item .service-header .service-title-name { white-space: normal !important; overflow: visible !important; }
  body .ss-sp--activity #ss-days .service-item .service-datetime-col { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  body .ss-sp--activity #ss-days .service-item .dt-chip { padding: 5px 10px !important; font-size: 12px !important; gap: 5px !important; }
  body .ss-sp--activity #ss-days .service-item .dt-chip svg { width: 13px !important; height: 13px !important; }
  body .ss-sp--activity #ss-days .aib-day-header .day-label { display: block !important; min-height: 0 !important; height: auto !important; line-height: 18px !important; }
  body .ss-sp--activity #ss-days .day-content-inner > .service-item { overflow: visible !important; }
  body .ss-sp--activity #ss-days .service-item .dt-chip span { font-size: 12px !important; }
  body .ss-sp--activity #ss-days .service-item .service-details, body .ss-sp--activity #ss-days .service-item .service-details-inner { padding-left: 0 !important; padding-right: 0 !important; }
}
@media (min-width: 601px) {
  .ss-sp--activity #ss-days .day-label .ss-dl-d { display: none; }
}

/* ===== THE PLAN, DAY BY DAY — the design's exact values (Design System 2e; Chiran, 25 Oct 2026: the tabs were
   taller, the times and words bigger and the "Starts at" line had no pin, because the page's own line heights,
   font size and DM Sans leaked in). Measured from the design file and set here, so nothing inherits. ===== */
body .ss-sp .ss-mdx { font-family: "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; font-size: 13px !important; line-height: normal !important; color: var(--navy) !important; }
body .ss-sp .ss-mdx *, body .ss-sp .ss-mdx p { line-height: normal !important; }
body .ss-sp .ss-mdx__h { height: auto !important; margin: 0 0 10px !important; font-size: 13px !important; }
body .ss-sp .ss-mdx__h small { font-size: 11px !important; padding: 2px 8px !important; }
body .ss-sp .ss-mdx__h svg { width: 15px !important; height: 15px !important; }
body .ss-sp button.ss-mdx__tab { font-family: "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; font-size: 13px !important; line-height: normal !important; color: var(--navy) !important; padding: 8px 16px !important; min-height: 0 !important; height: auto !important; gap: 1px !important; }
body .ss-sp button.ss-mdx__tab b { font-family: inherit !important; font-size: 14px !important; line-height: normal !important; }
body .ss-sp button.ss-mdx__tab small { font-family: inherit !important; font-size: 12px !important; line-height: normal !important; }
body .ss-sp .ss-mdx__p { font-size: 13px !important; line-height: normal !important; color: var(--navy) !important; }
body .ss-sp .ss-mdx__pt { margin: 0 0 2px !important; font-size: 15px !important; }
body .ss-sp .ss-mdx__pm { display: flex !important; align-items: center; gap: 6px; margin: 0 0 10px !important; font-family: inherit !important; font-size: 12.5px !important; color: var(--text-tertiary) !important; }
body .ss-sp .ss-mdx__pm svg { width: 13px !important; height: 13px !important; flex: none; }
body .ss-sp .ss-mdx__l li { font-size: 13px !important; color: var(--navy) !important; padding: 9px 0 !important; }
body .ss-sp .ss-mdx__l b { font-size: 14px !important; }
body .ss-sp .ss-mdx__l small { font-family: inherit !important; font-size: 13px !important; line-height: 1.45 !important; }