/* Enix 3.0 Booking Module — Stage 3
   --------------------------------------------------------------
   Source of truth: Enix3Proto (1).html (booking section, lines
   165–283 for CSS and 1011–1101 for markup).
   Depends on: enix-tokens.css, enix-layout.css (loaded before).
   Only var(--*) tokens are used here; literal pixel sizes are
   only kept when no token exact-matches the value in the
   prototype (e.g. 13.5px, 12.5px, 10.5px, 9.5px, 8px).

   Class prefix: .enix-*  (all selectors namespaced so we don't
   collide with Cartzilla, Bootstrap, Telerik, Syncfusion, or the
   legacy .product-card / .imagen-hotel rules in estilos.css).
   -------------------------------------------------------------- */


/* ══════════════════════════════════════════════════════════════
   1. PRODUCT TABS — horizontal scrollable tab strip
   ══════════════════════════════════════════════════════════════ */
.enix-product-tabs {
  background: var(--indigo-lt);
  font-family: var(--font-nav);
  border-bottom: 1px solid var(--blue-md);
  padding: 0 12px;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: calc(var(--nav-modulebar-top) + var(--nav-modulebar-height));
  z-index: 188;
}
.enix-product-tabs--sub {
  top: calc(var(--nav-modulebar-top) + var(--nav-modulebar-height) + var(--nav-product-tabs-height));
  z-index: 187;
}
.enix-product-tabs::-webkit-scrollbar { display: none; }
.enix-product-tabs::before,
.enix-product-tabs::after { content: ""; margin: auto; }

.enix-product-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 18px;
  min-width: 84px;
  border: none;
  background: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .18s, border-color .18s;
  position: relative;
  font-family: inherit;
  color: inherit;
  text-decoration: none;
}
.enix-product-tab:hover { background: var(--gray50); }
.enix-product-tab.active { border-bottom-color: var(--blue); }
.enix-product-tab__icon  { font-size: 22px; line-height: 1; }
.enix-product-tab__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: #2c5078;
  line-height: 1;
}
.enix-product-tab.active .enix-product-tab__label { color: #2c5078; font-weight: var(--fw-bold); }
/* El span que envuelve el SVG no debe ser dimensionado por font-size/line-height
   (antes contenía emojis 19px); pasa a flex container del propio icono. */
.enix-product-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  font-size: 0;
}
.enix-product-tab__icon .nav-icon { color: #2c5078; display: block; }
.enix-product-tab__icon i { font-size: 22px; line-height: 1; color: #2c5078; }  /* FontAwesome icons */

/* ── Sub-tabs: texto con subrayado activo, fondo gris muy suave ── */
.enix-product-tabs--sub { padding: 0 24px; gap: 0; background: var(--gray50); border-bottom: none; }
.enix-product-tabs--sub .enix-product-tab {
  flex-direction: row;
  gap: 6px;
  padding: 9px 16px 8px;
  min-width: unset;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--blue);
}
.enix-product-tabs--sub .enix-product-tab:hover { background: transparent; color: var(--navy); }
.enix-product-tabs--sub .enix-product-tab.active {
  background: transparent;
  border-bottom-color: var(--blue);
  color: var(--blue);
  margin-bottom: 0;
}
.enix-product-tabs--sub .enix-product-tab__icon { font-size: inherit; }
.enix-product-tabs--sub .enix-product-tab__label { font-size: var(--text-sm); color: inherit; }

/* Mobile: tira de productos como strip horizontal touch */
@media (max-width: 768px) {
  .enix-product-tabs { padding: 0 8px; }
  .enix-product-tabs--sub { padding: 4px 8px; }
  .enix-product-tab { padding: 10px 14px; min-width: 76px; }
}

/* ══════════════════════════════════════════════════════════════
   Reposicionamiento del flujo Disney (body.dhr-has-results).
   Los navbars superiores salen del sticky; la barra azul de
   resumen — .dhr-summary (results) o .dhr-summary-bar (prebooking)
   — queda anclada en top:0. Vive global para que siga aplicando
   cuando el componente de results se desmonta al ir a Prebooking.
   ══════════════════════════════════════════════════════════════ */
body.dhr-has-results .enix-header-stack,
body.dhr-has-results .enix-navbar,
body.dhr-has-results .enix-product-tabs,
body.dhr-has-results .enix-product-tabs.enix-product-tabs--sub {
  position: relative !important;
  top: auto !important;
}

/* ══════════════════════════════════════════════════════════════
   BACK-TO-TOP CHEVRON
   Aparece suavemente cuando #app tiene scroll > 300px.
   Vive fuera de #app (overflow:auto) para quedar fixed al viewport.
   ══════════════════════════════════════════════════════════════ */
#enix-back-to-top {
  position: fixed;
  bottom: 24px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #2c5078;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease, background .18s ease;
  transform: translateY(10px);
}
#enix-back-to-top.enix-back-to-top--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#enix-back-to-top:hover {
  background: #4a7aaa;
}
@media (max-width: 768px) {
  #enix-back-to-top { bottom: 20px; right: 14px; width: 40px; height: 40px; font-size: 15px; }
  /* Sólo en los detalles b2c hay que despejar .b2c-mobilebar (fixed, bottom:0). */
  body.page-b2c-detail #enix-back-to-top { bottom: 72px; }
}
body.dhr-has-results .dhr-summary,
body.dhr-has-results .dhr-summary-bar {
  position: sticky;
  top: 0;
  z-index: 40;
}
/* Wrapper flex del prebooking: min-height 100vh + spacer flex empuja el
   footer al fondo cuando el contenido es chico; en 0 cuando es alto. */
body.dhr-has-results .pbd-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.pbd-spacer-flex { flex: 1 1 auto; min-height: 0; }
body.dhr-has-results .prebooking-footer { padding-bottom: 24px; }

/* ══════════════════════════════════════════════════════════════
   Modo compacto Disney para pantallas de poco alto (notebooks,
   1080p escaladas ≈ 780px útiles). Reduce paddings/márgenes
   verticales para que Habitación + Comidas/Tickets entren "de un
   vistazo" sin scroll. En pantallas altas (desktop) no aplica, así
   que el diseño holgado queda intacto. Sólo densidad vertical. */
@media (max-height: 900px) {
  body.dhr-has-results #dhrSummary.dhr-summary-bar { padding-top: 7px !important; padding-bottom: 7px !important; }
  body.dhr-has-results .pbd-step1-grid { margin-top: 8px; gap: 12px; }
  body.dhr-has-results .pbd-section-card { margin-bottom: 10px; }
  body.dhr-has-results .pbd-section-head { padding-top: 9px; padding-bottom: 9px; }
  body.dhr-has-results .pbd-section-body { padding: 10px; gap: 7px; }
  body.dhr-has-results .pbd-row { padding-top: 3px; padding-bottom: 3px; }
  body.dhr-has-results .prebooking .enix-ticket-option { padding-top: 8px; padding-bottom: 8px; margin-bottom: 6px; }
  body.dhr-has-results .prebooking .enix-ticket-step { margin-bottom: 10px; }
  body.dhr-has-results .pbd-dates-block { margin-top: 8px; }
  body.dhr-has-results .pbd-step1-col { gap: 10px; }
  body.dhr-has-results .pbd-info-card { padding: 10px 14px; }
  body.dhr-has-results .pbd-info-card__title { font-size: 14px; }
  body.dhr-has-results .pbd-info-card__list li,
  body.dhr-has-results .pbd-info-card__text { font-size: 11.5px; line-height: 1.5; }
  body.dhr-has-results .prebooking .card .card-body { padding-top: 14px; padding-bottom: 14px; }
  body.dhr-has-results .col-lg-3 > .card:first-child { margin-top: 8px !important; }
  body.dhr-has-results .pbd-detail-card__info { max-height: 100px; }
  body.dhr-has-results section.prebooking-footer { padding-top: 8px; }
  body.dhr-has-results .prebooking-footer { padding-bottom: 10px; }
  body.dhr-has-results .prebooking-footer .col-lg-9 { margin-bottom: 0 !important; }
  /* El alto de esas filas lo fija el icono, no el padding. */
  body.dhr-has-results .pbd-row__icon { width: 40px; }
  body.dhr-has-results .pbd-row__icon--img { width: 40px; height: 40px; }
  body.dhr-has-results .pbd-row--tight .pbd-row__icon { width: 46px; }
  body.dhr-has-results .pbd-row--tight .pbd-row__icon--img { width: 46px; height: 46px; }
}
/* Tier extra-compacto para alturas muy chicas (~700px o menos). */
@media (max-height: 740px) {
  body.dhr-has-results .pbd-step1-grid { margin-top: 6px; gap: 8px; }
  body.dhr-has-results .pbd-section-card { margin-bottom: 8px; }
  body.dhr-has-results .pbd-section-head { padding-top: 7px; padding-bottom: 7px; }
  body.dhr-has-results .pbd-section-body { padding: 8px; gap: 6px; }
  body.dhr-has-results .pbd-step1-col { gap: 8px; }
  body.dhr-has-results .pbd-info-card { padding: 8px 12px; }
  body.dhr-has-results .pbd-info-card__title { font-size: 13px; margin-bottom: 4px; }
  body.dhr-has-results .pbd-info-card__meta { margin-bottom: 4px; }
  body.dhr-has-results .pbd-info-card__list li,
  body.dhr-has-results .pbd-info-card__text { font-size: 11px; line-height: 1.45; }
  body.dhr-has-results .pbd-row { padding-top: 3px; padding-bottom: 3px; }
  body.dhr-has-results .prebooking .card .card-body { padding-top: 10px; padding-bottom: 10px; }
  body.dhr-has-results .pbd-row__icon { width: 34px; }
  body.dhr-has-results .pbd-row__icon--img { width: 34px; height: 34px; }
  body.dhr-has-results .pbd-row--tight .pbd-row__icon { width: 40px; }
  body.dhr-has-results .pbd-row--tight .pbd-row__icon--img { width: 40px; height: 40px; }
}
/* Abajo de ~680px ese escalon de mas en ingresos ya no entra sin scroll. */
@media (max-height: 680px) {
  body.dhr-has-results .pbd-row--tight .pbd-row__icon { width: 36px; }
  body.dhr-has-results .pbd-row--tight .pbd-row__icon--img { width: 36px; height: 36px; }
}
/* En detalle de hotel (b2c-subnav) con dhr activo el navbar no es sticky,
   así que el subnav debe pegarse desde top:0 para evitar el hueco transparente. */
body.dhr-has-results .b2c-subnav { top: 0 !important; }
@media (max-width: 768px) {
  body.dhr-has-results .dhr-summary-bar,
  body.dhr-has-results .dhr-summary { position: static; }
}

