/* =========================================================
   PARADISE ESCAPE
   RATES & AVAILABILITY
   FINAL CLIENT-APPROVED PAGE CSS
========================================================= */

:root{
  --pe-black:#111210;
  --pe-charcoal:#191A17;
  --pe-charcoal-2:#20211D;
  --pe-gold:#B79A62;
  --pe-gold-dark:#9E8352;
  --pe-gold-soft:#CDB886;
  --pe-ivory:#F4F0E7;
  --pe-muted:#B9B4AA;
  --pe-line:rgba(183,154,98,.20);
}


/* =========================================================
   OWNERREZ NATIVE PAGE WRAPPER
   THIS PAGE ONLY
========================================================= */

html:has(.pe-rates-page) body{
  background:var(--pe-black)!important;
  color:var(--pe-ivory)!important;
}

html:has(.pe-rates-page) #content.container{
  width:100%!important;
  max-width:1280px!important;

  margin:0 auto!important;

  padding:
    96px
    28px
    72px!important;

  background:var(--pe-black)!important;
}

html:has(.pe-rates-page) #content .body-content{
  background:var(--pe-black)!important;
  color:var(--pe-ivory)!important;
}


/* native title */

html:has(.pe-rates-page) #content h1.page-header{
  margin:0 0 7px!important;
  padding:0!important;

  border:0!important;

  color:var(--pe-ivory)!important;

  font-family:"Marcellus",Georgia,serif!important;

  font-size:48px!important;
  line-height:1.05!important;
  font-weight:400!important;

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


/* native lead */

html:has(.pe-rates-page) #content h1.page-header + p,
html:has(.pe-rates-page) #content h1.page-header + .lead{
  margin:0 0 28px!important;

  color:rgba(244,240,231,.65)!important;

  font-family:"Alone Kaium","Open Sans",sans-serif!important;

  font-size:17px!important;
  line-height:1.55!important;
}


/* remove light inherited canvas */

html:has(.pe-rates-page) #content,
html:has(.pe-rates-page) #content .row,
html:has(.pe-rates-page) #content [class*="col-"]{
  background-color:transparent!important;
}


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

.pe-rates-page{
  width:100%;

  margin:0;

  padding:
    0
    0
    24px;

  background:var(--pe-black);

  color:var(--pe-ivory);

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

.pe-rates-page *,
.pe-rates-page *::before,
.pe-rates-page *::after{
  box-sizing:border-box;
}

.pe-rates-page h2,
.pe-rates-page h3{
  margin-top:0;

  color:var(--pe-ivory);

  font-family:"Marcellus",Georgia,serif;

  font-weight:400;
}

.pe-rates-page p{
  margin-top:0;

  color:var(--pe-muted);

  font-size:17px;
  line-height:1.68;
}

.pe-rates-kicker{
  display:block;

  margin-bottom:13px;

  color:var(--pe-gold-soft);

  font-size:11px;
  line-height:1.2;
  font-weight:500;

  letter-spacing:.18em;
}


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

.pe-rates-hero{
  position:relative;

  min-height:520px;

  overflow:hidden;

  border:
    1px solid rgba(183,154,98,.18);

  border-radius:18px;
}

.pe-rates-hero-media,
.pe-rates-hero-media img{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;
}

.pe-rates-hero-media img{
  object-fit:cover;
  object-position:center;
}

.pe-rates-hero-overlay{
  position:absolute;

  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(17,18,16,.94) 0%,
      rgba(17,18,16,.74) 42%,
      rgba(17,18,16,.23) 76%,
      rgba(17,18,16,.10) 100%
    );
}

.pe-rates-hero-content{
  position:relative;

  z-index:2;

  width:min(610px,72%);

  padding:
    100px
    64px
    82px;
}

.pe-rates-hero-content h2{
  max-width:560px;

  margin-bottom:19px;

  font-size:clamp(48px,5vw,68px);
  line-height:1.02;

  letter-spacing:-.025em;
}

.pe-rates-hero-content p{
  max-width:540px;

  margin-bottom:29px;

  color:rgba(244,240,231,.79);

  font-size:18px;
}


/* =========================================================
   BUTTONS
========================================================= */

.pe-rates-primary-btn,
.pe-rates-secondary-btn{
  display:inline-flex;

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

  min-height:48px;

  padding:0 23px;

  border-radius:7px;

  font-size:14px;
  font-weight:500;

  text-decoration:none!important;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease;
}

