/* =====================================================================
   KaNa Hotel UI — Premium presentation layer for the Hotel module only.

   SCOPING RULE (do not remove): every single selector in this file is
   prefixed with #embark-hotel-widget. embark-public.css already defines
   generic classes like .embark-card / .embark-btn-primary / .price-row
   that are SHARED with the Bus and Flight widgets — prefixing everything
   here keeps this file from ever touching Bus/Flight/any other module.
   ===================================================================== */

#embark-hotel-widget {
  --khu-primary:        #1e50c8;
  --khu-primary-dark:   #123a9c;
  --khu-primary-light:  #eaf0ff;
  --khu-accent:         #ff7a1a;
  --khu-accent-dark:    #e8650a;
  --khu-success:        #17a673;
  --khu-danger:         #e5484d;
  --khu-ink:            #14213d;
  --khu-ink-soft:       #5b6683;
  --khu-line:           #e7ebf3;
  --khu-bg:             #f3f6fc;
  --khu-card:           #ffffff;
  --khu-radius-lg:      18px;
  --khu-radius-md:      12px;
  --khu-radius-sm:      8px;
  --khu-shadow-sm:      0 1px 2px rgba(20, 33, 61, .06);
  --khu-shadow-md:      0 8px 24px rgba(20, 33, 61, .08);
  --khu-shadow-lg:      0 20px 48px rgba(20, 33, 61, .14);

  background: var(--khu-bg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 1320px;
  padding: 0 0 56px;
  border-radius: var(--khu-radius-lg);
}
#embark-hotel-widget * { box-sizing: border-box; }

/* Neutralize the active theme's global form-field styling (confirmed:
   Kubio applies "[data-kubio] input, [data-kubio] select, [data-kubio]
   textarea { font-family:Syne; font-size:16px; line-height:1.6; border:
   1px solid ...; border-radius:4px; padding:4px 10px; margin-bottom:10px;
   }" site-wide — and since #embark-hotel-widget sits nested inside many
   data-kubio-attributed wrapper elements, every <input>/<select> in this
   plugin matches that selector too. This plugin's own component rules
   further down (.khu-field input, .khu-gp-row select, .embark-field
   input, etc.) already set their own padding/border/font-size, but never
   explicitly reset margin or font-family — so Kubio's margin-bottom:10px
   and font-family:Syne were silently surviving on top of them, which is
   exactly what threw off the vertical alignment of fields sharing a row
   (some carrying an extra 10px nothing else had) and swapped the
   intended font. This reset is scoped under #embark-hotel-widget, so its
   higher specificity (an ID always outweighs Kubio's attribute-selector
   rules, regardless of how many the latter chains together) reliably
   wins regardless of stylesheet load order, without touching any other
   input on the site. */
#embark-hotel-widget input,
#embark-hotel-widget select,
#embark-hotel-widget textarea,
#embark-hotel-widget button {
  margin: 0;
  font-family: inherit;
  line-height: normal;
  text-transform: none;
}

/* WordPress's own client-side emoji script (wp-emoji-loader) can convert
   a plain "📍" character anywhere in the page — including the one
   embark-public.js renders next to the hotel address — into
   <img class="emoji" src="https://s.w.org/images/core/emoji/.../1f4cd.svg">
   on browsers/OS combinations it decides need the fallback. WordPress's
   own core stylesheet already caps ".emoji" images at 1em, but this is a
   second, explicit, pixel-capped guarantee scoped ONLY to that one class
   (never a plain <img>, so it can never affect a real hotel/room photo):
   regardless of what else changes, a WordPress emoji image inside this
   widget can never render larger than a small inline icon. */
#embark-hotel-widget img.emoji,
#embark-hotel-widget img.wp-smiley {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  vertical-align: -2px !important;
  margin: 0 2px !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}

#embark-hotel-widget .khu-hero-copy
{
    text-align: left !important;
}

#embark-hotel-widget .khu-hero-inner 
{
    /* padding: 10px 24px 20px !important; */
}

#embark-hotel-widget h1, #embark-hotel-widget h2, #embark-hotel-widget h3,
#embark-hotel-widget h4, #embark-hotel-widget h5 { color: var(--khu-ink); margin: 0; }

/* ── Demo / API banner ─────────────────────────────────────────────── */
#embark-hotel-widget .khu-banner { margin: 16px 16px 0; border-radius: var(--khu-radius-sm); display: flex; align-items: center; gap: 8px; }
#embark-hotel-widget .khu-banner-ic { font-size: 15px; }

/* ── Hero / search ──────────────────────────────────────────────────── */
#embark-hotel-widget .khu-hero {
  position: relative;
  border-radius: 0 0 32px 32px;
  padding: 28px 16px 40px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10, 22, 48, .35) 0%, rgba(10, 22, 48, .55) 60%, rgba(10, 22, 48, .85) 100%),
    linear-gradient(120deg, #0b1e46 0%, #123a9c 45%, #1e50c8 100%);
}
#embark-hotel-widget .khu-hero-media { position: absolute; inset: 0; opacity: .22; }
#embark-hotel-widget .khu-hero-media::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 12% 25%, rgba(255,255,255,.5) 0, transparent 42%),
    radial-gradient(circle at 88% 70%, rgba(255,183,94,.4) 0, transparent 40%);
}
#embark-hotel-widget .khu-hero-inner { position: relative; max-width: 1100px; margin: 0 auto; }
#embark-hotel-widget .khu-hero-copy { padding: 10px 6px 22px; color: #fff; }
#embark-hotel-widget .khu-hero-title { font-size: clamp(24px, 4vw, 34px); font-weight: 800; letter-spacing: -.02em; }
#embark-hotel-widget .khu-hero-sub { margin-top: 6px; font-size: 14.5px; color: rgba(255,255,255,.85); font-weight: 500; }

#embark-hotel-widget .khu-search-card {
  background: var(--khu-card);
  border: none;
  border-radius: var(--khu-radius-lg);
  box-shadow: var(--khu-shadow-lg);
  padding: 18px 20px 20px;
}
#embark-hotel-widget .khu-search-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--khu-primary-light); color: var(--khu-primary-dark);
  font-size: 12.5px; font-weight: 800; padding: 6px 14px; border-radius: 999px;
  margin-bottom: 14px;
}

#embark-hotel-widget .khu-search-fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
#embark-hotel-widget .khu-field {
  position: relative;
  flex: 1 1 160px;
  min-width: 140px;
  background: var(--khu-bg);
  border: 1.5px solid var(--khu-line);
  border-radius: var(--khu-radius-md);
  padding: 8px 14px 9px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#embark-hotel-widget .khu-field:focus-within { border-color: var(--khu-primary); box-shadow: 0 0 0 3px var(--khu-primary-light); background: #fff; }
#embark-hotel-widget .khu-field-wide { flex: 2 1 260px; }
#embark-hotel-widget .khu-field label {
  display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--khu-ink-soft); margin-bottom: 2px;
}
#embark-hotel-widget .khu-field input {
  width: 100%; border: none; background: transparent; font-size: 15px; font-weight: 700;
  color: var(--khu-ink); padding: 2px 0; outline: none;
}
#embark-hotel-widget .khu-field input::-webkit-calendar-picker-indicator { cursor: pointer; }

/* Guests & Rooms cluster */
#embark-hotel-widget .khu-field-guests { position: relative; cursor: pointer; flex: 1 1 200px; }
#embark-hotel-widget .khu-guests-summary { font-size: 14.5px; font-weight: 700; color: var(--khu-ink); padding: 2px 0; }
#embark-hotel-widget .khu-guests-popover {
  display: none;
  position: absolute; z-index: 50; top: calc(100% + 8px); left: 0;
  width: 320px; max-height: 80vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--khu-line); border-radius: var(--khu-radius-md);
  box-shadow: var(--khu-shadow-lg); padding: 16px;
}
#embark-hotel-widget .khu-guests-popover.khu-open { display: block; }
#embark-hotel-widget .khu-gp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; }
#embark-hotel-widget .khu-gp-row span { font-size: 13px; font-weight: 700; color: var(--khu-ink-soft); }
#embark-hotel-widget .khu-gp-row select {
  border: 1.5px solid var(--khu-line); border-radius: var(--khu-radius-sm);
  padding: 6px 10px; font-size: 13px; font-weight: 700; color: var(--khu-ink); background: #fff;
}
#embark-hotel-widget .khu-gp-row-ages { align-items: flex-start; flex-direction: column; gap: 6px; }
#embark-hotel-widget .khu-child-age-inputs { display: flex; gap: 6px; flex-wrap: wrap; }
#embark-hotel-widget .khu-child-age-inputs select {
  border: 1.5px solid var(--khu-line); border-radius: var(--khu-radius-sm); padding: 5px 8px; font-size: 12px;
}
#embark-hotel-widget .khu-gp-done {
  width: 100%; margin-top: 10px; padding: 10px; font-size: 13px; font-weight: 800;
  background: linear-gradient(135deg, var(--khu-primary), var(--khu-primary-dark)); border: none;
  color: #fff; border-radius: var(--khu-radius-sm); cursor: pointer;
}

/* The real #eh-guests/#eh-rooms/#eh-children/#eh-child-ages fields stay
   in the DOM — embark-public.js still reads them directly and nothing
   about the real search call changes — but the per-room configurator
   above is now the visible interface, so these are visually hidden
   rather than removed. `position:absolute` (not display:none) so a
   screen reader or script that specifically queries them still finds
   real, present elements with real values, just off-screen. */
#embark-hotel-widget .khu-real-guest-fields {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Per-room Adults/Children configurator — shared markup rendered by
   kana-hotel-ui.js into BOTH the search popover (#khu-rooms-config-search)
   and the Room Selection sidebar (#khu-rooms-config-sidebar) from the
   same KHU_ROOM_CONFIG state, so the two can never disagree. */
#embark-hotel-widget .khu-rooms-config { margin-bottom: 4px; }
#embark-hotel-widget .khu-room-block {
  border: 1px solid var(--khu-line); border-radius: var(--khu-radius-sm);
  padding: 10px 12px; margin-bottom: 10px; background: #fbfcff;
}
#embark-hotel-widget .khu-room-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
#embark-hotel-widget .khu-room-block-head strong { font-size: 12.5px; font-weight: 800; color: var(--khu-ink); }
#embark-hotel-widget .khu-room-remove {
  border: none; background: none; color: var(--khu-danger, #e5484d);
  font-size: 11px; font-weight: 700; cursor: pointer; padding: 2px 4px;
}
#embark-hotel-widget .khu-room-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; }
#embark-hotel-widget .khu-room-row span { font-size: 12.5px; font-weight: 600; color: var(--khu-ink-soft); }
#embark-hotel-widget .khu-room-ages { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--khu-line); }
#embark-hotel-widget .khu-room-ages label { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--khu-ink-soft); }
#embark-hotel-widget .khu-room-age-input {
  width: 56px; border: 1.5px solid var(--khu-line); border-radius: var(--khu-radius-sm);
  padding: 5px 6px; font-size: 12.5px; font-weight: 700; color: var(--khu-ink);
}
#embark-hotel-widget .khu-add-room-btn {
  width: 100%; border: 1.5px dashed var(--khu-primary); background: var(--khu-primary-light);
  color: var(--khu-primary-dark); font-weight: 800; font-size: 12.5px;
  padding: 9px; border-radius: var(--khu-radius-sm); cursor: pointer; margin-bottom: 8px;
}
#embark-hotel-widget .khu-add-room-btn:disabled { opacity: .5; cursor: not-allowed; }
#embark-hotel-widget .khu-room-config-summary {
  font-size: 12px; font-weight: 700; color: var(--khu-ink-soft); text-align: center; margin-bottom: 4px;
}
#embark-hotel-widget .khu-rc-note {
  font-size: 11.5px; color: #b1550f; background: #fff1e6; border: 1px solid #ffd2a6;
  border-radius: var(--khu-radius-sm); padding: 7px 10px; margin: 6px 0 0; text-align: center;
}