.enix-product-tab__badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #dc2626;
  color: var(--white);
  font-size: 8px;
  font-weight: var(--fw-black);
  padding: 1px 4px;
  border-radius: 4px;
  letter-spacing: .02em;
}


/* ══════════════════════════════════════════════════════════════
   2. HERO — navy gradient banner
   ══════════════════════════════════════════════════════════════ */
.enix-hero {
  background: linear-gradient(178deg, #0d2240 0%, #122c50 55%, #143258 100%);
  padding: 0 0 12px;
  position: relative;
}

/* Centered content wrapper inside the full-bleed hero */
.enix-hero-inner {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding: 28px 24px 0;
}

/* Valle transition — gray concave curve at hero bottom edge, sits under the card */
.enix-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 60px;
  background: #f1f5f9;
  z-index: 1;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0,70 L0,12 Q720,58 1440,12 L1440,70 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0,70 L0,12 Q720,58 1440,12 L1440,70 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.enix-hero__title {
  font-size: var(--text-3xl);
  font-weight: var(--fw-black);
  color: var(--white);
  margin-bottom: 5px;
}
.enix-hero__sub {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, .6);
  margin-bottom: 22px;
}


/* ══════════════════════════════════════════════════════════════
   3. SEARCH CARD — overlaps the hero bottom
   ══════════════════════════════════════════════════════════════ */
.enix-search-card {
  background: var(--surface-card);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 4px 14px rgba(13, 34, 64, .15);
  position: relative;
  z-index: 2;
}

.enix-search-row {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}
.enix-search-row--2    { grid-template-columns: 1fr 1fr; }
.enix-search-row--3    { grid-template-columns: 1fr 1fr 1fr; }
.enix-search-row--4    { grid-template-columns: 1fr 1fr 1fr 1fr; }
.enix-search-row--5    { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.enix-search-row--main { grid-template-columns: 2fr 1.4fr 100px 100px auto; align-items: end; }

.enix-search-divider {
  height: 1px;
  background: var(--gray100);
  margin: 2px 0 12px;
}

.enix-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative; /* needed for BlazorDateRangePicker hidden popup anchor */
  min-width: 0;
}
/* BlazorDateRangePicker renders the hidden calendar popup as a sibling flex child.
   Pull it out of flex flow so it doesn't displace other children. */
.enix-field > div[style*="visibility"] {
  position: absolute !important;
  height: 0 !important;
  overflow: visible !important;
  pointer-events: none;
  top: 100%;
  left: 0;
  z-index: 9999;
}
/* Re-enable pointer events only on the visible calendar inside */
.enix-field > div[style*="visibility"] > .daterangepicker {
  pointer-events: auto;
}
.enix-field__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--gray500);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.enix-field-wrap { position: relative; }
.enix-field-wrap .enix-field__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  pointer-events: none;
  color: var(--gray500);
}

.enix-input {
  width: 100%;
  height: var(--input-height);
  border: 1.5px solid var(--input-border);
  border-radius: 10px;
  padding: 0 12px;
  font-size: var(--text-md);
  color: var(--gray800);
  background: var(--surface-card);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .18s, box-shadow .18s;
  font-family: inherit;
}
.enix-input:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-focus-ring);
}
.enix-input::placeholder { color: var(--gray400); }
.enix-input--icon { padding-left: 32px; }

.enix-btn-search {
  height: var(--input-height);
  width: auto;
  padding: 0 26px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
  border-radius: 10px;
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .18s, transform .1s;
  white-space: nowrap;
  font-family: inherit;
}
.enix-btn-search:hover {
  background: var(--btn-primary-hover);
  transform: translateY(-1px);
}
.enix-btn-search:disabled,
.enix-btn-search[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(20%);
  transform: none;
  pointer-events: none;
}
.enix-search-row > .enix-btn-search { justify-self: end; }
@media (max-width: 768px) {
  .enix-btn-search { width: 100%; }
  .enix-search-row > .enix-btn-search { justify-self: stretch; }
}


/* ══════════════════════════════════════════════════════════════
   4. PROMO STRIP
   ══════════════════════════════════════════════════════════════ */
.enix-promo-strip {
  background: var(--surface-card);
  padding: 18px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border-top: 1px solid var(--gray100);
}
.enix-promo-card {
  border-radius: var(--r);
  overflow: hidden;
  height: 140px;
  cursor: pointer;
  position: relative;
  transition: transform .2s, box-shadow .2s;
}
.enix-promo-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
}
.enix-promo-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, .72) 100%);
}
.enix-promo-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 14px;
}
.enix-promo-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  font-size: 9px;
  font-weight: var(--fw-black);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.enix-promo-card__title {
  color: var(--white);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
}
.enix-promo-card__sub {
  color: rgba(255, 255, 255, .7);
  font-size: 11px;
  margin-top: 2px;
}


/* ══════════════════════════════════════════════════════════════
   5. RESULTS — section header, layout, sort
   ══════════════════════════════════════════════════════════════ */
.enix-section {
  background: #f1f5f9;
  padding: 2px 0 40px;
  min-height: 60vh;
}
.enix-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 22px 0 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.enix-section-title {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--navy);
}
.enix-section-sub {
  font-size: var(--text-sm);
  color: var(--gray500);
  margin-top: 2px;
}
.enix-sort-select {
  border: 1.5px solid var(--gray200);
  border-radius: var(--r-sm);
  padding: 6px 11px;
  font-size: 12.5px;
  color: var(--gray700);
  background: var(--surface-card);
  cursor: pointer;
  appearance: none;
  font-family: inherit;
}

.enix-results-layout {
  display: grid;
  grid-template-columns: 255px 1fr;
  gap: 18px;
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
  /* Own stacking context: traps the legacy Bootstrap z-indexes that
     live inside the filter sidebar (offcanvas z-1045, dropdown z-1000)
     below the sticky navbar/module-bar (z-200/190), so the filter can
     no longer overlap the top chrome when scrolling. */
  isolation: isolate;
}


/* ══════════════════════════════════════════════════════════════
   6. FILTER SIDEBAR
   ══════════════════════════════════════════════════════════════ */
.enix-filter-sidebar {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  padding: 10px 12px;
  font-size: var(--text-sm);
  font-family: var(--pb-font-body);
  color: var(--gray700);
}
.enix-filter-sidebar--sticky {
  position: sticky;
  top: calc(var(--nav-modulebar-top) + var(--nav-modulebar-height) + var(--nav-product-tabs-height) + 8px);
  max-height: calc(100vh - var(--nav-modulebar-top) - var(--nav-modulebar-height) - var(--nav-product-tabs-height) - 8px);
  overflow-y: auto;
  align-self: flex-start;
}
.enix-results-layout .enix-filter-sidebar {
  margin-top: 43px;
}
.enix-results-layout .enix-filter-sidebar--sticky {
  margin-top: 0;
}
.enix-filter-sidebar__title {
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--navy);
  margin-bottom: 12px;
}
.enix-filter-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray100);
}
.enix-filter-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.enix-filter-section__title {
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--gray400);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 9px;
}
.enix-filter-check {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  cursor: pointer;
}
.enix-filter-check input { accent-color: var(--blue); }
.enix-filter-check span {
  font-size: 12.5px;
  color: var(--gray700);
}
.enix-filter-check .enix-filter-check__count {
  margin-left: auto;
  font-size: 11px;
  color: var(--gray400);
  background: var(--gray100);
  padding: 1px 5px;
  border-radius: var(--r-full);
}

.enix-price-range input[type=range] {
  accent-color: var(--blue);
  width: 100%;
}
.enix-price-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--gray600);
  font-weight: var(--fw-semibold);
  margin-top: 5px;
}

.enix-star-filter {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.enix-star-pill {
  padding: 3px 9px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--gray200);
  font-size: 11.5px;
  cursor: pointer;
  font-weight: var(--fw-semibold);
  color: var(--gray600);
  transition: all .18s;
  background: var(--surface-card);
  font-family: inherit;
}
.enix-star-pill:hover,
.enix-star-pill.active {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}


/* ══════════════════════════════════════════════════════════════
   6b. HOTEL FILTER SIDEBAR — LEGACY OVERRIDES
   --------------------------------------------------------------
   SearchFilter_Hotel.razor still uses Cartzilla widgets and
   Bootstrap offcanvas chrome. These rules suppress the legacy
   chrome so the sidebar inherits the clean enix-filter-sidebar
   look. Once the Razor markup is refactored to .enix-* classes
   directly, this block can be deleted.
   ══════════════════════════════════════════════════════════════ */
.enix-filter-sidebar .offcanvas-collapse,
.enix-filter-sidebar .offcanvas {
  background: transparent !important;
  padding: 0;
  border: none;
  box-shadow: none;
  position: static !important;
  height: auto !important;
  visibility: visible !important;
  transform: none !important;
}
.enix-filter-sidebar .offcanvas-cap { display: none; }
.enix-filter-sidebar .offcanvas-body { padding: 0 !important; overflow: visible !important; }
/* .filtro-ventana (estilos.css) is a white inner card with an offset
   box-shadow + 4px padding + 6px radius — that's the "ugly inner box"
   whose asymmetric shadow made the input look clipped/off-center.
   Neutralise it so the only visible surface is the outer sidebar. */
.enix-filter-sidebar .filtro-ventana {
  margin-top: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.enix-filter-sidebar .widget {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray100);
}
.enix-filter-sidebar .widget:last-child,
.enix-filter-sidebar .widget.border-bottom:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.enix-filter-sidebar .widget-title,
.enix-filter-sidebar .widget > h3 {
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--gray400);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin: 0 0 9px;
  padding: 0;
}
.enix-filter-sidebar .widget-list,
.enix-filter-sidebar .widget-filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.enix-filter-sidebar .widget-list-item { padding: 0; }
.enix-filter-sidebar .widget-list-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--gray700);
  padding: 4px 0;
  cursor: pointer;
}
.enix-filter-sidebar .widget-list-link:hover { color: var(--navy); }
.enix-filter-sidebar .widget-filter-item-text { color: var(--gray700) !important; }

/* Star/category selector — legible pills (number + gold star) instead
   of the tiny illegible star SVGs. The row is .d-flex justify-between,
   so flex:1 makes the 5 pills share the width evenly. */
.enix-filter-sidebar .selector-categoria {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1.5px solid var(--gray200);
  border-radius: var(--r-sm);
  padding: 7px 4px;
  font-size: 12.5px;
  font-weight: var(--fw-bold);
  color: var(--gray600);
  background: var(--surface-card);
  transition: all .18s;
}
.enix-filter-sidebar .selector-categoria i { color: var(--gold); font-size: 11px; }
.enix-filter-sidebar .selector-categoria:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.enix-filter-sidebar .selector-categoria-active,
.enix-filter-sidebar .selector-categoria-active:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}
.enix-filter-sidebar .selector-categoria-active i { color: var(--white); }
.enix-filter-sidebar .selector-categoria[disabled] { opacity: .4; cursor: default; }

