/*
 VegasRoomDeals.com — HERO LOCK V1
 Approved visual source: vegas-approved-exact.png
 Scope: HERO ONLY. Do not use this file to restyle categories/content below the hero.
*/

.hero-approved-locked{
  position:relative !important;
  width:100% !important;
  aspect-ratio:1448/350 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  background:#020912 !important;
  isolation:isolate;
}
.hero-approved-locked .hero-approved-art{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  pointer-events:none;
  user-select:none;
}

/* Keep the live H1/copy in the document for SEO/accessibility, but the approved art supplies the desktop pixels. */
.hero-approved-locked .hero-copy,
.hero-approved-locked .trust{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Functional search controls sit directly over the approved search bar artwork. */
.hero-approved-locked .search{
  position:absolute !important;
  z-index:3 !important;
  left:22.45% !important;
  top:64.25% !important;
  width:54.95% !important;
  height:23.15% !important;
  display:grid !important;
  grid-template-columns:22.6% 22% 19.8% 32.2% !important;
  column-gap:1.13% !important;
  align-items:stretch !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.hero-approved-locked .search label,
.hero-approved-locked .search button{
  position:relative !important;
  inset:auto !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  box-shadow:none !important;
}
.hero-approved-locked .search label>span{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.hero-approved-locked .search input,
.hero-approved-locked .search select{
  position:absolute !important;
  left:14% !important;
  right:7% !important;
  bottom:9% !important;
  width:79% !important;
  height:43% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 4px !important;
  border:0 !important;
  outline:0 !important;
  border-radius:3px !important;
  background:transparent !important;
  color:transparent !important;
  font:700 clamp(11px,1vw,17px)/1 Arial,Helvetica,sans-serif !important;
  box-shadow:none !important;
  cursor:pointer;
  color-scheme:dark;
}
.hero-approved-locked .search input:valid,
.hero-approved-locked .search select:focus{
  color:#fff !important;
  text-shadow:0 1px 2px #000 !important;
  background:rgba(4,13,24,.58) !important;
}
.hero-approved-locked .search select{
  left:26% !important;
  width:63% !important;
  color:#fff !important;
  background:rgba(4,13,24,.28) !important;
}
.hero-approved-locked .search input::-webkit-calendar-picker-indicator{
  opacity:0;
  cursor:pointer;
}
.hero-approved-locked .search button{
  color:transparent !important;
  cursor:pointer !important;
}
.hero-approved-locked .search label:focus-within,
.hero-approved-locked .search button:focus-visible,
.hero-approved-locked .search button:hover{
  outline:2px solid #ffe07a !important;
  outline-offset:-3px !important;
  box-shadow:0 0 16px rgba(255,194,48,.6) !important;
}

/* Mobile: keep the approved Vegas-sign/neon artwork, then use a clean functional search panel below it. */
@media(max-width:980px){
  .hero-approved-locked{
    aspect-ratio:auto !important;
    overflow:visible !important;
    background:#030b16 !important;
    padding-bottom:16px !important;
  }
  .hero-approved-locked .hero-approved-art{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:1448/180 !important;
    object-fit:cover !important;
    content:url('/assets/images/vegas-approved-hero-mobile-locked.png');
  }
  .hero-approved-locked .search{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    top:auto !important;
    width:min(760px,calc(100% - 24px)) !important;
    height:auto !important;
    margin:12px auto 0 !important;
    padding:10px !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:9px !important;
    border:1px solid #d7a72c !important;
    border-radius:12px !important;
    background:#071422 !important;
    box-shadow:0 8px 24px rgba(0,0,0,.35) !important;
  }
  .hero-approved-locked .search label,
  .hero-approved-locked .search button{
    min-height:58px !important;
    padding:7px 9px !important;
    background:#101d2b !important;
    border:1px solid #26384b !important;
  }
  .hero-approved-locked .search label>span{
    position:static !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    clip:auto !important;
    clip-path:none !important;
    overflow:visible !important;
    white-space:normal !important;
    display:block !important;
    color:#fff !important;
    font-size:11px !important;
    font-weight:800 !important;
  }
  .hero-approved-locked .search input,
  .hero-approved-locked .search select{
    position:static !important;
    width:100% !important;
    height:30px !important;
    margin-top:5px !important;
    padding:0 3px !important;
    background:transparent !important;
    color:#fff !important;
    font-size:16px !important;
  }
  .hero-approved-locked .search button{
    grid-column:1/-1 !important;
    min-height:54px !important;
    background:linear-gradient(#ffe778,#f5ba28) !important;
    border:0 !important;
    color:#151006 !important;
    font-weight:900 !important;
    font-size:15px !important;
  }
}