/* Modify Search panel — sidebar, Room Selection page */
#embark-hotel-widget .khu-modify-search { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--khu-line); }
#embark-hotel-widget .khu-modify-toggle {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px solid var(--khu-line); background: #fff; color: var(--khu-ink);
  font-size: 12.5px; font-weight: 700; padding: 9px; border-radius: var(--khu-radius-sm); cursor: pointer;
}
#embark-hotel-widget .khu-modify-toggle:hover { border-color: var(--khu-primary); color: var(--khu-primary); }
#embark-hotel-widget .khu-modify-panel { margin-top: 12px; }
#embark-hotel-widget .khu-mp-field { margin-bottom: 10px; }
#embark-hotel-widget .khu-mp-field label {
  display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--khu-ink-soft); margin-bottom: 3px;
}
#embark-hotel-widget .khu-mp-field input {
  width: 100%; border: 1.5px solid var(--khu-line); border-radius: var(--khu-radius-sm);
  padding: 8px 10px; font-size: 13px; font-weight: 700; color: var(--khu-ink);
}
#embark-hotel-widget .khu-mp-field-row { display: flex; gap: 10px; }
#embark-hotel-widget .khu-mp-field-row .khu-mp-field { flex: 1 1 0; min-width: 0; }
#embark-hotel-widget .khu-mp-note {
  font-size: 11.5px; color: #b1550f; background: #fff1e6; border: 1px solid #ffd2a6;
  border-radius: var(--khu-radius-sm); padding: 7px 10px; margin: 0 0 10px; text-align: center;
}
#embark-hotel-widget .khu-update-search-btn { width: 100%; }

#embark-hotel-widget .khu-field-btn { flex: 1 1 200px; padding: 0; background: none; border: none; }
#embark-hotel-widget .khu-search-btn {
  width: 100%; height: 56px; border-radius: var(--khu-radius-md);
  background: linear-gradient(135deg, var(--khu-accent), var(--khu-accent-dark));
  border: none; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .01em; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 10px 24px rgba(255, 122, 26, .35);
  transition: transform .12s ease, box-shadow .12s ease;
}
#embark-hotel-widget .khu-search-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(255, 122, 26, .42); }
#embark-hotel-widget .khu-btn-ic { line-height: 1; }

#embark-hotel-widget .khu-trust-strip { margin-top: 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
#embark-hotel-widget .khu-trust-item {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--khu-radius-md); padding: 10px 12px; color: #fff;
}
#embark-hotel-widget .khu-trust-ic { font-size: 20px; }
#embark-hotel-widget .khu-trust-item strong { display: block; font-size: 12.5px; font-weight: 700; }
#embark-hotel-widget .khu-trust-item span { font-size: 11px; color: rgba(255,255,255,.78); }

/* ── Popular destinations ───────────────────────────────────────────── */
#embark-hotel-widget .khu-destinations-section { max-width: 1100px; margin: 28px auto 0; padding: 0 16px; }
#embark-hotel-widget .khu-section-title { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
#embark-hotel-widget .khu-destination-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
#embark-hotel-widget .khu-dest-card {
  position: relative; height: 130px; border-radius: var(--khu-radius-md); overflow: hidden;
  border: none; cursor: pointer; padding: 0;
  background: linear-gradient(160deg, #274690, #1e50c8);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  text-align: left; padding: 12px 14px;
  transition: transform .15s ease, box-shadow .15s ease;
}
#embark-hotel-widget .khu-dest-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,20,50,0) 40%, rgba(6,14,36,.75) 100%);
}
#embark-hotel-widget .khu-dest-card:hover { transform: translateY(-3px); box-shadow: var(--khu-shadow-md); }
#embark-hotel-widget .khu-dest-name { position: relative; z-index: 1; color: #fff; font-weight: 800; font-size: 14px; }
#embark-hotel-widget .khu-dest-tag { position: relative; z-index: 1; color: rgba(255,255,255,.82); font-size: 11px; margin-top: 2px; }

/* ── Loading ────────────────────────────────────────────────────────── */
#embark-hotel-widget .khu-loading { text-align: center; padding: 70px 16px; color: var(--khu-ink-soft); }
#embark-hotel-widget .khu-spinner {
  width: 42px; height: 42px; margin: 0 auto 14px;
  border: 4px solid var(--khu-primary-light); border-top-color: var(--khu-primary);
  border-radius: 50%; animation: khu-spin .8s linear infinite;
}
@keyframes khu-spin { to { transform: rotate(360deg); } }

/* ── Step wrapper ───────────────────────────────────────────────────── */
#embark-hotel-widget .khu-step { max-width: 1240px; margin: 0 auto; padding: 0 16px; }

/* ── Results topbar ─────────────────────────────────────────────────── */
#embark-hotel-widget .khu-results-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 18px 0 14px;
}
#embark-hotel-widget .khu-results-topbar-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#embark-hotel-widget .khu-modify-btn { border: none; background: none; cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--khu-primary); display: inline-flex; align-items: center; gap: 6px; }
#embark-hotel-widget .khu-results-title { font-weight: 700; font-size: 14.5px; color: var(--khu-ink); }
#embark-hotel-widget .khu-results-title .demo-tag { background: var(--khu-accent); }
#embark-hotel-widget .khu-results-topbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

#embark-hotel-widget .khu-filter-toggle-btn {
  display: none; border: 1.5px solid var(--khu-line); background: #fff; border-radius: 999px;
  padding: 9px 16px; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--khu-ink);
  align-items: center; gap: 6px;
}

#embark-hotel-widget .khu-sort-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#embark-hotel-widget .khu-sort-label { font-size: 12px; font-weight: 700; color: var(--khu-ink-soft); margin-right: 2px; }
#embark-hotel-widget .eh-sort {
  border: 1.5px solid var(--khu-line); background: #fff; border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 700; color: var(--khu-ink-soft); cursor: pointer;
  transition: all .15s ease;
}
#embark-hotel-widget .eh-sort.active, #embark-hotel-widget .eh-sort:hover {
  border-color: var(--khu-primary); color: var(--khu-primary); background: var(--khu-primary-light);
}

/* ── Listing layout: sidebar filters + list ────────────────────────── */
#embark-hotel-widget .khu-listing-layout { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; }
#embark-hotel-widget .khu-backdrop { display: none; }

#embark-hotel-widget .khu-filters-panel {
  background: var(--khu-card); border: 1px solid var(--khu-line); border-radius: var(--khu-radius-lg);
  box-shadow: var(--khu-shadow-sm); padding: 18px;
  position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto;
}
#embark-hotel-widget .khu-filters-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
#embark-hotel-widget .khu-filters-head h4 { font-size: 15px; font-weight: 800; flex: 1; }
#embark-hotel-widget .khu-clear-btn { border: none; background: none; color: var(--khu-primary); font-weight: 700; font-size: 12px; cursor: pointer; }
#embark-hotel-widget .khu-close-btn { display: none; border: none; background: var(--khu-bg); border-radius: 50%; width: 26px; height: 26px; cursor: pointer; font-size: 12px; }

#embark-hotel-widget .khu-fgroup { padding: 14px 0; border-top: 1px solid var(--khu-line); }
#embark-hotel-widget .khu-fgroup:first-of-type { border-top: none; padding-top: 8px; }
#embark-hotel-widget .khu-fgroup h5 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--khu-ink-soft); margin-bottom: 10px; }
#embark-hotel-widget .khu-fnote { font-size: 11.5px; color: var(--khu-ink-soft); font-style: italic; line-height: 1.5; margin: 0; }

#embark-hotel-widget .khu-range input[type="range"] { width: 100%; accent-color: var(--khu-primary); }
#embark-hotel-widget .khu-range-labels { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--khu-ink-soft); margin-top: 4px; font-weight: 600; }

#embark-hotel-widget .khu-fopts { display: flex; flex-direction: column; gap: 2px; }
#embark-hotel-widget .khu-fcheck { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--khu-ink); padding: 6px 2px; cursor: pointer; }
#embark-hotel-widget .khu-fcheck input { accent-color: var(--khu-primary); width: 15px; height: 15px; }
#embark-hotel-widget .khu-fcount { color: var(--khu-ink-soft); font-weight: 500; margin-left: auto; }
#embark-hotel-widget .khu-fstars { color: #f5a623; letter-spacing: 1px; }

/* ── Results main / hotel cards (compact, premium) ───────────────────── */
#embark-hotel-widget .khu-results-main { min-width: 0; }
#embark-hotel-widget .khu-results-count { font-size: 12.5px; color: var(--khu-ink-soft); font-weight: 600; margin-bottom: 10px; }
#embark-hotel-widget .khu-hotel-list { display: flex; flex-direction: column; gap: 12px; }
#embark-hotel-widget .embark-empty {
  background: var(--khu-card); border: 1px dashed var(--khu-line); border-radius: var(--khu-radius-md);
  padding: 44px 20px; text-align: center; color: var(--khu-ink-soft); font-size: 14px;
}

#embark-hotel-widget .eh-hotel-card {
  background: var(--khu-card); border: 1px solid var(--khu-line); border-radius: var(--khu-radius-md);
  display: flex; align-items: stretch; gap: 16px; padding: 14px;
  box-shadow: var(--khu-shadow-sm);
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
#embark-hotel-widget .eh-hotel-card:hover { box-shadow: var(--khu-shadow-md); border-color: #d5deef; transform: translateY(-2px); }
#embark-hotel-widget .eh-hotel-card.khu-filtered-out { display: none; }
#embark-hotel-widget .eh-hotel-card.khu-page-hidden { display: none; }

/* ── Pagination bar (client-side — see khuApplyFilters()/khuGoToPage()
   in JS). embark_hotel_search has no page/per_page parameter to call —
   it returns every matching hotel in one response, same as always.
   This bar pages through that already-fetched, already-filtered set
   client-side; Prev/Next/a page number never fires a new request. ── */
#embark-hotel-widget .khu-pagination {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: 18px; padding: 14px 16px;
  background: var(--khu-card); border: 1px solid var(--khu-line); border-radius: var(--khu-radius-md);
  box-shadow: var(--khu-shadow-sm);
}
#embark-hotel-widget .khu-page-info { font-size: 12.5px; color: var(--khu-ink-soft); font-weight: 600; }
#embark-hotel-widget .khu-page-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#embark-hotel-widget .khu-page-btn {
  border: 1.5px solid var(--khu-line); background: #fff; color: var(--khu-ink);
  font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: var(--khu-radius-sm); cursor: pointer;
  transition: all .15s ease; white-space: nowrap;
}
#embark-hotel-widget .khu-page-btn:hover:not(:disabled) { border-color: var(--khu-primary); color: var(--khu-primary); }
#embark-hotel-widget .khu-page-btn:disabled { opacity: .4; cursor: not-allowed; }
#embark-hotel-widget .khu-page-numbers { display: flex; align-items: center; gap: 4px; }
#embark-hotel-widget .khu-page-num {
  width: 32px; height: 32px; border: 1.5px solid transparent; background: none; color: var(--khu-ink-soft);
  font-size: 12.5px; font-weight: 700; border-radius: 50%; cursor: pointer; transition: all .15s ease;
}
#embark-hotel-widget .khu-page-num:hover { background: var(--khu-bg); color: var(--khu-ink); }
#embark-hotel-widget .khu-page-num.active {
  background: linear-gradient(135deg, var(--khu-primary), var(--khu-primary-dark)); color: #fff; border-color: transparent;
  box-shadow: 0 4px 10px rgba(22, 82, 214, .3);
}
#embark-hotel-widget .khu-page-ellipsis { color: var(--khu-ink-soft); font-size: 12px; padding: 0 2px; }

