/* ═══════════════════════════════════════════════════
   Hotel Manager — Public CSS v6
   Booking.com horizontal card layout
   ═══════════════════════════════════════════════════ */
:root {
  --hmp-black: #111;
  --hmp-blue:  #2d3a8c;
  --hmp-gold:  #c49a28;
  --hmp-green: #16a34a;
  --hmp-text:  #111827;
  --hmp-sub:   #374151;
  --hmp-muted: #6b7280;
  --hmp-line:  #e5e7eb;
  --hmp-bg:    #f9fafb;
  --hmp-r:     10px;
}

/* ── Section ── */
.hmp-section { margin:40px auto; padding:0; max-width:900px; }
.hmp-heading { font-size:1.5rem; font-weight:800; color:#111; text-align:center; margin:0 0 8px; }
.hmp-heading::after { content:''; display:block; width:44px; height:3px; background:var(--hmp-gold); border-radius:2px; margin:8px auto 0; }
.hmp-desc { text-align:center; color:var(--hmp-muted); font-size:14px; font-weight:500; margin:8px 0 24px; }

/* ════════════════════════════════════════
   SEARCH BAR
   ════════════════════════════════════════ */
.hmp-search-wrap { padding:0; margin:0 auto 24px; max-width:900px; }
.hmp-search-box {
  display:flex !important;
  flex-direction:row !important;
  align-items:stretch !important;
  background:var(--hmp-gold);
  border-radius:var(--hmp-r);
  box-shadow:0 6px 28px rgba(196,154,40,.3);
  overflow:visible !important; position:relative;
}
.hmp-sf {
  display:flex !important; align-items:center !important; gap:10px;
  padding:14px 18px; flex:1; min-width:130px;
  background:#fff; position:relative; cursor:pointer;
}
.hmp-sf:first-child { border-radius:var(--hmp-r) 0 0 var(--hmp-r); }
.hmp-sf svg { flex-shrink:0; color:var(--hmp-gold); }
.hmp-sf-inner { display:flex !important; flex-direction:column !important; gap:2px; flex:1; min-width:0; }
.hmp-sf-label { font-size:10px; font-weight:800; color:var(--hmp-muted); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.hmp-sf-select, .hmp-sf-input {
  border:none !important; outline:none !important;
  font-size:14px; font-weight:600;
  color:var(--hmp-text); background:transparent;
  width:100%; font-family:inherit; cursor:pointer; padding:0; margin:0;
  box-shadow:none !important;
}
.hmp-sf-val { font-size:13px; font-weight:600; color:var(--hmp-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hmp-sf-divider { width:1px; background:rgba(196,154,40,.4); flex-shrink:0; margin:10px 0; }

/* Guests dropdown */
.hmp-sf-guests { cursor:pointer; user-select:none; }
.hmp-guests-drop {
  display:none; position:absolute; top:calc(100% + 10px); left:0;
  background:#fff; border:1.5px solid var(--hmp-line);
  border-radius:var(--hmp-r); padding:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.14); z-index:99999;
  min-width:280px;
}
.hmp-guests-drop.open { display:block !important; }
.hmp-gd-row { display:flex !important; align-items:center !important; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--hmp-line); }
.hmp-gd-row:last-of-type { border-bottom:none; }
.hmp-gd-info strong { display:block; font-size:13px; font-weight:700; color:#111; }
.hmp-gd-info span   { font-size:11px; color:var(--hmp-muted); }
.hmp-gd-ctrl { display:flex !important; align-items:center !important; gap:14px; }
.hmp-gd-ctrl button {
  width:32px !important; height:32px !important; border-radius:50% !important;
  border:1.5px solid var(--hmp-line) !important; background:#fff !important;
  font-size:18px; color:#111 !important; cursor:pointer;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
.hmp-gd-ctrl button:hover { border-color:#111 !important; }
.hmp-gd-ctrl span { font-size:15px; font-weight:800; color:#111; min-width:20px; text-align:center; }
.hmp-gd-done {
  width:100%; margin-top:14px; background:#111 !important; color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border:none !important; border-radius:8px; padding:11px;
  font-size:13px; font-weight:700; cursor:pointer;
}
.hmp-search-btn {
  background:#111 !important; color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border:none !important; padding:0 30px;
  font-size:14px; font-weight:800; cursor:pointer;
  display:flex !important; align-items:center !important; gap:8px;
  white-space:nowrap; flex-shrink:0;
  border-radius:0 var(--hmp-r) var(--hmp-r) 0;
  transition:background .18s;
}
.hmp-search-btn:hover { background:#333 !important; }

/* Results */
.hmp-search-results { margin-top:8px; }
.hmp-search-result-header { padding:10px 4px 14px; font-size:13px; color:var(--hmp-muted); }
.hmp-result-count { color:#111; font-weight:700; }
.hmp-search-loading, .hmp-no-results { text-align:center; padding:40px; color:var(--hmp-muted); font-size:14px; }

/* ════════════════════════════════════════
   CARDS GRID
   ════════════════════════════════════════ */
.hmp-cards-grid {
  display:flex !important;
  flex-direction:row !important;
  gap:16px;
  list-style:none; margin:0; padding:0;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#e5e7eb transparent;
  padding-bottom:8px;
}
.hmp-cards-grid::-webkit-scrollbar { height:4px; }
.hmp-cards-grid::-webkit-scrollbar-track { background:transparent; }
.hmp-cards-grid::-webkit-scrollbar-thumb { background:#e5e7eb; border-radius:4px; }

/* ════════════════════════════════════════
   HOTEL CARD — HORIZONTAL (Booking.com)
   ════════════════════════════════════════ */
.hmp-card {
  display:flex !important;
  flex-direction:row !important;   /* ← CRITICAL: horizontal */
  align-items:stretch !important;
  background:#fff !important;
  border-radius:var(--hmp-r) !important;
  border:1px solid var(--hmp-line) !important;
  overflow:hidden !important;
  cursor:pointer;
  transition:box-shadow .25s, transform .2s;
  width:100%;
  box-sizing:border-box;
  text-decoration:none !important;
}
.hmp-card:hover {
  box-shadow:0 6px 28px rgba(0,0,0,.13) !important;
  transform:translateY(-1px);
}

/* ── LEFT: Photo block ── */
.hmp-card-photo {
  flex-shrink:0 !important;
  width:220px !important;
  min-width:220px !important;
  max-width:220px !important;
  display:flex !important;
  flex-direction:column !important;
  position:relative; overflow:hidden;
}
.hmp-card-main-img {
  width:100% !important; flex:1;
  object-fit:cover !important;
  display:block !important;
  height:180px !important;
  transition:transform .35s;
}
.hmp-card:hover .hmp-card-main-img { transform:scale(1.05); }

/* City badge — top right of photo */
.hmp-city-badge {
  position:absolute !important; top:8px; right:8px;
  background:rgba(0,0,0,.65); color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-size:10px; font-weight:700;
  padding:3px 9px; border-radius:20px; white-space:nowrap;
  z-index:2;
}

/* Gallery strip below main image */
.hmp-card-gallery-strip {
  display:flex !important;
  flex-direction:row !important;
  gap:2px; flex-shrink:0;
  height:52px; overflow:hidden;
}
.hmp-card-gal-thumb { flex:1; overflow:hidden; }
.hmp-card-gal-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── RIGHT: Body ── */
.hmp-card-body {
  flex:1 !important;
  display:flex !important;
  flex-direction:column !important;
  padding:16px 18px !important;
  min-width:0;
}
.hmp-card-body-top { flex:1; display:flex !important; flex-direction:column !important; gap:6px; }

/* Hotel name */
.hmp-card-name {
  font-size:1.05rem !important; font-weight:800 !important;
  color:#111 !important; margin:0 !important; line-height:1.3;
}

/* Stars row — NO image overlay, just here */
.hmp-card-star-row { display:flex !important; align-items:center !important; gap:6px; flex-wrap:wrap; }
.hmp-card-star-label {
  font-size:11px; font-weight:700; color:#92400e;
  background:#fef3c7; border:1px solid #fcd34d;
  padding:2px 8px; border-radius:12px;
}
.hmp-card-cat-badge {
  font-size:10px; font-weight:700; color:var(--hmp-blue);
  background:#eff6ff; border:1px solid #bfdbfe;
  padding:2px 8px; border-radius:12px;
}

/* Distance */
.hmp-card-dist {
  display:flex !important; align-items:center !important; gap:5px;
  font-size:12px; color:var(--hmp-blue); font-weight:700;
}

/* Address */
.hmp-card-address {
  display:flex !important; align-items:center !important; gap:5px;
  font-size:11.5px; color:var(--hmp-muted);
}

/* Short desc */
.hmp-card-desc {
  font-size:12.5px; color:var(--hmp-muted); font-style:italic;
  margin:0; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Amenities */
.hmp-card-ams { display:flex !important; flex-wrap:wrap; gap:6px; margin-top:2px; }
.hmp-card-am {
  display:flex !important; align-items:center !important; gap:4px;
  font-size:11px; color:var(--hmp-sub); font-weight:600;
  background:var(--hmp-bg); border:1px solid var(--hmp-line);
  padding:3px 9px; border-radius:20px;
}
.hmp-card-am-more { font-size:11px; color:var(--hmp-muted); font-weight:600; }

/* Footer */
.hmp-card-footer {
  display:flex !important; align-items:flex-end !important;
  justify-content:space-between !important;
  margin-top:12px; padding-top:12px;
  border-top:1px solid var(--hmp-line); gap:12px;
}
.hmp-price-wrap { display:flex !important; flex-direction:column !important; gap:2px; }
.hmp-price-from { font-size:10px; color:var(--hmp-muted); text-transform:uppercase; letter-spacing:.04em; }
.hmp-price-row  { display:flex !important; align-items:baseline !important; gap:3px; }
.hmp-price-cur  { font-size:12px; font-weight:700; color:var(--hmp-muted); }
.hmp-price-num  { font-size:1.4rem; font-weight:900; color:#111; line-height:1; }
.hmp-price-note { font-size:10.5px; color:var(--hmp-muted); }

/* View Hotel button */
.hmp-view-btn {
  display:inline-flex !important;
  align-items:center !important; gap:6px;
  background:#111 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border:none !important; border-radius:8px;
  padding:10px 18px; font-size:13px; font-weight:800;
  cursor:pointer; white-space:nowrap;
  text-decoration:none !important;
  transition:background .18s; flex-shrink:0;
}
.hmp-view-btn:hover,
.hmp-view-btn:visited,
.hmp-view-btn:focus {
  background:#333 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* ════════════════════════════════════════
   FAQs
   ════════════════════════════════════════ */
.hmp-faqs-section { background:var(--hmp-bg); padding:48px 24px; margin:48px 0; border-radius:12px; }
.hmp-faq-wrap { max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:8px; }
.hmp-faq-item { border:1px solid var(--hmp-line); border-radius:var(--hmp-r); overflow:hidden; background:#fff; }
.hmp-faq-q { width:100%; background:#fff; border:none; text-align:left; padding:15px 18px; font-size:14px; font-weight:700; color:#111; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; transition:background .18s; }
.hmp-faq-q:hover { background:#f5f5f5; }
.hmp-faq-arrow { flex-shrink:0; color:#111; transition:transform .25s; }
.hmp-faq-item.open .hmp-faq-arrow { transform:rotate(180deg); }
.hmp-faq-a { display:none; padding:14px 18px; font-size:14px; color:var(--hmp-sub); line-height:1.7; border-top:1px solid var(--hmp-line); }
.hmp-faq-item.open .hmp-faq-a { display:block; }

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */
@media (max-width:900px) {
  .hmp-search-box { flex-wrap:wrap !important; overflow:visible !important; }
  .hmp-sf { min-width:calc(50% - 2px) !important; flex:none !important; }
  .hmp-sf:first-child { border-radius:0 !important; }
  .hmp-sf-divider { display:none !important; }
  .hmp-search-btn { border-radius:0 !important; width:100% !important; justify-content:center; padding:14px !important; }
  /* Mobile guests dropdown — fixed center */
  .hmp-guests-drop {
    position:fixed !important;
    top:50% !important; left:50% !important;
    transform:translate(-50%,-50%) !important;
    width:310px !important; max-width:92vw !important;
    z-index:999999 !important;
    box-shadow:0 20px 60px rgba(0,0,0,.3) !important;
  }
  /* Card stays horizontal on tablet */
  .hmp-card-photo { width:180px !important; min-width:180px !important; max-width:180px !important; }
  .hmp-card-main-img { height:150px !important; }
}

@media (max-width:600px) {
  /* Card goes vertical on mobile */
  .hmp-card { flex-direction:column !important; }
  .hmp-card-photo {
    width:100% !important; min-width:unset !important; max-width:100% !important;
  }
  .hmp-card-main-img { height:200px !important; }
  .hmp-card-gallery-strip { height:52px !important; }
  .hmp-card-body { padding:14px !important; }
  /* Search stacks */
  .hmp-search-box { flex-direction:column !important; }
  .hmp-sf { min-width:100% !important; border-bottom:1px solid var(--hmp-line); }
}

/* ── Extra specificity to beat any theme override ── */
/* Card — vertical layout (image top, info bottom) */
body .hmp-cards-grid .hmp-card,
.hmp-section .hmp-card,
.hmp-search-results .hmp-card {
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  flex-shrink:0 !important;
  width:280px !important;
  min-width:280px !important;
  max-width:280px !important;
}
body .hmp-cards-grid .hmp-card .hmp-card-photo,
.hmp-section .hmp-card .hmp-card-photo,
.hmp-search-results .hmp-card .hmp-card-photo {
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  flex-shrink:0 !important;
}
body .hmp-cards-grid .hmp-card .hmp-card-body,
.hmp-section .hmp-card .hmp-card-body,
.hmp-search-results .hmp-card .hmp-card-body {
  flex:1 !important;
  min-width:0 !important;
}
.hmp-card-stars-overlay { display:none !important; }
.hmp-card-gallery-strip { display:none !important; }
.hmp-card-no-img {
  width:100%; height:170px;
  background:linear-gradient(135deg,#e5e7eb,#f3f4f6);
  display:flex; align-items:center; justify-content:center;
}

/* ── Inline-card mobile override ── */
@media(max-width:600px){
  .hmp-card { flex-direction:column!important; }
  .hmp-card > div:first-child {
    width:100%!important; min-width:unset!important; max-width:100%!important;
  }
  .hmp-card > div:first-child img:first-child {
    height:210px!important;
  }
}

/* ══════════════════════════════════════════════
   TRAVELER THEME COMPATIBILITY — scoped reset
   ══════════════════════════════════════════════ */
.hmp-plugin-root {
  all: initial;
  font-family: inherit !important;
  color: #111 !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.hmp-plugin-root *,
.hmp-plugin-root *::before,
.hmp-plugin-root *::after {
  box-sizing: border-box !important;
}
/* Restore key elements inside root */
.hmp-plugin-root h2,
.hmp-plugin-root h3,
.hmp-plugin-root p,
.hmp-plugin-root span,
.hmp-plugin-root div,
.hmp-plugin-root a,
.hmp-plugin-root button,
.hmp-plugin-root input,
.hmp-plugin-root select,
.hmp-plugin-root img {
  font-family: inherit !important;
}

/* ── Force plugin inside normal document flow ── */
.hmp-plugin-root,
.hmp-search-wrap,
.hmp-section,
.hmp-cards-grid {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* ── Mobile: vertical stack ── */
@media(max-width:767px){
  /* Grid stacks vertically on mobile */
  .hmp-cards-grid {
    flex-direction:column !important;
    overflow-x:visible !important;
  }
  /* Each card full width horizontal (image left, info right) */
  body .hmp-cards-grid .hmp-card,
  .hmp-section .hmp-card,
  .hmp-search-results .hmp-card {
    flex-direction:row !important;
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
  }
  body .hmp-cards-grid .hmp-card .hmp-card-photo,
  .hmp-section .hmp-card .hmp-card-photo {
    width:120px !important;
    min-width:120px !important;
    max-width:120px !important;
    flex-shrink:0 !important;
  }
  .hmp-card > div:first-child {
    width:120px !important;
    min-width:120px !important;
    max-width:120px !important;
    flex-shrink:0 !important;
  }
  .hmp-card > div:first-child > img:first-child {
    height:140px !important;
    width:100% !important;
    object-fit:cover !important;
  }
  /* Hide gallery strip on mobile */
  .hmp-card-gallery-strip,
  .hmp-card > div:first-child > div:last-child { display:none !important; }
  /* Tighter body */
  .hmp-card > div:last-child { padding:10px 12px !important; }
  .hmp-card-ams { display:none !important; }
  .hmp-card-desc { display:none !important; }
  .hmp-card-footer { flex-direction:column !important; align-items:flex-start !important; gap:6px !important; margin-top:8px !important; padding-top:8px !important; }
  .hmp-view-btn { width:100% !important; justify-content:center !important; padding:8px !important; font-size:12px !important; }
  /* Search stacks */
  .hmp-search-box { flex-direction:column !important; }
  .hmp-sf { min-width:100% !important; border-bottom:1px solid var(--hmp-line); }
}

/* ════════════════════════════════════════
   PAGE WIDTH + MOBILE MARGINS FIX
   ════════════════════════════════════════ */

/* Constrain entire plugin to max 1140px centered */
.hmp-plugin-root {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Section inner padding */
.hmp-section {
  max-width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* Search bar inner padding */
.hmp-search-wrap {
  max-width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* Mobile margins */
@media (max-width: 768px) {
  .hmp-plugin-root {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .hmp-section {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .hmp-search-wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .hmp-heading { font-size: 1.25rem !important; }
}

@media (max-width: 480px) {
  .hmp-section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .hmp-search-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════ */

/* Cards fade + slide up on load */
@keyframes hmpFadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes hmpFadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes hmpSlideDown {
  from { opacity:0; transform:translateY(-10px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Section heading animate */
.hmp-heading {
  animation: hmpFadeUp .5s ease both;
}
.hmp-desc {
  animation: hmpFadeUp .55s ease both;
}

/* Cards animate in sequence */
.hmp-cards-grid .hmp-card {
  animation: hmpFadeUp .5s ease both;
}
.hmp-cards-grid .hmp-card:nth-child(1) { animation-delay: .05s; }
.hmp-cards-grid .hmp-card:nth-child(2) { animation-delay: .12s; }
.hmp-cards-grid .hmp-card:nth-child(3) { animation-delay: .19s; }
.hmp-cards-grid .hmp-card:nth-child(4) { animation-delay: .26s; }
.hmp-cards-grid .hmp-card:nth-child(5) { animation-delay: .33s; }
.hmp-cards-grid .hmp-card:nth-child(6) { animation-delay: .40s; }
.hmp-cards-grid .hmp-card:nth-child(7) { animation-delay: .47s; }
.hmp-cards-grid .hmp-card:nth-child(8) { animation-delay: .54s; }

/* Card hover — lift + shadow */
.hmp-card {
  transition: box-shadow .3s ease, transform .3s ease !important;
}
.hmp-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.14) !important;
}

/* Image zoom on card hover */
.hmp-card:hover img {
  transform: scale(1.06) !important;
}
.hmp-card > div:first-child {
  overflow: hidden !important;
}
.hmp-card > div:first-child img {
  transition: transform .45s ease !important;
}

/* Search bar animate */
.hmp-search-wrap {
  animation: hmpFadeIn .4s ease both;
}

/* Search results animate in */
.hmp-search-results .hmp-card {
  animation: hmpFadeUp .35s ease both;
}

/* View Hotel button pulse on hover */
.hmp-view-btn {
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
.hmp-view-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.25) !important;
}

/* Star badges pop */
.hmp-card-star-label {
  transition: transform .2s ease;
}
.hmp-card:hover .hmp-card-star-label {
  transform: scale(1.05);
}

/* City badge */
.hmp-city-badge {
  transition: opacity .2s ease;
}
.hmp-card:hover .hmp-city-badge {
  opacity: .9;
}

/* Search button hover */
.hmp-search-btn {
  transition: background .2s ease, transform .15s ease !important;
}
.hmp-search-btn:hover {
  transform: translateY(-1px) !important;
}

/* Guests dropdown smooth open */
.hmp-guests-drop {
  transition: opacity .2s ease, transform .2s ease;
  transform-origin: top left;
}
.hmp-guests-drop:not(.open) {
  opacity: 0;
  pointer-events: none;
  transform: scaleY(.95);
}
.hmp-guests-drop.open {
  opacity: 1 !important;
  pointer-events: auto;
  transform: scaleY(1) !important;
}

/* Scroll reveal — for sections below fold */
.hmp-section {
  animation: hmpFadeUp .6s ease both;
}
.hmp-section:nth-child(2) { animation-delay: .1s; }
.hmp-section:nth-child(3) { animation-delay: .2s; }
.hmp-section:nth-child(4) { animation-delay: .3s; }
.hmp-section:nth-child(5) { animation-delay: .4s; }
.hmp-section:nth-child(6) { animation-delay: .5s; }

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .hmp-card, .hmp-heading, .hmp-desc,
  .hmp-section, .hmp-search-wrap,
  .hmp-view-btn, .hmp-search-btn {
    animation: none !important;
    transition: none !important;
  }
}