/* AirlyGo V11.1.63 — Final Hotel Results Experience
   UI-only responsive layer. Search/API logic is untouched. */

.hotel-results-page,
body{
  --ag63-navy:#0b1f3a;
  --ag63-blue:#0f6fc6;
  --ag63-orange:#ff7200;
  --ag63-green:#087d55;
  --ag63-line:#d8e4ee;
  --ag63-bg:#f3f7fb;
  --ag63-muted:#667b91;
}

/* Results hero is intentionally removed from the final results experience.
   Result count + search summary carry the context instead. */
.results-hero{
  display:none!important;
}

.results-main{
  padding-top:18px!important;
}

/* Keep desktop layout clean and international-OTA-like. */
.results-toolbar{
  align-items:center!important;
  gap:12px!important;
  margin-bottom:12px!important;
}
.result-count{
  color:var(--ag63-navy)!important;
  font-weight:800!important;
}
.result-note{
  color:var(--ag63-muted)!important;
}

/* Mobile filter chips injected by V11.1.63 JS */
.ag63-filter-chips{
  display:none;
}
.ag63-filter-chip{
  min-height:40px;
  border:1px solid #c7d6e5;
  border-radius:999px;
  padding:7px 12px;
  background:#fff;
  color:var(--ag63-navy);
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
}
.ag63-filter-chip.is-active{
  background:#eef7ff;
  border-color:#7eacd1;
  color:#0f5fa9;
}
.ag63-filter-chip[data-filter="refund"].is-active,
.ag63-filter-chip[data-filter="breakfast"].is-active{
  background:#eef9f4;
  border-color:#a9dbc7;
  color:#087d55;
}

/* Desktop cards: slightly more premium without changing the rendering engine. */
.hotel-card{
  border-color:#dbe5ee!important;
  box-shadow:0 4px 14px rgba(11,31,58,.035)!important;
  overflow:hidden!important;
}
.hotel-photo img{
  object-fit:cover!important;
}
.hotel-title{
  color:var(--ag63-navy)!important;
}
.offer-badge{
  box-shadow:none!important;
}
.availability-button{
  min-height:44px!important;
  border-radius:9px!important;
  box-shadow:0 5px 12px rgba(255,114,0,.14)!important;
}
.price-label,
.price-note{
  color:#718499!important;
}
.price-nightly{
  color:var(--ag63-navy)!important;
}
.review-score{
  background:var(--ag63-navy)!important;
}

/* Tablet */
@media(max-width:900px){
  .ticker-bar{display:none!important}
  .results-main{padding-top:12px!important}
  .results-layout{grid-template-columns:1fr!important}
  .filters{
    position:fixed!important;
    inset:auto 0 0 0!important;
    z-index:1300!important;
    width:100%!important;
    max-height:82vh!important;
    overflow:auto!important;
    border-radius:18px 18px 0 0!important;
    padding:18px!important;
    transform:translateY(110%);
    transition:transform .2s ease;
  }
  .filters.is-open{transform:translateY(0)}
  .filter-backdrop:not([hidden]){display:block!important}
}

