/* ======================================================
   TWILIGHT RESORT
   BOOK PAGE
   FULL CLEAN REPLACEMENT
   PREFIX TRBOOK3
====================================================== */


/* ======================================================
   OWNERREZ RESET
====================================================== */

html:has(main.trbook3-page),
html:has(main.trbook3-page) body{
  background:#F5F3E8!important;
  color:#292B27!important;
}


html:has(main.trbook3-page)
#content.container{
  width:100%!important;
  max-width:none!important;

  margin:0!important;

  background:#F5F3E8!important;
}


html:has(main.trbook3-page)
#content > .body-content{
  width:100%!important;
  max-width:none!important;

  margin:0!important;
  padding:0!important;

  background:#F5F3E8!important;
}


html:has(main.trbook3-page)
#content > .body-content > .row{
  display:none!important;

  width:0!important;
  height:0!important;

  margin:0!important;
  padding:0!important;

  overflow:hidden!important;
}


html:has(main.trbook3-page)
#content h1.page-header,
html:has(main.trbook3-page)
#content p.lead{
  display:none!important;
}


/* ======================================================
   BASE
====================================================== */

.trbook3-page{
  width:100%;

  margin:0;
  padding:0;

  overflow:hidden;

  background:#F5F3E8;
  color:#292B27;

  font-family:"Alone Kaium",Arial,sans-serif;
}


.trbook3-page *,
.trbook3-page *::before,
.trbook3-page *::after{
  box-sizing:border-box!important;
}


.trbook3-page img{
  display:block;

  max-width:100%;
}


.trbook3-page h1,
.trbook3-page h2,
.trbook3-page h3{
  margin:0!important;
  padding:0!important;

  font-family:"Sora",Arial,sans-serif!important;

  font-weight:600!important;

  letter-spacing:-.04em!important;
}


.trbook3-page p{
  margin:0!important;
}


.trbook3-inner{
  width:calc(100% - 96px);
  max-width:1320px;

  margin:0 auto;
}


.trbook3-kicker{
  display:block;

  margin:0 0 13px;

  color:#B79A62!important;

  font-family:"Sora",Arial,sans-serif!important;

  font-size:10px;
  line-height:1.3;

  font-weight:600;

  letter-spacing:.17em;

  text-transform:uppercase;
}


/* ======================================================
   HERO
====================================================== */

.trbook3-hero{
  position:relative;

  width:calc(100% - 48px);
  max-width:1480px;

  height:560px;

  margin:24px auto 0;

  overflow:hidden;

  background:#173329;

  border-radius:30px;
}


.trbook3-hero-img{
  position:absolute!important;

  inset:0!important;

  width:100%!important;
  height:100%!important;

  max-width:none!important;

  object-fit:cover!important;
  object-position:center 54%!important;
}


.trbook3-hero-overlay{
  position:absolute;

  inset:0;

  z-index:1;

  background:
    linear-gradient(
      90deg,
      rgba(7,18,14,.94) 0%,
      rgba(7,18,14,.77) 34%,
      rgba(7,18,14,.39) 59%,
      rgba(7,18,14,.04) 100%
    );
}


.trbook3-hero-inner{
  position:relative;

  z-index:2;

  width:calc(100% - 96px);
  max-width:1320px;

  height:100%;

  margin:0 auto;
}


.trbook3-hero-copy{
  position:absolute;

  left:0;
  bottom:118px;

  width:min(690px,65%);
}


.trbook3-hero
.trbook3-kicker{
  color:#D4B978!important;
}


html:has(main.trbook3-page)
#content
.trbook3-page
.trbook3-hero
h1{
  max-width:690px;

  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;

  background:none!important;

  font-size:clamp(52px,5vw,72px)!important;
  line-height:1!important;

  letter-spacing:-.045em!important;
}


.trbook3-hero-copy > p{
  max-width:570px;

  margin-top:19px!important;

  color:rgba(255,255,255,.90)!important;
  -webkit-text-fill-color:rgba(255,255,255,.90)!important;

  font-size:18px;
  line-height:1.65;
}


.trbook3-hero-link{
  display:inline-flex;

  align-items:center;

  flex-wrap:wrap;

  gap:7px;

  margin-top:23px;

  color:#FFFFFF!important;

  font-family:"Sora",Arial,sans-serif!important;

  font-size:11px;

  font-weight:500;

  text-decoration:none!important;
}


