/* ============================================================
   eHolidayer re-skin ("Blue Hour") — Hotel details page
   Overrides the default "ios" skin. Presentation ONLY: this file
   changes look (typography, colours, cards, spacing). It never
   changes behaviour — all IDs, names and JS hooks stay untouched.
   Design source of truth: mockups/_qa/figma/spec/hotel.md
   (Figma ZfRnLOizrTZz4Ry0ZM9aJF, screen 5:2484) and
   mockups/css/ehd-tokens.css (tokens ported 1:1 below).
   Loaded AFTER ios.css by hotels.html.php hotelHTML() so it wins
   cascade ties. Revert: delete the 2 addStyleLink lines in
   hotelHTML() (docs/contract-hotel-details.md decision 6.5).
   ============================================================ */

/* ---------- Design tokens (ported from mockups/css/ehd-tokens.css) ---------- */
:root {
  --ehd-ink:        #172E3B;  /* headings + body text */
  --ehd-muted:      #5F6B70;  /* secondary text (AA-darkened #6B787E) */
  --ehd-blue:       #4285F4;  /* action blue */
  --ehd-blue-hover: #1A73E8;
  --ehd-blue-dark:  #185ABC;  /* text on chip */
  --ehd-chip:       #E8F0FE;  /* score chips */
  --ehd-tint:       #EAF2FB;  /* soft info-banner background */
  --ehd-green:      #32735A;  /* verdict / benefits */
  --ehd-border:     #E2E6E5;  /* hairline */
  --ehd-cream:      #F0EBE2;  /* support banner */
  --ehd-canvas:     #FAF9F6;  /* page background */
  --ehd-surface:    #FFFFFF;
  --ehd-surface-mute: #F5F2EB;
  --ehd-shadow:     0 8px 28px rgba(21,59,75,0.08);
  --ehd-radius-card: 12px;
  --ehd-radius-input: 8px;
  --ehd-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Page width override (up to 1440px; icss.php caps at 1180px) ----------
   Fluid below 1440 (min() clamps to 100%), so mobile and small laptops never
   get a horizontal scrollbar. IE11 ignores min() and keeps the old 1180px.
   icss.php's static block hardcodes the whole BODY COLUMN (fixed_width/header-
   wrapper/main-body 1020px, maincontent 990px); every site page runs with the
   left/right columns display:none, so the column can simply follow the
   wrapper. The template's own <=1040px media block keeps everything fluid yet. */
.total-wrapper {
  width: min(1440px, 100%) !important;
  margin: 0 auto !important;
}
.navigation,
.menu {
  width: min(1440px, 100%) !important;
}
.fixed_width,
.header-wrapper,
.main-body {
  width: min(1440px, 100%) !important;
}
.maincontent {
  width: calc(100% - 30px) !important; /* keep its 15px side gutters */
}

/* ---------- Page canvas (this stylesheet only loads on the hotel page) ---------- */
body { background: var(--ehd-canvas); }
html { scroll-behavior: smooth; scroll-padding-top: 80px; } /* anchor jumps clear the sticky nav */

/* ---------- Typography: Inter everywhere except icon glyphs ---------- */
.iosh_global,
.iosh_global *:not([class*="fa-"]):not(.fa) {
  font-family: var(--ehd-font) !important;
}

/* ---------- Headings ---------- */
.iosh_global .iosh_h1 {
  font-size: 34px; font-weight: 600; line-height: 1.15;
  color: var(--ehd-ink); margin: 0 0 4px; letter-spacing: -0.3px;
}
.iosh_global .iosh_h2 {
  font-size: 24px; font-weight: 600; line-height: 1.2;
  color: var(--ehd-ink); margin: 28px 0 12px;
}
.iosh_global .iosh_h3 {
  font-size: 17px; font-weight: 600; line-height: 1.4;
  color: var(--ehd-ink); margin: 12px 0 8px;
}
.iosh_global .iosh_h3 span { /* legacy blue inline chip inside h3 */
  background: var(--ehd-chip); color: var(--ehd-blue-dark);
  border-radius: 4px; padding: 2px 6px; font-size: 12px; font-weight: 600;
}

/* ---------- Links ---------- */
.iosh_global a { color: var(--ehd-blue-hover); text-decoration: none; }
.iosh_global a:hover { color: var(--ehd-blue-dark); text-decoration: underline; }

/* ---------- Section nav — mockup .ehd-hnav look on <nav class="iosh_nav"> ----------
   ROUND 7. The core css/iosr.css "ghost tabs" block styles these very links,
   and it loads AFTER this file (ios.css -> ehd.css -> iosr.css, twice over),
   so ties go to core. Its heaviest variants come from the
   :not(.iosh_navaback_off):not(.iosh_navaback_on) pair form: 0-4-1 links and
   pill, 0-4-2 divider ::after, 0-5-1 pill-hover. Core files must not be
   edited and the load order can't change, so every selector below duplicates
   a class (.iosh_nav.iosh_nav, .iosh_nava.iosh_nava): same elements matched,
   +1 specificity per duplication, no !important needed anywhere.
   Hooks preserved untouched: .iosh_nava class, hrefs, Contact onclick, hidden
   back-button + #iosh_navtitle spans, .ehd-hnav-rating cluster. */
.iosh_global .iosh_nav {
  display: flex; align-items: stretch; flex-wrap: wrap;
  gap: 8px 32px; min-height: 56px; padding: 0; margin: 18px 0 4px;
  background: none; border: none; border-bottom: 1px solid var(--ehd-border);
  border-radius: 0; position: static; color: var(--ehd-ink);
}
/* Flat full-height links. 0-5-1 beats every core link variant, including the
   :last-of-type blue pill (0-4-1) that core paints on the Contact link. */
.iosh_global .iosh_nav.iosh_nav > a.iosh_nava.iosh_nava {
  display: flex; align-items: center; min-height: 56px;
  padding: 0; margin: 0; gap: 0;
  font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0;
  color: var(--ehd-ink); background: none; border: none; border-radius: 0;
  white-space: nowrap; position: relative;
}
/* Kills the core divider ticks (0-5-2 beats their 0-4-2 ::after pair). */
.iosh_global .iosh_nav.iosh_nav > a.iosh_nava.iosh_nava::after { content: none; }
/* 0-6-1 clears the core pill-hover (0-5-1) as well as the plain hover. */
.iosh_global .iosh_nav.iosh_nav > a.iosh_nava.iosh_nava:hover {
  color: var(--ehd-blue); background: none; text-decoration: none;
}
/* Active section: the view's scroll-spy puts .ehd-hnav-active on the <a>
   itself - the live nav is a flat list of anchors, not the mockup's ul/li. */
.iosh_global .iosh_nav.iosh_nav > a.iosh_nava.iosh_nava.ehd-hnav-active {
  color: var(--ehd-blue); font-weight: 600; background: none;
}
/* The underline must also NEUTRALISE the divider geometry core leaves on the
   same ::after (top:50%, width:1px, translateY) — content:none alone would
   leave those properties to fight the 3px bar. */
.iosh_global .iosh_nav.iosh_nav > a.iosh_nava.iosh_nava.ehd-hnav-active::after {
  content: ''; position: absolute; left: 0; right: 0; top: auto; bottom: -1px;
  width: auto; height: 3px; transform: none;
  background: var(--ehd-blue); border-radius: 2px 2px 0 0;
}
/* Rating chip, right end of the strip (mockup .ehd-hnav-rating metrics:
   score pad 8 / 15px 700). margin-inline-start:auto claims the free space;
   align-self:center stops it stretching over the strip's full height.
   box-sizing is explicit because these sheets keep the content-box model. */
.iosh_global .ehd-hnav-rating {
  display: flex; align-items: center; gap: 10px; flex: none; align-self: center;
  margin-inline-start: auto; padding-inline-end: 6px; min-width: 0;
}
.iosh_global .ehd-hnav-score {
  background: var(--ehd-chip); color: var(--ehd-blue);
  border-radius: 6px; padding: 8px;
  font-size: 15px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; box-sizing: border-box;
}
.iosh_global .ehd-hnav-word { font-size: 13px; font-weight: 600; color: var(--ehd-ink); white-space: nowrap; }
.iosh_global .ehd-hnav-count { font-size: 12px; color: var(--ehd-muted); white-space: nowrap; }
.iosh_global .ehd-hnav-count a { color: inherit; }
.iosh_global .ehd-hnav-count a:hover { color: var(--ehd-blue); text-decoration: underline; }

/* ---------- Gallery (moved from side column; featured + grid) ---------- */
.iosh_global #hotelgallery {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 184px; gap: 12px; margin: 16px 0 8px;
}
.iosh_global #hotelgallery .ehd_galfeatured {
  grid-column: span 2; grid-row: span 2; border-radius: 16px;
}
.iosh_global #hotelgallery a:only-child { /* single photo: fill the row */
  grid-column: 1 / -1; grid-row: span 2;
}
.iosh_global #hotelgallery a {
  display: block; height: 100%; border-radius: var(--ehd-radius-card);
  overflow: hidden; border: 1px solid var(--ehd-border);
}
.iosh_global #hotelgallery a.ehd_galfeatured { border: none; }
.iosh_global #hotelgallery img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 150ms ease;
}
.iosh_global #hotelgallery a:hover img { transform: scale(1.03); }
.iosh_global #hotelgallery a:hover { text-decoration: none; }
.iosh_global .ehd_galmorelink {
  display: inline-block; margin: 8px 0; font-size: 13px; font-weight: 600;
  color: var(--ehd-blue-hover);
}
/* Hidden overflow box (7th+ photo) sits inside the grid: when slideToggle
   reveals it (display:block), span the full row; links become 184px squares. */
.iosh_global #hotelgallery .iosh_morebox { grid-column: 1 / -1; }
.iosh_global #hotelgallery .iosh_morebox a {
  display: inline-block; width: 184px; height: 184px;
  margin: 0 12px 12px 0; vertical-align: top;
}
.iosh_global #hotelgallery .iosh_morebox a img { object-fit: cover; }

/* ---------- Description ---------- */
/* FEEDBACK item 1: the description now sits directly under the gallery */
.iosh_global #hoteloverview {
  color: var(--ehd-ink); font-size: 15px; line-height: 1.65;
  margin: 14px 0 0;
}

/* ---------- Room cards (mockup design 5:2675: photo | info | price) ----------
   FEEDBACK item 3: a fixed 3-column grid (256px photo | flexible info | 290px
   booking). Unlike the old flex-wrap row, opening "More" (room facilities)
   now only grows the MIDDLE column's content and opening the booking form
   only grows the RIGHT column - the photo stays a fixed 222px tall and never
   stretches with either. All booking ids/JS hooks untouched. */