/* Mobile final result experience */
@media(max-width:600px){
  body{background:var(--ag63-bg)!important}

  .hotel-search-section{
    padding:10px 12px 12px!important;
    background:#fff!important;
    border-bottom:1px solid #d8e3ed!important;
  }
  .hotel-search-form{
    gap:8px!important;
  }
  .hotel-search-form .search-field,
  .hotel-search-form .guests-button{
    min-height:52px!important;
    height:52px!important;
    border-radius:10px!important;
    padding-top:6px!important;
    padding-bottom:6px!important;
  }
  .hotel-search-form .search-submit{
    width:100%!important;
    height:50px!important;
    min-height:50px!important;
    border-radius:10px!important;
    margin-top:0!important;
    box-shadow:0 6px 14px rgba(255,114,0,.16)!important;
  }
  .hotel-search-form .search-submit span{
    display:inline!important;
  }

  .results-main>.wrap{
    width:auto!important;
    margin:0 12px!important;
  }

  .results-toolbar{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    align-items:center!important;
    gap:8px!important;
    margin-bottom:8px!important;
  }
  .results-toolbar>div:first-child{
    grid-column:1/-1;
  }
  .results-toolbar .toolbar-actions{
    grid-column:1/-1;
    display:grid!important;
    grid-template-columns:112px minmax(0,1fr)!important;
    gap:8px!important;
    width:100%!important;
  }
  .mobile-filter-button{
    display:flex!important;
    min-height:44px!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
    font-size:12px!important;
    padding:8px 10px!important;
  }
  .ag-sort{
    width:100%!important;
  }
  .ag-sort-trigger{
    width:100%!important;
    min-height:44px!important;
    border-radius:10px!important;
    padding:8px 12px!important;
  }
  .ag-sort-prefix{
    display:none!important;
  }
  .ag-sort-menu{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    bottom:12px!important;
    top:auto!important;
    width:auto!important;
    max-height:70vh!important;
    overflow:auto!important;
    border-radius:16px!important;
    padding:8px!important;
    box-shadow:0 18px 48px rgba(11,31,58,.22)!important;
    z-index:1400!important;
  }
  .ag-sort-menu button{
    min-height:48px!important;
    padding:11px 12px!important;
    border-radius:9px!important;
  }

  .ag63-filter-chips{
    display:flex!important;
    gap:7px!important;
    overflow-x:auto!important;
    scrollbar-width:none;
    margin:0 0 10px!important;
    padding-bottom:2px;
  }
  .ag63-filter-chips::-webkit-scrollbar{display:none}

  .results-layout{display:block!important}
  .results-list{width:100%!important}

  /* Expedia-inspired scanability, AirlyGo styling.
     390–600px: image left, information/price right. */
  .hotel-card{
    display:grid!important;
    grid-template-columns:minmax(128px,40%) minmax(0,60%)!important;
    grid-template-rows:auto auto!important;
    margin-bottom:12px!important;
    border-radius:14px!important;
    background:#fff!important;
  }
  .hotel-photo{
    grid-column:1!important;
    grid-row:1/3!important;
    min-height:258px!important;
    height:100%!important;
    border-radius:0!important;
  }
  .hotel-photo>img{
    width:100%!important;
    height:100%!important;
    min-height:258px!important;
    object-fit:cover!important;
  }
  .photo-badge{
    top:8px!important;
    left:8px!important;
    max-width:calc(100% - 16px);
    font-size:9px!important;
    padding:5px 7px!important;
  }

  .hotel-content{
    grid-column:2!important;
    grid-row:1!important;
    padding:12px 12px 6px!important;
    min-width:0!important;
  }
  .hotel-title-row{
    display:block!important;
  }
  .hotel-title{
    font-size:17px!important;
    line-height:1.18!important;
    margin:0 0 5px!important;
  }
  .hotel-stars{
    margin-top:3px!important;
    font-size:10px!important;
  }
  .hotel-location{
    font-size:11px!important;
    line-height:1.35!important;
    margin-bottom:8px!important;
  }
  .room-name{
    font-size:11.5px!important;
    line-height:1.35!important;
    margin-top:7px!important;
  }
  .board-name{
    font-size:10.5px!important;
  }

  /* Hide low-value repetition on the compact card. */
  .amenity-list{
    display:none!important;
  }
  .offer-badges{
    display:flex!important;
    gap:5px!important;
    flex-wrap:wrap!important;
    margin-top:8px!important;
  }
  .offer-badge{
    font-size:9px!important;
    line-height:1.2!important;
    padding:4px 6px!important;
  }
  .offer-badge:nth-child(n+4){
    display:none!important;
  }

  .hotel-price-panel{
    grid-column:2!important;
    grid-row:2!important;
    padding:7px 12px 12px!important;
    border-left:0!important;
    border-top:1px solid #edf1f5!important;
    min-width:0!important;
  }
  .review-box{
    display:flex!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:7px!important;
    margin-bottom:7px!important;
  }
  .review-copy{
    text-align:left!important;
    order:2;
    font-size:9.5px!important;
  }
  .review-copy strong{
    font-size:10.5px!important;
  }
  .review-score{
    order:1;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:8px!important;
    font-size:13px!important;
  }
  .price-block{
    text-align:right!important;
  }
  .price-label{
    font-size:9px!important;
  }
  .price-nightly{
    display:block!important;
    margin-top:2px!important;
    font-size:20px!important;
    line-height:1.12!important;
    white-space:normal!important;
  }
  .price-nightly small{
    font-size:10px!important;
  }
  .price-total{
    font-size:10.5px!important;
    line-height:1.35!important;
  }
  .price-note{
    display:none!important;
  }
  .demand-note{
    font-size:10px!important;
    margin-top:4px!important;
  }
  .availability-button{
    width:100%!important;
    min-height:46px!important;
    margin-top:9px!important;
    font-size:11.5px!important;
  }
  .selected-hotel-badge,
  .alternative-reason{
    font-size:9px!important;
  }

  .back-to-top{
    width:46px!important;
    height:46px!important;
    right:16px!important;
    bottom:18px!important;
  }
}

/* 320–360px: switch to stacked card to avoid cramped text/price columns. */
@media(max-width:360px){
  .hotel-card{
    display:block!important;
  }
  .hotel-photo,
  .hotel-photo>img{
    width:100%!important;
    height:190px!important;
    min-height:190px!important;
  }
  .hotel-content{
    padding:12px!important;
  }
  .hotel-price-panel{
    padding:10px 12px 12px!important;
  }
  .price-block{text-align:left!important}
  .results-toolbar .toolbar-actions{
    grid-template-columns:100px minmax(0,1fr)!important;
  }
}