/* Flatten any residual nested box chrome so the only visible surface is
   the outer .enix-filter-sidebar card. */
.enix-filter-sidebar .rounded-3 { border-radius: 0 !important; }
/* SearchFilter_Admissions renders its own <aside class="enix-filter-sidebar">.
   When it is placed inside an explicit sidebar wrapper, suppress the inner one's
   card chrome so we don't get a matryoshka double-border. */
.enix-filter-sidebar .enix-filter-sidebar {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
  position: static !important;
}
.enix-filter-sidebar .offcanvas-cap { padding: 0 !important; border: none !important; }
.enix-filter-sidebar .card,
.enix-filter-sidebar .widget {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
}
.enix-filter-sidebar .card-body {
  padding: 0 !important;
}

.enix-filter-sidebar .selector-vista .btn {
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  border-color: var(--gray200) !important;
  color: var(--gray600);
}
.enix-filter-sidebar .selector-vista .btn.active {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue) !important;
}
/* Inactive toggle hover — blue, NOT the default gray. */
.enix-filter-sidebar .selector-vista .btn:not(.active):hover {
  color: var(--blue);
  border-color: var(--blue) !important;
  background: var(--blue-lt);
}

/* ── Right-side clipping fix ─────────────────────────────────────
   The legacy offcanvas/row/col widgets overflowed the sidebar on the
   right (col-6 toggle buttons have flex-shrink:0, offcanvas had a fixed
   width, Bootstrap rows add negative side margins). Constrain them. */
.enix-filter-sidebar .offcanvas,
.enix-filter-sidebar .offcanvas-collapse {
  width: auto !important;
  max-width: 100% !important;
}
.enix-filter-sidebar .row { margin-left: 0 !important; margin-right: 0 !important; }
.enix-filter-sidebar .selector-vista .btn { flex: 1 1 0; min-width: 0; }
.enix-filter-sidebar .range-slider .w-50 { flex: 1 1 0; width: auto !important; }
.enix-filter-sidebar .range-slider .me-2 { margin-right: 8px !important; }
/* Ensure search input isn't clipped on the left */
.enix-filter-sidebar .widget-filter-search { padding-left: 10px; width: 100%; }

/* EnixDualRangeSlider */
.enix-dual-range {
    position: relative;
    height: 36px;
    width: 100%;
    padding: 0 9px;
    box-sizing: border-box;
    overflow: visible;
    margin-bottom: 4px;
}
.enix-dual-range__track {
    position: absolute;
    left: 9px;
    right: 9px;
    top: 50%;
    height: 4px;
    background: #dee2e6;
    border-radius: 2px;
    transform: translateY(-50%);
    pointer-events: none;
}
.enix-dual-range__fill {
    position: absolute;
    left: var(--min-pct);
    right: calc(100% - var(--max-pct));
    height: 100%;
    background: var(--enix-primary, #1B5FAA);
    border-radius: 2px;
}
.enix-dual-range__tip {
    position: absolute;
    background: var(--enix-primary, #1B5FAA);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}
.enix-dual-range__tip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-bottom-color: var(--enix-primary, #1B5FAA);
}
.enix-dual-range input[type=range] {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
}
.enix-dual-range input[type=range]::-webkit-slider-runnable-track { background: transparent; height: 4px; }
.enix-dual-range input[type=range]::-moz-range-track { background: transparent; height: 4px; }
.enix-dual-range input[type=range]::-webkit-slider-thumb {
    pointer-events: all;
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--enix-primary, #1B5FAA);
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
.enix-dual-range input[type=range]::-moz-range-thumb {
    pointer-events: all;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--enix-primary, #1B5FAA);
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

/* Refundables toggle card — clean Enix surface */
.refundable-card-off,
.refundable-card-on {
  background: var(--surface-card) !important;
  border: 1px solid var(--surface-border) !important;
  border-radius: var(--r-sm) !important;
  padding: 7px 10px !important;
}
.refundable-card-on {
  border-color: var(--green) !important;
  background: var(--green-lt) !important;
}


/* ══════════════════════════════════════════════════════════════
   6c. FILTER SIDEBAR — ENIX COMPONENT CLASSES
   Applied once .enix-filter-group markup is added to all
   SearchFilter_*.razor components (Hotel, Houses, Cars,
   Admissions, Insurance).
   ══════════════════════════════════════════════════════════════ */

/* Search input */
.enix-filter-sidebar input[type="text"],
.enix-filter-sidebar .form-control {
  border: 1px solid var(--input-border);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-family: inherit;
  padding: 5px 10px;
  width: 100%;
  color: var(--gray700);
  background: var(--gray50);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.enix-filter-sidebar input[type="text"]:focus,
.enix-filter-sidebar .form-control:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px rgba(30,95,168,0.1);
  background: var(--surface-card);
  outline: none;
}
/* Reset native input inside enix-combo — the .enix-cbo-ctl wrapper handles borders */
.enix-filter-sidebar .enix-combo input[type="text"] {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  width: auto !important;
}

/* Flat combo — sin borde en reposo, borde solo en focus */
.enix-combo--flat .enix-cbo-ctl {
  border: 1px solid transparent !important;
  border-radius: var(--r-sm) !important;
  background: var(--gray100) !important;
  box-shadow: none !important;
  height: 34px !important;
  padding: 0 10px !important;
  transition: border-color 0.15s, background 0.15s !important;
}
.enix-combo--flat .enix-cbo-ctl--input:focus-within,
.enix-combo.enix-combo--flat:not(.is-open) .enix-cbo-ctl--input:focus-within,
.enix-combo--flat .enix-cbo-ctl:focus-within {
  border-color: var(--input-border-focus) !important;
  background: #fff !important;
  box-shadow: none !important;
  outline: none !important;
}
.enix-combo--flat.is-open .enix-cbo-ctl {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-color: var(--input-border-focus) !important;
  background: #fff !important;
}

/* Filter group */
.enix-filter-sidebar .enix-filter-group {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray100);
}
.enix-filter-sidebar .enix-filter-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.enix-filter-sidebar .enix-filter-group__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.enix-filter-sidebar .enix-filter-group__title {
  font-family: var(--pb-font-head);
  font-size: 9.5px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gray500);
}
.enix-filter-sidebar .enix-filter-clear {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--gray200);
  border-radius: var(--r-sm);
  background: var(--surface-card);
  color: var(--blue);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.enix-filter-sidebar .enix-filter-clear:hover {
  background: var(--blue-lt);
  border-color: var(--blue);
}

/* Hide/Show toggle */
.enix-filter-toggle {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  color: var(--blue);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.enix-filter-toggle:hover { text-decoration: underline; }

/* Checkbox — custom modern style (excludes role="switch") */
.enix-filter-sidebar input[type="checkbox"]:not([role="switch"]) {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--gray400);
  border-radius: 4px;
  background: var(--surface-card);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.enix-filter-sidebar input[type="checkbox"]:not([role="switch"]):hover {
  border-color: var(--blue);
}
.enix-filter-sidebar input[type="checkbox"]:not([role="switch"]):checked {
  background: var(--blue);
  border-color: var(--blue);
}
.enix-filter-sidebar input[type="checkbox"]:not([role="switch"]):checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: 1.5px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.enix-filter-sidebar input[type="checkbox"]:not([role="switch"]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30,95,168,0.15);
}
.enix-filter-sidebar label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 3px 0;
  color: var(--gray700);
  font-size: var(--text-sm);
}
.enix-filter-sidebar label:hover { color: var(--blue); }

/* Count badge */
.enix-filter-count,
.enix-filter-sidebar .filter-count {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--gray400);
  font-weight: var(--fw-semibold);
  min-width: 24px;
  text-align: right;
}

/* Star rating pills (Hotel / Houses category filter) */
.enix-filter-sidebar .star-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  border: 1px solid var(--gray200);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--gray500);
  cursor: pointer;
  transition: all 0.15s;
  background: var(--surface-card);
  font-family: inherit;
}
.enix-filter-sidebar .star-filter-btn:hover,
.enix-filter-sidebar .star-filter-btn.active {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-lt);
}

/* Price range slider + inputs */
.enix-filter-sidebar input[type="range"] {
  accent-color: var(--blue);
  width: 100%;
  height: 3px;
  cursor: pointer;
}
.enix-filter-sidebar .price-range-inputs {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.enix-filter-sidebar .price-range-inputs .w-50 {
  width: auto !important;
  flex: 1;
  padding: 0 !important;
  margin: 0 !important;
}
.enix-filter-sidebar .price-range-inputs .input-group {
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--input-border);
  background: var(--gray50);
}
.enix-filter-sidebar .price-range-inputs .input-group-text {
  background: var(--gray100);
  border: none;
  font-size: var(--text-xs);
  font-family: inherit;
  color: var(--gray500);
  padding: 4px 8px;
}
.enix-filter-sidebar .price-range-inputs input[type="number"],
.enix-filter-sidebar .price-range-inputs input[type="text"][readonly] {
  border: none;
  font-size: var(--text-xs);
  font-family: inherit;
  padding: 4px 6px;
  background: var(--gray50);
  width: 80px;
}

/* View toggle (Normal / Map) */
.enix-view-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 7px;
}
.enix-view-toggle-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--gray200);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--surface-card);
  color: var(--gray700);
  text-decoration: none;
}
.enix-view-toggle-btn.active,
.enix-view-toggle-btn:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* Non-refundable / Ocultar toggle row */
.enix-filter-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: #92400e;
  gap: 10px;
}

/* Toggle switch — overrides Bootstrap form-switch inside the filter sidebar */
.enix-filter-sidebar .form-switch .form-check-input {
  width: 2.4em;
  height: 1.25em;
  border: none;
  cursor: pointer;
  background-color: var(--gray400);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  transition: background-color 0.25s ease, background-position 0.25s ease;
}
.enix-filter-sidebar .form-switch .form-check-input:checked {
  background-color: var(--blue);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  border-color: var(--blue);
}
.enix-filter-sidebar .form-switch .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(30,95,168,0.15);
  outline: none;
}

/* Standalone section label (Vista / Buscar / Precio) */
.enix-filter-section-label {
  font-family: var(--pb-font-head);
  font-size: 8.5px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gray400);
  margin-bottom: 4px;
  display: block;
}

/* Checkbox / radio option row — tighter spacing */
.enix-filter-sidebar .enix-filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
  gap: 6px;
}
.enix-filter-sidebar .enix-filter-option label {
  flex: 1;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--gray700);
  text-transform: capitalize;
  letter-spacing: 0;
}
/* Parent group labels (bold) keep capitalize; sub-items at 95% indent keep smaller */
.enix-filter-sidebar .enix-filter-option[style*="padding-left"] label {
  font-size: 11.5px;
  font-weight: var(--fw-normal);
  color: var(--gray600);
}
.enix-filter-sidebar .enix-filter-option label strong {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--gray800);
  text-transform: capitalize;
}