.iosh_global .iosh_roombox {
  display: grid; grid-template-columns: 256px minmax(0, 1fr) 290px;
  align-items: start;
  background: var(--ehd-surface); border: 1px solid var(--ehd-border);
  border-radius: var(--ehd-radius-card); padding: 0; margin: 16px 0;
  box-shadow: var(--ehd-shadow); overflow: hidden;
}
.iosh_global .iosh_roombox > .clear { display: none; } /* float clearer: not a grid item */
.iosh_global .iosh_roomboximg { position: relative; min-width: 0; align-self: start; }
.iosh_global .iosh_roomboximg > span {
  position: absolute; inset-inline-end: 10px; bottom: 10px; z-index: 2;
  background: rgba(23,46,59,0.72); color: #FFFFFF; border-radius: 100px;
  font-size: 11px; font-weight: 600; padding: 3px 10px;
}
.iosh_global .iosh_roomimgwrap { width: 100%; height: 222px; }
.iosh_global .iosh_roomimgwrap img {
  float: none; width: 100%; height: 222px;
  object-fit: cover; display: block; border-radius: 0;
}
.iosh_global .iosh_roomboxdetails {
  min-width: 0; box-sizing: border-box;
  margin: 0; padding: 20px 22px; background: none; border: none;
  display: flex; flex-direction: column; gap: 8px;
}
.iosh_global .iosh_roomboxdetails h3,
.iosh_global .iosh_roomdbox h3 {
  font-size: 21px; font-weight: 600; color: var(--ehd-ink); margin: 0;
}
.iosh_global .iosh_roomboxdetails h3 .iosh_persons {
  display: inline-block; background: var(--ehd-chip); color: var(--ehd-blue-dark);
  border-radius: 100px; font-size: 12px; font-weight: 600; padding: 3px 10px;
  vertical-align: middle; margin-inline-start: 8px;
}
.iosh_global .iosh_roomboxdetails .iosh_zero { color: var(--ehd-ink); font-size: 14px; }
.iosh_global .iosh_roomdbox p { color: var(--ehd-muted); font-size: 14px; line-height: 1.55; }
.iosh_global .iosh_meals_breakfast,
.iosh_global .iosh_meals_halfboard,
.iosh_global .iosh_meals_fullboard,
.iosh_global .iosh_meals_allinclusive { color: var(--ehd-green); font-size: 13px; font-weight: 600; }
.iosh_global .iosh_roomboxdetails .iosh_morelink { font-size: 13px; font-weight: 600; }
.iosh_global .iosh_roomboxdetails .iosh_morebox { margin: 4px 0 0; }
/* Booking strip becomes the design's right-hand price column */
.iosh_global .iosh_pickbookwrap {
  width: 290px; box-sizing: border-box; align-self: start;
  /* start, not stretch: FEEDBACK item 3 — opening "More" makes the middle
     (room data/facilities) column taller, and stretch dragged the booking
     column down with it. The booking column now keeps its own height. */
  border-inline-start: 1px solid var(--ehd-border);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 12px;
}
.iosh_global .iosh_pickrowrooms {
  display: flex; align-items: stretch; gap: 10px;
  margin: 0; float: none; /* old layout pulled this strip up with -125px; the flex column forbids that */
}
.iosh_global .iosh_roomsselbox {
  flex: 1; min-width: 0; background: var(--ehd-surface-mute);
  border: 1px solid var(--ehd-border); border-radius: var(--ehd-radius-input);
  padding: 8px 12px; font-size: 12px; color: var(--ehd-muted);
}
.iosh_global .iosh_roomsselbox > div:last-child {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px;
}
.iosh_global .iosh_roomsbookbox { flex: 1 1 100%; }
.iosh_global button.iosh_btnbook { width: 100%; padding: 12px 16px; }
.iosh_global .iosh_roomboxbottom {
  background: var(--ehd-surface-mute); border: 1px solid var(--ehd-border);
  border-radius: var(--ehd-radius-input); margin: 0 0 4px; padding: 8px 12px;
  font-size: 12px; color: var(--ehd-muted);
}
.iosh_global .iosh_roompromo {
  background: var(--ehd-chip); color: var(--ehd-blue-dark);
  border-radius: var(--ehd-radius-input); padding: 8px 12px;
  font-size: 13px; font-weight: 600; align-self: flex-start;
}

/* ---------- Buttons ----------
   FEEDBACK item 8: kill the hover "blink" (iosr.css lifts the button with
   translateY(-1px) + a 3-property transition) and darken the colour on
   hover instead. transform/box-shadow are pinned to none in the base AND
   hover states; the transition covers background-color only, so nothing
   else animates. iosr.css loads AFTER this file, so the hover rules use
   doubled classes / attribute selectors to outrank iosr's hover skins. */
.iosh_global button.iosh_btn,
.iosh_global button[type=submit].iosh_btn,
.iosh_global button[type=button].iosh_btn,
.iosh_global button.iosh_btnbook,
.iosh_global button.iosh_btn.iosh_btn,
.iosh_global button.iosh_btnbook.iosh_btnbook,
.iosh_global button[name^="bookpickedsub"] {
  background: var(--ehd-blue); color: #FFFFFF; border: none;
  border-radius: var(--ehd-radius-input); padding: 10px 20px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: none; text-shadow: none; transform: none;
  transition: background-color 150ms ease;
}
.iosh_global button.iosh_btn.iosh_btn:hover,
.iosh_global button.iosh_btnbook.iosh_btnbook:hover,
.iosh_global button[name^="bookpickedsub"]:hover,
.iosh_global button[name^="bookpickedsub"].iosh_btn:hover {
  background: var(--ehd-blue-hover); color: #FFFFFF;
  transform: none; box-shadow: none;
}
/* FEEDBACK round 5 item 1: the BOOK button must not change height on hover.
   Measured cause: the button holds the text "Book" plus a div that carries
   the dynamic price (#pickedformatedprice). The engine's ios.css:1780 makes
   the base state display:inline-block, so "Book" and the price div STACK
   vertically (52px tall) — while our hover pin below says display:flex,
   which lays them in one ROW (38px tall). The 14px jump is the height
   change. Fix: pin the identical flex geometry in the BASE state too, so
   base and hover render the exact same box. Presentation only — the button
   name, type, submit behaviour and the price span id are untouched. */
.iosh_global button[name^="bookpickedsub"] {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-width: 0; height: auto; line-height: 1.3;
}
/* ios.css:1780 snaps every submit .iosh_btnbook (the BOOK buttons, all named
   bookpickedsub*) to width:auto; min-width:100px; display:inline-block;
   padding:2px 12px ON HOVER — the button shrinks under a stationary pointer,
   the pointer falls outside, hover cancels, it grows back… that loop is the
   "blinking". Pin the iosr.css geometry on hover as well; this file loads
   after ios.css, so on the equal-specificity tie this rule wins. Scoped to
   the BOOK buttons only — generic .iosh_btn buttons keep their own size. */
.iosh_global button[name^="bookpickedsub"]:hover,
.iosh_global button[name^="bookpickedsub"].iosh_btnbook:hover {
  width: 100%; min-width: 0; display: flex; padding: 10px 20px;
}
.iosh_global button.iosh_btn[disabled],
.iosh_global button.iosh_btnbook[disabled] {
  background: var(--ehd-border); color: #FFFFFF; opacity: 0.7; cursor: default;
}

/* ---------- Inputs ---------- */
.iosh_global input.iosh_indate,
.iosh_global input.iosh_intext,
.iosh_global input[type=text].iosh_indate,
.iosh_global input[type=text].iosh_intext,
.iosh_global select.iosh_select,
.iosh_global textarea.iosh_intextarea {
  background: var(--ehd-surface); border: 1px solid var(--ehd-border);
  border-radius: var(--ehd-radius-input); padding: 9px 12px;
  font-size: 14px; color: var(--ehd-ink);
}
.iosh_global input.iosh_indate:focus,
.iosh_global input.iosh_intext:focus,
.iosh_global select.iosh_select:focus {
  outline: none; border-color: var(--ehd-blue);
  box-shadow: 0 0 0 2px var(--ehd-chip);
}

/* ---------- Availability / change-dates card (mockup ehd-searchbar) ----------
   Markup gains ONLY presentational wrappers + labels (ehd_search*); every
   functional name, id, hidden field and onclick stays exactly as before. */
.iosh_global #hoteldates .iosh_formwrap_titled,
.iosh_global #hoteldates .iosh_formwrap {
  background: var(--ehd-surface); border: 1px solid var(--ehd-border);
  border-radius: var(--ehd-radius-card); box-shadow: var(--ehd-shadow);
  padding: 0; margin: 16px 0; overflow: hidden;
}
.iosh_global #hoteldates .ehd_searchtitle {
  /* border-box: the global reset is content-box, so 20px side padding would
     otherwise add 40px of overflow past the card on narrow screens. */
  box-sizing: border-box; padding: 16px 20px 0;
}
.iosh_global #hoteldates .iosh_formh4 {
  margin: 0; font-size: 18px; font-weight: 600; color: var(--ehd-ink);
}
.iosh_global #hoteldates form.iosh_form { padding: 12px 20px 16px; margin: 0; }
.iosh_global #hoteldates .ehd_searchhint {
  color: var(--ehd-muted); font-size: 13px; margin: 0 0 10px;
}
.iosh_global #hoteldates .ehd_searchrow {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 0;
}
.iosh_global #hoteldates .ehd_searchfield {
  position: relative; flex: 1 1 170px; min-width: 0; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  padding: 6px 18px;
}
.iosh_global #hoteldates .ehd_searchfield + .ehd_searchfield::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 50%;
  transform: translateY(-50%); width: 1px; height: 34px;
  background: var(--ehd-border);
}
.iosh_global #hoteldates .ehd_searchlabel {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ehd-muted);
}
.iosh_global #hoteldates .ehd_searchfield input.iosh_indate {
  border: none; background: transparent; padding: 4px 0;
  font-size: 15px; font-weight: 500; color: var(--ehd-ink);
  width: 100%; box-sizing: border-box; box-shadow: none;
}
.iosh_global #hoteldates .ehd_searchfield:focus-within {
  outline: 2px solid var(--ehd-blue); outline-offset: 2px; border-radius: 6px;
}
.iosh_global #hoteldates .ehd_searchform .ehd_searchgo {
  align-self: center; flex: none; margin-inline-start: 12px;
  padding: 12px 24px; font-size: 14px;
  /* ios.css 6441 paints this button green at up to (1,2,1) — the winning
     selector there is #hoteldates button[type="submit"].iosh_btn because
     an attribute selector counts in the class bucket. Our (1,3,0) — form
     class added — must re-skin it blue in the BASE state too. */
  background: var(--ehd-blue); color: #FFFFFF; border: none;
  border-radius: var(--ehd-radius-input); box-shadow: none;
  font-family: inherit; font-weight: 600;
}
/* Beat the #hoteldates button[type="submit"].iosh_btn:hover green skin
   (ios.css 6441+, (1,3,1)): our (1,4,0) here outranks it. */
.iosh_global #hoteldates .ehd_searchform .ehd_searchgo:hover,
.iosh_global #hoteldates .ehd_searchform .ehd_searchgo:active,
.iosh_global #hoteldates .ehd_searchform .ehd_searchgo:focus {
  background: var(--ehd-blue-hover); color: #FFFFFF;
  box-shadow: none; transform: none; text-decoration: none;
}
.iosh_global #hoteldates .iosh_tip {
  margin: 10px 0 0; font-size: 13px; color: var(--ehd-muted);
}
.iosh_global #hoteldates #pickguests49.iosh_morebox {
  background: var(--ehd-surface-mute); border: 1px solid var(--ehd-border);
  border-radius: var(--ehd-radius-input); padding: 12px 14px; margin-top: 10px;
}
.iosh_global #hoteldates .iosh_pickrowguests > div {
  color: var(--ehd-muted); font-size: 12px; font-weight: 600;
}

/* ---------- Guest reviews (FEEDBACK round 6 item 2: mockup style) ----------
   The section header (headline + "read all" link), the overall tile with its
   5 real-average category bars, and the review cards. One card component is
   shared by the featured row on the page and the popup's full grid, so all
   rules key on .ehd-hrev-* classes only. */
.iosh_global .ehd-hreviews {
  border-top: 1px solid var(--ehd-border); padding-top: 32px;
  display: flex; flex-direction: column; gap: 24px;
}
.iosh_global .ehd-hrev-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.iosh_global .ehd-hrev-head-left { min-width: 0; }
.iosh_global .ehd-hrev-title {
  font-size: 28px; line-height: 1.2; font-weight: 600;
  margin: 0; color: var(--ehd-ink);
}
.iosh_global .ehd-hrev-sub { margin: 6px 0 0; font-size: 14px; color: var(--ehd-muted); }
.iosh_global .ehd-hrev-more {
  font-size: 13px; font-weight: 600; color: var(--ehd-blue);
  white-space: nowrap; flex: none;
}
.iosh_global .ehd-hrev-more:hover { color: var(--ehd-blue-hover); text-decoration: none; }
/* Overall tile + category bars. Scores display on the familiar 10-point
   scale (the engine stores 0-5 per category and an overall in rscore); the
   bar WIDTH comes from the raw 0-5 average so proportions stay honest. */