.pe-rates-primary-btn{
  background:var(--pe-gold);

  border:1px solid var(--pe-gold);

  color:var(--pe-black)!important;
}

.pe-rates-primary-btn:hover{
  background:var(--pe-gold-dark);

  border-color:var(--pe-gold-dark);

  color:var(--pe-black)!important;
}

.pe-rates-secondary-btn{
  background:rgba(17,18,16,.42);

  border:
    1px solid rgba(244,240,231,.34);

  color:var(--pe-ivory)!important;
}

.pe-rates-secondary-btn:hover{
  background:var(--pe-ivory);

  border-color:var(--pe-ivory);

  color:var(--pe-black)!important;
}


/* =========================================================
   INTRO
========================================================= */

.pe-rates-intro{
  display:grid;

  grid-template-columns:
    minmax(0,.9fr)
    minmax(0,1.1fr);

  gap:56px;

  padding:
    76px
    18px
    68px;
}

.pe-rates-intro-heading h2{
  max-width:460px;

  margin-bottom:0;

  font-size:clamp(38px,4vw,52px);
  line-height:1.06;
}

.pe-rates-intro-copy{
  max-width:630px;
}

.pe-rates-intro-copy p{
  font-size:16px;
}

.pe-rates-intro-copy p:last-child{
  margin-bottom:0;
}


/* =========================================================
   CALENDAR
========================================================= */

.pe-rates-calendar-section{
  padding:
    46px
    36px
    36px;

  background:#171815;

  border:
    1px solid rgba(183,154,98,.20);

  border-radius:18px;
}

.pe-rates-calendar-head{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(240px,.5fr);

  align-items:end;

  gap:42px;

  margin-bottom:25px;
}

.pe-rates-calendar-head h2{
  margin-bottom:0;

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

.pe-rates-calendar-head p{
  margin-bottom:3px;

  color:rgba(244,240,231,.62);

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


/* Widget outer frame */

.pe-rates-calendar-card{
  width:100%;

  padding:18px;

  overflow:hidden;

  background:var(--pe-black);

  border:
    1px solid rgba(183,154,98,.16);

  border-radius:13px;
}

.pe-rates-calendar-card .ownerrez-widget{
  display:block;

  width:100%;
  max-width:100%;
}


/* =========================================================
   STEPS
========================================================= */

.pe-rates-info{
  display:grid;

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

  gap:14px;

  padding:
    58px
    0
    62px;
}

.pe-rates-info-card{
  min-height:225px;

  padding:
    25px
    25px
    27px;

  background:#171815;

  border:
    1px solid rgba(183,154,98,.17);

  border-radius:13px;
}

.pe-rates-number{
  display:block;

  margin-bottom:38px;

  color:var(--pe-gold);

  font-size:11px;

  letter-spacing:.12em;
}

.pe-rates-info-card h3{
  margin-bottom:12px;

  font-size:26px;
  line-height:1.1;
}

.pe-rates-info-card p{
  margin-bottom:0;

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


/* =========================================================
   BEFORE YOU BOOK
========================================================= */

.pe-rates-booking-note{
  display:grid;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(300px,.85fr);

  gap:60px;

  padding:
    54px
    18px
    72px;
}

.pe-rates-booking-note-copy{
  max-width:640px;
}

.pe-rates-booking-note h2{
  margin-bottom:21px;

  font-size:clamp(38px,4vw,50px);
  line-height:1.06;
}

.pe-rates-booking-note-copy p{
  font-size:16px;
}

.pe-rates-booking-links{
  display:flex;

  flex-direction:column;

  justify-content:center;

  gap:12px;
}

.pe-rates-link-card{
  display:grid;

  grid-template-columns:
    1fr auto;

  align-items:end;

  gap:5px 18px;

  padding:
    19px
    21px;

  background:#171815;

  border:
    1px solid rgba(183,154,98,.18);

  border-radius:10px;

  color:var(--pe-ivory)!important;

  text-decoration:none!important;

  transition:border-color .18s ease;
}

.pe-rates-link-card:hover{
  border-color:
    rgba(183,154,98,.46);
}

.pe-rates-link-card span{
  grid-column:1;

  color:var(--pe-muted);

  font-size:10px;

  letter-spacing:.10em;

  text-transform:uppercase;
}

.pe-rates-link-card strong{
  grid-column:1;

  color:var(--pe-ivory);

  font-family:"Marcellus",Georgia,serif;

  font-size:21px;

  font-weight:400;
}

.pe-rates-link-card i{
  grid-column:2;
  grid-row:1 / span 2;

  align-self:center;

  color:var(--pe-gold-soft);

  font-size:20px;

  font-style:normal;
}


/* =========================================================
   FINAL CTA
========================================================= */

.pe-rates-final-cta{
  position:relative;

  min-height:410px;

  overflow:hidden;

  border:
    1px solid rgba(183,154,98,.18);

  border-radius:18px;
}

.pe-rates-final-image,
.pe-rates-final-image img{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;
}

.pe-rates-final-image img{
  object-fit:cover;
  object-position:center;
}

.pe-rates-final-overlay{
  position:absolute;

  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(17,18,16,.93),
      rgba(17,18,16,.64) 52%,
      rgba(17,18,16,.18)
    );
}

.pe-rates-final-content{
  position:relative;

  z-index:2;

  max-width:620px;

  padding:
    70px
    60px;
}

.pe-rates-final-content h2{
  max-width:520px;

  margin-bottom:17px;

  font-size:clamp(40px,4.4vw,56px);
  line-height:1.03;
}

.pe-rates-final-content p{
  max-width:490px;

  margin-bottom:26px;

  color:rgba(244,240,231,.76);

  font-size:16px;
}

.pe-rates-final-actions{
  display:flex;

  flex-wrap:wrap;

  gap:10px;
}


/* =========================================================
   FOOTER BREATHING
========================================================= */

html:has(.pe-rates-page) #content .body-content{
  padding-bottom:64px!important;
}


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

@media(max-width:991px){

  html:has(.pe-rates-page) #content.container{
    padding:
      88px
      22px
      64px!important;
  }

  .pe-rates-hero-content{
    width:min(650px,82%);

    padding:
      84px
      48px
      72px;
  }

  .pe-rates-intro,
  .pe-rates-booking-note{
    gap:42px;
  }

  .pe-rates-calendar-section{
    padding:
      40px
      26px
      30px;
  }

}


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