@media (max-width: 640px) {
  #embark-hotel-widget .khu-pagination { flex-direction: column; align-items: stretch; text-align: center; }
  #embark-hotel-widget .khu-page-controls { justify-content: center; }
  #embark-hotel-widget .khu-page-numbers { flex-wrap: wrap; justify-content: center; }
}

/* Fixed, consistent aspect-ratio image area — its height is determined
   entirely by its own width + aspect-ratio, never by how tall the info
   or price columns happen to grow, so it can never be stretched into
   overlapping neighbouring content regardless of address length, amenity
   count, or anything else in the card. */
#embark-hotel-widget .eh-hotel-img-wrap {
  position: relative; background: linear-gradient(160deg, #274690, #1e50c8);
  flex: 0 0 220px; width: 220px; aspect-ratio: 4 / 3; align-self: flex-start;
  overflow: hidden; border-radius: var(--khu-radius-sm);
}
#embark-hotel-widget .eh-hotel-img-wrap img.khu-real-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
#embark-hotel-widget .eh-hotel-img-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; font-weight: 800; opacity: .9;
}
#embark-hotel-widget .eh-hotel-img-placeholder::after { content: "🏨"; position: absolute; font-size: 40px; opacity: .18; }

#embark-hotel-widget .eh-hotel-info {
  padding: 0; display: flex; flex-direction: column; gap: 6px;
  flex: 1 1 auto; min-width: 0; /* the classic grid/flex-item fix: without this, a flex
                   column child defaults to min-width:auto and can be
                   pushed wider than its share of the row by its own
                   content, silently overflowing past the card's edge
                   instead of wrapping. */
}
#embark-hotel-widget .eh-hotel-header { display: flex; justify-content: space-between; gap: 10px; }
#embark-hotel-widget .eh-hotel-stars { color: #f5a623; font-size: 14px; letter-spacing: 1px; }
#embark-hotel-widget .eh-hotel-stars span {
  display: inline-block; background: var(--khu-primary-light); color: var(--khu-primary-dark) !important;
  font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: 0 !important;
  padding: 2px 7px; border-radius: 999px; margin-left: 5px !important; vertical-align: 1px;
}
#embark-hotel-widget .eh-hotel-name { font-size: 16px; font-weight: 800; color: var(--khu-ink); margin-top: 1px; line-height: 1.25; }
#embark-hotel-widget .eh-hotel-addr { font-size: 11.5px; color: var(--khu-ink-soft); margin-top: 1px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#embark-hotel-widget .khu-map-link { color: var(--khu-primary); font-weight: 700; text-decoration: none; white-space: nowrap; }
#embark-hotel-widget .khu-map-link:hover { text-decoration: underline; }
#embark-hotel-widget .eh-hotel-desc {
  font-size: 12px; color: var(--khu-ink-soft); line-height: 1.45; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}

/* Amenity badge chips — kana-hotel-ui.js builds these from the real
   amenities array (cached from the actual Search response, or parsed
   from the already-rendered .eh-amenities text as a fallback); the
   plain-text line stays in the DOM (untouched) but is visually hidden
   once badges render successfully. Capped at 4 + a "+N more" chip so
   varying amenity counts hotel-to-hotel don't swing card height much. */
#embark-hotel-widget .eh-amenities { display: none; }
#embark-hotel-widget .khu-amenity-badges { display: flex; flex-wrap: wrap; gap: 5px; }
#embark-hotel-widget .khu-amenity-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--khu-primary-light); color: var(--khu-primary-dark);
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}
#embark-hotel-widget .khu-amenity-more { background: var(--khu-bg); color: var(--khu-ink-soft); }
#embark-hotel-widget .khu-room-types-note { font-size: 11px; color: var(--khu-ink-soft); }
#embark-hotel-widget .khu-room-types-note strong { color: var(--khu-ink); font-weight: 700; }

/* Price + CTA — moved by kana-hotel-ui.js to be this third flex column,
   sibling to the image and info columns (see the JS comment where it's
   moved for why that's the only reliable way to keep it pinned right
   regardless of info-column content height). Always vertically centred
   in its own column, never competing for space with the info text. */
#embark-hotel-widget .eh-hotel-footer {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  flex: 0 0 148px; width: 148px; text-align: right; gap: 8px;
  padding-left: 14px; border-left: 1px dashed var(--khu-line); min-width: 0;
}
#embark-hotel-widget .eh-hotel-price-from { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
#embark-hotel-widget .eh-from-label { font-size: 10px; color: var(--khu-ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
#embark-hotel-widget .eh-from-price { font-size: 20px; font-weight: 800; color: var(--khu-ink); }
#embark-hotel-widget .eh-from-night { font-size: 10.5px; color: var(--khu-ink-soft); }
#embark-hotel-widget .eh-view-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--khu-primary), var(--khu-primary-dark)); border: none; color: #fff;
  font-weight: 800; font-size: 12px; padding: 10px 14px; border-radius: var(--khu-radius-sm); cursor: pointer;
  box-shadow: 0 8px 18px rgba(30, 80, 200, .28); transition: transform .12s ease; white-space: nowrap;
}
#embark-hotel-widget .eh-view-btn:hover { transform: translateY(-1px); }

/* ── Hotel Detail / Room Selection — two-column layout ───────────────── */
#embark-hotel-widget .khu-detail-layout {
  display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start;
  max-width: 1240px; margin: 8px auto 0; padding: 0 16px 40px;
}
#embark-hotel-widget .khu-detail-main { min-width: 0; }
#embark-hotel-widget .khu-back-btn { border: none; background: none; cursor: pointer; font-weight: 700; font-size: 13px; color: var(--khu-primary); display: inline-flex; align-items: center; gap: 6px; margin: 16px 0 12px 16px; }
#embark-hotel-widget .khu-detail-content .embark-card {
  background: var(--khu-card); border: 1px solid var(--khu-line); border-radius: var(--khu-radius-lg);
  box-shadow: var(--khu-shadow-sm);
}

/* Sticky "Your Search" sidebar */
#embark-hotel-widget .khu-detail-sidebar { position: sticky; top: 16px; }
#embark-hotel-widget .khu-sidebar-card { padding: 18px; }
#embark-hotel-widget .khu-sidebar-hotel { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--khu-line); }
#embark-hotel-widget .khu-sidebar-thumb {
  width: 52px; height: 52px; border-radius: var(--khu-radius-sm); overflow: hidden; flex: none;
  background: linear-gradient(160deg, #274690, #1e50c8); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
#embark-hotel-widget .khu-sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#embark-hotel-widget .khu-sidebar-hotel-name { font-size: 13.5px; font-weight: 800; color: var(--khu-ink); line-height: 1.3; }
#embark-hotel-widget .khu-sidebar-hotel-stars { color: #f5a623; font-size: 11px; margin-top: 2px; letter-spacing: 1px; }
#embark-hotel-widget .khu-sidebar-rows { display: flex; flex-direction: column; gap: 8px; }
#embark-hotel-widget .khu-sidebar-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
#embark-hotel-widget .khu-sidebar-row span:first-child { color: var(--khu-ink-soft); font-weight: 600; }
#embark-hotel-widget .khu-sidebar-row span:last-child { color: var(--khu-ink); font-weight: 700; text-align: right; }
#embark-hotel-widget .khu-sidebar-hint { font-size: 11px; color: var(--khu-ink-soft); line-height: 1.5; margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--khu-line); }

/* .khu-pax-stepper / .khu-pax-btn / .khu-pax-count — the generic
   +/- stepper look, reused by the per-room Adults/Children steppers
   inside .khu-room-block (see the "Per-room Adults/Children
   configurator" rules below). */
#embark-hotel-widget .khu-pax-stepper { display: flex; align-items: center; gap: 10px; }
#embark-hotel-widget .khu-pax-btn {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--khu-line); background: #fff; color: var(--khu-primary);
  font-size: 15px; font-weight: 800; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .12s ease;
}
#embark-hotel-widget .khu-pax-btn:hover:not(:disabled) { background: var(--khu-primary); color: #fff; border-color: var(--khu-primary); }
#embark-hotel-widget .khu-pax-btn:disabled { opacity: .4; cursor: not-allowed; }
#embark-hotel-widget .khu-pax-count { font-size: 14px; font-weight: 800; color: var(--khu-ink); min-width: 14px; text-align: center; }

/* Selected-room preview + price breakdown + Continue */
#embark-hotel-widget .khu-selected-room { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--khu-line); }
#embark-hotel-widget .khu-selected-room-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#embark-hotel-widget .khu-selected-room-thumb {
  flex: none; width: 46px; height: 46px; border-radius: var(--khu-radius-sm); overflow: hidden;
  background: linear-gradient(160deg, #e4eafc, #cfdcfb);
  display: flex; align-items: center; justify-content: center; color: var(--khu-primary); font-size: 18px;
}
#embark-hotel-widget .khu-selected-room-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#embark-hotel-widget .khu-selected-room-name { font-size: 13px; font-weight: 800; color: var(--khu-ink); line-height: 1.3; }
#embark-hotel-widget .khu-selected-room-meta { font-size: 11px; color: var(--khu-ink-soft); margin-top: 2px; }
#embark-hotel-widget .khu-selected-room .khu-price-rows .price-row {
  display: flex; justify-content: space-between; font-size: 12px; color: var(--khu-ink-soft);
  padding: 5px 0; border-bottom: 1px dashed var(--khu-line);
}
#embark-hotel-widget .khu-selected-room .khu-price-rows .price-row.price-total {
  border-bottom: none; border-top: 1.5px solid var(--khu-line); margin-top: 2px; padding-top: 9px;
  font-size: 14.5px; color: var(--khu-ink);
}
#embark-hotel-widget .khu-selected-room .khu-price-rows .khu-price-row-discount { color: var(--khu-success); }
#embark-hotel-widget .khu-sidebar-continue-btn { width: 100%; margin-top: 4px; }


/* Gallery grid — kana-hotel-ui.js restyles the plain <img> tags
   embark-public.js renders into #eh-hotel-info-panel into this grid;
   the images/src themselves are untouched, only their layout. Clicking
   one opens the same lightbox as room thumbnails.

   IMPORTANT: the grid rows use an EXPLICIT height (not just 1fr) —
   without one, "height: 100%" on a grid-row track sized only by content
   is indeterminate and resolves to the image's natural size instead,
   which is exactly what previously made the gallery render as tall,
   near-full-width stacked photos rather than a compact grid. kana-hotel-
   ui.js also sets width/height directly on each <img> via the native
   style.setProperty(..., 'important') API as a second, independent
   safeguard, so the sizing can't silently break again even if a theme's
   own global image CSS happens to load with higher priority. */
#embark-hotel-widget .khu-gallery-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr;
  height: 260px; gap: 6px;
  margin-bottom: 16px; border-radius: var(--khu-radius-md); overflow: hidden;
}
#embark-hotel-widget .khu-gallery-grid.khu-gallery-1row { grid-template-rows: 1fr; height: 190px; }
#embark-hotel-widget .khu-gallery-grid img {
  width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
  min-width: 0 !important; min-height: 0 !important;
  object-fit: cover !important; display: block !important; margin: 0 !important;
  border-radius: 0 !important; cursor: pointer;
}
#embark-hotel-widget .khu-gallery-grid img:first-child { grid-row: 1 / 3; }
#embark-hotel-widget .khu-gallery-grid.khu-gallery-1row img:first-child { grid-row: 1 / 2; }

#embark-hotel-widget .eh-amenity-tag {
  display: inline-block; background: var(--khu-primary-light); color: var(--khu-primary-dark);
  font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
}

/* Info-panel breathing room: embark-public.js renders address, facilities
   (what's left after de-duplication), description sections, and the
   policy block as a run of plain sibling <div>s with no spacing of their
   own — giving each a consistent bottom margin turns that into a clean
   vertical rhythm instead of one dense wall of content. */