.iosh_global .ehd-hrev-summary { display: flex; gap: 36px; flex-wrap: wrap; align-items: flex-start; }
.iosh_global .ehd-hrev-overall { display: flex; align-items: center; gap: 16px; flex: none; }
.iosh_global .ehd-hrev-tile {
  width: 72px; height: 72px; background: var(--ehd-chip);
  border-radius: var(--ehd-radius-card); color: var(--ehd-blue);
  font-size: 28px; font-weight: 700; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.iosh_global .ehd-hrev-overall-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.iosh_global .ehd-hrev-word { font-size: 20px; font-weight: 600; color: var(--ehd-ink); }
.iosh_global .ehd-hrev-based { font-size: 12px; color: var(--ehd-muted); }
.iosh_global .ehd-hrev-cats {
  flex: 1; min-width: 280px; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 18px 26px;
}
.iosh_global .ehd-hrev-cat { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.iosh_global .ehd-hrev-cat-head {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--ehd-ink);
}
.iosh_global .ehd-hrev-cat-score { font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.iosh_global .ehd-hrev-cat-track {
  height: 5px; background: var(--ehd-border);
  border-radius: 100px; overflow: hidden; box-sizing: border-box;
}
.iosh_global .ehd-hrev-cat-fill {
  display: block; height: 100%; background: var(--ehd-blue);
  border-radius: 100px;
}
/* Review cards - the same component in the page row and in the popup grid.
   flex 1 1 260px lets 2-3 cards share a row and wrap on narrow screens. */
.iosh_global .ehd-hrev-cards { display: flex; flex-wrap: wrap; gap: 20px; }
.iosh_global .ehd-hrev-card {
  flex: 1 1 260px; min-width: 0; padding: 22px; margin: 0;
  background: var(--ehd-surface); border: 1px solid var(--ehd-border);
  border-radius: var(--ehd-radius-card);
  display: flex; flex-direction: column; gap: 16px; box-sizing: border-box;
}
.iosh_global .ehd-hrev-guest { display: flex; align-items: center; gap: 10px; }
.iosh_global .ehd-hrev-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--ehd-surface-mute); color: var(--ehd-ink);
  font-size: 14px; font-weight: 600; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
}
.iosh_global .ehd-hrev-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.iosh_global .ehd-hrev-name { font-size: 13px; font-weight: 600; color: var(--ehd-ink); }
.iosh_global .ehd-hrev-country { font-size: 11px; color: var(--ehd-muted); }
.iosh_global .ehd-hrev-country img { vertical-align: -2px; border-radius: 2px; }
.iosh_global .ehd-hrev-score {
  margin-inline-start: auto; flex: none; box-sizing: border-box;
  background: var(--ehd-chip); color: var(--ehd-blue);
  border-radius: 6px; padding: 7px 11px;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.iosh_global .ehd-hrev-content { display: flex; flex-direction: column; gap: 9px; }
.iosh_global .ehd-hrev-quote { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ehd-muted); }
.iosh_global .ehd-hrev-nocomment { margin: 0; font-size: 13px; font-style: italic; color: var(--ehd-muted); }
.iosh_global .ehd-hrev-reply { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ehd-ink); }
.iosh_global .ehd-hrev-reply strong { color: var(--ehd-ink); }
.iosh_global .ehd-hrev-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: auto;
}
/* Verified-stay marker (rounds 4-5 decision: shown when rescode exists) */
.iosh_global .ehd-hrev-verified {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--ehd-blue);
}
.iosh_global .ehd-hrev-date { font-size: 11px; color: var(--ehd-muted); }
/* Unpublished reviews (manager preview) read faded, like before */
.iosh_global .ehd-hrev-card.iosh_unpublished { opacity: 0.75; }
/* Owner/admin-only "Write a review" notice under the cards */
.iosh_global #hotelguestreviews .iosh_notice {
  margin: 14px 0 0; font-size: 13px; color: var(--ehd-muted);
}
.iosh_global #hotelguestreviews .iosh_notice a {
  display: inline-block; margin-inline-start: 8px; font-weight: 600;
}

/* ---------- Description row ----------
   FEEDBACK round 6 item 1: the "Hotel rating" module no longer sits beside
   the description (it moved into the nav chip), so the view always emits
   .ehd_descrow_solo and the description takes the full width again. The
   base .ehd_descrow rule stays as the wrapper chrome + the two-column
   fallback for the (now unused) side-column case. */
.iosh_global .ehd_descrow {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px; align-items: start; margin: 0 0 8px;
}
.iosh_global .ehd_descmain { min-width: 0; }
.iosh_global .ehd_descmain .iosh_dspace { margin: 0; }
/* The solo state: the description takes the full row. */
.iosh_global .ehd_descrow_solo { grid-template-columns: minmax(0, 1fr); }

/* ---------- Promo box + last reservation row (FEEDBACK item 7) ----------
   Recommended-rooms promo box left two thirds, last-reservation sidebox
   right one third. Mobile stacks them. */
.iosh_global .ehd_promorow {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px; align-items: start; margin: 0 0 8px;
}
.iosh_global .ehd_promomain { min-width: 0; }
.iosh_global .ehd_promoside { min-width: 0; }
/* The sidebox was born for the side column - reset its float/width so it
   behaves as a normal grid cell (same reset the nearby row uses). */
.iosh_global .ehd_promoside .iosh_sidebox { margin: 0; width: auto; float: none; }

/* FEEDBACK round 5 item 3: the last-reservation sidebox is now a small
   note telling visitors the hotel is bookable. Same iosh_sidebox class and
   h3 (kept for structure), same translated sentence with real data - only
   the look changed: compact card, tiny uppercase label, green pulse dot.
   The sidebox chrome from ios.css is neutralised below. */
.iosh_global .iosh_sidebox.ehd_lastbook {
  background: var(--ehd-chip); border: 1px solid var(--ehd-border);
  border-radius: var(--ehd-radius-card); padding: 16px 18px;
  margin: 0; width: auto; float: none; overflow: visible;
}
.iosh_global .ehd_lastbook .ehd_lastbooktitle {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px; padding: 0;
  font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--ehd-green);
  background: none; border: none;
}
.iosh_global .ehd_lastbook .ehd_lastbooktitle::before {
  content: ""; width: 8px; height: 8px; flex: 0 0 auto;
  border-radius: 50%; background: var(--ehd-green);
  animation: ehdPulse 2.4s ease-in-out infinite;
}
.iosh_global .ehd_lastbook .ehd_lastbooknote {
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--ehd-ink);
}
.iosh_global .ehd_lastbook .ehd_lastbooknote strong { color: var(--ehd-blue-dark); }
@keyframes ehdPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(50, 115, 90, 0.35); }
  50% { box-shadow: 0 0 0 5px rgba(50, 115, 90, 0); }
}
/* Admin strip under a review (owner/admin only) */
.iosh_global .iosh_reviewprive {
  background: var(--ehd-surface-mute); border-radius: var(--ehd-radius-input);
  padding: 8px 12px; margin-top: 12px; font-size: 12px; color: var(--ehd-muted);
}

/* ---------- Location section ---------- */
.iosh_global #hotellocation .ehd_locaddress {
  color: var(--ehd-muted); font-size: 15px; margin: 0 0 14px;
}
.iosh_global #hotellocation .ehd_locmap {
  border-radius: var(--ehd-radius-card); overflow: hidden;
  border: 1px solid var(--ehd-border); margin-bottom: 8px;
}
.iosh_global #hotellocation .ehd_locmap > div { border-radius: var(--ehd-radius-card); }

/* ---------- Policies / contact cards + support banner ----------
   FEEDBACK item 10: iosr paints a 30px check circle at the box's left edge;
   our old 18px 22px padding gave the text no room, so the circle sat on the
   words. iosr's own original padding was 60px on the left — we restore that
   geometry (64px) and do NOT touch the ::before itself. */
.iosh_global .iosh_highlightbox {
  background: var(--ehd-surface-mute); border: 1px solid var(--ehd-border);
  border-radius: var(--ehd-radius-card); padding: 18px 22px 18px 64px; margin: 16px 0;
  color: var(--ehd-ink); font-size: 14px; line-height: 1.6;
}
/* FEEDBACK item 9: the cheapest-price promo box must stand out — it IS the
   special offer, so a blue border + card shadow lift it above the pack. */
.iosh_global .iosh_highlightbox.ehd_recombo {
  background: var(--ehd-surface); border: 2px solid var(--ehd-blue);
  box-shadow: var(--ehd-shadow); padding-top: 20px; padding-bottom: 20px;
  margin: 22px 0;
}
.iosh_global .ehd_support {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: var(--ehd-cream); border-radius: var(--ehd-radius-card);
  padding: 24px 28px; margin: 24px 0 16px;
}
.iosh_global .ehd_support p {
  margin: 0; color: var(--ehd-ink); font-size: 15px; font-weight: 600;
}
.iosh_global .ehd_supportbtn {
  background: var(--ehd-surface); color: var(--ehd-ink);
  border: none; border-radius: var(--ehd-radius-input);
  padding: 10px 20px; font-size: 14px; font-weight: 600;
}
.iosh_global .ehd_supportbtn:hover {
  color: var(--ehd-blue-dark); text-decoration: none;
}

/* ---------- Facilities ----------
   FEEDBACK item 7: hotel facilities in 3 columns with tighter spacing,
   ✓ instead of iosr's dot, room facilities the same style in 2 columns. */
.iosh_global ul.iosh_faclist.iosh_hotelfac {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 18px; padding: 0; margin: 8px 0 16px;
}
.iosh_global ul.iosh_hotelfac li {
  color: var(--ehd-ink); font-size: 14px; background: none; padding: 2px 0 2px 20px;
}
/* ✓ replaces iosr's green dot ('\2022') on BOTH hotel and room facility
   lists. iosr positions the glyph — we only change content and colour, so
   the checkmark keeps iosr's spot. Higher specificity wins the cascade tie. */
.iosh_global ul.iosh_faclist li::before {
  content: '\2713'; color: var(--ehd-green); font-weight: 700;
}
.iosh_global .iosh_roomboxdetails ul.iosh_faclist {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 14px; padding: 0; margin: 4px 0 0;
}
.iosh_global .iosh_roomboxdetails ul.iosh_faclist li {
  padding: 2px 0 2px 20px; font-size: 13px;
}

/* ---------- FEEDBACK item 5: nearby hotels + places, one 2-column row
   before the footer (renderers unchanged, just relocated in the view) --- */
.iosh_global .ehd_nearbyrow {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; align-items: start; margin: 8px 0 16px;
}
.iosh_global .ehd_nearbyrow .iosh_sidebox { margin: 0; width: auto; float: none; }

/* ---------- FEEDBACK item 2: "More images" pop-up gallery ----------
   The modal lists every hotel photo as thumbnails; clicking one replays the
   existing colorbox lightbox link with the same index, so the core gallery
   behaviour (and its JS binding) is reused untouched. z-index 9000 sits
   UNDER colorbox's 9999 so the lightbox opens above this modal. */
.iosh_global .ehd_galmodal,
.iosh_global #hotelcontactwrap { display: none; }
.iosh_global .ehd_galmodal.ehd_open,
.iosh_global #hotelcontactwrap.ehd_open {
  display: flex; position: fixed; inset: 0; z-index: 9000;
  background: rgba(23,46,59,0.55); align-items: flex-start; justify-content: center;
  padding: 28px 16px; overflow-y: auto;
}
body.ehd_modalopen { overflow: hidden; } /* no page scroll behind an open modal */
.iosh_global .ehd_galmodalcard {
  background: var(--ehd-surface); border-radius: var(--ehd-radius-card);
  box-shadow: var(--ehd-shadow); max-width: 860px; width: 100%;
  padding: 20px 24px 24px; box-sizing: border-box;
}
.iosh_global .ehd_galmodalhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 14px;
}
.iosh_global .ehd_galmodalhead .iosh_h3 { margin: 0; }
.iosh_global .ehd_galmodalclose,
.iosh_global #hotelcontactwrap .ehd_modalclose {
  width: 34px; height: 34px; min-width: 0; border-radius: 50%;
  border: 1px solid var(--ehd-border); background: var(--ehd-surface);
  color: var(--ehd-ink); font-size: 18px; line-height: 1; cursor: pointer;
  flex: none; padding: 0;
}
.iosh_global .ehd_galmodalclose:hover,
.iosh_global #hotelcontactwrap .ehd_modalclose:hover {
  border-color: var(--ehd-blue); color: var(--ehd-blue);
}
/* The old skin paints .iosh_notice solid #004FFF (ios.css:1099) — on the hotel
   page that reads as a stray blue bar above "Hotel facilities". Soften it into
   the design's info-banner look. Scoped to .iosh_global so other pages using
   the class keep their original style. */