/* ══════════════════════════════════════════════════════════════
   7. HOTEL / RESULT CARD
   ══════════════════════════════════════════════════════════════ */
.enix-hotels-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.enix-result-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  display: grid;
  grid-template-columns: 210px 1fr auto;
  transition: box-shadow .2s, transform .15s;
}
.enix-result-card:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-2px);
}

/* Image area */
.enix-result-card__img {
  position: relative;
  overflow: hidden;
  border-radius: var(--r) 0 0 var(--r);
  /* Stretch to fill the full card height — background cover handles
     distortion. min-height keeps very short cards from collapsing. */
  align-self: stretch;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--gray100);
}
.enix-result-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--navy);
  color: var(--white);
  font-size: 9px;
  font-weight: var(--fw-bold);
  padding: 2px 6px;
  border-radius: 5px;
}
.enix-result-card__fav {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, .85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  border: none;
}

/* Body */
.enix-result-card__body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.enix-result-card__provider {
  font-size: 9.5px;
  font-weight: var(--fw-bold);
  color: var(--gray400);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.enix-result-card__name {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--navy);
  margin-bottom: 0;
}
/* Name + action buttons on the same top row */
.enix-result-card__name-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  margin-bottom: 5px;
}
/* Left column: name stacked above stars */
.enix-result-card__name-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}
.enix-result-card__actions { display: flex; gap: 4px; flex-shrink: 0; }
.enix-result-card__stars {
  color: var(--gold);
  font-size: 12px;
  margin-bottom: 6px;
}
.enix-result-card__location {
  font-size: 12px;
  color: var(--gray500);
  margin-bottom: 8px;
}
/* Metadata chip row — city/country, address, phone, check-in, check-out, min-age */
.enix-result-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.enix-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  color: #374151;
  white-space: nowrap;
}
.enix-result-card__tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.enix-tag {
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: var(--gray100);
  color: var(--gray600);
}
.enix-tag--green { background: var(--green-lt); color: var(--green); }
.enix-tag--blue  { background: var(--blue-md);  color: var(--blue); }

.enix-result-card__amenities {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.enix-amenity {
  font-size: 11.5px;
  color: var(--gray500);
}

/* "Show More / Show Less" inline link — sits inside the webkit-box container */
/* "Show More / Show Less" — sibling below the clamped div, always visible */
.enix-showmore {
  display: inline-block;
  margin-top: 2px;
  margin-left: 2px;
  font-size: 0.78rem;
  color: var(--blue, #2563eb);
  cursor: pointer;
  user-select: none;
  font-weight: 500;
}
.enix-showmore:hover { text-decoration: underline; }

/* Hotel special-note description — max-height truncation (no webkit-line-clamp) */
.hotelDescriptionHtml.collapsed {
  max-height: 3.2em;
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1;
  color: #555;
  position: relative;
}
.hotelDescriptionHtml.expanded {
  max-height: none;
  overflow: visible;
  font-size: 0.82rem;
  line-height: 1;
  color: #555;
}

/* Expandable description / map panels — direct children of enix-hotel-entry
   (no Bootstrap .row wrapper; removes gap between card and room rows) */
.enix-hotel-collapse { }
.enix-hotel-collapse__inner {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 16px;
  border-top: 1px solid var(--gray100);
  font-size: var(--text-sm);
  color: var(--gray600);
}
.enix-hotel-collapse__inner p { flex: 1; margin: 0; }
/* Close button always at the far right of the collapse panel */
.enix-hotel-collapse__inner .btn-close { margin-left: auto; flex-shrink: 0; }

/* Map panel variant — compact, visually attached to the card above */
.enix-hotel-collapse--map {
  margin-top: -1px;          /* close the 1px gap between card border and panel */
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  border: 1px solid var(--gray100);
  border-top: none;
}
.enix-hotel-collapse--map .enix-hotel-collapse__inner {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-top: none;
}
.enix-hotel-collapse--map .enix-map-close-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 4px 10px 2px;
  background: var(--gray50);
  border-bottom: 1px solid var(--gray100);
}
.enix-hotel-collapse--map iframe {
  display: block;
  width: 100%;
  border: none;
}

/* ── Inline alert banners (search result notices, disclaimers) ────
   Replaces ad-hoc enix-presup-warning usage in search result pages.
   Variants: --info (blue) · --warning (amber) · --danger (red)       */
.enix-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  border: 1px solid;
  font-size: var(--text-sm);
  font-family: var(--pb-font-body);
  line-height: 1.5;
  margin-bottom: 14px;
}
.enix-alert i, .enix-alert svg { flex-shrink: 0; font-size: 15px; margin-top: 1px; }
.enix-alert__text { flex: 1; color: inherit; }

/* Info — blue */
.enix-alert--info {
  background: #eff6ff;
  border-color: #93c5fd;
  color: var(--navy);
}
.enix-alert--info i { color: var(--blue); }