#embark-hotel-widget #eh-hotel-info-panel > div > div { margin-bottom: 18px; }
#embark-hotel-widget #eh-hotel-info-panel > div > div:last-child { margin-bottom: 0; }

/* "Important hotel information" cards — kana-hotel-ui.js routes each of
   Get Hotel Info's real, labelled description sections (Spoken Languages,
   Business Amenities, Attractions, the policy block, etc. — whichever
   ones a given hotel's response actually includes) into either the
   Overview or Policies tab panel and tags them with these classes for
   card treatment: a bordered card with a bold label instead of a plain
   paragraph sitting in the middle of a long info panel. The label and
   body TEXT themselves are exactly what embark-public.js rendered —
   only the surrounding presentation changes; nothing is reformatted
   into fields that aren't confirmed to exist in EmbarK's response. */
#embark-hotel-widget .khu-info-card {
  background: #fbfcff; border: 1px solid var(--khu-line); border-radius: var(--khu-radius-md);
  padding: 14px 16px !important; margin-bottom: 14px !important;
  font-size: 12.5px; color: var(--khu-ink-soft); line-height: 1.7;
}
#embark-hotel-widget .khu-info-card strong {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; color: var(--khu-ink); margin-bottom: 8px;
}
#embark-hotel-widget .khu-info-card-policy { background: #fff8f1; border-color: #ffe1c2; }
#embark-hotel-widget .khu-info-card-policy strong::before { content: "📋"; font-size: 14px; }
#embark-hotel-widget .khu-overview-location {
  background: #fbfcff; border: 1px solid var(--khu-line); border-radius: var(--khu-radius-md);
  padding: 12px 16px !important; margin-bottom: 14px !important;
  font-size: 12.5px; color: var(--khu-ink-soft); line-height: 1.6;
}

/* Share / Favorite — top-right of the hotel header (see kana-hotel-ui.js
   for why Favorite never claims to persist anything). */
#embark-hotel-widget .khu-header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
#embark-hotel-widget .khu-icon-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1.5px solid var(--khu-line); background: #fff; color: var(--khu-ink-soft);
  font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  transition: all .15s ease;
}
#embark-hotel-widget .khu-icon-btn:hover { border-color: var(--khu-primary); color: var(--khu-primary); }
#embark-hotel-widget #khu-favorite-btn { font-size: 16px; padding: 7px 10px; line-height: 1; }
#embark-hotel-widget #khu-favorite-btn.khu-favorite-on { border-color: #ff5c96; color: #ff5c96; background: #fff0f5; }

/* ── TRUE tabs: Overview / Rooms / Amenities / Policies / Reviews ─────
   Exactly one .khu-tabpanel carries .khu-tabpanel-active (display:block)
   at any time; every other panel is display:none — never a scroll
   target, never a URL hash, never more than one panel visible. Content
   inside each panel was MOVED there (not copied) by kana-hotel-ui.js
   from what embark-public.js originally rendered as one long flow, so
   nothing is duplicated across panels. */
#embark-hotel-widget .khu-tabbar {
  display: flex; gap: 4px; border-bottom: 1px solid var(--khu-line);
  padding: 0 22px; margin: -6px -22px 20px; overflow-x: auto;
}
#embark-hotel-widget .khu-tabbtn {
  border: none; background: none; padding: 13px 14px; font-size: 13px; font-weight: 700;
  color: var(--khu-ink-soft); cursor: pointer; white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .15s ease, border-color .15s ease;
}
#embark-hotel-widget .khu-tabbtn:hover { color: var(--khu-primary); }
#embark-hotel-widget .khu-tabbtn-active { color: var(--khu-primary); border-bottom-color: var(--khu-primary); }
#embark-hotel-widget .khu-tabpanel { display: none; }
#embark-hotel-widget .khu-tabpanel.khu-tabpanel-active { display: block; animation: khu-tabpanel-in .18s ease; }
@keyframes khu-tabpanel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Amenities panel — real icon + text grid/list, consistent sizing. The
   tag list (already de-duplicated) is the same .eh-amenity-tag pills
   used elsewhere, just laid out as a grid once inside its own panel
   rather than a wrapped inline row, per "clean icon + text grid/list
   with consistent sizing and spacing". */
#embark-hotel-widget .khu-amenities-panel-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px;
}
#embark-hotel-widget .khu-amenities-panel-list .eh-amenity-tag {
  display: flex; align-items: center; gap: 8px; text-align: left;
  background: #fbfcff; border: 1px solid var(--khu-line); border-radius: var(--khu-radius-sm);
  padding: 10px 12px; font-size: 12.5px;
}

#embark-hotel-widget .khu-reviews-empty-text { font-size: 12.5px; color: var(--khu-ink-soft); padding: 4px 0; }

/* ── Room cards — compact, thumbnail on the left, NEVER enlarged inline ── */
#embark-hotel-widget .eh-room-card {
  display: flex; align-items: center; gap: 14px;
  border: 1.5px solid var(--khu-line); border-radius: var(--khu-radius-md);
  padding: 12px 14px; margin-bottom: 10px; background: #fbfcff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#embark-hotel-widget .eh-room-card:hover { border-color: #cddaf7; box-shadow: var(--khu-shadow-sm); }
#embark-hotel-widget .eh-room-card { cursor: pointer; }
#embark-hotel-widget .eh-room-card.khu-room-selected {
  border-color: var(--khu-primary); background: var(--khu-primary-light);
  box-shadow: 0 0 0 2px var(--khu-primary-light) inset, var(--khu-shadow-sm);
}

#embark-hotel-widget .khu-room-thumb {
  flex: none; width: 76px; height: 76px; border-radius: var(--khu-radius-sm); overflow: hidden;
  background: linear-gradient(160deg, #e4eafc, #cfdcfb);
  display: flex; align-items: center; justify-content: center; color: var(--khu-primary);
  font-size: 22px; cursor: default; position: relative;
}
#embark-hotel-widget .khu-room-thumb.khu-has-photo { cursor: pointer; }
#embark-hotel-widget .khu-room-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#embark-hotel-widget .khu-room-thumb.khu-has-photo::after {
  content: "🔍"; position: absolute; right: 4px; bottom: 4px; font-size: 10px;
  background: rgba(20,33,61,.55); color: #fff; border-radius: 50%; width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
}
#embark-hotel-widget .khu-room-thumb-count {
  position: absolute; left: 4px; bottom: 4px; font-size: 9px; font-weight: 800; color: #fff;
  background: rgba(20,33,61,.6); border-radius: 4px; padding: 1px 5px;
}

#embark-hotel-widget .eh-room-info { flex: 1 1 auto; min-width: 0; }
/* mealPlanHtml/policyHtml/service-charge lines embark-public.js renders
   as plain inline-styled <div>s inside .eh-room-info, in addition to the
   khu-room-badges chips above — style them as compact supplementary text
   regardless of which of those optional lines are present for a given room. */
#embark-hotel-widget .eh-room-info > div:not(.eh-room-type):not(.eh-room-meta):not(.khu-room-badges) {
  font-size: 10.5px !important; color: var(--khu-ink-soft) !important; margin-top: 2px !important;
}
#embark-hotel-widget .eh-room-type { font-size: 14.5px; font-weight: 800; color: var(--khu-ink); }
#embark-hotel-widget .eh-room-meta { font-size: 11.5px; color: var(--khu-ink-soft); margin-top: 3px; }
#embark-hotel-widget .khu-room-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
#embark-hotel-widget .khu-room-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #eef2fb; color: var(--khu-ink-soft);
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
}
#embark-hotel-widget .khu-room-badge-free { background: #e6f7ef; color: var(--khu-success); }
#embark-hotel-widget .khu-room-badge-warn { background: #fff2e2; color: #b45309; }
#embark-hotel-widget .khu-room-badge-meal { background: #eef2fb; color: var(--khu-primary-dark); }
#embark-hotel-widget .khu-room-count-badge { font-size: 10.5px; color: var(--khu-ink-soft); margin-top: 6px; font-weight: 600; }
#embark-hotel-widget .khu-room-count-badge strong { color: var(--khu-ink); }

#embark-hotel-widget .eh-room-pricing { text-align: right; flex: none; }
#embark-hotel-widget .khu-room-was-price { font-size: 11.5px; color: var(--khu-ink-soft); text-decoration: line-through; }
#embark-hotel-widget .khu-room-discount-badge {
  display: inline-block; background: #e6f7ef; color: var(--khu-success);
  font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; margin: 2px 0 3px;
}
#embark-hotel-widget .eh-room-price { font-size: 18px; font-weight: 800; color: var(--khu-ink); }
#embark-hotel-widget .eh-room-night { font-size: 10.5px; font-weight: 600; color: var(--khu-ink-soft); }
#embark-hotel-widget .eh-room-total { font-size: 11.5px; color: var(--khu-ink-soft); margin: 2px 0 8px; }
#embark-hotel-widget .eh-room-total strong { color: var(--khu-ink); }
#embark-hotel-widget .eh-book-room-btn {
  background: linear-gradient(135deg, var(--khu-accent), var(--khu-accent-dark)); border: none; color: #fff;
  font-weight: 800; font-size: 12px; padding: 9px 18px; border-radius: var(--khu-radius-sm); cursor: pointer;
  box-shadow: 0 8px 18px rgba(255, 122, 26, .3);
}

/* ── Guest details page ────────────────────────────────────────────── */
#embark-hotel-widget .khu-guest-layout { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; margin: 18px 0; }
#embark-hotel-widget .khu-panel-card {
  background: var(--khu-card); border: 1px solid var(--khu-line); border-radius: var(--khu-radius-lg);
  box-shadow: var(--khu-shadow-sm); padding: 22px 24px 24px;
}
#embark-hotel-widget .khu-panel-title { font-size: 18px; font-weight: 800; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
#embark-hotel-widget .khu-trip-summary, #embark-hotel-widget .eh-summary-bar {
  background: var(--khu-primary-light); border: 1px solid #d7e2fb; border-radius: var(--khu-radius-md);
  padding: 12px 16px; font-size: 13px; color: var(--khu-ink); margin-bottom: 18px; line-height: 1.6;
}
#embark-hotel-widget .khu-login-notice, #embark-hotel-widget .embark-login-notice {
  display: flex; align-items: center; gap: 8px; background: #fff6e9; border: 1px solid #ffd699;
  border-radius: var(--khu-radius-sm); padding: 12px 14px; font-size: 13px; color: #7a4a00; margin-bottom: 18px;
}
#embark-hotel-widget .khu-notice-ic { font-size: 14px; }

#embark-hotel-widget .eh-form-grid, #embark-hotel-widget .khu-form-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }
#embark-hotel-widget .embark-field { flex: 1 1 160px; display: flex; flex-direction: column; gap: 4px; }
#embark-hotel-widget .embark-field-wide { flex: 1 1 100%; }
#embark-hotel-widget .khu-field-sm { flex: 0 1 100px; }
#embark-hotel-widget .embark-field label { font-size: 11px; font-weight: 700; color: var(--khu-ink-soft); text-transform: uppercase; letter-spacing: .03em; }
#embark-hotel-widget .embark-field .req { color: var(--khu-danger); }
#embark-hotel-widget .embark-field input, #embark-hotel-widget .embark-field select {
  border: 1.5px solid var(--khu-line); border-radius: var(--khu-radius-sm); padding: 9px 11px;
  font-size: 13.5px; background: #fff; color: var(--khu-ink); outline: none;
}
#embark-hotel-widget .embark-field input:focus, #embark-hotel-widget .embark-field select:focus {
  border-color: var(--khu-primary); box-shadow: 0 0 0 3px var(--khu-primary-light);
}