.trbook3-hero-link strong{
  color:#D4B978!important;

  font-weight:600;
}


/* ======================================================
   SEARCH
====================================================== */

.trbook3-search{
  position:relative;

  z-index:5;

  margin-top:-72px;

  padding-bottom:86px;
}


.trbook3-search-card{
  width:100%;

  padding:34px;

  background:#FAF8F1;

  border:1px solid #DDD9CC;
  border-radius:24px;
}


.trbook3-search-head{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(300px,.62fr);

  gap:65px;

  align-items:end;

  margin-bottom:27px;
}


html:has(main.trbook3-page)
#content
.trbook3-page
.trbook3-search-head
h2{
  color:#173329!important;
  -webkit-text-fill-color:#173329!important;

  font-size:clamp(34px,3vw,46px)!important;
  line-height:1.05!important;
}


.trbook3-search-head > p{
  max-width:470px;

  color:#62675F;

  font-size:15px;
  line-height:1.65;
}


.trbook3-widget{
  width:100%;
  min-width:0;

  padding:15px;

  overflow:hidden;

  background:#10271F;

  border-radius:13px;
}


.trbook3-widget
.ownerrez-widget{
  width:100%!important;
  max-width:100%!important;
}


.trbook3-widget iframe{
  display:block!important;

  width:100%!important;
  max-width:100%!important;

  margin:0!important;

  border:0!important;
}


/* ======================================================
   BENEFITS
====================================================== */

.trbook3-benefits{
  padding:0 0 90px;
}


.trbook3-benefits-head{
  max-width:690px;

  margin-bottom:34px;
}


html:has(main.trbook3-page)
#content
.trbook3-page
.trbook3-benefits-head
h2{
  color:#173329!important;
  -webkit-text-fill-color:#173329!important;

  font-size:clamp(39px,3.6vw,52px)!important;
  line-height:1.05!important;
}


.trbook3-benefit-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:16px;
}


.trbook3-benefit{
  display:flex;

  flex-direction:column;

  min-height:270px;

  padding:30px;

  background:#E8EADC;

  border:1px solid #D1D3C5;
  border-radius:20px;
}


.trbook3-benefit:nth-child(2){
  background:#FAF8F1;

  border-color:#DDD9CC;
}


.trbook3-benefit-dark{
  background:#173329;

  border-color:#173329;
}


.trbook3-icon{
  display:flex;

  align-items:center;
  justify-content:center;

  flex:0 0 44px;

  width:44px;
  height:44px;

  margin-bottom:auto;

  border:1px solid #B79A62;
  border-radius:50%;
}


.trbook3-icon svg{
  width:20px;
  height:20px;

  fill:none;

  stroke:#9E8352;

  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}


html:has(main.trbook3-page)
#content
.trbook3-page
.trbook3-benefit
h3{
  margin-top:44px!important;

  color:#173329!important;
  -webkit-text-fill-color:#173329!important;

  font-size:21px!important;
  line-height:1.25!important;
}


.trbook3-benefit p{
  max-width:330px;

  margin-top:11px!important;

  color:#62675F;

  font-size:14.5px;
  line-height:1.65;
}


.trbook3-benefit-dark
.trbook3-icon{
  border-color:rgba(216,190,134,.7);
}


.trbook3-benefit-dark
.trbook3-icon svg{
  stroke:#D8BE86;
}


html:has(main.trbook3-page)
#content
.trbook3-page
.trbook3-benefit-dark
h3{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}


.trbook3-benefit-dark p{
  color:rgba(255,255,255,.72)!important;
}


/* ======================================================
   STAYS
====================================================== */

.trbook3-stays{
  padding:0 0 90px;
}


.trbook3-section-head{
  display:grid!important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(320px,.58fr)!important;

  gap:70px!important;

  align-items:end!important;

  margin:0 0 34px!important;
}


html:has(main.trbook3-page)
#content
.trbook3-page
.trbook3-section-head
h2{
  color:#173329!important;
  -webkit-text-fill-color:#173329!important;

  font-size:clamp(40px,3.7vw,54px)!important;
  line-height:1.05!important;
}


.trbook3-section-head > p{
  max-width:450px!important;

  color:#62675F!important;

  font-size:15.5px!important;
  line-height:1.68!important;
}