/* Warning — amber (driver's license notice, eligibility disclaimers) */
.enix-alert--warning {
  background: var(--amber-lt, #fffbeb);
  border-color: var(--gold, #f59e0b);
  color: #78350f;
}
.enix-alert--warning i { color: var(--gold, #f59e0b); }

/* Danger — red */
.enix-alert--danger {
  background: var(--red-lt, #fef2f2);
  border-color: var(--red, #ef4444);
  color: var(--red, #ef4444);
}
.enix-alert--danger i { color: var(--red, #ef4444); }

/* ── API HTML normalizer ──────────────────────────────────────────
   Applied to any HTML block returned by the backend (descriptions,
   ver-detalle content). Resets font to the web stack while
   preserving semantic styles (bold, italic, color, indentation). */
.enix-api-html {
  font-family: var(--pb-font-body, 'Mulish', 'Poppins', sans-serif) !important;
  font-size: var(--text-sm, 13px) !important;
  line-height: 1.55;
  color: var(--gray700);
}
/* sin !important: el style inline de la base gana, el <font size> no */
.enix-api-html * {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.enix-api-html font[size] { font-size: inherit !important; }
/* Preserve bold / italic / underline / color intentional overrides */
.enix-api-html b, .enix-api-html strong { font-weight: var(--fw-bold) !important; }
.enix-api-html i, .enix-api-html em    { font-style: italic !important; }
.enix-api-html u                        { text-decoration: underline !important; }
/* Preserve indentation (ul/ol/blockquote) */
.enix-api-html ul, .enix-api-html ol   { padding-left: 1.4em; margin: 4px 0; }
.enix-api-html li                       { margin-bottom: 2px; }
.enix-api-html p                        { margin: 0 0 8px; }
.enix-api-html p:last-child             { margin-bottom: 0; }
/* renglón en blanco del editor: un <p></p> vacío no ocupa alto por sí solo */
.enix-api-html p:empty                  { min-height: 1.55em; }
/* color de la base gana sobre el azul de link del theme */
.enix-api-html font[color] a,
.enix-api-html [style*="color"] a       { color: inherit; }
/* acotados pero con jerarquía */
.enix-api-html h1 { font-size: var(--text-md); font-weight: var(--fw-bold); margin: 6px 0 2px; }
.enix-api-html h2 { font-size: var(--text-sm); font-weight: var(--fw-bold); margin: 6px 0 2px; }
.enix-api-html h3,
.enix-api-html h4 { font-size: var(--text-sm); font-weight: var(--fw-semibold, 600); margin: 6px 0 2px; }

/* Price panel */
.enix-result-card__price {
  padding: 14px 16px 14px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  min-width: 160px;
  border-left: 1px solid var(--gray100);
}
.enix-price__label {
  font-size: 9.5px;
  font-weight: var(--fw-bold);
  color: var(--gray400);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.enix-price__from {
  text-decoration: line-through;
  font-size: var(--text-sm);
  color: var(--gray400);
}
.enix-price__row {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.enix-price__amount {
  font-size: 24px;
  font-weight: var(--fw-black);
  color: var(--navy);
}
.enix-price__discount {
  font-size: 10px;
  background: var(--green-lt);
  color: var(--green);
  padding: 2px 5px;
  border-radius: var(--r-full);
  font-weight: var(--fw-bold);
}
/* Coral/red variant — used for markdown discounts on hotel cards */
.enix-price__discount--red { background: var(--red-lt); color: var(--red); }
.enix-price__per {
  font-size: 10.5px;
  color: var(--gray400);
  margin-top: 1px;
}
.enix-price__actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.enix-btn-book {
  width: 100%;
  padding: 8px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background .18s;
  font-family: inherit;
}
.enix-btn-book:hover { background: var(--btn-primary-hover); }

/* Cart button — sits next to the book button on search result cards */
.enix-btn-cart {
  padding: 8px 10px;
  background: transparent;
  color: var(--gray600);
  border: 1px solid var(--gray300);
  border-radius: var(--radius-sm, 4px);
  font-size: 16px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  font-family: inherit;
}
.enix-btn-cart:hover { background: var(--gray100); color: var(--navy); border-color: var(--navy); }
.enix-room-row .col-4 .enix-btn-cart { width: auto; padding: 7px 10px; }

/* ON REQUEST — same size as enix-btn-book inside room-row, orange accent */
.enix-btn-onrequest {
  padding: 8px;
  background: #f97316;
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background .18s;
  font-family: inherit;
  white-space: nowrap;
}
.enix-btn-onrequest:hover { filter: brightness(.92); }

/* Vista toggle — compact, matches enix design (replaces Bootstrap btn col-6) */
.enix-vista-toggle {
  display: flex;
  gap: 4px;
  padding: 8px 0 6px;
}
.enix-vista-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1.5px solid var(--gray200);
  border-radius: var(--r-sm);
  background: var(--gray50);
  color: var(--gray600);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  font-family: inherit;
  text-decoration: none;
}
.enix-vista-btn:hover { background: var(--gray100); color: var(--gray800); }
.enix-vista-btn.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* View more / View less text toggle via Bootstrap aria-expanded (updated by collapse JS) */
.enix-rooms-toggle__less-text { display: none; }
.enix-rooms-toggle__link[aria-expanded="true"] .enix-rooms-toggle__more-text { display: none; }
.enix-rooms-toggle__link[aria-expanded="true"] .enix-rooms-toggle__less-text { display: inline; }

/* DateRangePicker height normalization — force the rendered <input> to match --input-height.
   Targets by ID (selectorFechasAdmisiones) + generic fallback for any date picker input
   inside .enix-search-card, overriding whatever the component wrapper adds. */
#selectorFechasAdmisiones,
.enix-search-card [id*="Admisiones"],
.enix-search-card [id*="Fechas"] {
  height: var(--input-height) !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Broader fallback: any input inside .enix-search-card that has enix-input */
.enix-search-card input.enix-input {
  height: var(--input-height);
  box-sizing: border-box;
}

/* Landing spacer — gray area below hero when no results are shown */
.enix-landing-spacer {
  background: #f1f5f9;
  min-height: 50vh;
}

.enix-btn-quote {
  width: 100%;
  padding: 7px;
  background: none;
  color: var(--blue);
  border: 1.5px solid var(--blue);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background .18s;
  font-family: inherit;
}
.enix-btn-quote:hover { background: var(--blue-lt); }


/* ══════════════════════════════════════════════════════════════
   7d. HOTEL ENTRY — contained card (header + collapsibles + rooms)
   --------------------------------------------------------------
   The proto only models the header card (.enix-result-card). In the
   real app each hotel also renders description/map collapsibles and a
   rooms list below. This wraps the WHOLE hotel into one bordered,
   rounded surface so it reads as a single contained unit, and styles
   the rooms collapsible (designed here from the same tokens).
   ══════════════════════════════════════════════════════════════ */
.enix-hotel-entry {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  margin-bottom: 16px;
  transition: box-shadow .2s, transform .15s;
}
/* Dentro de hotel-entry el card ocupa solo la parte superior,
   así que solo redondeamos la esquina superior-izquierda de la imagen. */
.enix-hotel-entry .enix-result-card__img {
  border-radius: var(--r) 0 0 0;
}
.enix-hotel-entry:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-2px);
}
/* The header card is now seamless — the entry owns border/radius/
   shadow/hover. The card background must be transparent so the entry's
   own rounded background shows through at the corners (overflow:hidden
   was removed to prevent tooltip clipping). */
.enix-hotel-entry .enix-result-card,
.enix-hotel-entry .enix-result-card:hover {
  border: none;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  background: transparent;
}
/* Admissions: the card IS the full entry (no rooms/description below),
   so the image covers both left corners of the entry. */
.enix-admissions-section .enix-hotel-entry .enix-result-card__img {
  border-radius: var(--r) 0 0 var(--r);
}

.enix-price__pixbox {
  margin-top: 2px;
  line-height: 1.25;
}
.enix-price__pix {
  font-size: 11px;
  color: var(--gray400);
  letter-spacing: .02em;
}
.enix-price__taxes {
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--accent);
  letter-spacing: .02em;
  margin-top: 3px;
}
.enix-price-skel__label {
  display: inline-block;
  width: 110px;
  height: 10px;
}
.enix-price-skel__amount {
  display: inline-block;
  width: 128px;
  height: 30px;
}
.enix-price-skel__line {
  display: block;
  width: 150px;
  height: 9px;
  margin-top: 4px;
  margin-left: auto;
}
.enix-price-skel__line--short {
  width: 110px;
}
.enix-price__stack .enix-price__row {
  display: block;
}
.enix-price__stack .enix-price__row > div {
  display: inline-block;
}
.enix-price__stack .enix-price__row .enix-price__discount {
  margin-left: 5px;
}
.enix-result-card__price .enix-price__stack {
  text-align: right;
  padding-left: 14px;
}
.enix-room-row .enix-room-row__price:has(> .enix-price__stack) {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.enix-room-row__price > .enix-price__stack {
  flex: 1 1 100%;
  text-align: right;
}
.enix-room-row .col-4 > .enix-price__stack {
  flex: 1 1 100%;
}
.enix-multiroom .enix-price__stack {
  text-align: right;
}
.enix-multiroom .enix-multiroom__foot .enix-price__stack {
  text-align: left;
}

/* El precio está al tope del price-column (justify-content:flex-start).
   Forzar tooltip hacia abajo para evitar clipping en cualquier ancestro. */
.enix-result-card__price .tooltip-wrapper spand {
  bottom: auto;
  top: calc(100% + 5px);
}
.enix-result-card__price .tooltip-wrapper spand::after {
  top: auto;
  bottom: 100%;
  border-color: transparent transparent #555 transparent;
}

/* Harmonise the legacy .product-price (Bootstrap .h2) with the proto
   price look, inside both the header price panel and the room rows. */
.enix-result-card__price .product-price,
.enix-room-row .product-price {
  font-size: 22px;
  font-weight: var(--fw-black);
  color: var(--navy);
  line-height: 1.1;
}
.enix-result-card__price .product-price small,
.enix-room-row .product-price small {
  font-size: 11px;
  font-weight: var(--fw-bold);
  vertical-align: super;   /* decimals sit ABOVE, not below */
  margin-left: 1px;
}

/* Group the header price block at the top (was space-between, which
   stretched a big empty gap down the price column). */
.enix-hotel-entry .enix-result-card__price {
  justify-content: flex-start;
  gap: 2px;
}
/* Body aligns to the top now that the image stretches to full height. */
.enix-hotel-entry .enix-result-card__body { justify-content: flex-start; }

/* Card action buttons (Descripción / Detalle / Mapa) — icon-only ghost
   buttons, deliberately DIFFERENT from the solid blue RESERVAR so the
   booking CTA stands out. */
.enix-card-action {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--gray200);
  border-radius: var(--r-sm);
  background: var(--surface-card);
  color: var(--blue);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.enix-card-action:hover {
  background: var(--blue-lt);
  border-color: var(--blue);
  color: var(--blue);   /* keep blue on hover (no gray) */
}
.enix-card-action i { color: inherit; }

/* Variante con texto al lado del icono (p.ej. "Descripción"): el boton deja de
   ser cuadrado y crece con la etiqueta. */
.enix-card-action--labeled {
  width: auto;
  gap: 6px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.enix-card-action__label { line-height: 1; font-weight: 700; }

/* Algunas pantallas usan este contenedor en vez de .enix-result-card__actions. */
.enix-card-actions { display: flex; gap: 4px; flex-shrink: 0; align-items: center; }

/* ── Rooms list — compact single-line rows ──────────────────── */
/* Bottom section of the hotel entry — contains primary room + view-more rooms.
   Provides the single divider line separating the card top from the room section. */
.enix-card-bottom {
  border-top: 2px solid var(--surface-border);
}

/* ══════════════════════════════════════════════════════════════
   PROMO TABS — pill tabs for multi-promo products (Disney, Universal)
   Replaces Bootstrap nav-tabs inside enix-card-bottom
   ══════════════════════════════════════════════════════════════ */
.enix-promo-tabs {
  display: flex;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}
.enix-promo-tabs::-webkit-scrollbar { display: none; }

.enix-promo-tab {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  padding: 10px 15px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: color .15s, border-color .15s;
  flex-shrink: 0;
  font-family: var(--font);
}
.enix-promo-tab:hover {
  color: #1e5fa8;
}
.enix-promo-tab.active {
  background: transparent;
  color: #1e5fa8;
  font-weight: 800;
  border-bottom-color: #1e5fa8;
}
.enix-promo-tab-content {
  padding: 0;
}
.enix-room-row {
  padding: 7px 16px;
  border-top: 1px solid var(--gray100);
  transition: background .15s;
}
.enix-room-row:hover { background: var(--gray50); }
/* Lead rate — subtly highlighted; border-top removed (enix-card-bottom provides divider). */
.enix-room-row--primary {
  background: var(--blue-lt);
  border-top: none;
}
/* Keep the room name + chip + detail link on ONE vertically-centered
   line (no stacked <p>/<br> and no empty gaps). */
.enix-room-row .row { align-items: center; }
.enix-room-name {
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--gray800);
}
.enix-room-row a.icon,
.enix-room-row a.icon i {
  color: var(--blue) !important;
}
.enix-room-row a.icon {
  margin-left: 10px;
  white-space: nowrap;
  font-weight: var(--fw-semibold);
}

/* "Ver Detalle" pill chip — replaces the old .icon anchor */
/* "Ver Detalle" — plain small link, no chip background */
.enix-ver-detalle-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 400;
  color: #6b7280;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  margin-left: 8px;
}
.enix-ver-detalle-link:hover {
  color: var(--blue, #2563eb);
  text-decoration: underline;
}
.enix-ver-detalle-link svg {
  opacity: 0.6;
  flex-shrink: 0;
}

/* Refundable / non-refundable status chips */
.enix-room-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .03em;
  vertical-align: middle;
}
.enix-room-chip--ref    { background: var(--green-lt); color: var(--green); }
.enix-room-chip--nonref { background: var(--red-lt);   color: var(--red); }

/* Buy area (the room row's right .col-4): price + book button inline,
   right-aligned and vertically centered. */
.enix-room-row .col-4 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.enix-room-row .col-4 .product-price { margin: 0; }
.enix-room-row .col-4 .enix-btn-book,
.enix-room-row .col-4 .enix-btn-onrequest {
  width: auto;
  min-width: 104px;
  padding: 7px 16px;
  font-size: 11.5px;
}

/* "Ver Detalle" content — fill the full column width. The legacy markup
   wraps it in a 2-column flex whose first column (daily rates) is
   display:none, leaving the description stranded in a narrow ~40% box;
   collapse that flex to a single full-width block + clean panel. */
.enix-room-row .collapse .d-flex.justify-content-between { display: block !important; }
.enix-room-row .room-description {
  margin: 0 !important;
  width: 100%;
  box-sizing: border-box;
  background: var(--gray50);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  transition: none;   /* prevent width reflow snap during collapse animation */
}
.enix-room-row .room-description p { color: var(--gray600); margin-bottom: 0; }

/* "View more rooms" toggle bar — compact */
.enix-rooms-toggle {
  display: flex;
  justify-content: center;
  padding: 8px 0;
  background: transparent;
  border-top: 1px solid #e5e7eb;
  cursor: pointer;
}
.enix-rooms-toggle__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #374151;
  font-size: 0.78rem;
  font-weight: 500;
}
.enix-rooms-toggle__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
}
.enix-arrow-icon {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotate(180deg);
}
/* Arrow points down when collapsed (both Bootstrap and JS toggle .collapsed) */
.collapsed .enix-arrow-icon {
  transform: rotate(0deg);
}

/* Inline-centered Enix spinner for the room "Ver Detalle" loading state
   (replaces the off-style <Circle> spinner). */
.enix-loader-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  width: 100%;
}


/* ══════════════════════════════════════════════════════════════
   7c. RESULT CARD LEGACY VARIANT — para result lists no-hotel
   --------------------------------------------------------------
   Variante de .enix-result-card que NO usa grid de 3 columnas
   (mantiene el .row/.col-md-N interno de Bootstrap). Aplica solo
   el chrome de tarjeta (background, border, radius, sombra) sin
   forzar reestructura. Usado por Cars, Transfers, Tours,
   Excursions, Insurance, Houses, etc. donde la lógica interna de
   variantes/SubItems no se reorganiza en esta fase.
   ══════════════════════════════════════════════════════════════ */
.enix-result-card--legacy {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 14px;
  transition: box-shadow .2s, transform .15s;
}
.enix-result-card--legacy:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-2px);
}

/* Title del producto (reemplaza .product-title) */
.enix-result-card--legacy .product-title,
.enix-result-card--legacy h3.product-title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--navy);
  margin: 0;
}

/* Imagen lateral (.imagen-hotel) — mantenida pero con border-radius enix */
.enix-result-card--legacy .imagen-hotel {
  min-height: 180px;
  background-size: cover !important;
  background-position: center !important;
}


/* ══════════════════════════════════════════════════════════════
   7b. LANDING BANNER (tenant promo image debajo del hero)
   ══════════════════════════════════════════════════════════════ */
.enix-landing-banner {
  background: #f1f5f9;
  padding: 24px 0 32px;
  overflow: hidden;
}
/* Slider container: constrained to same effective width as enix-search-card
   (hero-inner is max-width:1680px with 24px side padding → max 1632px image) */
.enix-landing-banner .banner-carousel {
  position: relative;
  width: calc(100% - 48px);
  max-width: 1632px;
  margin: 0 auto;
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
/* Horizontal track: slides sit side by side; JS slides it with translateX. */
.enix-landing-banner .banner-track {
  display: flex;
  will-change: transform;
}
.enix-landing-banner .banner-slide {
  flex: 0 0 100%;
  min-width: 0;
}
.enix-landing-banner .banner-slide img {
  display: block;
  width: 100%;
  height: auto;
}
/* Prev/next arrows, revealed on hover */
.enix-landing-banner .banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--navy, #124c81);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--sh-sm);
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.enix-landing-banner .banner-carousel:hover .banner-arrow {
  opacity: 1;
}
.enix-landing-banner .banner-arrow:hover {
  background: #fff;
}
.enix-landing-banner .banner-arrow--prev { left: 12px; }
.enix-landing-banner .banner-arrow--next { right: 12px; }
/* Dot indicators (single row of dots, not thumbnails) */
.enix-landing-banner .banner-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.enix-landing-banner .banner-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}
.enix-landing-banner .banner-dot.is-active {
  width: 22px;
  border-radius: 4px;
  background: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .enix-landing-banner .banner-track {
    transition: none !important;
  }
}
/* Standalone img (not inside .banner-slider, e.g. landing/@ImageName) */
.enix-landing-banner > img {
  display: block;
  width: calc(100% - 48px);
  max-width: 1632px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
}


/* ══════════════════════════════════════════════════════════════
   8. EMPTY STATE (no-results)
   ══════════════════════════════════════════════════════════════ */
.enix-empty {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--r);
  padding: 40px 24px;
  text-align: center;
  margin: 24px 0;
}
.enix-empty__icon {
  font-size: 32px;
  color: var(--amber);
  margin-bottom: 8px;
}
.enix-empty__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--navy);
  margin-bottom: 6px;
}
.enix-empty__body {
  font-size: var(--text-sm);
  color: var(--gray500);
  max-width: 520px;
  margin: 0 auto;
}