#embark-hotel-widget .khu-guest2-section { margin-top: 6px; }
#embark-hotel-widget .khu-guest-divider, #embark-hotel-widget .eh-guest-divider {
  font-size: 12.5px; font-weight: 800; color: var(--khu-primary-dark); text-transform: uppercase;
  letter-spacing: .03em; margin: 16px 0 10px; padding-top: 14px; border-top: 1px dashed var(--khu-line);
}
#embark-hotel-widget .khu-gst-block { margin-top: 8px; }
#embark-hotel-widget .khu-gst-toggle { border: none; background: none; color: var(--khu-primary); font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 0; }

/* ── Price breakdown sidebar ────────────────────────────────────────── */
#embark-hotel-widget .khu-guest-side { position: sticky; top: 16px; }
#embark-hotel-widget .khu-summary-card.eh-price-summary { padding: 20px; }
#embark-hotel-widget .khu-summary-title { font-size: 14.5px; font-weight: 800; margin-bottom: 12px; }
#embark-hotel-widget .khu-price-rows .price-row {
  display: flex; justify-content: space-between; font-size: 13px; color: var(--khu-ink-soft);
  padding: 7px 0; border-bottom: 1px dashed var(--khu-line);
}
#embark-hotel-widget .khu-price-rows .price-row.price-total {
  border-bottom: none; border-top: 1.5px solid var(--khu-line); margin-top: 4px; padding-top: 12px;
  font-size: 16px; color: var(--khu-ink);
}
#embark-hotel-widget .khu-price-rows .khu-price-row-discount { color: var(--khu-success); }
/* View Estimate — Agent-only, shown/hidden by JS (see the button's own
   template comment for why it's static markup, not built into
   .khu-price-rows' own HTML). Secondary/outline style so it reads as
   a supporting action, distinct from the primary "Continue to
   Payment" CTA below it, while still being clearly visible and
   obviously clickable — never a bare, unstyled default button. */
#embark-hotel-widget .khu-view-estimate-btn {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px;
  background: #fff; border: 1.5px solid var(--khu-primary); color: var(--khu-primary);
  font-weight: 700; font-size: 13.5px; padding: 10px 14px; border-radius: var(--khu-radius-sm);
  cursor: pointer; margin-top: 8px;
}
#embark-hotel-widget .khu-view-estimate-btn:hover { background: var(--khu-primary); color: #fff; }
#embark-hotel-widget .khu-form-error, #embark-hotel-widget .eh-form-error {
  background: #fdecec; border: 1px solid #f6b8ba; color: #b3261e; font-size: 12.5px;
  border-radius: var(--khu-radius-sm); padding: 10px 12px; margin: 10px 0;
}
#embark-hotel-widget .khu-pay-btn {
  width: 100%; margin-top: 6px;
  background: linear-gradient(135deg, var(--khu-accent), var(--khu-accent-dark)); border: none; color: #fff;
  font-weight: 800; font-size: 14.5px; padding: 14px; border-radius: var(--khu-radius-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 10px 24px rgba(255, 122, 26, .32);
}
#embark-hotel-widget .khu-pay-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
#embark-hotel-widget .khu-secure-note { margin: 12px 0 0; font-size: 11.5px; color: var(--khu-ink-soft); text-align: center; display: flex; align-items: center; justify-content: center; gap: 5px; }

/* ── Confirmation / voucher ────────────────────────────────────────── */
#embark-hotel-widget .khu-voucher-card {
  max-width: 640px; margin: 24px auto; border: 1.5px solid var(--khu-line); border-radius: var(--khu-radius-lg);
  padding: 30px 30px 26px; text-align: center; background: var(--khu-card); box-shadow: var(--khu-shadow-lg);
}
#embark-hotel-widget .khu-voucher-brand {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1.5px dashed var(--khu-line); text-align: left;
}
#embark-hotel-widget .khu-voucher-logo img { max-height: 40px; width: auto; display: block; }
#embark-hotel-widget .khu-voucher-logo-text { font-size: 17px; font-weight: 800; color: var(--khu-primary-dark); }
#embark-hotel-widget .khu-voucher-tag { background: var(--khu-primary-light); color: var(--khu-primary-dark); font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 999px; }
#embark-hotel-widget .khu-success-icon { font-size: 40px; margin-bottom: 6px; }
#embark-hotel-widget .khu-voucher-heading { font-size: 21px; font-weight: 800; margin-bottom: 6px; }
#embark-hotel-widget .khu-voucher-sub { font-size: 13px; color: var(--khu-ink-soft); margin-bottom: 18px; }

#embark-hotel-widget .khu-conf-details .eh-confirm-table,
#embark-hotel-widget .khu-conf-details table { width: 100%; border-collapse: collapse; text-align: left; margin-bottom: 8px; }
#embark-hotel-widget .khu-conf-details td { padding: 9px 6px; font-size: 13.5px; border-bottom: 1px solid var(--khu-line); color: var(--khu-ink-soft); }
#embark-hotel-widget .khu-conf-details td:last-child { text-align: right; color: var(--khu-ink); }
#embark-hotel-widget .khu-conf-details .demo-note { color: var(--khu-accent-dark); font-size: 12.5px; text-align: left; margin-bottom: 10px; }

#embark-hotel-widget .khu-voucher-steps { display: flex; justify-content: space-between; gap: 8px; margin: 20px 0; flex-wrap: wrap; }
#embark-hotel-widget .khu-vstep {
  flex: 1 1 100px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--khu-success);
}
#embark-hotel-widget .khu-vstep .eh-step-icon { font-size: 18px; }

#embark-hotel-widget .khu-voucher-actions { display: flex; gap: 12px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
#embark-hotel-widget .khu-print-btn {
  border: 1.5px solid var(--khu-primary); background: #fff; color: var(--khu-primary); font-weight: 700;
  font-size: 13px; padding: 10px 20px; border-radius: var(--khu-radius-sm); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
#embark-hotel-widget .khu-book-another-btn {
  border: none; font-weight: 700; font-size: 13px; padding: 10px 20px; border-radius: var(--khu-radius-sm); cursor: pointer;
}

/* Applied to <body> only while the lightbox is open (added/removed by
   kana-hotel-ui.js), to stop background scroll — standard modal pattern,
   scoped by this specific class so it never affects any other page state. */
body.khu-lightbox-lock { overflow: hidden; }

/* ── Image lightbox (hotel gallery + room photos) ─────────────────────
   Premium open/close: the lightbox is always display:flex in CSS (the
   template no longer sets an inline display:none — see
   templates/hotel-search-ui.php), starting fully transparent and
   untouchable (pointer-events:none), and kana-hotel-ui.js adds
   .khu-lightbox-open a tick after showing it so the opacity + inner
   scale actually have something to transition FROM. Closing removes the
   class and the same transition runs in reverse. */
#embark-hotel-widget .khu-lightbox {
  position: fixed; inset: 0; z-index: 20000; display: flex;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
#embark-hotel-widget .khu-lightbox.khu-lightbox-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .22s ease, visibility 0s linear 0s;
}
#embark-hotel-widget .khu-lightbox-backdrop { position: absolute; inset: 0; background: rgba(10, 16, 34, .9); }
#embark-hotel-widget .khu-lightbox-inner {
  position: relative; z-index: 1; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; padding: 40px;
  transform: scale(.96); transition: transform .22s ease;
}
#embark-hotel-widget .khu-lightbox.khu-lightbox-open .khu-lightbox-inner { transform: scale(1); }
#embark-hotel-widget .khu-lightbox-img {
  max-width: min(92vw, 1100px); max-height: 84vh; width: auto; height: auto;
  object-fit: contain; display: block;
  border-radius: var(--khu-radius-md); box-shadow: 0 24px 70px rgba(0,0,0,.55);
  background: #111; transition: opacity .18s ease;
}
#embark-hotel-widget .khu-lightbox-close {
  position: absolute; top: 18px; right: 18px; z-index: 2; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff;
  font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
#embark-hotel-widget .khu-lightbox-close:hover { background: rgba(255,255,255,.24); transform: rotate(90deg); }
#embark-hotel-widget .khu-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
#embark-hotel-widget .khu-lightbox-nav:hover { background: rgba(255,255,255,.24); }
#embark-hotel-widget .khu-lightbox-prev { left: 16px; }
#embark-hotel-widget .khu-lightbox-prev:hover { transform: translateY(-50%) translateX(-2px); }
#embark-hotel-widget .khu-lightbox-next { right: 16px; }
#embark-hotel-widget .khu-lightbox-next:hover { transform: translateY(-50%) translateX(2px); }
#embark-hotel-widget .khu-lightbox-counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: rgba(255,255,255,.16); color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 6px 16px; border-radius: 999px; letter-spacing: .02em;
}

/* ── Print styles (voucher only) ───────────────────────────────────── */
@media print {
  #embark-hotel-widget > *:not(#eh-confirmed) { display: none !important; }
  #embark-hotel-widget .khu-voucher-card { box-shadow: none; border: 1.5px solid #999; }
  #embark-hotel-widget .khu-voucher-actions { display: none !important; }
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 992px) {
  #embark-hotel-widget .khu-listing-layout { grid-template-columns: 1fr; }
  #embark-hotel-widget .khu-filter-toggle-btn { display: inline-flex; }

  #embark-hotel-widget .khu-filters-panel {
    position: fixed; top: 0; right: -100%; height: 100vh; width: min(340px, 88vw);
    z-index: 10000; border-radius: 0; max-height: 100vh;
    box-shadow: -12px 0 32px rgba(0,0,0,.18); transition: right .25s ease;
  }
  #embark-hotel-widget .khu-filters-panel.khu-open { right: 0; }
  #embark-hotel-widget .khu-close-btn { display: inline-flex; align-items: center; justify-content: center; }
  #embark-hotel-widget .khu-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 9999; }
  #embark-hotel-widget .khu-backdrop.khu-open { display: block; }

  #embark-hotel-widget .khu-guest-layout { grid-template-columns: 1fr; }
  #embark-hotel-widget .khu-guest-side { position: static; }

  #embark-hotel-widget .eh-hotel-card { flex-direction: column; }
  #embark-hotel-widget .eh-hotel-img-wrap { width: 100%; flex-basis: auto; align-self: stretch; }
  #embark-hotel-widget .eh-hotel-footer {
    flex-basis: auto; width: 100%; align-items: stretch; text-align: left;
    padding-left: 0; border-left: none; padding-top: 10px; border-top: 1px dashed var(--khu-line);
  }
  #embark-hotel-widget .eh-hotel-price-from { text-align: left; margin-bottom: 4px; }

  #embark-hotel-widget .khu-detail-layout { grid-template-columns: 1fr; }
  #embark-hotel-widget .khu-detail-sidebar { position: static; order: -1; }
}

@media (max-width: 560px) {
  #embark-hotel-widget .eh-room-card { flex-wrap: wrap; }
  #embark-hotel-widget .eh-room-info { flex: 1 1 calc(100% - 90px); }
  #embark-hotel-widget .eh-room-pricing { flex: 1 1 100%; text-align: left; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--khu-line); display: flex; align-items: center; justify-content: space-between; }
  #embark-hotel-widget .eh-room-total { margin: 0; }
  #embark-hotel-widget .khu-lightbox-nav { width: 38px; height: 38px; font-size: 20px; }
  #embark-hotel-widget .khu-lightbox-close { top: 10px; right: 10px; }
  #embark-hotel-widget .khu-lightbox-inner { padding: 16px; }
}

