:root { --hotelc-gold:#f5b942; --hotelc-ink:#172033; --hotelc-teal:#00897b; }
html, body { min-height: 100%; }
body { background:#f7f8fb; color:var(--hotelc-ink); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
footer { flex-shrink: 0; }
.hero { min-height: 460px; background: linear-gradient(rgba(16,24,40,.72), rgba(16,24,40,.62)), url('https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=1600&q=80') center/cover; color:#fff; display:flex; align-items:center; }
.section-pad { padding: 64px 0; }
.stat-card, .tool-card { border:1px solid #e6e9ef; background:#fff; border-radius:8px; padding:20px; height:100%; }
.map-panel { height: 620px; border-radius:8px; overflow:hidden; border:1px solid #d8dee9; }
.map-layout {
  height: 620px;
  border: 1px solid #d8dee9;
  border-radius: 8px;
  overflow: hidden;
}

.map-sidebar {
  height: 620px;
  overflow-y: auto;
  background: #fff;
  border-right: 1px solid #e6e9ef;
}

.map-canvas-wrap {
  height: 620px;
}

#hotel-map.map-panel {
  height: 620px;
  border-radius: 0;
  border: none;
}
.sidebar-link { display:block; padding:10px 12px; border-radius:6px; color:#172033; text-decoration:none; transition: background .18s, color .18s; }
.sidebar-link:hover, .sidebar-link.active { background:#eef6f5; color:#00695c; }
.sidebar-link i { font-size:1rem; margin-right:7px; transition: transform .18s; vertical-align:-1px; }
.sidebar-link:hover i { transform: scale(1.18); }
.table-card { background:#fff; border:1px solid #e6e9ef; border-radius:8px; overflow:hidden; }
.badge-soft { background:#eef6f5; color:#00695c; }
.form-shell { max-width: 860px; margin: 0 auto; }

/* ── Map Page Search Bar ── */
.map-search-bar {
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 8px;
  padding: 10px 16px;
  box-shadow: 0 2px 8px rgba(23,32,51,.06);
}
.map-search-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.map-search-icon { font-size: 1rem; color: #8a95a3; }
.map-search-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: .97rem;
  color: var(--hotelc-ink);
}
.map-search-input::placeholder { color: #adb5c1; }
.map-search-btn {
  background: var(--hotelc-teal);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 6px 22px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.map-search-btn:hover { background: #00695c; }

/* ── Map Sidebar hotel list ── */
.map-sidebar-badge {
  display: inline-block;
  background: #eef6f5;
  color: var(--hotelc-teal);
  font-size: .8rem;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 50px;
}
/* ── Map sidebar hotel table ── */
.map-hotel-table {
  width: 100%;
  border-collapse: collapse;
}
.map-hotel-row {
  cursor: pointer;
  transition: background .15s;
}
.map-hotel-row:hover {
  background: #f0faf9;
}
.map-hotel-td-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--hotelc-ink);
  padding: 11px 24px 11px 16px;   /* 24px right = two-space gap before Reserve */
  border-bottom: 1px solid #f4f5f7;
  white-space: nowrap;
}
.map-hotel-td-btn {
  padding: 11px 16px 11px 0;
  border-bottom: 1px solid #f4f5f7;
  white-space: nowrap;
}
.map-hotel-reserve-btn {
  display: inline-block;
  background: var(--hotelc-teal);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 50px;
  text-decoration: none;
  transition: background .2s;
  white-space: nowrap;
}
.map-hotel-reserve-btn:hover { background: #00695c; color: #fff; }

.transparent-tooltip {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: white !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9), -1px -1px 3px rgba(0,0,0,0.9), 1px -1px 3px rgba(0,0,0,0.9), -1px 1px 3px rgba(0,0,0,0.9);
}
.transparent-tooltip .text-muted {
    color: #e6e9ef !important;
}
.transparent-tooltip::before,
.transparent-tooltip::after {
    display: none !important;
}

img,
video,
canvas {
  max-width: 100%;
}

.table-card {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-card table {
  min-width: 760px;
}

.btn,
.form-control,
.form-select {
  min-height: 42px;
}

@media (max-width: 991.98px) {
  .navbar .container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .navbar-collapse {
    padding-top: 12px;
  }

  .navbar .d-flex {
    align-items: stretch;
    flex-direction: column;
  }

  .navbar .btn {
    width: 100%;
  }

  .section-pad {
    padding: 28px 0;
  }

  main > .container-fluid {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  aside .tool-card.position-sticky,
  .tool-card.position-sticky {
    position: static !important;
    top: auto !important;
  }

  aside .tool-card {
    padding: 12px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  aside .tool-card h5 {
    flex: 0 0 auto;
    align-self: center;
    font-size: .95rem;
    margin: 0 4px 0 0;
  }

  .sidebar-link {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 9px 11px;
    background: #f8fafc;
    border: 1px solid #e6e9ef;
  }

  .hero {
    min-height: 520px;
    align-items: flex-end;
    padding: 72px 0 36px;
  }

  .hero .display-4 {
    font-size: 2.15rem;
    line-height: 1.08;
  }

  .hero .lead {
    font-size: 1rem;
  }

  .hero .d-flex {
    flex-direction: column;
  }

  .hero .btn {
    width: 100%;
  }

  .stat-card,
  .tool-card {
    padding: 16px;
  }

  .map-panel {
    height: 600px;
  }

  .map-search-inner {
    align-items: stretch;
    flex-direction: column;
  }

  .map-search-btn {
    border-radius: 8px;
    width: 100%;
    padding: 10px 14px;
  }
}

@media (max-width: 575.98px) {
  body {
    font-size: .95rem;
  }

  h1,
  .h1 {
    font-size: 1.75rem;
    line-height: 1.15;
  }

  h2,
  .h2 {
    font-size: 1.45rem;
  }

  h4,
  .h4 {
    font-size: 1.12rem;
  }

  .container,
  .container-fluid {
    padding-left: 14px;
    padding-right: 14px;
  }

  .section-pad {
    padding: 22px 0;
  }

  .hero {
    min-height: 500px;
  }

  .hero .display-4 {
    font-size: 1.85rem;
  }

  .tool-card,
  .stat-card,
  .table-card,
  .map-search-bar {
    border-radius: 8px;
  }

  .table-card {
    margin-left: -2px;
    margin-right: -2px;
  }

  .table-card table {
    min-width: 700px;
  }

  .table th,
  .table td {
    padding: .65rem .55rem;
    vertical-align: middle;
  }

  .badge {
    white-space: normal;
    line-height: 1.25;
  }

  .d-flex.gap-2,
  .d-flex.gap-1 {
    row-gap: 8px !important;
  }

  .carousel-item img {
    height: 240px !important;
  }

  footer {
    margin-top: 24px !important;
  }
}

@media (max-width: 767.98px) {
  #hotel-map {
    display: block;
    height: 600px !important;
    min-height: 600px;
  }

  #hotel-map.map-panel {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  #hotel-map[data-hotels] {
    width: 100%;
  }

  #mapHotelList {
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #mapResultCount {
    padding: 10px 12px !important;
  }

  #hotel-map,
  #hotel-map + * {
    touch-action: pan-x pan-y;
  }

  .map-layout {
    height: auto;
    overflow: visible;
    margin-left: -14px;
    margin-right: -14px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .map-sidebar {
    height: auto;
    max-height: 340px;
    overflow-y: auto;
    border-right: 0;
    border-bottom: 1px solid #e6e9ef;
  }

  .map-canvas-wrap {
    height: 600px;
  }
}

@media (max-width: 767.98px) {
  main {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }

  form .btn:last-child,
  .tool-card .btn:last-child,
  #submit-reservation-btn,
  #reserve-bar {
    margin-bottom: env(safe-area-inset-bottom, 0px);
  }

  #reserve-bar,
  .reservation-submit-wrap {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* android-safe-bottom */
.notification-bell {
  min-width: 42px;
}

.notification-bell .badge {
  font-size: .68rem;
  min-width: 18px;
}

/* Amenities Checkboxes Styling */
input[name="amenities[]"] {
  border: 2px solid #add8e6 !important;
  background-color: #fcfcfc;
}

input[name="amenities[]"]:checked {
  background-color: #add8e6 !important;
  border-color: #87ceeb !important;
}