/* ══════════════════════════════════════════════════════════════
   9. MOBILE BREAKPOINT (≤ 768 px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .enix-search-row,
  .enix-search-row--2,
  .enix-search-row--3,
  .enix-search-row--4,
  .enix-search-row--5,
  .enix-search-row--main { grid-template-columns: minmax(0, 1fr); }

  .enix-results-layout   { grid-template-columns: minmax(0, 1fr); }
  .enix-filter-sidebar   { display: none; }

  :is(.enix-admissions-section, .enix-cars-section, .enix-excursions-section, .enix-insurance-section, .enix-transfers-section, .enix-tours-section, [id="resultsHotel"]) .enix-room-row > .row > .col,
  :is(.enix-admissions-section, .enix-cars-section, .enix-excursions-section, .enix-insurance-section, .enix-transfers-section, .enix-tours-section, [id="resultsHotel"]) .enix-room-row > .row > [class^="col-"],
  :is(.enix-admissions-section, .enix-cars-section, .enix-excursions-section, .enix-insurance-section, .enix-transfers-section, .enix-tours-section, [id="resultsHotel"]) .enix-room-row > .row > [class*=" col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  :is(.enix-admissions-section, .enix-cars-section, .enix-excursions-section, .enix-insurance-section, .enix-transfers-section, .enix-tours-section, [id="resultsHotel"]) .enix-result-card__meta .enix-meta-chip {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  :is(.enix-admissions-section, .enix-cars-section, .enix-excursions-section, .enix-insurance-section, .enix-transfers-section, .enix-tours-section, [id="resultsHotel"]) .enix-room-row {
    flex-wrap: wrap !important;
    row-gap: 8px;
  }
  :is(.enix-admissions-section, .enix-cars-section, .enix-excursions-section, .enix-insurance-section, .enix-transfers-section, .enix-tours-section, [id="resultsHotel"]) .enix-room-row__info {
    flex: 1 1 100% !important;
    min-width: 0;
  }
  :is(.enix-admissions-section, .enix-cars-section, .enix-excursions-section, .enix-insurance-section, .enix-transfers-section, .enix-tours-section, [id="resultsHotel"]) .enix-room-row__price {
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: flex-end;
    row-gap: 8px;
  }
  :is(.enix-admissions-section, .enix-cars-section, .enix-excursions-section, .enix-insurance-section, .enix-transfers-section, .enix-tours-section, [id="resultsHotel"]) .enix-result-card__price {
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right;
    padding: 12px 16px;
  }
  :is(.enix-admissions-section, .enix-cars-section, .enix-excursions-section, .enix-insurance-section, .enix-transfers-section, .enix-tours-section, [id="resultsHotel"]) .enix-result-card__actions {
    padding: 10px 16px 14px;
    margin-right: 0 !important;
    border-top: 1px solid var(--gray100);
  }

  .enix-bl-banner {
    height: auto !important;
    width: 100% !important;
    object-fit: contain !important;
  }

  .enix-results-layout .enix-pagination {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 2px 16px 10px;
    flex-direction: row;
    justify-content: flex-start;
  }

  .enix-result-card      { grid-template-columns: 1fr; }
  .enix-result-card__img { min-height: 160px; border-radius: var(--r) var(--r) 0 0; }
  .enix-result-card__price {
    min-width: unset;
    flex-direction: row;
    flex-wrap: wrap;
    border-left: none;
    border-top: 1px solid var(--gray100);
    padding: 12px 14px;
    align-items: center;
  }
  .enix-price__actions { flex-direction: row; width: auto; }
  .enix-btn-book,
  .enix-btn-quote      { width: auto; padding: 7px 14px; }

  .enix-promo-strip    { grid-template-columns: 1fr; }

  .enix-section        { padding: 0 16px 32px; }

  .enix-adm-meta-row {
    grid-template-columns: 1fr;
    padding: 0 16px;
    gap: 8px;
  }
  .enix-adm-meta-row > div:first-child { display: none; }
  .enix-adm-filter-skel { display: none; }
  .enix-adm-meta-skel {
    padding: 10px 4px;
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch;
  }
  .enix-adm-meta-skel__status { font-size: 13px; }
  .enix-adm-meta-skel__pager { display: none; }

  .enix-result-card { min-width: 0; max-width: 100%; }
  .enix-result-card__body { min-width: 0; }
  .enix-result-card__name-row { flex-wrap: wrap; }
  .enix-result-card__meta,
  .enix-result-card__tags,
  .enix-result-card__amenities { flex-wrap: wrap; min-width: 0; }
  .enix-adm-card-skel { min-width: 0; max-width: 100%; }
}

/* ── HotelDetail: Navigation tabs ─────────────────────────────────────────── */
.navegacion-hotel .nav-tabs {
  border-bottom: 2px solid #e5e7eb;
  gap: 4px;
}
.navegacion-hotel .nav-link {
  font-size: 0.82rem;
  font-weight: 500;
  color: #6b7280;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 6px 14px;
  transition: color 0.2s, border-color 0.2s;
}
.navegacion-hotel .nav-link:hover {
  color: var(--blue, #2563eb);
  border-bottom-color: #93c5fd;
}
.navegacion-hotel .nav-link.active {
  color: var(--blue, #2563eb);
  border-bottom: 2px solid var(--blue, #2563eb);
  background: transparent;
  font-weight: 600;
}

/* ── HotelDetail: NON-REFUNDABLE badge ────────────────────────────────────── */
.enix-badge-nonref {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--red);
  background: #fee2e2;
  border-radius: 999px;
  margin-right: 6px;
  letter-spacing: 0.02em;
}

/* ── HotelDetail: Room card ───────────────────────────────────────────────── */
.enix-room-card {
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ── HotelDetail: Read more / less toggle ─────────────────────────────────── */
.enix-readmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 14px;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--primary, #2563eb);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  user-select: none;
}
.enix-readmore-btn:hover {
  background: #dbeafe;
  box-shadow: 0 2px 6px rgba(37,99,235,0.12);
}
.enix-readmore-btn svg {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

/* ── HotelDetail: Back button ─────────────────────────────────────────────── */
.enix-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #374151;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: background 0.15s, box-shadow 0.15s;
  margin-bottom: 12px;
}
.enix-back-btn:hover {
  background: #f9fafb;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
/* ── HotelDetail: Main carousel ──────────────────────────────────────────── */
.enix-main-carousel {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
/* ── HotelDetail: Description tab info rows ──────────────────────────────── */
.enix-hotel-main-desc {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #374151;
}
.enix-info-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.enix-info-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
}
.enix-info-value {
  font-size: 0.82rem;
  color: #6b7280;
}
.enix-detail-section {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.82rem;
  color: #374151;
  line-height: 1.6;
}
.enix-detail-section__title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
  margin-bottom: 8px;
}

/* ── HotelDetail: Room row inner layout ───────────────────────────────────── */
.enix-room-row-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  width: 100%;
}
.enix-room-row-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.enix-room-row-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.enix-room-row-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.enix-room-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}
.enix-room-price small {
  font-size: 0.65em;
  vertical-align: super;
}