@media (max-width: 760px) {
  #embark-hotel-widget .khu-search-fields { flex-direction: column; align-items: stretch; }
  #embark-hotel-widget .khu-field, #embark-hotel-widget .khu-field-btn,
  #embark-hotel-widget .khu-field-guests { flex: 1 1 auto; width: 100%; }
  #embark-hotel-widget .khu-guests-popover { position: static; width: 100%; margin-top: 8px; box-shadow: none; border: 1px dashed var(--khu-line); }
  #embark-hotel-widget .khu-trust-strip { grid-template-columns: 1fr 1fr; }
  #embark-hotel-widget .khu-destination-grid { grid-template-columns: repeat(2, 1fr); }
  #embark-hotel-widget .khu-gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 140px; grid-auto-rows: 110px; height: auto; }
  #embark-hotel-widget .khu-gallery-grid.khu-gallery-1row { grid-template-rows: 170px; grid-auto-rows: 170px; height: auto; }
  #embark-hotel-widget .khu-gallery-grid img:first-child { grid-row: 1 / 2; grid-column: 1 / 3; }
  #embark-hotel-widget .khu-gallery-grid.khu-gallery-1row img:first-child { grid-column: 1 / 3; }
  #embark-hotel-widget .eh-room-card { flex-direction: column; align-items: flex-start; }
  #embark-hotel-widget .eh-room-pricing { text-align: left; width: 100%; }
}

@media (max-width: 480px) {
  #embark-hotel-widget .khu-hero-title { font-size: 22px; }
  #embark-hotel-widget .khu-trust-strip { grid-template-columns: 1fr; }
  #embark-hotel-widget .khu-destination-grid { grid-template-columns: 1fr; }
  #embark-hotel-widget .khu-voucher-steps { justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v2.1 — HOTEL VIEW ROOM PAGE (premium responsive layout, per the approved mockup)
   Scope: ONLY #eh-detail (View Room). Teal/green KaNa palette with a gold accent is
   defined locally on #eh-detail so the search page and the listing keep their look.
   One continuous page: hero (gallery | info | price card) → sticky in-page nav →
   Overview → Rooms → Amenities | Policies | Reviews. No data, request or price logic.
   ═══════════════════════════════════════════════════════════════════════════ */
#embark-hotel-widget #eh-detail {
  --khu-primary: #0f6a5d; --khu-primary-dark: #0a4f45; --khu-primary-light: #e6f3f0;
  --khu-gold: #d4a23c; --khu-gold-dark: #b8872a;
  --khu-ink: #12263a; --khu-ink-soft: #5d6b7a; --khu-line: #e3e9ee;
  max-width: 1240px; margin: 0 auto; padding: 0 16px 28px; background: transparent;
}
#embark-hotel-widget #eh-detail .khu-back-btn { color: var(--khu-primary); margin: 12px 0 10px; }

/* ── hero ── */
#embark-hotel-widget #eh-detail .khu-dh { display: grid; gap: 18px 22px; align-items: start; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.1fr) 290px; grid-template-areas: "g i p"; }
#embark-hotel-widget #eh-detail .khu-dh-gallery { grid-area: g; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 10px; }
#embark-hotel-widget #eh-detail .khu-dh-info { grid-area: i; min-width: 0; }
#embark-hotel-widget #eh-detail .khu-dh > .khu-detail-sidebar { grid-area: p; position: static; min-width: 0; }

#embark-hotel-widget #eh-detail .khu-hg-main { position: relative; border-radius: 16px; overflow: hidden; background: #dfe9ec; aspect-ratio: 4 / 3; cursor: zoom-in; min-width: 0; }
#embark-hotel-widget #eh-detail .khu-hg-main img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; border-radius: 0 !important; margin: 0 !important; max-width: none !important; }
#embark-hotel-widget #eh-detail .khu-hg-none { display: flex; align-items: center; justify-content: center; font-size: 56px; cursor: default; }
#embark-hotel-widget #eh-detail .khu-hg-count { position: absolute; left: 12px; bottom: 12px; background: rgba(8, 28, 40, .72); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
#embark-hotel-widget #eh-detail .khu-hg-thumbs { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#embark-hotel-widget #eh-detail .khu-hg-thumb { padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: #dfe9ec; cursor: pointer; flex: 1 1 0; min-height: 0; position: relative; }
#embark-hotel-widget #eh-detail .khu-hg-thumb img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0 !important; margin: 0 !important; display: block; }
#embark-hotel-widget #eh-detail .khu-hg-thumb.is-on { border-color: var(--khu-primary); }
#embark-hotel-widget #eh-detail .khu-hg-thumb:nth-child(n+5) { display: none; }

/* info */
#embark-hotel-widget #eh-detail .khu-hi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#embark-hotel-widget #eh-detail .khu-hi-stars { color: var(--khu-gold); font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
#embark-hotel-widget #eh-detail .khu-hi-stars * { color: var(--khu-gold); }
#embark-hotel-widget #eh-detail .khu-hi-actions { display: flex; gap: 8px; }
#embark-hotel-widget #eh-detail .khu-hi-actions .khu-icon-btn { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; border: 1px solid var(--khu-line); background: #fff; color: var(--khu-ink-soft); font-size: 16px; line-height: 1; }
#embark-hotel-widget #eh-detail .khu-hi-actions .khu-icon-btn .khu-ico { width: 17px; height: 17px; }
#embark-hotel-widget #eh-detail .khu-hi-actions .khu-favorite-on { color: #e0457b; border-color: #f4bfd0; background: #fff2f6; }
#embark-hotel-widget #eh-detail .khu-hi-name { margin: 8px 0 6px; font-size: 26px; line-height: 1.2; font-weight: 800; color: var(--khu-ink); letter-spacing: -.01em; }
#embark-hotel-widget #eh-detail .khu-hi-addr { display: flex; align-items: flex-start; gap: 7px; color: var(--khu-ink-soft); font-size: 13.5px; }
#embark-hotel-widget #eh-detail .khu-hi-addr .khu-ico { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--khu-primary); }
#embark-hotel-widget #eh-detail .khu-hi-desc { margin: 12px 0 0; color: var(--khu-ink-soft); font-size: 13.5px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
#embark-hotel-widget #eh-detail .khu-hi-hl { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; }
#embark-hotel-widget #eh-detail .khu-hl-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--khu-ink); }
#embark-hotel-widget #eh-detail .khu-hl-item .khu-ico { width: 18px; height: 18px; color: var(--khu-primary); }

/* price card (the existing sticky "Your Booking" sidebar, restyled) */
#embark-hotel-widget #eh-detail .khu-sidebar-card { padding: 18px; border: 1px solid var(--khu-line); border-radius: 16px; box-shadow: 0 6px 22px rgba(18, 38, 58, .07); background: #fff; }
#embark-hotel-widget #eh-detail .khu-pc-from { font-size: 12.5px; color: var(--khu-ink-soft); }
#embark-hotel-widget #eh-detail .khu-pc-price { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 12px; }
#embark-hotel-widget #eh-detail .khu-pc-price strong { font-size: 30px; line-height: 1.1; font-weight: 800; color: var(--khu-primary); letter-spacing: -.01em; }
#embark-hotel-widget #eh-detail .khu-pc-price span { font-size: 13px; color: var(--khu-ink-soft); }
#embark-hotel-widget #eh-detail .khu-pc-book { width: 100%; min-height: 48px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #12806f, var(--khu-primary-dark)); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 18px rgba(15, 106, 93, .28); }
#embark-hotel-widget #eh-detail .khu-pc-free { margin-top: 12px; font-size: 12px; color: var(--khu-ink-soft); display: flex; flex-direction: column; gap: 2px; }
#embark-hotel-widget #eh-detail .khu-pc-free-ok { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--khu-primary); }
#embark-hotel-widget #eh-detail .khu-pc-free .khu-ico { width: 16px; height: 16px; }
#embark-hotel-widget #eh-detail .khu-pc-free small { font-size: 11.5px; padding-left: 22px; }
#embark-hotel-widget #eh-detail .khu-summary-title { margin: 16px 0 8px; padding-top: 14px; border-top: 1px solid var(--khu-line); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--khu-ink-soft); font-weight: 800; }
#embark-hotel-widget #eh-detail .khu-sidebar-hotel { display: none; }
#embark-hotel-widget #eh-detail .khu-sidebar-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0; padding: 0; border: 0; }
#embark-hotel-widget #eh-detail .khu-sidebar-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0; font-size: 13px; font-weight: 700; color: var(--khu-ink); padding: 0; }
#embark-hotel-widget #eh-detail .khu-sidebar-row span:first-child { font-size: 11px; font-weight: 600; color: var(--khu-ink-soft); }
#embark-hotel-widget #eh-detail .khu-sidebar-hint { font-size: 11.5px; color: var(--khu-ink-soft); margin: 12px 0 0; }
#embark-hotel-widget #eh-detail .khu-sidebar-continue-btn { background: linear-gradient(135deg, #12806f, var(--khu-primary-dark)); box-shadow: 0 8px 18px rgba(15, 106, 93, .28); }
#embark-hotel-widget #eh-detail .khu-selected-room { margin-top: 14px; }

/* ── the page below the hero ── */
#embark-hotel-widget #eh-detail .khu-detail-layout { display: block; max-width: none; margin: 18px 0 0; padding: 0; }
#embark-hotel-widget #eh-detail .khu-detail-content .embark-card { background: transparent; border: 0; box-shadow: none; padding: 0 !important; border-radius: 0; }
#embark-hotel-widget #eh-detail .khu-orig-header, #embark-hotel-widget #eh-detail #khu-tabpanel-overview .khu-gallery-grid, #embark-hotel-widget #eh-detail #khu-tabpanel-overview .khu-overview-location { display: none !important; }
#embark-hotel-widget #eh-detail #khu-tabpanel-overview > p { margin: 0 0 14px; font-size: 14px; line-height: 1.75; color: var(--khu-ink-soft); }
#embark-hotel-widget #eh-detail .khu-ov-lead { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--khu-primary); }
#embark-hotel-widget #eh-detail .khu-tabbar .khu-header-actions { display: none; }
#embark-hotel-widget #eh-detail #khu-tabpanel-rooms > h3 { display: none !important; }

/* sticky in-page nav */
#embark-hotel-widget #eh-detail .khu-tabbar {
  position: sticky; top: var(--khu-nav-top, 0px); z-index: 30; display: flex; gap: 6px; align-items: center; margin: 0 0 18px; padding: 8px;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); border: 1px solid var(--khu-line); border-radius: 999px; box-shadow: 0 4px 14px rgba(18, 38, 58, .06);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
#embark-hotel-widget #eh-detail .khu-tabbar::-webkit-scrollbar { display: none; }
#embark-hotel-widget #eh-detail .khu-tabbtn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; margin: 0; border: 0; border-radius: 999px; background: transparent; color: var(--khu-ink-soft); font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
#embark-hotel-widget #eh-detail .khu-tabbtn .khu-ico { width: 18px; height: 18px; }
#embark-hotel-widget #eh-detail .khu-tabbtn:hover { color: var(--khu-primary); background: var(--khu-primary-light); }
#embark-hotel-widget #eh-detail .khu-tabbtn.khu-tabbtn-active { background: linear-gradient(135deg, #12806f, var(--khu-primary-dark)); color: #fff; box-shadow: 0 6px 14px rgba(15, 106, 93, .25); }

/* every section is visible — one page */
#embark-hotel-widget #eh-detail .khu-tabpanel, #embark-hotel-widget #eh-detail .khu-tabpanel.khu-tabpanel-active { display: block !important; animation: none; }
#embark-hotel-widget #eh-detail .khu-tabpanels { display: flex; flex-direction: column; gap: 20px; }
#embark-hotel-widget #eh-detail .khu-tabpanel { background: #fff; border: 1px solid var(--khu-line); border-radius: 16px; padding: 22px 24px; box-shadow: 0 2px 10px rgba(18, 38, 58, .04); scroll-margin-top: 90px; }
#embark-hotel-widget #eh-detail .khu-sec-head { margin: 0 0 16px; }
#embark-hotel-widget #eh-detail .khu-sec-head h3 { margin: 0; font-size: 20px; font-weight: 800; color: var(--khu-ink); }
#embark-hotel-widget #eh-detail .khu-sec-head p { margin: 4px 0 0; font-size: 13px; color: var(--khu-ink-soft); }

