/* Pesquisa pública de hotéis (hoteis.html). Usa as cores e botões de styles.css. */
.hotel-header { background: #fff; border-bottom: 1px solid var(--line); }
.hotel-header .nav-wrap { justify-content: space-between; min-height: 78px; }
.hotel-header .brand img { width: 136px; }
.hotel-back { color: var(--ink); font-size: .85rem; font-weight: 800; text-decoration: none; }
.hotel-back:hover { color: var(--orange-deep); }

.hotel-page { background: var(--paper); padding-bottom: 72px; }
.hotel-hero { background: linear-gradient(120deg, var(--navy) 0%, #20465f 70%, #2e6a7c 100%); color: #fff; padding: 46px 0 94px; }
.hotel-hero .eyebrow { color: #ffc9a1; font-size: .74rem; font-weight: 900; letter-spacing: .14em; margin: 0 0 10px; text-transform: uppercase; }
.hotel-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.03em; line-height: 1.02; margin: 0; }
.hotel-hero p:not(.eyebrow) { color: rgba(255,255,255,.82); font-size: 1.02rem; line-height: 1.55; margin: 14px 0 0; max-width: 640px; }
.hotel-body { margin-top: -62px; position: relative; }

.hotel-preview { background: #fff4e8; border: 1px dashed var(--orange); border-radius: 10px; color: var(--orange-deep); font-weight: 800; margin: 0 0 14px; padding: 10px 14px; }
.hotel-status { color: var(--charcoal); font-size: .95rem; margin: 18px 0 0; min-height: 1.2em; }
.hotel-status[data-state="loading"] { color: #2e5b7b; }
.hotel-status[data-state="success"] { color: var(--ink); font-weight: 700; }
.hotel-status[data-state="error"] { color: #a83629; font-weight: 700; }
#hotel-loading { background: #fff; border-radius: 16px; margin: 0; padding: 28px; }

.hotel-closed, .hotel-done { background: #fff; border-radius: 16px; box-shadow: 0 18px 44px rgba(23, 44, 61, .12); padding: 32px; }
.hotel-closed h2, .hotel-done h2 { color: var(--ink); font-size: 1.6rem; margin: 0 0 10px; }
.hotel-closed p, .hotel-done p:not(.eyebrow) { line-height: 1.55; margin: 0 0 20px; max-width: 640px; }
.hotel-done .eyebrow { color: var(--orange-deep); font-size: .74rem; font-weight: 900; letter-spacing: .12em; margin: 0 0 8px; text-transform: uppercase; }

.hotel-modes { display: inline-flex; gap: 4px; margin: 0 0 12px; padding: 4px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 12px; position: relative; }
.hotel-modes button { background: transparent; border: 0; border-radius: 9px; color: #fff; font-weight: 800; min-height: 40px; padding: 8px 18px; }
.hotel-modes button[aria-selected="true"] { background: #fff; color: var(--ink); }
.hotel-origin { grid-column: 1 / -1; max-width: 360px; }
.hotel-search { align-items: end; background: #fff; border-radius: 16px; box-shadow: 0 18px 44px rgba(23, 44, 61, .14); display: grid; gap: 14px 12px; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) repeat(3, minmax(0, .8fr)) auto; padding: 22px; }
.hotel-search label, .hotel-destination label, .hotel-request label { color: var(--ink); display: grid; font-size: .78rem; font-weight: 800; gap: 6px; min-width: 0; }
.hotel-search input, .hotel-search select, .hotel-request input, .hotel-request textarea { background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); min-height: 46px; min-width: 0; padding: 10px 12px; width: 100%; }
.hotel-search input:focus, .hotel-search select:focus, .hotel-request input:focus, .hotel-request textarea:focus { border-color: var(--orange); outline: 3px solid rgba(255, 121, 0, .18); }
.hotel-destination { display: grid; gap: 6px; position: relative; }
.hotel-suggestions { background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 34px rgba(0,0,0,.12); left: 0; list-style: none; margin: 4px 0 0; max-height: 280px; overflow-y: auto; padding: 6px; position: absolute; right: 0; top: 100%; z-index: 10; }
.hotel-suggestions button { background: transparent; border: 0; border-radius: 6px; color: var(--ink); display: block; padding: 10px 12px; text-align: left; width: 100%; }
.hotel-suggestions button:hover, .hotel-suggestions button:focus { background: var(--sand); outline: none; }
.hotel-child-ages { display: grid; gap: 12px; grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.hotel-child-ages:empty { display: none; }
.hotel-search-submit { white-space: nowrap; }

.hotel-flights { background: #fff; border: 1px solid var(--line); border-radius: 16px; margin-top: 18px; padding: 20px 22px; }
.hotel-flights h2 { color: var(--ink); font-size: 1.25rem; margin: 0 0 6px; }
.hotel-flight-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); list-style: none; margin: 14px 0 0; padding: 0; }
.hotel-flight { background: var(--paper); border: 2px solid transparent; border-radius: 12px; color: var(--ink); display: grid; gap: 10px; height: 100%; padding: 14px; text-align: left; width: 100%; }
.hotel-flight:hover { border-color: var(--line); }
.hotel-flight.is-selected { background: #fff4e8; border-color: var(--orange); }
.hotel-slice { display: grid; gap: 2px; }
.hotel-slice-label { color: var(--orange-deep); font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.hotel-slice strong { font-size: .98rem; }
.hotel-slice span:last-child { color: #6f6a66; font-size: .82rem; }
.hotel-flight-price { font-weight: 900; }
.hotel-quote-flight { border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 10px; margin-top: 16px; padding: 14px 16px; }
.hotel-quote-flight h3 { color: var(--ink); font-size: .78rem; letter-spacing: .06em; margin: 0; text-transform: uppercase; }
.hotel-quote-flight p { font-size: .9rem; margin: 0; }
.hotel-results { display: grid; gap: 18px; margin-top: 18px; }
.hotel-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; display: grid; grid-template-columns: 280px minmax(0, 1fr); overflow: hidden; }
.hotel-card-image { background: linear-gradient(135deg, var(--sand), #fff); min-height: 220px; }
.hotel-card-image img { display: block; height: 100%; object-fit: cover; width: 100%; }
.hotel-card-body { min-width: 0; padding: 22px 24px; }
.hotel-card-head { align-items: start; display: flex; gap: 18px; justify-content: space-between; }
.hotel-category { color: var(--orange-deep); font-size: .72rem; font-weight: 900; letter-spacing: .1em; margin: 0 0 6px; text-transform: uppercase; }
.hotel-card-head h2 { color: var(--ink); font-size: 1.45rem; line-height: 1.15; margin: 0; }
.hotel-location { color: #6f6a66; font-size: .86rem; margin: 6px 0 0; }
.hotel-from { color: var(--ink); font-size: 1.35rem; font-weight: 900; margin: 0; white-space: nowrap; }
.hotel-from span { color: #6f6a66; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.hotel-room { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
.hotel-room h3 { color: var(--ink); font-size: .95rem; margin: 0 0 6px; }
.hotel-room ul { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.hotel-rate { align-items: center; background: var(--paper); border-radius: 10px; display: flex; gap: 16px; justify-content: space-between; padding: 12px 14px; }
.hotel-rate > div:first-child { display: grid; gap: 3px; min-width: 0; }
.hotel-rate strong { color: var(--ink); }
.hotel-rate span, .hotel-taxes { font-size: .82rem; margin: 0; }
.hotel-free { color: #176e52; }
.hotel-strict { color: #a83629; }
.hotel-extras { color: var(--orange-deep); font-weight: 700; }
.hotel-taxes { color: #6f6a66; }
.hotel-rate-price { align-items: end; display: grid; gap: 4px; justify-items: end; text-align: right; }
.hotel-rate-price strong { font-size: 1.15rem; white-space: nowrap; }
.hotel-rate-price span { color: #6f6a66; font-size: .74rem; }
.hotel-rate-price .button { min-height: 40px; padding: 8px 16px; }
.hotel-pagination { align-items: center; display: flex; gap: 14px; justify-content: center; margin-top: 22px; }
.hotel-pagination .button[disabled] { cursor: default; opacity: .45; transform: none; }

.hotel-quote { background: #fff; border-radius: 16px; box-shadow: 0 18px 44px rgba(23, 44, 61, .14); margin-top: 22px; padding: 28px; scroll-margin-top: 16px; }
.hotel-quote .eyebrow { color: var(--orange-deep); font-size: .74rem; font-weight: 900; letter-spacing: .12em; margin: 0 0 6px; text-transform: uppercase; }
.hotel-quote h2 { color: var(--ink); font-size: 1.7rem; margin: 0; }
.hotel-quote-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.hotel-quote-grid > div { background: var(--paper); border-radius: 12px; display: grid; gap: 4px; padding: 14px 16px; }
.hotel-quote-grid span { color: #6f6a66; font-size: .74rem; font-weight: 800; text-transform: uppercase; }
.hotel-quote-grid strong { color: var(--ink); font-size: 1.02rem; }
.hotel-quote-grid small { color: #6f6a66; font-size: .82rem; }
.hotel-quote-price { background: #fff4e8 !important; }
.hotel-quote-price strong { color: var(--orange-deep); font-size: 1.5rem; }
.hotel-warning { background: #fff4e8; border-radius: 10px; color: var(--orange-deep); font-weight: 700; margin: 14px 0 0; padding: 10px 14px; }
.hotel-conditions { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
.hotel-conditions > div { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.hotel-conditions h3 { color: var(--ink); font-size: .78rem; letter-spacing: .06em; margin: 0 0 8px; text-transform: uppercase; }
.hotel-conditions p, .hotel-conditions li { font-size: .9rem; line-height: 1.5; margin: 0; }
.hotel-conditions ul { margin: 0; padding-left: 18px; }
.hotel-pre { white-space: pre-line; }

.hotel-request { border-top: 1px solid var(--line); display: grid; gap: 14px; margin-top: 24px; padding-top: 20px; }
.hotel-request h3 { color: var(--ink); font-size: 1.25rem; margin: 0; }
.hotel-note { background: var(--paper); border-radius: 10px; font-size: .9rem; margin: 0; padding: 10px 14px; }
.hotel-request-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hotel-request-grid:empty { display: none; }
.hotel-request label span { color: #6f6a66; font-weight: 600; }
.hotel-check { align-items: start; display: flex !important; font-weight: 600 !important; gap: 10px !important; line-height: 1.45; }
.hotel-check input { flex: 0 0 auto; margin-top: 3px; min-height: 0 !important; width: auto !important; }
.hotel-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 1080px) {
  .hotel-search { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hotel-destination { grid-column: 1 / -1; }
  .hotel-search-submit { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .hotel-hero { padding: 32px 0 80px; }
  .hotel-search { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px; }
  .hotel-card { grid-template-columns: 1fr; }
  .hotel-card-image { min-height: 180px; }
  .hotel-card-body { padding: 18px 16px; }
  .hotel-card-head { flex-direction: column; gap: 8px; }
  .hotel-rate { align-items: stretch; flex-direction: column; }
  .hotel-rate-price { align-items: center; grid-template-columns: 1fr auto; justify-items: start; text-align: left; }
  .hotel-rate-price span { grid-row: 2; }
  .hotel-rate-price .button { grid-column: 2; grid-row: 1 / span 2; }
  .hotel-quote { padding: 20px 16px; }
  .hotel-quote-grid, .hotel-conditions, .hotel-request-grid { grid-template-columns: 1fr; }
}