/* ── HotelDetail: Room Details card ──────────────────────────────────────── */
.enix-room-detail-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.enix-room-detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f3f4f6;
}
.enix-room-detail-card .carousel {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.enix-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
  cursor: pointer;
  transition: box-shadow 0.2s, background 0.2s;
}
.enix-carousel-btn:hover {
  background: #f3f4f6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
}
.enix-carousel-btn--prev { left: 10px; }
.enix-carousel-btn--next { right: 10px; }
.enix-room-detail-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #111827;
  margin-top: 10px;
  margin-bottom: 4px;
}
.enix-amenities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #f3f4f6;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
}
.enix-amenity-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  font-size: 0.72rem;
  color: #374151;
}
.enix-amenity-item svg { color: #6b7280; }
.enix-amenity-item i { font-size: 1.3rem; color: #6b7280; }
.enix-amenities-grid--full { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 576px) { .enix-amenities-grid--full { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .enix-amenities-grid--full { grid-template-columns: repeat(4, 1fr); } }
.enix-room-description-detail {
  margin-top: 10px;
  font-size: 0.82rem;
  color: #555;
  line-height: 1.6;
}
.enix-room-description-detail__title {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
  margin-bottom: 4px;
}


/* ══════════════════════════════════════════════════════════════
   PREBOOKING — Hotel Round 1
   ══════════════════════════════════════════════════════════════ */

/* ── Card borders — soften all prebooking cards ─────────────── */
.prebooking .card,
.prebooking-footer .card,
.prebooking-confirmation .card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* ── Header — hotel name + date chips ───────────────────────── */
.enix-prebooking-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f3f4f6;
}
.enix-prebooking-header__label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
  display: block;
  margin-bottom: 2px;
}
.enix-prebooking-header__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}
.enix-prebooking-header__dates {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Passenger selection section title ──────────────────────── */
.prebooking .enix-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f3f4f6;
}
.prebooking .enix-section-title span {
  font-size: 0.95rem;
  font-weight: 600;
  color: #111827;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Alert messages — round corners ─────────────────────────── */
.prebooking .alert {
  border-radius: 8px;
  font-size: 0.82rem;
}

/* ── Pricing total row ───────────────────────────────────────── */
.enix-pricing-total {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 12px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
  margin-top: 8px;
}
.enix-pricing-total label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}
.enix-pricing-total .price {
  font-size: 1.2rem;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}

/* ── Cancellation policy card title ─────────────────────────── */
.enix-policy-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
  margin-bottom: 8px;
}

/* ── Confirm action button ───────────────────────────────────── */
.enix-confirm-btn {
  border-radius: 8px;
  padding: 8px 24px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ── Sidebar filter combo: always open downward ── */
.enix-filter-sidebar .enix-combo.drop-up .enix-cbo-popup {
  top: 100% !important;
  bottom: auto !important;
  border-top: none !important;
  border-bottom: 1.5px solid var(--gray200) !important;
}
.enix-filter-sidebar .enix-combo.is-open.drop-up .enix-cbo-ctl {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* ── Force combo popup to open upward (for combos inside overflow:hidden cards) ── */
.enix-combo--force-up .enix-cbo-popup {
  bottom: 100% !important;
  top: auto !important;
  border-top: 1.5px solid var(--gray200) !important;
  border-bottom: none !important;
  border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0 !important;
}
.enix-combo--force-up.is-open .enix-cbo-ctl {
  border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px) !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   ADMISIONES — Estado de búsqueda (searching/results/empty)
   Reemplaza el LoaderOverlay full-screen por skeletons in-place
   en la columna de resultados + skeleton del sidebar de filtros.
   Scope: clases con prefijo `enix-adm-` o dentro de
   `.enix-admissions-section`. No tocar otras pestañas.
   ══════════════════════════════════════════════════════════════ */

/* Keyframes — animaciones puntuales para esta pantalla. */
@keyframes enixAdmShimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@keyframes enixAdmSpin { to { transform: rotate(360deg); } }
@keyframes enixAdmBarSlide {
  0%   { left: -42%; }
  100% { left: 100%; }
}
@keyframes enixAdmFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes enixAdmFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Barra de progreso indeterminada anclada al borde inferior
   de la search card.

   El wrapper externo es tan alto como el border-radius del
   card (16px) y tiene `overflow:hidden` + el mismo radius en
   las esquinas inferiores. Esto hace que tanto la pista como
   el segmento que se desliza queden recortados a la curva del
   card (no podemos poner overflow:hidden en el card mismo
   porque cortaría los dropdowns de los combos). */
.enix-search-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  overflow: hidden;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  pointer-events: none;
  z-index: 3;
}
/* Pista (fondo del track), pegada al borde inferior. */
.enix-search-progress::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #dbeafe;
}
/* Segmento azul que se desliza dentro del track. */
.enix-search-progress__bar {
  position: absolute;
  bottom: 0;
  height: 3px;
  width: 42%;
  background: #1e5fa8;
  border-radius: 99px;
  animation: enixAdmBarSlide 1.15s ease-in-out infinite;
}

/* Botón "Buscar admisiones" en estado searching:
   look apagado, cursor wait, spinner + texto inline.
   Sólo aplica si el botón tiene la clase compañera
   `.enix-btn-search--searching`. */
.enix-btn-search.enix-btn-search--searching,
.enix-btn-search.enix-btn-search--searching:disabled,
.enix-btn-search.enix-btn-search--searching[disabled] {
  background: #5b7da8;
  color: #fff;
  cursor: wait;
  opacity: 1;
  filter: none;
  transform: none;
  pointer-events: none;
}
.enix-btn-search__spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 8px;
  animation: enixAdmSpin .7s linear infinite;
  flex-shrink: 0;
}

/* Bloque base reutilizable para los placeholders shimmer. */
.enix-adm-skel {
  background: linear-gradient(90deg, #eef2f6 25%, #e4e9f0 37%, #eef2f6 63%);
  background-size: 400% 100%;
  animation: enixAdmShimmer 1.4s ease infinite;
  border-radius: 6px;
}

/* Skeleton del sidebar de filtros (reemplaza in-place el
   SearchFilter_Admissions mientras está cargando). Sin
   margin-top: la fila de meta/paginador vive en un grid
   hermano superior (ver `.enix-adm-meta-row`), así sidebar
   y primera card arrancan al mismo Y sin ajustes manuales. */
.enix-adm-filter-skel {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  padding: 16px;
}

/* Fila externa que aloja al meta-skel: usa el MISMO grid
   que `.enix-results-layout` (255px | 1fr) y replica sus
   max-width/margin/padding para que el spinner "Buscando…"
   + paginator placeholders queden EXACTAMENTE alineados a
   la columna de resultados del grid de abajo (no al sidebar
   ni al borde de la pantalla).
   (Patrón del prototipo: meta vive arriba en su propio grid
   hermano del sidebar+cards). */
.enix-adm-meta-row {
  display: grid;
  grid-template-columns: 255px 1fr;
  gap: 18px;
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}
.enix-adm-filter-skel__title {
  height: 12px;
  width: 62%;
  margin-bottom: 16px;
}
.enix-adm-filter-skel__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.enix-adm-filter-skel__check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}
.enix-adm-filter-skel__label {
  height: 11px;
  width: 78%;
}

/* Skeleton del bloque de meta + paginador (fila superior).
   Su altura busca quedar similar a la del `.enix-pagination`
   real (~43-46px) para que la transición a resultados no
   "salte" verticalmente. */
.enix-adm-meta-skel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
}
.enix-adm-meta-skel__status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--gray600, #475569);
  font-weight: 600;
  /* Deja que el texto absorba la compresion en pantallas angostas
     en lugar de empujarla al spinner. */
  min-width: 0;
}
.enix-adm-meta-skel__spinner {
  width: 15px;
  height: 15px;
  border: 2px solid #cbd5e1;
  border-top-color: #1e5fa8;
  border-radius: 50%;
  display: inline-block;
  animation: enixAdmSpin .7s linear infinite;
  flex-shrink: 0;
}
.enix-adm-meta-skel__pager {
  display: flex;
  gap: 6px;
}
.enix-adm-meta-skel__pager-btn {
  width: 28px;
  height: 22px;
  border-radius: 7px;
}
.enix-adm-meta-skel__pager-btn--wide {
  width: 48px;
}
.enix-adm-meta-skel__pager-info {
  width: 130px;
  height: 14px;
  border-radius: 4px;
  align-self: center;
}

/* Skeleton de la tarjeta de admisión. Replica el grid real
   (230px imagen | 1fr cuerpo | 200px precio) + franja inferior
   de tickets para que el "salto" a resultados reales sea suave. */