.iosh_global p.iosh_notice {
  background: var(--ehd-tint);
  color: var(--ehd-ink);
  border: 1px solid var(--ehd-border);
  border-radius: var(--ehd-radius-input);
  padding: 10px 16px;
  font-size: 14px;
}
.iosh_global .ehd_galmodalgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.iosh_global .ehd_galmodalgrid a {
  display: block; height: 120px; border-radius: var(--ehd-radius-input);
  overflow: hidden; border: 1px solid var(--ehd-border); box-sizing: border-box;
}
.iosh_global .ehd_galmodalgrid a:hover { border-color: var(--ehd-blue); text-decoration: none; }
.iosh_global .ehd_galmodalgrid img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* FEEDBACK round 6 item 3: the "read all reviews" popup reuses this exact
   modal shell. Its grid is the element that carries id="hotelreviewswrap"
   because the read-only manager script deletes cards with
   hotelreviewswrap.removeChild(hotelreview{id}) - so cards must stay DIRECT
   children of that grid (the view guarantees it), and those ids exist only
   inside the popup, never in the featured row on the page. */
.iosh_global #ehdrevmodal .ehd_galmodalcard { max-width: 980px; }
/* Scroll-lock safety net: body.ehd_modalopen freezes the page while a modal
   is open. A review-task page-swap (ioshHotelPage) could replace this DOM
   while the popup is still open and strand the class; the view's close-guard
   closes the popup on those clicks, and this rule is the CSS backstop - no
   .ehd_open modal on the page means the freeze is undone. */
body.ehd_modalopen:not(:has(.ehd_open)) { overflow: visible; }
/* FEEDBACK round 6 item 5: the room "more" link opens a popup instead of
   sliding the details down. The view MOVES the engine's own
   #roomdetails{rid} box into #ehdroommodalbody (ios.css hides
   .iosh_morebox, so un-hide it only inside this modal) and moves it back on
   close - the room markup is never copied or rewritten. */
.iosh_global #ehdroommodal .ehd_galmodalcard { max-width: 640px; }
.iosh_global #ehdroommodal .iosh_morebox { display: block; }
.iosh_global #ehdroommodal .iosh_roomdbox { margin: 0; }

/* ---------- FEEDBACK item 11: contact form as a pop-up ----------
   The same contactHTML() markup also renders on the standalone /contact
   page WITHOUT the #hotelcontactwrap wrapper, so every popup rule is
   scoped to that wrapper. The close button is hidden by default and only
   re-shown inside an open popup, so the standalone page never shows a
   dead close button. */
.iosh_global .iosh_dspace > .ehd_modalclose { display: none; }
.iosh_global #hotelcontactwrap.ehd_open .iosh_dspace {
  background: var(--ehd-surface); border-radius: var(--ehd-radius-card);
  box-shadow: var(--ehd-shadow); max-width: 620px; width: 100%;
  padding: 20px 26px 26px; position: relative; box-sizing: border-box;
}
.iosh_global #hotelcontactwrap.ehd_open .iosh_dspace > .ehd_modalclose {
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; top: 14px; inset-inline-end: 14px;
}
.iosh_global #hotelcontactwrap.ehd_open .iosh_formwrap_titled {
  background: none; border: none; padding: 0; margin: 12px 0 0;
}
/* Responsive contact form: label above field, both full width */
.iosh_global #hotelcontactwrap.ehd_open .iosh_formrow {
  display: block; padding: 8px 0 0; overflow: visible;
}
.iosh_global #hotelcontactwrap.ehd_open .iosh_formrow > label {
  display: block; width: auto; margin: 0 0 5px; float: none;
}
.iosh_global #hotelcontactwrap.ehd_open .iosh_formrow > div {
  margin: 0; float: none; width: auto;
}
.iosh_global #hotelcontactwrap.ehd_open input.iosh_intext,
.iosh_global #hotelcontactwrap.ehd_open textarea.iosh_textarea {
  width: 100%; max-width: 100%; box-sizing: border-box;
}
.iosh_global #hotelcontactwrap.ehd_open button#consub41 {
  width: 100%; margin-top: 12px;
}

/* ---------- Side column + modules (kept per decision 2, restyled to fit) ---------- */
.iosh_global .iosh_hotelside .ehd_sidephoto { display: none; } /* photo now lives in the main gallery */
.iosh_global #iosh_hotelcontents .module,
.iosh_global .iosh_hotelside .module {
  background: var(--ehd-surface); border: 1px solid var(--ehd-border);
  border-radius: var(--ehd-radius-card); padding: 16px;
  margin: 0 0 16px; box-shadow: var(--ehd-shadow);
}
.iosh_global .module h3,
.iosh_global .iosh_sidebox h3 {
  font-size: 15px; font-weight: 600; color: var(--ehd-ink); margin: 0 0 10px;
}
.iosh_global .iosh_sidebox {
  background: var(--ehd-surface); border: 1px solid var(--ehd-border);
  border-radius: var(--ehd-radius-card); padding: 16px; margin: 0 0 16px;
}
.iosh_global .iosh_sidebox ul { padding: 0; margin: 0; list-style: none; }
.iosh_global .iosh_sidebox ul li {
  border-bottom: 1px solid var(--ehd-border); padding: 8px 0; font-size: 13px; color: var(--ehd-ink);
}
.iosh_global .iosh_sidebox ul li:last-child { border-bottom: none; }

/* Duplicate "Hotel reviews" module in the main column is superseded by the
   inline reviews section (decision 2 + Plan A). Guarded on #hotelguestreviews
   so the module stays visible whenever the inline section does not render.
   :has() needs a modern browser; older browsers keep the module (graceful). */
.iosh_global #iosh_hotelcontents:has(#hotelguestreviews) div.module:has(div.iosh_reviewbox) { display: none; }

/* Address line under the hotel name */
.iosh_global .iosh_hotaddress {
  color: var(--ehd-muted); font-size: 14px; padding: 2px 2px 0 18px;
}

/* Last-reservation notice box */
.iosh_global .iosh_notebox {
  background: var(--ehd-chip); color: var(--ehd-blue-dark);
  border: none; border-radius: var(--ehd-radius-input);
  font-size: 13px; padding: 10px 12px;
}

/* Rating module (side) */
.iosh_global .iosh_bigrating { color: var(--ehd-blue-dark); }

/* ---------- Desktop columns ---------- */
@media only screen and (min-width: 801px) {
  /* The side column's photo gallery, mini-map and nearby lists moved into
     the main long-scroll page (decision 1). The side wrapper only holds
     OPTIONAL extras (street view, last-reservation notice, side modules,
     TripAdvisor) and must not reserve a fixed empty column. It now renders
     as a normal full-width block UNDER the main content when it has
     anything to show, and collapses to zero height when empty. */
  .iosh_global .iosh_hotelmain_inner { margin-inline-start: 0; }
  .iosh_global .iosh_hotelside {
    float: none; clear: both; width: auto; margin: 16px 0 0; padding: 0;
  }
}

/* ---------- Mobile ---------- */
@media only screen and (max-width: 800px) {
  /* Nav strip: the 56px full-height link bars become compact wrapped rows
     (mockup mobile: links wrap, small vertical rhythm). The duplicated-class
     form mirrors the desktop block, so it beats the core iosr.css @media
     overrides (plain 0-3-1 / pill 0-4-1) exactly like desktop beats theirs. */
  .iosh_global .iosh_nav { min-height: 0; gap: 2px 20px; padding: 6px 0; }
  .iosh_global .iosh_nav.iosh_nav > a.iosh_nava.iosh_nava {
    min-height: 0; padding: 6px 0; font-size: 13px;
  }
  .iosh_global .ehd-hnav-word { display: none; }
  .iosh_global #hotelgallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  .iosh_global #hotelgallery .ehd_galfeatured { grid-column: 1 / -1; grid-row: span 2; }
  .iosh_global ul.iosh_faclist.iosh_hotelfac { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iosh_global .iosh_roomboxdetails ul.iosh_faclist { grid-template-columns: 1fr; }
  .iosh_global .ehd_nearbyrow { grid-template-columns: 1fr; }
  .iosh_global .ehd_galmodalgrid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .iosh_global .ehd_galmodal.ehd_open,
  .iosh_global #hotelcontactwrap.ehd_open { padding: 12px 10px; }
  .iosh_global #hotelcontactwrap.ehd_open .iosh_dspace { padding: 16px 16px 20px; }

  /* Room card stacks: photo, then info, then booking column (single grid column) */
  .iosh_global .iosh_roombox { grid-template-columns: 1fr; }
  .iosh_global .iosh_roomimgwrap, .iosh_global .iosh_roomimgwrap img { height: 200px; }
  .iosh_global .iosh_roomboxdetails { padding: 16px 16px 6px; }
  .iosh_global .iosh_pickbookwrap {
    width: 100%; border-inline-start: none;
    border-top: 1px solid var(--ehd-border); padding: 14px 16px 16px;
  }

  /* Availability card stacks; the hairline divider turns into a top rule */
  .iosh_global #hoteldates .ehd_searchrow { flex-direction: column; }
  .iosh_global #hoteldates .ehd_searchfield { padding: 8px 2px; flex: none; }
  .iosh_global #hoteldates .ehd_searchfield + .ehd_searchfield::before {
    inset-inline-start: 2px; inset-inline-end: 2px; top: 0; left: 2px; right: 2px;
    width: auto; height: 1px; transform: none;
  }
  .iosh_global #hoteldates .ehd_searchgo { width: 100%; margin: 10px 0 0; }

  /* Reviews stack on phones: cards column, summary column, bars one-up */
  .iosh_global .ehd-hrev-cards { flex-direction: column; }
  .iosh_global .ehd-hrev-summary { flex-direction: column; align-items: stretch; }
  .iosh_global .ehd-hrev-cats { grid-template-columns: 1fr; }
  .iosh_global .ehd-hrev-title { font-size: 22px; }

  /* FEEDBACK items 5+7: two-column rows stack on mobile */
  .iosh_global .ehd_descrow { grid-template-columns: 1fr; }
  .iosh_global .ehd_promorow { grid-template-columns: 1fr; }

  /* SHOW hotel photos on mobile: un-hide the image that core ios.css/iosr.css
     hides on small screens. The engine card photo must be visible on phone. */
  .iosh_global .ehd_locpage .iosh_hotelboximg {
    display: block !important;
  }
}

/* ======================================================================
   ROUND 8 — RESULTS / LOCATION PAGE (.ehd_locband + .ehd_locpage)
   Scoped so rounds 1-7 (hotel page) are untouched: every rule lives under
   .iosh_global .ehd_locband / .iosh_global .ehd_locpage (0-3-0+). That
   outranks core's plain selectors in ios.css AND both iosr.css copies —
   including the second copy that loads AFTER this file — with no
   !important. Flex + logical properties only, so ehd-rtl.css needs no
   mirrored rules. Physical sprite icons of the old sheet are removed and
   replaced with CSS chevrons/text, keeping RTL correct.
   ====================================================================== */

/* ---------- Top band: mockup's #F8FAFC wash + the engine's own search
   form as the white search bar — same structure as mockup .ehd-sum-band >
   .ehd-searchbar. Fields are borderless inside the bar (the card is the
   border), divided by hairline separators and focused as a whole via
   :focus-within — all mockup patterns. ids, fields, hidden inputs and the
   JS (autocomplete/datepicker/guests) are untouched. Values mirror
   mockups/css/ehd-chrome.css 1219-1363. ---------- */
:root {
  --ehd-band: #F8FAFC;                                     /* .ehd-sum-band */
  --ehd-shadow-hover: 0 14px 40px rgba(21, 59, 75, 0.14);  /* mockup --e-2  */
  --ehd-error-text: #A50E0E;                               /* mockup errors */
  --ehd-ease: cubic-bezier(0.2, 0, 0.1, 1);                /* --ease-brand  */
}
.iosh_global .ehd_locband {
  background: var(--ehd-band); border: none;
  border-radius: var(--ehd-radius-card); box-shadow: none;
  padding: 24px 20px 28px; margin: 0 0 24px;
}
.iosh_global .ehd_locband #locationtop { margin: 0 0 16px; }
.iosh_global .ehd_locband #locationtop h1 {
  margin: 0; font: 600 36px/1.15 var(--ehd-font); color: var(--ehd-ink);
}
@media only screen and (max-width: 800px) {
  .iosh_global .ehd_locband #locationtop h1 { font-size: 26px; }
}