@media(max-width:767px){

  html:has(.pe-rates-page) #content.container{
    padding:
      86px
      16px
      50px!important;
  }

  html:has(.pe-rates-page) #content h1.page-header{
    font-size:36px!important;
  }

  html:has(.pe-rates-page) #content h1.page-header + p,
  html:has(.pe-rates-page) #content h1.page-header + .lead{
    margin-bottom:20px!important;

    font-size:15px!important;
  }


  /* hero */

  .pe-rates-hero{
    min-height:500px;

    border-radius:14px;
  }

  .pe-rates-hero-overlay{
    background:
      linear-gradient(
        0deg,
        rgba(17,18,16,.96) 0%,
        rgba(17,18,16,.68) 62%,
        rgba(17,18,16,.28) 100%
      );
  }

  .pe-rates-hero-content{
    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    width:100%;

    min-height:500px;

    padding:
      36px
      24px;
  }

  .pe-rates-hero-content h2{
    font-size:42px;
  }

  .pe-rates-hero-content p{
    font-size:16px;
  }

  .pe-rates-hero .pe-rates-kicker{
    color:#E4CF98!important;
    font-weight:600;
    text-shadow:0 2px 10px rgba(0,0,0,.88);
  }


  /* intro */

  .pe-rates-intro{
    grid-template-columns:1fr;

    gap:23px;

    padding:
      54px
      4px;
  }

  .pe-rates-intro-heading h2{
    font-size:37px;
  }


  /* calendar */

  .pe-rates-calendar-section{
    padding:
      28px
      14px
      22px;

    border-radius:14px;
  }

  .pe-rates-calendar-head{
    grid-template-columns:1fr;

    gap:10px;

    margin-bottom:20px;
  }

  .pe-rates-calendar-head h2{
    font-size:35px;
  }

  .pe-rates-calendar-card{
    padding:7px;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;
  }


  /* info */

  .pe-rates-info{
    grid-template-columns:1fr;

    gap:10px;

    padding:
      46px
      0
      50px;
  }

  .pe-rates-info-card{
    min-height:0;

    padding:
      23px
      21px;
  }

  .pe-rates-number{
    margin-bottom:28px;
  }


  /* booking note */

  .pe-rates-booking-note{
    grid-template-columns:1fr;

    gap:30px;

    padding:
      44px
      4px
      54px;
  }

  .pe-rates-booking-note h2{
    font-size:37px;
  }


  /* CTA */

  .pe-rates-final-cta{
    min-height:450px;

    border-radius:14px;
  }

  .pe-rates-final-overlay{
    background:
      linear-gradient(
        0deg,
        rgba(17,18,16,.96),
        rgba(17,18,16,.52)
      );
  }

  .pe-rates-final-content{
    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    min-height:450px;

    padding:
      34px
      23px;
  }

  .pe-rates-final-content h2{
    font-size:39px;
  }

}


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