.trbook3-stay-grid{
  display:grid!important;

  grid-template-columns:
    repeat(2,minmax(0,1fr))!important;

  gap:16px!important;

  width:100%!important;
}


.trbook3-stay-card{
  position:relative!important;

  display:block!important;

  width:100%!important;
  min-width:0!important;
  height:430px!important;

  margin:0!important;
  padding:0!important;

  overflow:hidden!important;

  background:#173329!important;

  border-radius:22px!important;
}


.trbook3-stay-card > img{
  position:absolute!important;

  inset:0!important;

  width:100%!important;
  height:100%!important;

  max-width:none!important;

  object-fit:cover!important;
  object-position:center!important;

  transition:transform .45s ease!important;
}


.trbook3-stay-card:hover > img{
  transform:scale(1.025)!important;
}


.trbook3-stay-overlay{
  position:absolute!important;

  inset:0!important;

  z-index:1!important;

  background:
    linear-gradient(
      0deg,
      rgba(6,16,12,.92) 0%,
      rgba(6,16,12,.62) 35%,
      rgba(6,16,12,.20) 62%,
      rgba(6,16,12,.02) 100%
    )!important;
}


.trbook3-stay-copy{
  position:absolute!important;

  left:34px!important;
  right:34px!important;
  bottom:32px!important;

  z-index:2!important;

  width:auto!important;

  margin:0!important;
  padding:0!important;

  pointer-events:none!important;
}


.trbook3-stay-copy > span{
  display:block!important;

  margin:0 0 8px!important;

  color:#D4B978!important;

  font-family:"Sora",Arial,sans-serif!important;

  font-size:9px!important;
  line-height:1.3!important;

  font-weight:600!important;

  letter-spacing:.15em!important;

  text-transform:uppercase!important;
}


html:has(main.trbook3-page)
#content
.trbook3-page
.trbook3-stay-copy
h3{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;

  font-size:32px!important;
  line-height:1.08!important;
}


.trbook3-stay-copy p{
  max-width:430px!important;

  margin:10px 0 0!important;

  color:rgba(255,255,255,.82)!important;
  -webkit-text-fill-color:rgba(255,255,255,.82)!important;

  font-size:15px!important;
  line-height:1.6!important;
}


.trbook3-stay-copy strong{
  display:inline-block!important;

  margin-top:18px!important;

  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;

  font-family:"Sora",Arial,sans-serif!important;

  font-size:11px!important;

  font-weight:600!important;
}


.trbook3-stay-hit{
  position:absolute!important;

  inset:0!important;

  z-index:3!important;

  display:block!important;

  width:100%!important;
  height:100%!important;

  margin:0!important;
  padding:0!important;

  background:transparent!important;

  text-decoration:none!important;
}


/* ======================================================
   HELP CTA
====================================================== */

.trbook3-help{
  padding:0 0 40px;
}


.trbook3-help-box{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(320px,.72fr);

  gap:60px;

  align-items:center;

  padding:48px;

  background:#E8EADC;

  border:1px solid #D1D3C5;
  border-radius:22px;
}


html:has(main.trbook3-page)
#content
.trbook3-page
.trbook3-help-box
h2{
  max-width:660px;

  color:#173329!important;
  -webkit-text-fill-color:#173329!important;

  font-size:clamp(36px,3.3vw,48px)!important;
  line-height:1.06!important;
}


.trbook3-help-side{
  max-width:500px;

  justify-self:end;
}


.trbook3-help-side > p{
  color:#5D625C;

  font-size:15.5px;
  line-height:1.65;
}


.trbook3-help-actions{
  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:20px;
}


.trbook3-btn{
  display:inline-flex!important;

  align-items:center!important;
  justify-content:center!important;

  min-height:49px;

  padding:0 23px!important;

  border:1px solid transparent;
  border-radius:999px;

  font-family:"Sora",Arial,sans-serif!important;

  font-size:12px;

  font-weight:600;

  text-decoration:none!important;
}


.trbook3-btn-dark{
  background:#173329!important;

  border-color:#173329!important;

  color:#FFFFFF!important;
}


.trbook3-btn-outline{
  background:transparent!important;

  border-color:#173329!important;

  color:#173329!important;
}


/* ======================================================
   TABLET
====================================================== */