/* amenities | policies | reviews: three columns on wide screens */
#embark-hotel-widget #eh-detail .khu-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
#embark-hotel-widget #eh-detail .khu-trio > .khu-tabpanel { margin: 0; min-width: 0; }

/* overview + info cards */
#embark-hotel-widget #eh-detail #khu-tabpanel-overview { display: block; }
#embark-hotel-widget #eh-detail .khu-info-card { position: relative; display: block; background: #f8fbfa; border: 1px solid var(--khu-line); border-radius: 12px; padding: 14px 16px 14px 56px !important; margin: 0 0 12px !important; font-size: 13px; line-height: 1.65; color: var(--khu-ink-soft); }
#embark-hotel-widget #eh-detail .khu-info-card strong { display: block; margin: 0 0 4px; font-size: 14px; font-weight: 800; color: var(--khu-ink); }
#embark-hotel-widget #eh-detail .khu-info-card-policy { background: #f8fbfa; border-color: var(--khu-line); }
#embark-hotel-widget #eh-detail .khu-info-card-policy strong::before { content: none; }
#embark-hotel-widget #eh-detail .khu-info-ico { position: absolute; left: 14px; top: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--khu-primary-light); color: var(--khu-primary); display: flex; align-items: center; justify-content: center; }
#embark-hotel-widget #eh-detail .khu-info-ico .khu-ico { width: 17px; height: 17px; }
#embark-hotel-widget #eh-detail #khu-tabpanel-overview { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-items: start; }
#embark-hotel-widget #eh-detail #khu-tabpanel-overview > .khu-sec-head { grid-column: 1 / -1; }
#embark-hotel-widget #eh-detail #khu-tabpanel-overview > :not(.khu-sec-head):not(.khu-info-card) { grid-column: 1 / -1; }

/* amenity tiles */
#embark-hotel-widget #eh-detail .khu-amenities-panel-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#embark-hotel-widget #eh-detail .khu-amen-tile { display: flex; align-items: center; gap: 10px; background: #f8fbfa; border: 1px solid var(--khu-line); border-radius: 12px; padding: 11px 12px; font-size: 13px; font-weight: 600; color: var(--khu-ink); min-width: 0; }
#embark-hotel-widget #eh-detail .khu-amen-tile .khu-ico { flex: none; width: 22px; height: 22px; color: var(--khu-primary); }
#embark-hotel-widget #eh-detail .khu-amen-tile span { min-width: 0; overflow-wrap: anywhere; }
#embark-hotel-widget #eh-detail #khu-tabpanel-amenities .khu-info-card { padding-left: 56px !important; }

/* reviews */
#embark-hotel-widget #eh-detail .khu-class-badge { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: #fff9ec; border: 1px solid #f1e0b5; margin-bottom: 12px; }
#embark-hotel-widget #eh-detail .khu-class-badge .khu-ico { width: 30px; height: 30px; color: var(--khu-gold); fill: var(--khu-gold); }
#embark-hotel-widget #eh-detail .khu-class-badge strong { display: block; font-size: 16px; color: var(--khu-ink); }
#embark-hotel-widget #eh-detail .khu-class-badge span { font-size: 12px; color: var(--khu-ink-soft); }

/* ── rooms ── */
#embark-hotel-widget #eh-detail #khu-tabpanel-rooms > div:not(.khu-sec-head) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
#embark-hotel-widget #eh-detail .eh-room-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0; border: 1px solid var(--khu-line); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(18, 38, 58, .05); min-width: 0; }
#embark-hotel-widget #eh-detail .eh-room-card:hover { border-color: #b9d6d0; box-shadow: 0 8px 22px rgba(18, 38, 58, .1); }
#embark-hotel-widget #eh-detail .eh-room-card.khu-room-selected { border-color: var(--khu-primary); background: #fff; box-shadow: 0 0 0 2px var(--khu-primary), 0 8px 22px rgba(15, 106, 93, .16); }
#embark-hotel-widget #eh-detail .khu-room-thumb { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 0; flex: none; background: linear-gradient(160deg, #e1eeeb, #cfe3df); color: var(--khu-primary); }
#embark-hotel-widget #eh-detail .khu-room-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
#embark-hotel-widget #eh-detail .eh-room-info { padding: 14px 14px 0; flex: 1 1 auto; }
#embark-hotel-widget #eh-detail .eh-room-type { font-size: 15px; font-weight: 800; color: var(--khu-ink); line-height: 1.3; }
#embark-hotel-widget #eh-detail .eh-room-meta { font-size: 12.5px; color: var(--khu-ink-soft); margin-top: 6px; }
#embark-hotel-widget #eh-detail .khu-room-badges { margin-top: 10px; gap: 6px; }
#embark-hotel-widget #eh-detail .khu-room-badge { background: #eef5f3; color: var(--khu-primary-dark); font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
#embark-hotel-widget #eh-detail .khu-room-badge-free { background: #e4f5ec; color: #12714f; }
#embark-hotel-widget #eh-detail .khu-room-badge-warn { background: #fff3e0; color: #a8570a; }
#embark-hotel-widget #eh-detail .khu-room-badge-meal { background: #f4eee0; color: #7a5a14; }
#embark-hotel-widget #eh-detail .eh-room-pricing { text-align: left; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; flex: none; }
#embark-hotel-widget #eh-detail .khu-room-count-row { order: 5; margin: 8px 0 0; }
#embark-hotel-widget #eh-detail .eh-room-price { font-size: 22px; font-weight: 800; color: var(--khu-primary); }
#embark-hotel-widget #eh-detail .eh-room-night { font-size: 12px; margin-left: 2px; }
#embark-hotel-widget #eh-detail .eh-room-total { margin: 0 0 10px; font-size: 12px; }
#embark-hotel-widget #eh-detail .eh-book-room-btn { width: 100%; min-height: 42px; border-radius: 9px; border: 0; background: linear-gradient(135deg, #12806f, var(--khu-primary-dark)); color: #fff; font-size: 13.5px; font-weight: 800; box-shadow: 0 6px 14px rgba(15, 106, 93, .22); cursor: pointer; }

/* ── mobile sticky booking bar ── */
#embark-hotel-widget #eh-detail .khu-mbar { display: none; }

/* ═════════ responsive ═════════ */
@media (max-width: 1199px) {
  #embark-hotel-widget #eh-detail .khu-dh { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "g g" "i p"; }
  #embark-hotel-widget #eh-detail .khu-dh-gallery { grid-template-columns: minmax(0, 1fr); }
  #embark-hotel-widget #eh-detail .khu-hg-main { aspect-ratio: 16 / 8; }
  #embark-hotel-widget #eh-detail .khu-hg-thumbs { flex-direction: row; height: 82px; }
  #embark-hotel-widget #eh-detail .khu-hg-thumb:nth-child(n+5) { display: block; }
  #embark-hotel-widget #eh-detail .khu-hg-thumb:nth-child(n+7) { display: none; }
  #embark-hotel-widget #eh-detail .khu-trio { grid-template-columns: minmax(0, 1fr); }
  #embark-hotel-widget #eh-detail .khu-amenities-panel-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #embark-hotel-widget #eh-detail #khu-tabpanel-rooms > div:not(.khu-sec-head) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  #embark-hotel-widget #eh-detail { padding: 0 14px 96px; }
  #embark-hotel-widget #eh-detail .khu-hi-name { font-size: 23px; }
  #embark-hotel-widget #eh-detail .khu-tabpanel { padding: 18px 16px; }
  #embark-hotel-widget #eh-detail .khu-tabbtn { flex: 0 0 auto; padding: 0 16px; }
  /* sticky booking bar */
  #embark-hotel-widget #eh-detail .khu-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #0d3f3a; color: #fff; box-shadow: 0 -6px 20px rgba(8, 28, 40, .25); }
  #embark-hotel-widget #eh-detail .khu-mbar-price { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
  #embark-hotel-widget #eh-detail .khu-mbar-price strong { font-size: 21px; font-weight: 800; }
  #embark-hotel-widget #eh-detail .khu-mbar-price span { font-size: 12px; opacity: .8; }
  #embark-hotel-widget #eh-detail .khu-mbar-btn { flex: 1 1 auto; max-width: 280px; min-height: 46px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #e6bb5a, var(--khu-gold-dark)); color: #3b2a04; font-size: 15px; font-weight: 800; cursor: pointer; }
  #embark-hotel-widget #eh-detail .khu-pc-book { display: none; }          /* the bar carries the primary CTA on small screens */
  #embark-hotel-widget #eh-detail .khu-pc-price { margin-bottom: 4px; }
}
@media (max-width: 699px) {
  #embark-hotel-widget #eh-detail .khu-dh { grid-template-columns: minmax(0, 1fr); grid-template-areas: "g" "i" "p"; gap: 14px; }
  #embark-hotel-widget #eh-detail .khu-hg-main { aspect-ratio: 16 / 10; border-radius: 14px; }
  #embark-hotel-widget #eh-detail .khu-hg-thumbs { height: 58px; gap: 6px; overflow: hidden; }
  #embark-hotel-widget #eh-detail .khu-hg-thumb { border-radius: 8px; }
  #embark-hotel-widget #eh-detail .khu-sidebar-rows, #embark-hotel-widget #eh-detail .khu-summary-title:not(.never), #embark-hotel-widget #eh-detail .khu-sidebar-hint { display: none; }
  #embark-hotel-widget #eh-detail .khu-selected-room { margin-top: 12px; }
  #embark-hotel-widget #eh-detail .khu-sidebar-card { padding: 14px 16px; }
  #embark-hotel-widget #eh-detail .khu-pc-price strong { font-size: 26px; }
  #embark-hotel-widget #eh-detail .khu-tabbar { margin-left: -14px; margin-right: -14px; border-radius: 0; border-left: 0; border-right: 0; padding: 6px 10px; }
  #embark-hotel-widget #eh-detail .khu-tabbtn { flex-direction: column; gap: 3px; min-height: 52px; padding: 0 14px; font-size: 12px; border-radius: 12px; }
  #embark-hotel-widget #eh-detail .khu-tabbtn .khu-ico { width: 20px; height: 20px; }
  #embark-hotel-widget #eh-detail #khu-tabpanel-overview { grid-template-columns: minmax(0, 1fr); }
  #embark-hotel-widget #eh-detail .khu-amenities-panel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* room cards become compact horizontal cards */
  #embark-hotel-widget #eh-detail #khu-tabpanel-rooms > div:not(.khu-sec-head) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #embark-hotel-widget #eh-detail .eh-room-card { display: grid; grid-template-columns: 38% minmax(0, 1fr); grid-template-areas: "t n" "t p"; align-items: stretch; }
  #embark-hotel-widget #eh-detail .eh-room-card > .khu-room-thumb { grid-area: t; aspect-ratio: auto; height: 100%; min-height: 150px; }
  #embark-hotel-widget #eh-detail .eh-room-card > .eh-room-info { grid-area: n; padding: 12px 12px 0; }
  #embark-hotel-widget #eh-detail .eh-room-card > .eh-room-pricing { grid-area: p; padding: 8px 12px 12px; }
  #embark-hotel-widget #eh-detail .eh-room-card:not(:has(.khu-room-thumb)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "p"; }
  #embark-hotel-widget #eh-detail .eh-room-price { font-size: 19px; }
  #embark-hotel-widget #eh-detail .khu-room-badges .khu-room-badge:nth-child(n+3) { display: none; }
  #embark-hotel-widget #eh-detail .khu-room-count-row { display: none; }
}
@media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) {
  #embark-hotel-widget #eh-detail .khu-mbar { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  #embark-hotel-widget #eh-detail .khu-mbar-btn { min-height: 40px; }
}
@media (min-width: 700px) and (max-width: 899px) {
  #embark-hotel-widget #eh-detail .khu-dh { grid-template-columns: minmax(0, 1fr) 280px; }
}