@media(max-width:480px){

  .pe-rates-primary-btn,
  .pe-rates-secondary-btn{
    width:100%;
  }

}

/* =========================================================
   RATES PAGE MOBILE FINAL POLISH
========================================================= */

@media (max-width: 767px){

  /* ---------------------------------
     HERO
  ---------------------------------- */

  .pe-rates-hero{
    min-height:620px !important;
    height:auto !important;
    display:flex !important;
    align-items:flex-end !important;
    overflow:hidden !important;
    border-radius:16px !important;
    position:relative !important;
    background:#111210 !important;
  }

  .pe-rates-hero-media{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
  }

  .pe-rates-hero-media img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }

  .pe-rates-hero-overlay{
    position:absolute !important;
    inset:0 !important;
    background:
      linear-gradient(
        to bottom,
        rgba(17,18,16,.12) 0%,
        rgba(17,18,16,.30) 38%,
        rgba(17,18,16,.82) 72%,
        rgba(17,18,16,.96) 100%
      ) !important;
  }

  .pe-rates-hero-content{
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    max-width:none !important;
    padding:34px 26px 30px !important;
    margin:0 !important;
  }

  .pe-rates-hero-content h2{
    font-size:52px !important;
    line-height:1.02 !important;
    margin:12px 0 22px !important;
  }

  .pe-rates-hero-content p{
    font-size:20px !important;
    line-height:1.65 !important;
    margin:0 0 28px !important;
    max-width:none !important;
  }

  .pe-rates-hero .pe-rates-primary-btn{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:58px !important;
  }


  /* ---------------------------------
     AVAILABILITY
  ---------------------------------- */

  .pe-rates-calendar-section{
    padding:30px 16px 24px !important;
  }

  .pe-rates-calendar-head{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .pe-rates-calendar-head h2{
    font-size:48px !important;
    line-height:1.04 !important;
  }

  .pe-rates-calendar-head p{
    font-size:18px !important;
    line-height:1.55 !important;
  }

  .pe-rates-calendar-card{
    padding:12px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }



  /* ---------------------------------
     FINAL CTA
  ---------------------------------- */

  .pe-rates-final-cta{
    min-height:560px !important;
    height:auto !important;
    position:relative !important;
    display:flex !important;
    align-items:flex-end !important;
    overflow:hidden !important;
    border-radius:16px !important;
    background:#111210 !important;
  }

  .pe-rates-final-image{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
  }

  .pe-rates-final-image img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }

  .pe-rates-final-overlay{
    position:absolute !important;
    inset:0 !important;
    background:
      linear-gradient(
        to bottom,
        rgba(17,18,16,.20) 0%,
        rgba(17,18,16,.40) 40%,
        rgba(17,18,16,.86) 76%,
        rgba(17,18,16,.97) 100%
      ) !important;
  }

  .pe-rates-final-content{
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    max-width:none !important;
    padding:34px 26px 30px !important;
    margin:0 !important;
  }

  .pe-rates-final-content h2{
    font-size:48px !important;
    line-height:1.03 !important;
    margin:12px 0 20px !important;
  }

  .pe-rates-final-content p{
    font-size:19px !important;
    line-height:1.6 !important;
    margin-bottom:26px !important;
  }

  .pe-rates-final-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
  }

  .pe-rates-final-actions a{
    width:100% !important;
    min-height:56px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:14px 12px !important;
  }

}


@media (max-width: 480px){

  .pe-rates-hero-content h2{
    font-size:46px !important;
  }

  .pe-rates-calendar-head h2{
    font-size:43px !important;
  }

  .pe-rates-final-content h2{
    font-size:44px !important;
  }

  .pe-rates-final-actions{
    grid-template-columns:1fr !important;
  }

}