/* The engine form carries its own panel chrome (blue ribbon caption + grey
   box). The white bar replaces it and the caption stays hidden; ids,
   fields, hidden inputs and the JS (autocomplete/datepicker/guests)
   are untouched. */
.iosh_global .ehd_locband #hsearch.iosh_formwrap_titled {
  background: var(--ehd-surface); border: 1px solid var(--ehd-border);
  border-radius: var(--ehd-radius-card); box-shadow: var(--ehd-shadow);
  padding: 12px; margin: 0; min-height: 96px; box-sizing: border-box;
}
.iosh_global .ehd_locband .iosh_formtitle { display: none; }
.iosh_global .ehd_locband form.iosh_form {
  display: flex; flex-wrap: wrap; gap: 0;
  align-items: stretch; justify-content: flex-end; margin: 0; padding: 0;
}
/* one row of fields, whatever the count. flex-basis 0 + min-width 0 makes the
   wrap decision see a zero footprint, so the 9 engine fields share the bar
   instead of spilling onto a second line (mockup .ehd-searchbar is a single
   96px row). Ratios below give each field its own share of the row. */
.iosh_global .ehd_locband .iosh_formrow {
  position: relative; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: stretch; gap: 4px;
  margin: 0; padding: 4px 10px; flex: 1 1 0; min-width: 0;
  box-sizing: border-box;
}
.iosh_global .ehd_locband .iosh_formrow:after { display: none; }
/* hairline between adjacent fields — mockup .ehd-field + .ehd-field::before
   (1px x 42px, vertically centred). Desktop only: this form wraps 8 fields
   onto second lines below 801px, where a vertical stub would dangle.
   inset-inline-start keeps the divider correct in RTL. */
@media only screen and (min-width: 801px) {
  .iosh_global .ehd_locband .iosh_formrow + .iosh_formrow::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 50%;
    transform: translateY(-50%); width: 1px; height: 42px;
    background: var(--ehd-border);
  }
}
.iosh_global .ehd_locband .iosh_formrow > label {
  float: none; display: block; width: auto; max-width: 100%; margin: 0; padding: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 10px/1.4 var(--ehd-font); letter-spacing: .03em;
  text-transform: uppercase; color: var(--ehd-muted); text-align: start;
}
/* ios.css gives .iosh_tip a 9px pad + 27px top margin everywhere, and our
   band inherits it — the margin is what lifts the bar past its 96px height.
   Neutralise both here (specificity 0-3-0 beats the 0-2-0 core rule). */
.iosh_global .ehd_locband .iosh_formrow > div {
  margin: 0; min-width: 0; max-width: 100%; box-sizing: border-box;
}
/* per-field widths keyed to the field ids themselves — config-gated
   selects (Score/Stars/Meals) slot in correctly when shown or hidden.
   Bases are measured minimums (label + widest value + 20px row padding) so the
   dates, the guests summary and the destination text never clip; the three
   filter selects share whatever is left and shorten with an ellipsis. */