/* v2.1 refinements */
#embark-hotel-widget #eh-detail .khu-dh { align-items: stretch; }
#embark-hotel-widget #eh-detail .khu-dh-gallery { align-self: stretch; }
#embark-hotel-widget #eh-detail .khu-dh-info { align-self: start; }
#embark-hotel-widget #eh-detail .khu-hg-main { aspect-ratio: auto; min-height: 330px; height: 100%; }
#embark-hotel-widget #eh-detail .khu-hg-thumbs { min-height: 0; }
#embark-hotel-widget #eh-detail .khu-amenities-panel-list { display: grid !important; flex-wrap: nowrap !important; }
@media (max-width: 1199px) {
  #embark-hotel-widget #eh-detail .khu-hg-main { height: auto; min-height: 0; aspect-ratio: 16 / 8; }
}
@media (max-width: 699px) {
  #embark-hotel-widget #eh-detail .khu-hg-main { aspect-ratio: 16 / 10; }
  #embark-hotel-widget #eh-detail .eh-room-card > .khu-room-thumb { align-self: start; height: auto; min-height: 0; aspect-ratio: 3 / 4; margin: 10px 0 0 10px; border-radius: 10px; width: auto; }
  #embark-hotel-widget #eh-detail .eh-room-card { padding-bottom: 0; }
}

@media (max-width: 699px) {
  #embark-hotel-widget #eh-detail .eh-room-card > .eh-room-pricing { text-align: left !important; align-items: flex-start; }
  #embark-hotel-widget #eh-detail .eh-room-card > .eh-room-pricing .eh-book-room-btn { align-self: stretch; }
}


/* ══════════════════════════════════════════════════════════════════════
   v2.2 — HOTEL SEARCH LISTING: mobile card typography, filter drawer,
   pagination. Presentation only — no data, API or logic changes.
   ══════════════════════════════════════════════════════════════════════ */
html.khu-noscroll, body.khu-noscroll { overflow: hidden !important; }

/* Filter panel structure (desktop: plain sidebar, footer button hidden) */
#embark-hotel-widget .khu-filters-foot { display: none; }
#embark-hotel-widget .khu-filters-body { display: block; }
#embark-hotel-widget .khu-close-btn { width: 40px; height: 40px; font-size: 16px; flex: none; }

/* ── Pagination (all devices) ─────────────────────────────────────── */
#embark-hotel-widget .khu-pagination {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  margin: 22px 0 8px; padding: 16px 18px; box-sizing: border-box; max-width: 100%;
}
#embark-hotel-widget .khu-page-info { font-size: 13px; color: var(--khu-ink-soft); font-weight: 600; text-align: center; }
#embark-hotel-widget .khu-page-info strong { color: var(--khu-ink); font-weight: 800; }
#embark-hotel-widget .khu-page-controls { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: nowrap; max-width: 100%; }
#embark-hotel-widget .khu-page-numbers { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: nowrap; }
#embark-hotel-widget .khu-page-status { display: none; font-size: 13px; color: var(--khu-ink-soft); font-weight: 600; white-space: nowrap; text-align: center; }
#embark-hotel-widget .khu-page-status strong { color: var(--khu-ink); font-weight: 800; }
#embark-hotel-widget .khu-page-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; min-width: 44px; padding: 0 16px; box-sizing: border-box;
  border: 1.5px solid var(--khu-line); background: #fff; color: var(--khu-ink);
  font-size: 13.5px; font-weight: 700; border-radius: 12px; cursor: pointer; line-height: 1;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#embark-hotel-widget .khu-page-btn .khu-pg-arrow { font-size: 20px; line-height: 1; margin-top: -2px; }
#embark-hotel-widget .khu-page-btn:hover:not(:disabled) { border-color: var(--khu-primary); color: var(--khu-primary); background: var(--khu-primary-light); }
#embark-hotel-widget .khu-page-btn:disabled { opacity: .45; cursor: not-allowed; background: var(--khu-bg); }
#embark-hotel-widget .khu-page-num {
  width: 44px; height: 44px; min-width: 44px; padding: 0; box-sizing: border-box; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid transparent; background: transparent; color: var(--khu-ink-soft);
  font-size: 14px; font-weight: 700; border-radius: 12px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#embark-hotel-widget .khu-page-num:hover { background: var(--khu-bg); color: var(--khu-ink); }
#embark-hotel-widget .khu-page-num.active {
  background: linear-gradient(135deg, var(--khu-primary), var(--khu-primary-dark)); color: #fff; border-color: transparent;
  box-shadow: 0 6px 14px rgba(22, 82, 214, .28); cursor: default;
}
#embark-hotel-widget .khu-page-ellipsis { width: 20px; text-align: center; color: var(--khu-ink-soft); font-size: 14px; flex: none; }

/* Tablet & wide: info left, controls right on one line */
@media (min-width: 761px) {
  #embark-hotel-widget .khu-pagination { flex-direction: row; justify-content: space-between; }
  #embark-hotel-widget .khu-page-info { text-align: left; }
}
/* Mid widths: smaller number buttons so Prev + numbers + Next never wrap */
@media (max-width: 1100px) and (min-width: 761px) {
  #embark-hotel-widget .khu-page-num { width: 40px; height: 40px; min-width: 40px; }
  #embark-hotel-widget .khu-page-btn { padding: 0 12px; }
}
/* Phones (incl. landscape ≤ 760 and 360px): Prev | Page X of N | Next */
@media (max-width: 760px) {
  #embark-hotel-widget .khu-pagination { padding: 14px 12px; gap: 12px; width: 100%; }
  #embark-hotel-widget .khu-page-controls { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; }
  #embark-hotel-widget .khu-page-numbers { display: none; }
  #embark-hotel-widget .khu-page-status { display: block; padding: 0 4px; }
  #embark-hotel-widget .khu-page-prev { justify-self: stretch; }
  #embark-hotel-widget .khu-page-next { justify-self: stretch; }
  #embark-hotel-widget .khu-page-btn { min-height: 48px; padding: 0 10px; width: 100%; }
}
@media (max-width: 359px) {
  #embark-hotel-widget .khu-page-btn .khu-pg-txt { font-size: 12.5px; }
  #embark-hotel-widget .khu-page-controls { gap: 6px; }
}

/* ── Mobile / tablet filter drawer (≤ 992px) ──────────────────────── */
@media (max-width: 992px) {
  #embark-hotel-widget .khu-backdrop { z-index: 2147483000; background: rgba(15,23,42,.5); -webkit-tap-highlight-color: transparent; }
  #embark-hotel-widget .khu-filters-panel {
    z-index: 2147483001; position: fixed; top: 0; bottom: 0; right: -110%; left: auto;
    height: 100vh; height: 100dvh; max-height: none; width: min(380px, 92vw);
    padding: 0; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
    visibility: hidden; transition: right .25s ease, visibility 0s linear .25s;
  }
  #embark-hotel-widget .khu-filters-panel.khu-open { right: 0; visibility: visible; transition: right .25s ease, visibility 0s; }
  #embark-hotel-widget .khu-filters-head {
    flex: none; margin: 0; padding: 10px 12px 10px 18px; gap: 8px;
    background: #fff; border-bottom: 1px solid var(--khu-line);
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }
  #embark-hotel-widget .khu-filters-head h4 { font-size: 17px; }
  #embark-hotel-widget .khu-clear-btn { font-size: 13.5px; min-height: 40px; padding: 0 8px; }
  #embark-hotel-widget .khu-close-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--khu-bg); }
  #embark-hotel-widget .khu-filters-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 4px 18px 20px;
  }
  #embark-hotel-widget .khu-filters-foot {
    display: block; flex: none; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--khu-line); box-shadow: 0 -6px 16px rgba(15,23,42,.06);
  }
  #embark-hotel-widget .khu-apply-btn {
    width: 100%; min-height: 48px; border: none; border-radius: 12px; cursor: pointer;
    background: linear-gradient(135deg, var(--khu-primary), var(--khu-primary-dark)); color: #fff;
    font-size: 14.5px; font-weight: 800; box-shadow: 0 8px 18px rgba(30,80,200,.25);
  }
  #embark-hotel-widget .khu-apply-btn:disabled { opacity: .55; box-shadow: none; }
  #embark-hotel-widget .khu-fopts label, #embark-hotel-widget .khu-fopts .khu-fopt { min-height: 40px; }
  #embark-hotel-widget .khu-filter-toggle-btn { min-height: 44px; }
}

/* ── Mobile hotel card typography & spacing (≤ 700px) ─────────────── */
@media (max-width: 700px) {
  #embark-hotel-widget .khu-hotel-list { gap: 16px; }
  #embark-hotel-widget .eh-hotel-card { padding: 12px; gap: 14px; border-radius: 16px; }
  #embark-hotel-widget .eh-hotel-img-wrap { aspect-ratio: 16 / 10; border-radius: 12px; }
  #embark-hotel-widget .eh-hotel-info { gap: 8px; padding: 0 2px; }
  #embark-hotel-widget .eh-hotel-stars { font-size: 13px; line-height: 1; }
  #embark-hotel-widget .eh-hotel-name {
    font-size: 19px; line-height: 1.28; font-weight: 800; letter-spacing: -.012em; margin-top: 2px;
    overflow-wrap: anywhere; text-wrap: balance;
  }
  #embark-hotel-widget .eh-hotel-addr { font-size: 13px; line-height: 1.45; gap: 4px 8px; color: var(--khu-ink-soft); margin-top: 0; }
  #embark-hotel-widget .khu-map-link { font-size: 13px; }
  #embark-hotel-widget .eh-hotel-desc {
    font-size: 14px; line-height: 1.55; color: #4b5873; -webkit-line-clamp: 2; margin-top: 2px;
  }
  #embark-hotel-widget .khu-amenity-badges { gap: 6px; margin-top: 2px; }
  #embark-hotel-widget .khu-amenity-badge { font-size: 11.5px; padding: 5px 10px; }
  #embark-hotel-widget .khu-room-types-note { font-size: 12.5px; }
  #embark-hotel-widget .eh-hotel-footer { padding-top: 14px; gap: 12px; }
  #embark-hotel-widget .eh-hotel-price-from { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; }
  #embark-hotel-widget .eh-from-label { font-size: 11px; }
  #embark-hotel-widget .eh-from-price { font-size: 24px; letter-spacing: -.01em; }
  #embark-hotel-widget .eh-from-night { font-size: 12.5px; }
  #embark-hotel-widget .eh-view-btn { min-height: 48px; font-size: 14px; border-radius: 12px; }
  #embark-hotel-widget .khu-results-count { font-size: 13.5px; margin: 4px 2px 12px; }
}
@media (max-width: 380px) {
  #embark-hotel-widget .eh-hotel-name { font-size: 17.5px; }
  #embark-hotel-widget .eh-from-price { font-size: 22px; }
}

/* iPad portrait / small tablets (701–992px): stacked card, but a sensible
   image height and readable type. */
@media (min-width: 701px) and (max-width: 992px) {
  #embark-hotel-widget .eh-hotel-card { padding: 16px; gap: 16px; }
  #embark-hotel-widget .eh-hotel-img-wrap { aspect-ratio: 2.1 / 1; }
  #embark-hotel-widget .eh-hotel-name { font-size: 21px; letter-spacing: -.012em; }
  #embark-hotel-widget .eh-hotel-addr { font-size: 13.5px; }
  #embark-hotel-widget .eh-hotel-desc { font-size: 14px; line-height: 1.55; -webkit-line-clamp: 2; }
  #embark-hotel-widget .khu-amenity-badge { font-size: 11.5px; padding: 5px 10px; }
  #embark-hotel-widget .eh-hotel-footer { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  #embark-hotel-widget .eh-hotel-price-from { margin: 0; }
  #embark-hotel-widget .eh-from-price { font-size: 24px; }
  #embark-hotel-widget .eh-view-btn { width: auto; min-width: 200px; min-height: 48px; font-size: 14px; border-radius: 12px; }
}