.enix-adm-card-skel {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  overflow: hidden;
}
.enix-adm-card-skel__head {
  display: grid;
  grid-template-columns: 230px 1fr 200px;
}
.enix-adm-card-skel__img {
  min-height: 172px;
}
.enix-adm-card-skel__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.enix-adm-card-skel__title {
  width: 78%;
  height: 20px;
  border-radius: 7px;
}
.enix-adm-card-skel__chips {
  display: flex;
  gap: 8px;
}
.enix-adm-card-skel__chip {
  width: 180px;
  height: 24px;
  border-radius: 99px;
}
.enix-adm-card-skel__chip--sm {
  width: 56px;
}
.enix-adm-card-skel__tag {
  width: 130px;
  height: 18px;
  border-radius: 99px;
}
.enix-adm-card-skel__price {
  padding: 18px;
  border-left: 1px solid var(--gray100, #f1f5f9);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}
.enix-adm-card-skel__price-lbl {
  width: 90px;
  height: 12px;
}
.enix-adm-card-skel__price-val {
  width: 110px;
  height: 26px;
  border-radius: 7px;
}
.enix-adm-card-skel__row {
  border-top: 1px solid var(--gray100, #f1f5f9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
}
.enix-adm-card-skel__row-name {
  width: 46%;
  height: 15px;
}
.enix-adm-card-skel__row-side {
  display: flex;
  align-items: center;
  gap: 14px;
}
.enix-adm-card-skel__row-price {
  width: 90px;
  height: 18px;
}
.enix-adm-card-skel__row-btn {
  width: 104px;
  height: 34px;
  border-radius: 8px;
}
@media (max-width: 768px) {
  .enix-adm-card-skel__head {
    grid-template-columns: 1fr;
  }
  .enix-adm-card-skel__img { min-height: 140px; }
  .enix-adm-card-skel__price {
    border-left: none;
    border-top: 1px solid var(--gray100, #f1f5f9);
    align-items: flex-start;
  }
}

/* Lista de skeleton cards (mismo gap que los resultados reales). */
.enix-adm-skel-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Entrada animada de resultados / empty state.
   Importante: NO usamos animation-fill-mode persistente para
   que el estado final quede siempre visible (ver README). */
.enix-adm-fadeup {
  animation: enixAdmFadeUp .45s ease;
}
.enix-adm-fadein {
  animation: enixAdmFadeIn .3s ease;
}

/* Estado "sin resultados" — full-width sin sidebar (no hay
   filtros si no hay resultados). El wrap aplica las MISMAS
   constraints que `.enix-results-layout` (max-width 1680px,
   margin auto, padding 0 24px) para que el card no se estire
   hasta el borde de pantalla. No reutiliza `.enix-empty` para
   no afectar otras pestañas. */
.enix-adm-empty-wrap {
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}
.enix-adm-empty {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  padding: 60px 32px;
  margin: 20px 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: enixAdmFadeUp .4s ease;
}
.enix-adm-empty__icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--gray100, #f1f5f9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  margin-bottom: 18px;
}
.enix-adm-empty__title {
  font-size: 19px;
  font-weight: 800;
  color: var(--navy, #0d2240);
  margin-bottom: 8px;
}
.enix-adm-empty__body {
  font-size: 14px;
  color: var(--gray600, #64748b);
  max-width: 460px;
  margin-bottom: 20px;
  line-height: 1.5;
}
.enix-adm-empty__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
}
.enix-adm-empty__chip {
  font-size: 12px;
  color: var(--gray700, #475569);
  background: var(--gray100, #f1f5f9);
  border-radius: 99px;
  padding: 6px 13px;
}

/* ══════════════════════════════════════════════════════════════
   ADMISIONES — Filtros de tickets Disney / Disneyland
   Dentro de `.enix-card-bottom`: combo de días + switches por tipo.
   ══════════════════════════════════════════════════════════════ */
.enix-adm-tktfilter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 11px 16px;
  background: var(--gray50, #f8fafc);
  border-bottom: 1px solid var(--gray100, #f1f5f9);
}
.enix-adm-tktfilter__field {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.enix-adm-tktfilter__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gray500, #64748b);
  white-space: nowrap;
}
.enix-adm-tktfilter__combo {
  width: 132px;
  flex: 0 0 132px;
}
.enix-adm-tktfilter__combo .enix-cbo-ctl {
  height: 34px;
  border-radius: 9px;
  padding: 0 10px;
  font-size: 12.5px;
}
.enix-adm-tktfilter__combo .enix-cbo-ctl__icon svg { width: 15px; height: 15px; }
/* Separador combo / switches (oculto en mobile). */
.enix-adm-tktfilter__sep {
  width: 1px;
  align-self: stretch;
  min-height: 26px;
  background: var(--gray200, #e2e8f0);
}
.enix-adm-tktfilter__toggles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Switch-chip: el <input> va oculto dentro del <label> → todo el chip es clickeable. */
.enix-adm-tgl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 5px 13px 5px 8px;
  background: #fff;
  border: 1px solid var(--gray200, #e2e8f0);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.enix-adm-tgl:hover {
  border-color: var(--blue, #1e5fa8);
  box-shadow: 0 2px 8px rgba(30, 95, 168, .1);
}
.enix-adm-tgl input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.enix-adm-tgl__track {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 17px;
  border-radius: 999px;
  background: var(--gray300, #cbd5e1);
  transition: background .18s;
}
.enix-adm-tgl__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(13, 34, 64, .28);
  transition: transform .18s;
}
.enix-adm-tgl__text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray600, #475569);
  white-space: nowrap;
}
.enix-adm-tgl.is-on {
  background: var(--blue-lt, #eff6ff);
  border-color: var(--blue, #1e5fa8);
}
.enix-adm-tgl.is-on .enix-adm-tgl__track { background: var(--blue, #1e5fa8); }
.enix-adm-tgl.is-on .enix-adm-tgl__track::after { transform: translateX(13px); }
.enix-adm-tgl.is-on .enix-adm-tgl__text { color: var(--blue, #1e5fa8); }
.enix-adm-tgl input:focus-visible + .enix-adm-tgl__track {
  box-shadow: 0 0 0 3px rgba(30, 95, 168, .28);
}

/* Ningún ticket coincide con los filtros elegidos. */
.enix-adm-tktfilter-empty {
  padding: 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--gray500, #64748b);
}

@media (max-width: 768px) {
  .enix-adm-tktfilter { padding: 10px 12px; }
  .enix-adm-tktfilter__sep { display: none; }
  .enix-adm-tktfilter__field { width: 100%; }
  .enix-adm-tktfilter__combo { flex: 1 1 auto; width: auto; }
}

/* ══════════════════════════════════════════════════════════════
   RESULTADOS DE PARQUES (.dhr-*)
   Layout de dos paneles + barra de resumen + mapa. Compartido por
   los resultados de Disney (Hotel_Disney) y Universal
   (Hotel_Universal): una sola fuente de verdad para que las dos
   pantallas no se separen visualmente.
   ══════════════════════════════════════════════════════════════ */
/* ── Shell ── */
/* Altura por defecto (form colapsado, chrome sticky): viewport menos
   navbar + tira de productos + sub-tabs. */
.dhr-shell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - (var(--nav-navbar-height) + var(--nav-product-tabs-height) + var(--nav-subtabs-height)));
    overflow: hidden;
    background: #f1f5f9;
}
body.dhr-has-results .dhr-shell { height: calc(100vh - var(--nav-summary-height)); }
/* Sin los sub-tabs de parques (ver CommonVariables.HideParkSubTabs). */
.dhr-shell--nosubtabs {
    height: calc(100vh - (var(--nav-navbar-height) + var(--nav-product-tabs-height)));
}
/* ── Barra azul de resumen (sticky top:0) ── */
.dhr-summary {
    position: sticky;
    top: 0;
    z-index: 40;
    background: linear-gradient(135deg, #0d2240, #16335a);
    color: #fff;
    padding: 0 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: var(--nav-summary-height);
    flex-wrap: wrap;
}
.dhr-summary__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.dhr-summary__chip .ico { color: #7eb6f0; }
.dhr-summary__chip .ico-moon { color: #f59e0b; }
.dhr-summary__sep { width: 1px; height: 22px; background: rgba(255,255,255,.22); }
.dhr-summary__modify {
    margin-left: auto;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.32);
    color: #fff;
    border-radius: 8px;
    height: 38px;
    padding: 0 16px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s;
}
.dhr-summary__modify:hover { background: rgba(255,255,255,.24); }
/* ── Body bajo strip ── */
.dhr-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    overflow-y: auto;
    padding: 14px 18px 16px;
    display: flex;
    flex-direction: column;
}
.dhr-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
/* ── Two-panel ── */
.dhr-panels {
    display: grid;
    grid-template-columns: 35% 1fr;
    gap: 14px;
    flex: 1;
    min-height: 420px;
    overflow: hidden;
}
/* ── Panel izquierdo ── */
.dhr-lpanel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
}
.dhr-lpanel__head {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dhr-lscroll {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.dhr-lscroll::-webkit-scrollbar { width: 5px; }
.dhr-lscroll::-webkit-scrollbar-track { background: transparent; }
.dhr-lscroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
/* ── Hotel card ── */
.dhr-hcard {
    display: flex;
    flex-shrink: 0;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    background: #fff;
    min-height: 150px;
    transition: box-shadow .15s;
}
.dhr-hcard:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.dhr-hcard--active {
    border: 2px solid #1e5fa8 !important;
    background: #f0f6fd !important;
    box-shadow: 0 2px 12px rgba(30,95,168,.18) !important;
}
.dhr-hcard__photo {
    width: 48%;
    min-height: 150px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    border-radius: 10px 0 0 10px;
}
/* El tooltip de precio en el panel derecho abre hacia abajo porque el
   precio del hotel seleccionado está en el tope del panel. */
.dhr-rpanel .tooltip-wrapper spand {
    bottom: auto;
    top: calc(100% + 5px);
}
.dhr-rpanel .tooltip-wrapper spand::after {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent #555 transparent;
}
/* El footer está al fondo del panel — su tooltip vuelve hacia arriba. */
.dhr-footer .tooltip-wrapper spand {
    top: auto;
    bottom: calc(100% + 5px);
}
.dhr-footer .tooltip-wrapper spand::after {
    bottom: auto;
    top: 100%;
    border-color: #555 transparent transparent transparent;
}
/* Precios y pagination: misma tipografía que el resto del sitio */
.dhr-shell .product-price,
.dhr-shell .enix-pagination__info,
.dhr-shell .enix-price__label,
.dhr-shell .enix-view-toggle-btn {
    font-family: var(--pb-font-body, 'Mulish', 'Poppins', sans-serif) !important;
}
.dhr-hcard .product-price,
.dhr-rpanel .product-price {
    font-weight: var(--fw-black, 900);
    color: var(--navy, #0d2240);
    line-height: 1.1;
}
.dhr-hcard .product-price small,
.dhr-rpanel .product-price small {
    font-size: 11px;
    font-weight: 700;
    vertical-align: super;
    margin-left: 1px;
}
.dhr-hcard .h3.product-price { font-size: 20px; }
.dhr-rpanel .h2.product-price { font-size: 26px; }
.dhr-hcard__body {
    padding: 10px 13px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.dhr-hcard__name {
    font-size: 13px;
    font-weight: 700;
    color: #0d2240;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* ── Panel derecho ── */
.dhr-rpanel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
}
.dhr-rscroll {
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.dhr-rscroll::-webkit-scrollbar { width: 5px; }
.dhr-rscroll::-webkit-scrollbar-track { background: transparent; }
.dhr-rscroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
.dhr-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    padding: 0;
    margin-left: 6px;
    border-radius: 50%;
    font-variant-numeric: tabular-nums;
    border: 1px solid #cbd5e1;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    vertical-align: middle;
}
.dhr-tab-count--active {
    border-color: #9dbbe0;
    color: #1e5fa8;
}
/* ── Room row ── */
.dhr-room-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 18px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background .1s;
}
.dhr-room-row--active {
    background: #eaf2fb;
    box-shadow: inset 3px 0 0 #1e5fa8;
}
/* ── Skeleton ── */
@keyframes dhrShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.dhr-sk {
    background: linear-gradient(90deg,#eef2f6 25%,#e2e8f0 50%,#eef2f6 75%);
    background-size: 400% 100%;
    animation: dhrShimmer 1.4s ease infinite;
    border-radius: 6px;
}
@media (max-width: 960px) {
    .dhr-shell,
    .dhr-shell--nosubtabs,
    body.dhr-has-results .dhr-shell { height: auto; }
    .dhr-panels { grid-template-columns: 1fr; overflow: visible; min-height: 0; }
    .dhr-body { overflow: visible; }
    .dhr-lscroll { max-height: 50vh; }
    .dhr-rscroll { overflow: visible; flex: none; }
    /* En mobile la barra de resumen no se ancla (el layout fluye) */
    .dhr-summary { position: static; }
}

/* En el footer de resultados el carrito convive con el botón Continuar
   (enix-btn-search, 44px). Sin esto queda 7px más bajo. */
.dhr-footer .enix-btn-addcart {
    height: 44px;
    padding-top: 0;
    padding-bottom: 0;
}

/* ── Hero del buscador de parques: barra de título + botón minimizar ──
   La animación de colapsar/expandir la maneja JS
   (LoginterFunctions.SlideUp/Down) midiendo la altura real del
   contenido — estilo Bootstrap collapse. */
.dhr-hero-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.dhr-hero-minimize {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.4);
    color: #fff;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s;
    flex-shrink: 0;
}
.dhr-hero-minimize:hover { background: rgba(255,255,255,.22); }