@media(max-width:1000px){

  .trbook3-inner{
    width:calc(100% - 64px);
  }


  .trbook3-hero{
    width:calc(100% - 32px);
  }


  .trbook3-hero-inner{
    width:calc(100% - 64px);
  }


  .trbook3-search-head,
  .trbook3-section-head{
    gap:42px!important;
  }


  .trbook3-benefit{
    padding:26px;
  }


  .trbook3-stay-card{
    height:390px!important;
  }

}


/* ======================================================
   MOBILE
====================================================== */

@media(max-width:760px){

  .trbook3-inner{
    width:calc(100% - 40px);
  }


  /* HERO */

  .trbook3-hero{
    width:calc(100% - 20px);

    height:530px;

    margin-top:10px;

    border-radius:22px;
  }


  .trbook3-hero-inner{
    width:calc(100% - 48px);
  }


  .trbook3-hero-overlay{
    background:
      linear-gradient(
        0deg,
        rgba(7,18,14,.96) 0%,
        rgba(7,18,14,.74) 53%,
        rgba(7,18,14,.22) 80%,
        rgba(7,18,14,.03) 100%
      );
  }


  .trbook3-hero-copy{
    bottom:112px;

    width:100%;
  }


  html:has(main.trbook3-page)
  #content
  .trbook3-page
  .trbook3-hero
  h1{
    font-size:39px!important;
  }


  .trbook3-hero-copy > p{
    font-size:15.5px;
  }


  /* SEARCH */

  .trbook3-search{
    margin-top:-72px;

    padding-bottom:60px;
  }


  .trbook3-search-card{
    padding:24px 18px;

    border-radius:20px;
  }


  .trbook3-search-head{
    grid-template-columns:1fr!important;

    gap:13px!important;

    margin-bottom:20px;
  }


  html:has(main.trbook3-page)
  #content
  .trbook3-page
  .trbook3-search-head
  h2{
    font-size:32px!important;
  }


  .trbook3-widget{
    padding:10px;
  }


  /* BENEFITS */

  .trbook3-benefits{
    padding-bottom:60px;
  }


  .trbook3-benefits-head{
    margin-bottom:27px;
  }


  html:has(main.trbook3-page)
  #content
  .trbook3-page
  .trbook3-benefits-head
  h2{
    font-size:36px!important;
  }


  .trbook3-benefit-grid{
    grid-template-columns:1fr;

    gap:12px;
  }


  .trbook3-benefit{
    min-height:220px;
  }


  /* STAYS */

  .trbook3-stays{
    padding-bottom:60px;
  }


  .trbook3-section-head{
    grid-template-columns:1fr!important;

    gap:17px!important;
  }


  html:has(main.trbook3-page)
  #content
  .trbook3-page
  .trbook3-section-head
  h2{
    font-size:36px!important;
  }


  .trbook3-stay-grid{
    grid-template-columns:1fr!important;

    gap:12px!important;
  }


  .trbook3-stay-card{
    height:340px!important;
  }


  .trbook3-stay-copy{
    left:24px!important;
    right:24px!important;
    bottom:24px!important;
  }


  html:has(main.trbook3-page)
  #content
  .trbook3-page
  .trbook3-stay-copy
  h3{
    font-size:28px!important;
  }


  /* HELP */

  .trbook3-help{
    padding-bottom:20px;
  }


  .trbook3-help-box{
    grid-template-columns:1fr;

    gap:23px;

    padding:31px 24px;

    border-radius:18px;
  }


  .trbook3-help-side{
    max-width:none;

    justify-self:start;
  }


  html:has(main.trbook3-page)
  #content
  .trbook3-page
  .trbook3-help-box
  h2{
    font-size:34px!important;
  }

}


/* ======================================================
   SMALL MOBILE
====================================================== */

@media(max-width:480px){

  .trbook3-inner{
    width:calc(100% - 28px);
  }


  .trbook3-hero{
    height:550px;
  }


  .trbook3-hero-inner{
    width:calc(100% - 40px);
  }


  html:has(main.trbook3-page)
  #content
  .trbook3-page
  .trbook3-hero
  h1{
    font-size:35px!important;
  }


  .trbook3-search-card{
    padding:20px 14px;
  }


  .trbook3-stay-card{
    height:300px!important;
  }


  .trbook3-help-actions{
    flex-direction:column;
  }


  .trbook3-help-actions
  .trbook3-btn{
    width:100%!important;
  }

}