.iosh_global .ehd_locband .iosh_formrow:has(#picklocation48) { flex: 1 1 103px; }
.iosh_global .ehd_locband .iosh_formrow:has(#pickcheckin48),
.iosh_global .ehd_locband .iosh_formrow:has(#pickcheckout48) { flex: 1 1 92px; }
.iosh_global .ehd_locband .iosh_formrow:has(select) { flex: 1 1 60px; }
.iosh_global .ehd_locband .iosh_formrow:has(#flexlocation48) {
  flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px;
  padding-inline: 8px;
}
.iosh_global .ehd_locband .iosh_formrow:has(#flexlocation48)::before { display: none; }
.iosh_global .ehd_locband .iosh_formrow:has(#flexlocation48) > div > label {
  font: 400 12px/1.4 var(--ehd-font); text-transform: none; letter-spacing: 0;
}
.iosh_global .ehd_locband .iosh_formrow:has(#pickguests48) { flex: 1 1 181px; }
.iosh_global .ehd_locband .iosh_formrow:has(button[name="picksub"]) { flex: 0 0 auto; min-width: 0; }
/* Round 10 (owner): the Score, Stars/Keys and Meals selects no longer show
   in the bar. The ROWS are hidden here, not removed from the page — the
   selects keep their ids and their "0 = all" value, so every engine script
   (validation, autosubmit, filter sync) still finds them and submits what it
   always submitted; the same three filters remain available in the left rail.
   The per-field :has() bases above already tolerate the rows being gone. */
.iosh_global .ehd_locband .iosh_formrow:has(#rscore48),
.iosh_global .ehd_locband .iosh_formrow:has(#stars48),
.iosh_global .ehd_locband .iosh_formrow:has(#meals48) { display: none; }
/* fields: borderless inside the white bar (mockup .ehd-field-value — the
   card carries the border, the hairlines carry the grouping). 13px/500 with a
   42px floor so every control — input, select, guests summary, Go button —
   shares one baseline and the bar lands at its 96px min-height. */
.iosh_global .ehd_locband .iosh_formrow input[type="text"],
.iosh_global .ehd_locband .iosh_formrow select {
  box-sizing: border-box; width: 100%; height: auto; min-height: 42px;
  border: none; border-radius: 0; background: transparent;
  color: var(--ehd-ink); padding: 2px 0;
  font: 500 13px/1.4 var(--ehd-font);
}
.iosh_global .ehd_locband .iosh_formrow input[type="text"]:focus,
.iosh_global .ehd_locband .iosh_formrow select:focus {
  outline: none; box-shadow: none; border: none;
}
/* focus ring on the field wrapper — mockup .ehd-field:focus-within */
.iosh_global .ehd_locband .iosh_formrow:focus-within {
  outline: 2px solid var(--ehd-blue); outline-offset: 2px;
  border-radius: var(--ehd-radius-input);
}
/* guests: summary line + the engine's popup. Round 10: the popup no longer
   opens IN FLOW (that stretched the 96px bar to the height of the whole room
   list and shoved the page down — worse when the bar was stacked on mobile).
   It now floats under the guests field; core JS still toggles its display,
   the rows and steppers are untouched. The summary is
   plain text in a div, so it needs max-width:100% + min-width:0 to honour the
   field's share of the row — otherwise the unbreakable string forces the bar
   wider than the viewport on mobile. The bare span/a children are the flex
   items, so they too must be allowed to shrink. */
.iosh_global .ehd_locband .iosh_tip {
  display: flex; align-items: center; min-height: 42px; max-width: 100%;
  margin: 0; padding: 2px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 500 13px/1.4 var(--ehd-font); color: var(--ehd-ink);
}
.iosh_global .ehd_locband .iosh_tip > span {
  min-width: 0; max-width: 100%; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
.iosh_global .ehd_locband .iosh_tip > span:last-child { flex: 0 0 auto; }
.iosh_global .ehd_locband .iosh_tip a { color: var(--ehd-blue-dark); font-weight: 600; text-decoration: none; }
/* The panel itself Floats (see comment above). The field row is already
   position:relative, so the panel anchors below "change" and leaves the bar
   at its 96px — nothing on the page moves when it opens. Width caps to the
   viewport so it can never hang off the right edge on a phone;
   inset-inline-start keeps the anchor correct for RTL Arabic. */
.iosh_global .ehd_locband #pickguests48.iosh_morebox {
  position: absolute; top: 100%; inset-inline-start: 0; z-index: 80;
  width: min(430px, calc(100vw - 32px)); box-sizing: border-box;
  border: 1px solid var(--ehd-border); border-radius: var(--ehd-radius-input);
  background: var(--ehd-surface); padding: 12px; margin: 4px 0 0;
  box-shadow: var(--ehd-shadow-hover);
}
.iosh_global .ehd_locband .iosh_formrow button.iosh_btn {
  align-self: flex-end; height: auto; padding: 14px 22px; cursor: pointer;
  border: 1px solid var(--ehd-blue);
  border-radius: var(--ehd-radius-input); background: var(--ehd-blue);
  color: #fff; font: 600 14px/1 var(--ehd-font);
  transition: background 120ms var(--ehd-ease);
}
.iosh_global .ehd_locband .iosh_formrow button.iosh_btn:hover {
  background: var(--ehd-blue-hover); border-color: var(--ehd-blue-hover);
}
.iosh_global .ehd_locband .iosh_formrow button.iosh_btn:active {
  background: #1967D2; border-color: #1967D2;    /* mockup --brand-600 */
}
/* Two wrap breakpoints, mirroring the mockup's own split. The mockup has 4
   fields and stacks them all under 768px; the engine has 9, so a single
   stack would be a very long form. Mid screens get a compact 2-up grid
   (basis 50%): two fields per line, the destination and the Go button each
   taking a full line. Under 768px everything stacks, as the mockup does. */
@media only screen and (min-width: 769px) and (max-width: 1020px) {
  .iosh_global .ehd_locband .iosh_formrow { flex: 1 1 50%; }
  .iosh_global .ehd_locband .iosh_formrow:has(#picklocation48) { flex: 1 1 100%; }
  /* flexible is a fixed-width checkbox row — pair it with another field
     instead of letting its auto width strand a 50% partner alone */
  .iosh_global .ehd_locband .iosh_formrow:has(#flexlocation48) { flex: 1 1 50%; }
  .iosh_global .ehd_locband .iosh_formrow:has(button[name="picksub"]) {
    flex: 0 0 auto; margin-top: 4px;
  }
}
@media only screen and (max-width: 768px) {
  .iosh_global .ehd_locband { padding: 14px 8px 16px; }
  .iosh_global .ehd_locband #hsearch.iosh_formwrap_titled { padding: 8px; }
  .iosh_global .ehd_locband .iosh_formrow { padding: 4px 8px; flex: 1 1 100%; }
  .iosh_global .ehd_locband .iosh_formrow:has(#flexlocation48) { flex: 1 1 100%; }
  .iosh_global .ehd_locband .iosh_formrow button.iosh_btn { width: 100%; }
}

/* ---------- ROUND 9: tab-search/pill-bar design ---------- */
.iosh_global .ehd_locband .iosh_pillbar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-start;
  margin: 0 0 12px; padding: 8px; background: var(--ehd-surface);
  border: 1px solid var(--ehd-border); border-radius: var(--ehd-radius-input);
  box-sizing: border-box;
}
.iosh_global .ehd_locband .iosh_pill {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 80px; padding: 6px 10px; font: 500 11px/1 var(--ehd-font);
  color: var(--ehd-ink); background: var(--ehd-chip); border: 1px solid var(--ehd-border);
  border-radius: var(--ehd-radius-input); white-space: nowrap; gap: 4px;
  transition: all 120ms var(--ehd-ease);
  cursor: pointer;
}
.iosh_global .ehd_locband .iosh_pill:hover {
  background: var(--ehd-blue-hover); border-color: var(--ehd-blue-hover); color: var(--ehd-blue);
}
.iosh_global .ehd_locband .iosh_pill.iosh_pill-selected {
  background: var(--ehd-blue); color: #fff; border-color: var(--ehd-blue);
}
.iosh_global .ehd_locband .iosh_pill .iosh_pill-icon {
  width: 16px; height: 16px; margin-bottom: 2px;
}
.iosh_global .ehd_locband .iosh_pill .iosh_pill-label {
  font-size: 9px; line-height: 1.2; text-align: center;
}

/* ---------- Desktop: filter rail at start, results after ----------------
   Same breakpoint split as the engine: the core sheet hides .iosh_hotelside
   at <=800px and that behavior is preserved; the rail returns at >=801px
   as a flex column (replaces the old -100% negative-margin float trick).
   Gap 32 + 272px rail = mockup .ehd-results-wrap / .ehd-rail. Card
   geometry lives in its own >=801px block AFTER the base card rules, so
   equal-specificity rules never fight over source order. */
@media only screen and (min-width: 801px) {
  .iosh_global .ehd_locpage { display: flex; align-items: flex-start; gap: 32px; }
  .iosh_global .ehd_locpage .iosh_hotelmain {
    flex: 1 1 auto; width: auto; min-width: 0; margin: 0;
  }
  .iosh_global .ehd_locpage .iosh_hotelside {
    flex: 0 0 272px; width: 272px; order: -1;
    float: none; clear: none; display: block; margin: 0;
  }
}
/* ---------- Results cards: mockup .ehd-hcard ---------------------------------
   Engine box: .iosh_hotelboxright comes FIRST in the DOM, then
   .iosh_hotelboxleft (photo + details), then an optional .iosh_hotelboxbottom
   strip. The base rules below are mobile-first (stacked); the mockup's side
   geometry returns in the min-801px block at the end. Core's float layout and
   its #eaf6fa hover wash are neutralised here (floats off, wash -> shadow). */
.iosh_global .ehd_locpage .iosh_hotelbox {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 0 0 20px; padding: 16px; box-sizing: border-box;
  background: var(--ehd-surface); border: 1px solid var(--ehd-border);
  border-radius: var(--ehd-radius-card); box-shadow: var(--ehd-shadow);
  transition: box-shadow 120ms var(--ehd-ease);
}
.iosh_global .ehd_locpage .iosh_hotelbox:hover {
  background: var(--ehd-surface); box-shadow: var(--ehd-shadow-hover);
}
.iosh_global .ehd_locpage .iosh_hotelbox .clear { display: none; }

/* score / price / map-pin rail (first in the DOM, rendered last).
   Round 11: the whole rail is a full-width centred strip — score, price and
   map button all align centre inside it, mobile and (below) desktop. */
.iosh_global .ehd_locpage .iosh_hotelboxright {
  order: 2; float: none; width: auto; margin: 0; min-width: 0;
  flex: 1 1 100%; flex-direction: column;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 14px; text-align: center;
}
.iosh_global .ehd_locpage .iosh_hotelboxscore {
  margin: 0; padding: 0; background: none; border-radius: 0;
  display: flex; flex-direction: row; align-items: center; gap: 8px;
}
/* mockup .ehd-rcard-score: 6px padding, 13px/700, radius 5 — re-specify
   width/height because iosr.css re-asserts a 64px circle (50px <=480px) */
.iosh_global .ehd_locpage .iosh_hotelboxscorel {
  display: inline-flex; align-items: center; justify-content: center;
  float: none; width: auto; height: auto; padding: 6px;
  background: var(--ehd-chip); border-radius: 5px; text-align: center;
  font: 700 13px/1.2 var(--ehd-font); color: var(--ehd-blue); min-width: 0;
}
.iosh_global .ehd_locpage .iosh_hotelboxscorer {
  display: block; float: none; width: auto; padding: 0; text-align: start;
  font: 400 12px/1.4 var(--ehd-font); color: var(--ehd-muted);
}
.iosh_global .ehd_locpage .iosh_pricefrom {
  margin: 0; padding: 0; text-align: center;
}
.iosh_global .ehd_locpage .iosh_pricefrom span {
  display: block; font: 600 20px/1.1 var(--ehd-font); color: var(--ehd-ink);
}
.iosh_global .ehd_locpage .iosh_pricefrom div {
  margin: 0; padding: 0; text-align: center;
  font: 400 11px/1.4 var(--ehd-font); color: var(--ehd-muted);
}
/* map pin — round 11 "surprise me": the 24px gmap.png thumbnail is hidden and
   the colourbox <a> becomes a brand-gradient disc carrying a white map-pin
   glyph (inline SVG data-uri, palette tokens). The anchor keeps its href,
   onclick and title untouched — only its skin changes. Ring pulses on hover. */
.iosh_global .ehd_locpage .iosh_hotelbox .iosh_tsspace { margin: 0; }
.iosh_global .ehd_locpage .iosh_hotelbox .iosh_tsspace a {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; box-sizing: border-box;
  border: none; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / 20px 20px no-repeat,
    linear-gradient(140deg, var(--ehd-blue) 0%, var(--ehd-blue-hover) 100%);
  box-shadow: 0 2px 6px rgba(66, 133, 244, 0.35);
  transition: transform 140ms var(--ehd-ease), box-shadow 140ms var(--ehd-ease);
}
.iosh_global .ehd_locpage .iosh_hotelbox .iosh_tsspace a::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--ehd-blue); opacity: 0; transform: scale(0.85);
  transition: opacity 160ms var(--ehd-ease), transform 160ms var(--ehd-ease);
  pointer-events: none;
}
.iosh_global .ehd_locpage .iosh_hotelbox .iosh_tsspace a:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(66, 133, 244, 0.4);
}
.iosh_global .ehd_locpage .iosh_hotelbox .iosh_tsspace a:hover::after {
  opacity: 0.35; transform: scale(1);
}
.iosh_global .ehd_locpage .iosh_hotelbox .iosh_tsspace a:active { transform: scale(0.96); }
.iosh_global .ehd_locpage .iosh_hotelbox .iosh_tsspace img { display: none; }

/* photo + details column */
.iosh_global .ehd_locpage .iosh_hotelboxleft {
  order: 1; float: none; margin: 0; width: auto; min-width: 0;
  display: flex; flex-direction: column; gap: 12px; flex: 1 1 100%;
}
.iosh_global .ehd_locpage .iosh_hotelboximg {
  position: relative; float: none; width: 100%; flex: none; margin: 0; padding: 0;
}
.iosh_global .ehd_locpage .iosh_hotelboximg .iosh_quickimgwrap {
  display: block; margin: 0; height: 190px;
  border-radius: var(--ehd-radius-input); overflow: hidden;
  background: var(--ehd-surface-mute);
}
.iosh_global .ehd_locpage .iosh_hotelboximg .iosh_quickimgwrap img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.iosh_global .ehd_locpage .iosh_hotelboximg .iosh_quickimgwrap a {
  display: block; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto;
}
.iosh_global .ehd_locpage .iosh_hotelboximg .iosh_quickimgwrap a:hover {
  background: rgba(23, 46, 59, 0.22);
}
/* account-type badge (core's red tag) becomes the mockup's white pill */
.iosh_global .ehd_locpage .iosh_hotelboximg .iosh_quickimgwrap > span {
  top: 14px; bottom: auto; left: auto; right: auto; inset-inline-start: 14px;
  padding: 7px 11px; border-radius: 100px;
  background: var(--ehd-surface); border: 1px solid var(--ehd-blue);
  color: var(--ehd-blue); font: 600 11px/1 var(--ehd-font);
}
.iosh_global .ehd_locpage .iosh_hotelboxdetails { margin: 0; padding: 0; min-width: 0; }
/* the title is the card's click target (the engine card has no other button) */
.iosh_global .ehd_locpage .iosh_hotelboxdetails h3 {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0;
  font: 600 21px/1.25 var(--ehd-font); color: var(--ehd-ink);
}
.iosh_global .ehd_locpage .iosh_hotelboxdetails h3 a,
.iosh_global .ehd_locpage .iosh_hotelboxdetails h3 a:visited {
  color: inherit; text-decoration: none; border: none;
}
.iosh_global .ehd_locpage .iosh_hotelboxdetails h3 a:hover { color: var(--ehd-blue); }
.iosh_global .ehd_locpage .iosh_hotelboxdetails .iosh_stars { vertical-align: middle; }
.iosh_global .ehd_locpage .iosh_hotboxaddress {
  margin: 0 0 6px; padding: 0; background: none;
  font-size: 12px; color: var(--ehd-blue);
}
.iosh_global .ehd_locpage .iosh_hotboxaddress a { color: inherit; text-decoration: none; }
.iosh_global .ehd_locpage .iosh_hotboxaddress a:hover { color: var(--ehd-blue-hover); }
/* room rows keep every engine line (price, zero, meals, promo, contact) and
   only lose the sprite icons and orange separators */
.iosh_global .ehd_locpage .iosh_hotelboxdetails .iosh_space { margin: 6px 0 0; }
.iosh_global .ehd_locpage .iosh_hotelboxdetails .iosh_hotelroom {
  margin: 10px 0 0; padding: 10px 0 0;
  border-top: 1px solid var(--ehd-border); font: 400 13px/1.5 var(--ehd-font);
}
.iosh_global .ehd_locpage .iosh_hotelroom h4 {
  margin: 0 0 4px; font: 600 13px/1.4 var(--ehd-font); color: var(--ehd-ink);
}
.iosh_global .ehd_locpage .iosh_hotelroom h4 a { color: inherit; text-decoration: none; }
.iosh_global .ehd_locpage .iosh_hotelroom h4 a:hover { color: var(--ehd-blue); }
.iosh_global .ehd_locpage .iosh_hotelroom .iosh_persons {
  background: none; padding: 0; color: var(--ehd-muted); font-size: 12px;
}
.iosh_global .ehd_locpage .iosh_roompromo {
  margin: 4px 0; color: var(--ehd-blue-dark); font-size: 12px;
}
.iosh_global .ehd_locpage .iosh_hotelboxdetails .iosh_zero {
  font-size: 12px; color: var(--ehd-muted);
}
.iosh_global .ehd_locpage .iosh_hotelboxcontact {
  background: none; padding: 0; color: var(--ehd-muted); font-size: 12px;
}
.iosh_global .ehd_locpage .iosh_meals_breakfast,
.iosh_global .ehd_locpage .iosh_meals_halfboard,
.iosh_global .ehd_locpage .iosh_meals_fullboard,
.iosh_global .ehd_locpage .iosh_meals_allinclusive {
  background: none; padding: 0; margin: 2px 0;
  font: 400 12px/1.5 var(--ehd-font); color: var(--ehd-muted);
}
.iosh_global .ehd_locpage .iosh_noreservations {
  background: none; padding: 0; margin: 2px 0;
  font: 600 12px/1.5 var(--ehd-font); color: var(--ehd-error-text);
}
/* discount / promo strip below the room list — order:3 at every width so it
   always lands AFTER photo/details (1) and score/price (2) in the flex box.
   Round 11: the strip is a grid, so every box is exactly the same size
   (1fr columns, row-stretched height); text sits left + vertically centred
   (start = left in LTR, right in RTL). */
.iosh_global .ehd_locpage .iosh_hotelboxbottom {
  order: 3;
  flex: 0 0 100%; width: 100%; box-sizing: border-box;
  margin: 2px 0 0; padding: 10px;
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--ehd-surface-mute); border: none; border-radius: var(--ehd-radius-input);
  font: 400 12px/1.5 var(--ehd-font); color: var(--ehd-ink);
}
.iosh_global .ehd_locpage .iosh_hotelboxbottom > div {
  background: var(--ehd-surface); border: 1px solid var(--ehd-border);
  border-radius: var(--ehd-radius-input); box-sizing: border-box;
  margin: 0; padding: 10px 12px; min-height: 52px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  text-align: start;
}
.iosh_global .ehd_locpage .iosh_hotelboxbottom strong {
  color: var(--ehd-error-text); font-weight: 600; font-size: 13px;
}
.iosh_global .ehd_locpage .iosh_hotelboxbottom abbr {
  margin: 0;
}

/* ---------- Ordering nav: engine sort links -> mockup segmented control ---- */
.iosh_global .ehd_locpage nav.iosh_ordering {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin: 0 0 20px; padding: 4px;
  background: var(--ehd-surface); border: 1px solid var(--ehd-border);
  border-radius: var(--ehd-radius-input);
}
.iosh_global .ehd_locpage nav.iosh_ordering > span {
  padding: 0 8px; font-size: 12px; color: var(--ehd-muted);
}
.iosh_global .ehd_locpage nav.iosh_ordering > a {
  display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 6px;
  background: none; font-size: 12px; color: var(--ehd-ink); text-decoration: none;
  transition: color 120ms var(--ehd-ease), background 120ms var(--ehd-ease);
}
.iosh_global .ehd_locpage nav.iosh_ordering > a:hover { color: var(--ehd-blue-hover); }
.iosh_global .ehd_locpage nav.iosh_ordering > a.iosh_orderselected {
  background: var(--ehd-chip); color: var(--ehd-blue-dark); font-weight: 600;
}

/* ---------- Filter panels: mockup filter card (pad 20, 14/600 heads, 13px
   rows, muted counts right-aligned). The open/close state is a class swap on
   the same anchor and the ul display is class-controlled too, so both anchors
   are skinned and display is never touched. ---------- */
.iosh_global .ehd_locpage .iosh_filtersbox {
  margin: 0; padding: 14px 0 0; background: none; border: none;
  border-top: 1px solid var(--ehd-border); border-radius: 0;
}
.iosh_global .ehd_locpage .iosh_filtersbox:first-of-type {
  border-top: none; padding-top: 0;
}
/* the engine collapses unselected groups with .iosh_morebox (display:none in
   ios.css). The mockup shows every group open, so this un-hides them — WITHOUT
   !important: the engine's own slideToggle() writes an inline display style,
   which beats the stylesheet, so the close action keeps working. */
.iosh_global .ehd_locpage .iosh_filtersbox ul.iosh_filteroptions.iosh_morebox {
  display: block;
}
.iosh_global .ehd_locpage .iosh_filtersbox h4.iosh_filtertitle {
  margin: 0; padding: 0; border: none;
  font: 600 14px/1.4 var(--ehd-font); color: var(--ehd-ink);
}
.iosh_global .ehd_locpage .iosh_filtersbox h4.iosh_filtertitle a.iosh_filteropen,
.iosh_global .ehd_locpage .iosh_filtersbox h4.iosh_filtertitle a.iosh_filterclose {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0; background: none; color: inherit; font: inherit; text-decoration: none;
}
/* the engine hands 4 of the 5 groups the *closed* anchor class while this skin
   shows every list open, so a class-keyed chevron would disagree with the
   content. Both classes get the same open marker (mockup chevron-up); the
   toggle still works — the list sliding away is its own feedback. */
.iosh_global .ehd_locpage .iosh_filtersbox h4.iosh_filtertitle a.iosh_filteropen::after,
.iosh_global .ehd_locpage .iosh_filtersbox h4.iosh_filtertitle a.iosh_filterclose::after {
  content: "\25B4"; margin-inline-start: 8px;
  font-size: 10px; color: var(--ehd-muted);
}
.iosh_global .ehd_locpage .iosh_filtersbox ul.iosh_filteroptions {
  margin: 12px 0 0; padding: 0; list-style: none;
}
.iosh_global .ehd_locpage .iosh_filtersbox ul.iosh_filteroptions li {
  margin: 0; padding: 0; border: none; background: none; list-style: none;
}
.iosh_global .ehd_locpage .iosh_filtersbox ul.iosh_filteroptions li a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 8px; border-radius: 6px; background: none;
  font-size: 13px; color: var(--ehd-ink); text-decoration: none;
  transition: background 120ms var(--ehd-ease);
}
.iosh_global .ehd_locpage .iosh_filtersbox ul.iosh_filteroptions li a:hover {
  background: var(--ehd-surface-mute);
}
.iosh_global .ehd_locpage .iosh_filtersbox ul.iosh_filteroptions li a span {
  font-size: 12px; font-weight: 400; color: var(--ehd-muted);
}
.iosh_global .ehd_locpage .iosh_filtersbox ul.iosh_filteroptions li a.iosh_filterselected {
  background: var(--ehd-chip); color: var(--ehd-blue-dark); font-weight: 600;
}
.iosh_global .ehd_locpage .iosh_filtersbox ul.iosh_filteroptions li a.iosh_filterselected span {
  color: inherit; font-weight: 600;
}

/* ---------- Side rail: map card, module boxes, gallery thumbs ---------- */
.iosh_global .ehd_locpage .iosh_dspace { margin: 0 0 22px; }
.iosh_global .ehd_locpage .iosh_static_map {
  margin: 0; background: var(--ehd-surface);
  border: 1px solid var(--ehd-border); border-radius: var(--ehd-radius-card);
  overflow: hidden;
}
.iosh_global .ehd_locpage .iosh_static_map img {
  display: block; width: 100%; height: auto; border-radius: 0;
}
.iosh_global .ehd_locpage .iosh_static_map img:hover { border: 0; }
.iosh_global .ehd_locpage a.iosh_centlink {
  display: block; padding: 10px; text-align: center;
  font-size: 12px; color: var(--ehd-blue-dark);
}
.iosh_global .ehd_locpage .iosh_sidebox {
  margin: 0 0 22px; padding: 16px 20px; background: var(--ehd-surface);
  border: 1px solid var(--ehd-border); border-radius: var(--ehd-radius-card);
}
.iosh_global .ehd_locpage .iosh_sidebox h3 {
  margin: 0 0 12px; font: 600 18px/1.4 var(--ehd-font); color: var(--ehd-ink);
}
.iosh_global .ehd_locpage .iosh_sidebox ul { margin: 0; padding: 0; list-style: none; }
.iosh_global .ehd_locpage .iosh_sidebox ul li {
  margin: 0; padding: 0; border: none; background: none; list-style: none;
}
.iosh_global .ehd_locpage .iosh_sidebox ul li.iosh_noborder {
  background: none; padding-inline-start: 0;
}
.iosh_global .ehd_locpage .iosh_sidebox ul li a {
  display: block; padding: 2px 0; font-size: 13px; color: var(--ehd-ink); text-decoration: none;
}
.iosh_global .ehd_locpage .iosh_sidebox ul li a:hover { color: var(--ehd-blue); }
.iosh_global .ehd_locpage .iosh_hotelside .iosh_gallink {
  border-radius: var(--ehd-radius-input); overflow: hidden;
}
.iosh_global .ehd_locpage .iosh_hotelside .iosh_gallink img { opacity: 1; }
.iosh_global .ehd_locpage .iosh_hotelside .iosh_gallink img:hover { border: 0; opacity: 1; }

/* ---------- Pagination: engine nav -> mockup pills (34px, current solid) -- */
.iosh_global .ehd_locpage .elx_navigation {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 0 0; font-size: 12px; color: var(--ehd-muted);
}
.iosh_global .ehd_locpage .elx_navigation span.elx_nav_page { margin-inline-end: 8px; }
.iosh_global .ehd_locpage .elx_navigation a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding-inline: 6px; box-sizing: border-box;
  border: 1px solid var(--ehd-border); border-radius: 6px;
  background: var(--ehd-surface); font-size: 12px; font-weight: 400;
  color: var(--ehd-ink); text-decoration: none;
  transition: color 120ms var(--ehd-ease), border-color 120ms var(--ehd-ease);
}
.iosh_global .ehd_locpage .elx_navigation a:hover { color: var(--ehd-blue-hover); }
.iosh_global .ehd_locpage .elx_navigation a.elx_nav_link_active {
  background: var(--ehd-blue); border-color: var(--ehd-blue);
  color: #fff; font-weight: 600;
}

/* ---------- Card geometry, desktop only. The card column is ~230px narrower
   than the mockup's canvas, so the mockup's 278px photo + 200px price rail no
   longer fit beside the details. Bases of 0 let the three columns share the
   real width instead of wrapping the price rail under the photo. ---------- */
@media only screen and (min-width: 801px) {
  .iosh_global .ehd_locpage .iosh_hotelbox { min-height: 240px; padding: 14px; }
  .iosh_global .ehd_locpage .iosh_hotelboxleft {
    flex: 1 1 0; min-width: 0; flex-direction: row; align-items: stretch; order: 1;
  }
  .iosh_global .ehd_locpage .iosh_hotelboximg { flex: 0 0 190px; width: auto; align-self: stretch; }
  .iosh_global .ehd_locpage .iosh_hotelboximg .iosh_quickimgwrap { height: 100%; min-height: 180px; }
  .iosh_global .ehd_locpage .iosh_hotelboxdetails { flex: 1 1 0; min-width: 0; }
  .iosh_global .ehd_locpage .iosh_hotelboxright {
    flex: 0 0 168px; flex-direction: column; align-items: center;
    justify-content: flex-end; text-align: center; gap: 8px; order: 2;
  }
  .iosh_global .ehd_locpage .iosh_hotelboxbottom { flex: 0 0 100%; order: 3; width: auto; }
}

/* ============================================================
   ROUND 11 — booking flow (book.html.php: login gate, checkout,
   error, confirmation, payment-select) to the mockup.
   Design source: mockups/css/booking.css (.ehd-form-section,
   .ehd-form-grid, .ehd-booking-card, .ehd-payment-option).
   Scope: the view adds class ehd_bookpage to its .iosh_global
   root, so nothing below leaks onto hotel/results pages.
   iosr.css loads AFTER this file, so every selector carries the
   .iosh_global.ehd_bookpage prefix (0-2-0+) to beat core's
   single-class rules without !important. RTL-safe: logical
   properties replace physical left/right. Presentation only —
   no id/name/onclick touched; core hidden hooks (.iosh_invisible*)
   untouched.
   NOT built, deliberately: the mockup's 1-2-3 progress bar.
   The live flow is a single page (details+payment together,
   payment-select as a separate page), and step labels would be
   invented copy. Owner informed in the round report.
   ============================================================ */

   /* ---- Form section cards (mockup .ehd-form-section) ---- */
   .iosh_global.ehd_bookpage .iosh_formwrap_titled {
     background: var(--ehd-surface);
     border: 1px solid var(--ehd-border);
     border-inline-start: 1px solid var(--ehd-border); /* kills core 4px blue flag (both dirs) */
     border-radius: var(--ehd-radius-card);
     padding: 24px;
     margin: 0 0 20px;
     box-shadow: var(--ehd-shadow);
   }
   /* Section titles — mockup title-1 (20/600): live flow stacks 4-5 cards,
      the mockup's display-2 32px heads belong to its single big section. */
   .iosh_global.ehd_bookpage .iosh_formtitle h4,
   .iosh_global.ehd_bookpage .iosh_formtitle h4.iosh_formh4 {
     margin: 0 0 16px;
     padding: 0 0 12px;
     font: 600 20px/1.4 var(--ehd-font);
     color: var(--ehd-ink);
     text-transform: none;
     letter-spacing: 0;
     border: none;
     border-bottom: 1px solid var(--ehd-border);
   }
   .iosh_global.ehd_bookpage .iosh_formtitle { margin: 0; background: none; } /* kills core #cbddee title-bar band */
   /* "Rooms (change)" link — core paints title links #DDD (ios.css:1280)
      for its dark-blue title bar; our card title is white, so the word
      vanished. Brand blue on our surface, hover underline. */
   .iosh_global.ehd_bookpage .iosh_formtitle h4 a,
   .iosh_global.ehd_bookpage .iosh_formtitle h4 a:link,
   .iosh_global.ehd_bookpage .iosh_formtitle h4 a:visited {
     color: var(--ehd-blue-hover); /* #1A73E8, 4.5:1 on white — same pair the site's .iosh_global a uses */
     font-weight: 500;
     text-decoration: none;
   }
   .iosh_global.ehd_bookpage .iosh_formtitle h4 a:hover {
     color: var(--ehd-blue-dark);
     text-decoration: underline;
   }

   /* ---- Field rows: ONE field per row, label BESIDE the field.
      Owner asked for core's beside look. Do NOT wrap these rows in a
      multi-column grid: the cells go ~300px wide, label basis + input
      min-content exceeds that, core's flex-wrap then drops the input
      onto its own line under the label (the 2026-10-14 "messed up"
      bug). Fixed 150px label column keeps inputs left-aligned;
      direction-aware (flex row + text-align start) so RTL mirrors. ---- */
   .iosh_global.ehd_bookpage .iosh_formrow {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     align-items: center;
     gap: 12px;
     margin: 0 0 14px;
     padding: 0;
     color: var(--ehd-muted);
   }
   .iosh_global.ehd_bookpage .iosh_formrow > label {
     flex: 0 0 150px;
     padding: 0;
     text-align: start;
     font: 600 13px/1.4 var(--ehd-font);
     color: var(--ehd-ink);
     text-transform: none;
     letter-spacing: 0;
   }
   .iosh_global.ehd_bookpage .iosh_formrow > div { flex: 1 1 auto; min-width: 0; margin: 0; } /* margin:0 kills core's float-era margin-left:180px gutter */
   /* tall fields (messages): pin label top, not middle */
   .iosh_global.ehd_bookpage .iosh_formrow:has(textarea) { align-items: flex-start; }
   .iosh_global.ehd_bookpage .iosh_formrow:has(textarea) > label { padding-top: 10px; }

   /* ---- Inputs (mockup .ehd-input: canvas fill, r8, 15px) ---- */
   .iosh_global.ehd_bookpage input.iosh_intext,
   .iosh_global.ehd_bookpage input.iosh_indate,
   .iosh_global.ehd_bookpage select.iosh_select,
   .iosh_global.ehd_bookpage textarea {
     width: 100%;
     box-sizing: border-box;
     background-color: var(--ehd-canvas); /* color only — keeps core's select arrow */
     border: 1px solid var(--ehd-border);
     border-radius: var(--ehd-radius-input);
     padding: 10px 12px;
     font: normal 15px/1.5 var(--ehd-font);
     color: var(--ehd-ink);
   }
   .iosh_global.ehd_bookpage select.iosh_select { padding-inline-end: 32px; }
   .iosh_global.ehd_bookpage input.iosh_short { width: 160px; }
   .iosh_global.ehd_bookpage input.iosh_intext:focus,
   .iosh_global.ehd_bookpage input.iosh_indate:focus,
   .iosh_global.ehd_bookpage select.iosh_select:focus,
   .iosh_global.ehd_bookpage textarea:focus { border-color: var(--ehd-blue); }
   /* core's focus ring (rgba 66,133,244) is already the brand blue — kept */

   /* ---- Buttons: primary (mockup .ehd-btn--primary) ---- */
   .iosh_global.ehd_bookpage .iosh_btn {
     display: inline-flex; align-items: center; justify-content: center;
     min-height: 44px; min-width: 0; padding: 12px 24px;
     background: var(--ehd-blue); color: #fff;
     border: none; border-radius: var(--ehd-radius-input);
     font: 600 15px/1.3 var(--ehd-font); letter-spacing: 0; text-transform: none;
     text-decoration: none; cursor: pointer;
     transition: background-color 0.15s ease, box-shadow 0.15s ease;
   }
   .iosh_global.ehd_bookpage .iosh_btn:hover {
     background: var(--ehd-blue-hover); color: #fff; text-decoration: none;
     box-shadow: 0 4px 14px rgba(26, 115, 232, 0.28);
   }
   .iosh_global.ehd_bookpage .iosh_btnfull { width: 100%; }
   /* gate login/registration submits go full width (mockup login) */
   .iosh_global.ehd_bookpage .iosh_formwrap_titled > form.iosh_form .iosh_btn { width: 100%; }

   /* ghost/back links (mockup .ehd-btn--ghost) */
   .iosh_global.ehd_bookpage a.iosh_btnlink {
     display: inline-flex; align-items: center; min-height: 40px;
     padding: 8px 16px; margin: 2px 0;
     background: var(--ehd-surface); color: var(--ehd-ink);
     border: 1px solid var(--ehd-border); border-radius: var(--ehd-radius-input);
     font: 500 14px/1.3 var(--ehd-font); text-decoration: none;
     transition: background-color 0.15s ease, border-color 0.15s ease;
   }
   .iosh_global.ehd_bookpage a.iosh_btnlink:hover {
     background: var(--ehd-tint); border-color: var(--ehd-blue);
     color: var(--ehd-ink); text-decoration: none;
   }

   /* coupon APPLY inside checkout: ghost small, not the session-page green CTA */
   .iosh_global.ehd_bookpage .iosh_btnbook {
     display: inline-flex; align-items: center; justify-content: center;
     width: auto; min-width: 120px; min-height: 42px; padding: 10px 18px;
     background: var(--ehd-surface); color: var(--ehd-blue-hover);
     border: 1px solid var(--ehd-border); border-radius: var(--ehd-radius-input);
     font: 600 14px/1.3 var(--ehd-font); letter-spacing: 0; text-transform: none;
     box-shadow: none; transform: none;
   }
   .iosh_global.ehd_bookpage .iosh_btnbook:hover:not(:disabled) {
     background: var(--ehd-tint); border-color: var(--ehd-blue);
     box-shadow: none; transform: none;
   }
   .iosh_global.ehd_bookpage .iosh_btnbook:disabled {
     background: var(--ehd-surface-mute); color: #98A8B8;
     border-color: var(--ehd-border); box-shadow: none; transform: none;
   }

   /* ---- Login/registration tabs: mockup pill chips (core: no styling at all) ---- */
   .iosh_global.ehd_bookpage .reshtabswrap { margin: 0 0 16px; }
   .iosh_global.ehd_bookpage ul.reshtabs {
     display: flex; flex-wrap: wrap; gap: 8px;
     margin: 0; padding: 0; list-style: none;
   }
   .iosh_global.ehd_bookpage .reshtabs > li {
     padding: 8px 16px;
     background: var(--ehd-surface); border: 1px solid var(--ehd-border);
     border-radius: 100px;
     font: 500 14px/1.4 var(--ehd-font); color: var(--ehd-muted); cursor: pointer;
     transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
   }
   .iosh_global.ehd_bookpage .reshtabs > li:hover { background: var(--ehd-tint); }
   .iosh_global.ehd_bookpage .reshtabs > li.reshtabcur {
     background: var(--ehd-chip); border-color: var(--ehd-blue);
     color: var(--ehd-blue-dark); font-weight: 600;
   }

   /* ---- Checkout: mockup .ehd-booking-grid 2fr/1fr with the totals
      card (.iosh_highlightbox) as the right rail, sticky under the
      fixed 60px header. Row span 1/99 because grid-row:-1 would NOT
      reach the implicit rows the form generates. ≤1024 the mockup
      stacks; DOM order (details -> totals -> payment -> BOOK) reads
      fine stacked, so no order override on mobile. ---- */
   @media (min-width: 1025px) {
     .iosh_global.ehd_bookpage #reshbookfm {
       display: grid;
       grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
       column-gap: 24px;
       align-items: start;
     }
     .iosh_global.ehd_bookpage #reshbookfm > * { grid-column: 1; }
     .iosh_global.ehd_bookpage #reshbookfm > .iosh_highlightbox {
       grid-column: 2; grid-row: 1 / 99; align-self: start;
       position: sticky; top: 76px;
     }
   }

   /* ---- Totals box (mockup .ehd-booking-card): quiet white card,
      brand chip badge, price-lg total (21/600) ---- */
   .iosh_global.ehd_bookpage .iosh_highlightbox {
     margin: 0 0 20px;
     padding: 18px 22px; padding-inline-start: 58px;
     background: var(--ehd-surface);
     border: 1px solid var(--ehd-border);
     border-inline-start: 1px solid var(--ehd-border); /* kills core 4px yellow flag */
     border-radius: var(--ehd-radius-card);
     box-shadow: var(--ehd-shadow);
     font: normal 14px/1.6 var(--ehd-font);
     color: var(--ehd-ink);
   }
   .iosh_global.ehd_bookpage .iosh_highlightbox::before {
     left: auto; inset-inline-start: 16px;
     background: var(--ehd-chip); color: var(--ehd-blue); box-shadow: none;
   }
   .iosh_global.ehd_bookpage .iosh_highlightbox strong {
     font-size: 21px; font-weight: 600; color: var(--ehd-ink);
   }

   /* ---- Data tables (rooms / addons / totals / payment) ---- */
   .iosh_global.ehd_bookpage table.iosh_pickedtbl { width: 100%; border-collapse: collapse; }
   .iosh_global.ehd_bookpage table.iosh_pickedtbl tr td,
   .iosh_global.ehd_bookpage table.iosh_pickedtbl tr th { padding: 8px 6px; vertical-align: top; }
   .iosh_global.ehd_bookpage table.iosh_pickedtbl tr + tr > td,
   .iosh_global.ehd_bookpage table.iosh_pickedtbl tr + tr > th { border-top: 1px solid var(--ehd-border); }
   .iosh_global.ehd_bookpage table.iosh_pickedtbl th {
     color: var(--ehd-muted); font-weight: 500; font-size: 13px;
   }
   .iosh_global.ehd_bookpage table.iosh_pickedtbl td { font-size: 14px; color: var(--ehd-ink); }

   /* payment options as mockup rows: brand radios, hover/checked tint */
   .iosh_global.ehd_bookpage .iosh_radio { width: 16px; height: 16px; accent-color: var(--ehd-blue); }
   .iosh_global.ehd_bookpage .iosh_radiolabel { font-weight: 500; color: var(--ehd-ink); }
   .iosh_global.ehd_bookpage table.iosh_pickedtbl tr:has(.iosh_radio) {
     transition: background-color 0.12s ease;
   }
   .iosh_global.ehd_bookpage table.iosh_pickedtbl tr:has(.iosh_radio:hover) { background: var(--ehd-canvas); }
   .iosh_global.ehd_bookpage table.iosh_pickedtbl tr:has(.iosh_radio:checked) { background: var(--ehd-tint); }

   /* ---- Small type ---- */
   .iosh_global.ehd_bookpage .iosh_tip { color: var(--ehd-muted); font-size: 13px; }
   .iosh_global.ehd_bookpage .iosh_notebox { border-radius: var(--ehd-radius-input); }

   /* ---- Mobile (mockup breakpoints) ---- */
   @media (max-width: 768px) {
     /* beside breaks below ~500px width; stack label over field */
     .iosh_global.ehd_bookpage .iosh_formrow { flex-direction: column; align-items: stretch; gap: 6px; }
     .iosh_global.ehd_bookpage .iosh_formrow > label { flex: 0 0 auto; }
     .iosh_global.ehd_bookpage .iosh_formwrap_titled { padding: 16px; }
     .iosh_global.ehd_bookpage .iosh_formwrap_titled .iosh_formtitle h4 { font-size: 18px; }
     .iosh_global.ehd_bookpage .iosh_btn { width: 100%; }
   }
   /* ============ /ROUND 11 booking ============ */
/* ============ ROUND 12 — owner feedback 2026-10-18 ============ */

/* 1) Location/listing card titles: long names ("Retac Qunay Dahab
   Resort & SPA") were one clipped nowrap line, pushing the stars span out
   of sight on phones. On small screens let the title wrap to two lines and
   let the star badge drop onto its own flex line, visible again.
   Specificity: .iosh_global .ehd_locpage (3 classes) beats ios.css:2883
   (nowrap) and the base rule regardless of load order. */
@media (max-width: 768px) {
  .iosh_global .ehd_locpage .iosh_hotelboxdetails h3 {
    white-space: normal; overflow: visible; text-overflow: clip;
    flex-wrap: wrap; row-gap: 3px;
    font: 600 17px/1.3 var(--ehd-font);
  }
  .iosh_global .ehd_locpage .iosh_hotelboxdetails h3 .iosh_stars { flex: 0 0 auto; }
}

/* 3) "Destinations nearby" sidebox: the city link was a dark display:block
   row and the <br> pushed the distance onto a separate tall line, leaving
   a big dead gap. City becomes an inline blue (clearly a link) label, the
   <br> is suppressed and the distance sits right behind it in muted text. */
.iosh_global .ehd_locpage .iosh_sidebox ul li.iosh_noborder {
  padding: 3px 0; font: 400 12px/1.5 var(--ehd-font); color: var(--ehd-muted);
}
.iosh_global .ehd_locpage .iosh_sidebox ul li.iosh_noborder br { display: none; }
.iosh_global .ehd_locpage .iosh_sidebox ul li.iosh_noborder a {
  display: inline; padding: 0;
  color: var(--ehd-blue); font-weight: 600; text-decoration: none;
}
.iosh_global .ehd_locpage .iosh_sidebox ul li.iosh_noborder a:hover { text-decoration: underline; }
.iosh_global .ehd_locpage .iosh_sidebox ul li.iosh_noborder a::after {
  content: "\00b7"; margin: 0 6px; color: var(--ehd-muted); font-weight: 400;
}

/* 4) Hotel page "surrounding area" module: the 120px destination photo
   earns its place beside the hotel list on desktop, but on phones it only
   eats a third of the width. Hide it, let the hotel names/prices span the
   full column. Two-class selectors beat the iosr.css/ios.css float rules. */
@media (max-width: 768px) {
  .iosr_gmod_wrap .iosr_gmod_thumb120 { display: none; }
  .iosr_gmod_wrap .gmodcont_thumb120,
  .iosr_gmod_wrap .iosr_gmod_contents { margin-left: 0 !important; width: auto !important; float: none !important; }
}
/* ============ /ROUND 12 ============ */