/* =========================================================================
   Vasilikos Blue Villa — custom one-page styles
   Sits on top of the Hotel Petra theme (style.css).
   Brand palette from the logo: navy #00213c + antique gold #c29a4d.
   ========================================================================= */

:root{
  --accent:#c29a4d;   /* antique gold (logo) */
  --gold:#c29a4d;
  --navy:#00213c;     /* deep navy (logo) */
  --steel:#3d5b6f;    /* muted steel-blue (logo wave) */
  --sand:#e5d4b2;     /* pale sand-gold (logo) */
  --soft:#f7f4ee;     /* warm off-white section bg */
}

html{ scroll-behavior:smooth; }

/* -------------------------------------------------------------------------
   FULL-SCREEN LOADER
   ------------------------------------------------------------------------- */
#vb-loader{
  position:fixed; inset:0; z-index:9999999; background:#00213c;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
#vb-loader.vb-hide{ opacity:0; visibility:hidden; }
.vb-loader-inner{ text-align:center; }
.vb-loader-logo{ width:230px; max-width:62vw; height:auto; display:block; margin:0 auto 28px; animation:vbFadeIn .8s ease both; }
.vb-spinner{
  display:inline-block; width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(229,212,178,.25); border-top-color:var(--gold);
  animation:vbSpin .8s linear infinite;
}
@keyframes vbSpin{ to{ transform:rotate(360deg); } }
@keyframes vbFadeIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* remove ALL box shadows site-wide (theme + custom) */
*, *::before, *::after{ box-shadow:none !important; }

/* primary button — navy fill (high contrast), gold on hover */
.btn-accent{
  background:var(--navy); color:#fff !important; border:1px solid var(--navy) !important;
  padding:14px 34px; border-radius:3px; text-transform:uppercase; font-size:13px; letter-spacing:.5px;
  display:inline-block; cursor:pointer; transition:background .25s,border-color .25s,color .25s;
}
.btn-accent:hover{ background:var(--gold); border-color:var(--gold) !important; color:#00213c !important; }
/* keep anchored sections clear of the sticky nav */
#about,#rooms,#amenities,#gallery,#location,#contact{ scroll-margin-top:90px; }

/* keep top-bar contact info left-aligned & compact so it clears the centred logo badge
   (theme makes the list flex/space-between, which pushed the email under the badge) */
#header .header-top .contact-info{ justify-content:flex-start; gap:20px; }
#header .header-top .contact-info li span{ font-size:11px; text-transform:none; letter-spacing:0; }
#header .header-top .contact-info li{ padding:0; }
#header .header-top .contact-info li:first-child{ padding:0; }

/* -------------------------------------------------------------------------
   STICKY HEADER (theme header is absolute; make the nav follow on scroll)
   ------------------------------------------------------------------------- */
#header.sticky{
  position:fixed; top:0; left:0; right:0;
  background:#fff;
  animation:vbSlideDown .45s ease;
}
#header.sticky .header-top{ display:none; }
#header.sticky .header-navi{ background:#fff; }
@keyframes vbSlideDown{ from{transform:translateY(-100%);} to{transform:translateY(0);} }

/* keep the floating logo badge pinned to the sticky nav instead of scrolling away
   (it's positioned absolute against the page, not inside #header) */
.header-logo.sticky{
  position:fixed; top:0; left:50%; margin-left:-45px;
  animation:vbSlideDown .45s ease;
}
.header-logo.sticky .header-logo-inner{ width:90px; height:90px; }
.header-logo.sticky .header-logo-inner img{ max-width:100px; }
@media (max-width:992px){
  .header-logo.sticky{ top:0; }
}

/* -------------------------------------------------------------------------
   MOBILE HEADER TOGGLE — pin the hamburger bar to the top of the screen
   ------------------------------------------------------------------------- */
@media (max-width:992px){
  #header-toggle{
    position:fixed; top:0; left:0; right:0;
    background:#fff; z-index:10000000;
  }
  #banner{ padding-top:40px; }
}

/* booking pill in the nav — gold pill with navy text */
.nav-book a{
  margin-left:6px; padding:11px 20px !important; border-radius:30px;
  background:var(--gold); color:#fff !important; text-transform:uppercase; font-weight:700;
  font-size:12px; letter-spacing:.5px; height:auto !important; line-height:1 !important;
  white-space:nowrap; transition:background .25s,color .25s;
}
.nav-book a:hover{ background:var(--navy); color:#fff !important; }
/* vertically centre the booking pill in the flex nav row */
.nav-book{ display:flex; align-items:center; align-self:center; }
/* tighten desktop nav so the right group + pill sit on one line, centered */
@media (min-width:993px){
  #header .header-navi .navbar-nav > li{ vertical-align:middle; outline: none; }
  #header .header-navi .navbar-nav li a{ padding-right:26px; }
  #header .header-navi .navbar-nav.pull-right li:last-child a{ padding-right:0; }
}

/* -------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */
#banner .banner-bg .banner-bg-item{ position:relative; }
/* owl1 fade transition for a seamless hero loop (not in bundled owl.carousel.css) */
.owl-origin{ -webkit-perspective:1200px; perspective:1200px; }
.owl-fade-out{ z-index:0 !important; -webkit-animation:owlFadeOut .9s both ease; animation:owlFadeOut .9s both ease; }
.owl-fade-in{ z-index:1 !important; -webkit-animation:owlFadeIn .9s both ease; animation:owlFadeIn .9s both ease; }
@-webkit-keyframes owlFadeOut{ 0%{opacity:1} 100%{opacity:0} }
@keyframes owlFadeOut{ 0%{opacity:1} 100%{opacity:0} }
@-webkit-keyframes owlFadeIn{ 0%{opacity:0} 100%{opacity:1} }
@keyframes owlFadeIn{ 0%{opacity:0} 100%{opacity:1} }
#banner .banner-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.45));
}
#banner .css-table{ z-index:5; }
#banner .hero-heading{ padding-top:120px; text-align:center; color:#fff; }
#banner .hero-heading .eyebrow{
  display:inline-block; margin-bottom:18px; padding:8px 20px;
  border:1px solid rgba(255,255,255,.6); border-radius:30px;
  text-transform:uppercase; letter-spacing:3px; font-size:12px;
}
#banner .hero-heading h1{
  margin:0 0 18px; color:#fff; font-size:62px; line-height:1.08;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
#banner .hero-heading p.lead{
  max-width:680px; margin:0 auto 30px; color:rgba(255,255,255,.92);
  font-size:19px;     font-family: 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (max-width:768px){ #banner .hero-heading h1{ font-size:38px; } #banner .hero-heading{ padding-top:90px; } }

/* booking bar */
#banner .booking-bar{ margin-top:14px; text-align:center; }
.booking-bar .default-form{
  display:inline-block; padding:10px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.35); border-radius:6px; backdrop-filter:blur(3px);
}
.booking-bar .default-form > span{ float:left; margin:0 5px; position:relative; }
/* compact fields, all the same size and look */
.booking-bar .calendar input,
.booking-bar .select-box .value-holder{
  width:140px; height:40px; box-sizing:border-box;
  padding:8px 30px 8px 12px; margin:0;
  background:#fff; border:1px solid #fff; border-radius:3px;
  color:#333; font-size:13px; line-height:24px; cursor:pointer;
}
/* the select-box is just the positioning wrapper — not a second white box */
.booking-bar .select-box{ width:140px; height:40px; position:relative; padding:0; margin:0 5px; background:none; border:none; vertical-align:top; }
.booking-bar .select-box .value-holder{ width:100%; }
.booking-bar .select-box select{ display:none; }
/* calendar icon inside the input */
.booking-bar .calendar{ position:relative; }
.booking-bar .calendar .fa{
  position:absolute; right:11px; top:50%; transform:translateY(-50%);
  color:var(--gold); font-size:14px; pointer-events:none; z-index:2;
}
.booking-bar .select-box .arrow-down{ color:var(--gold); top:50%; transform:translateY(-50%); }
.booking-bar .submit-btn{ display:inline-block; }
.booking-bar .submit-btn .btn{ height:40px; padding:0 22px; line-height:38px; }
@media (max-width:768px){
  .booking-bar .default-form > span{ float:none; display:block; margin:0 0 10px; }
  .booking-bar .calendar input,
  .booking-bar .select-box,
  .booking-bar .select-box .value-holder{ width:240px; }
}

/* custom select dropdown (theme's display:none is scoped to #hero-tabs only) */
.select-box{ position:relative; }
.select-box .select-clone{
  position:absolute; left:0; right:0; top:100%; display:none; z-index:99;
  list-style:none; margin:0; padding:0; background:#fff; border:1px solid #e4e4e4;
}
.select-box .select-clone li{
  padding:12px 15px; display:block; border-bottom:1px solid #ededed; cursor:pointer;
  color:#333; font-size:13px; text-align:left; text-transform:none;
}
.select-box .select-clone li:hover{ background:var(--navy); color:#fff; }
.select-box .arrow-down{ position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#999; pointer-events:none; }

/* -------------------------------------------------------------------------
   GENERAL SECTION HELPERS
   ------------------------------------------------------------------------- */
.section-pad{ padding:95px 0; }
.section-soft{ background:var(--soft); }
.preamble p{ max-width:760px; margin-left:auto; margin-right:auto; }
.lead-intro{ font-size:17px; line-height:1.9; color:#333; }

/* highlights / info list */
.villa-stats{ margin:25px 0 0; }
.villa-stats .stat{ text-align:center; padding:18px 0; }
.villa-stats .stat .num{ font-size:38px; font-weight:700; color:var(--accent); font-family:'Montserrat',sans-serif; line-height:1; }
.villa-stats .stat .lbl{ display:block; margin-top:8px; text-transform:uppercase; letter-spacing:1px; font-size:12px; color:#888; }

.check-list{ list-style:none; padding:0; margin:0; }
.check-list li{ padding:9px 0 9px 30px; position:relative; color:#555; border-bottom:1px solid #eee; }
.check-list li:before{
  content:"\f00c"; font-family:FontAwesome; position:absolute; left:0; top:9px;
  color:var(--accent); font-size:13px;
}
.info-figure img{ width:100%; border-radius:4px; }

/* feature card image height tidy */
.about .feature .overlay img{ width:100%; height:230px; object-fit:cover; }
.about .feature h4{ color:var(--navy); font-size:17px; }
.about .feature p{ font-size:14px; color:#888; }
.about .feature .icon-top{ font-size:30px; color:var(--accent); margin-bottom:6px; }

/* -------------------------------------------------------------------------
   PARALLAX CTA
   ------------------------------------------------------------------------- */
.cta-parallax{
  position:relative; padding:130px 0; text-align:center;
  background-size:cover; background-position:center; background-attachment:fixed;
}
.cta-parallax:before{ content:""; position:absolute; inset:0; background:rgb(0 0 0 / 31%); }
.cta-parallax .container{ position:relative; z-index:2; }
.cta-parallax h3{ color:#fff; font-size:34px; margin:0 0 14px; }
.cta-parallax p{ color:rgba(255,255,255,.9); max-width:620px; margin:0 auto 26px; font-size:17px; }
@media (max-width:768px){ .cta-parallax{ background-attachment:scroll; padding:90px 0; } }

/* -------------------------------------------------------------------------
   ROOMS (reuses #listing card styling; just spacing)
   ------------------------------------------------------------------------- */
#rooms #listing{ padding:0; background:transparent; }
#rooms .listing-room-grid{ margin-bottom:30px; background:#fff; border:1px solid #ececec; }
#rooms .listing-room-grid .thumbnail img{ height:240px; object-fit:cover; width:100%; }

/* -------------------------------------------------------------------------
   AMENITIES
   ------------------------------------------------------------------------- */
.amenity-block{ margin-bottom:20px; }
.amenity-block h4{
  color:var(--navy); text-transform:uppercase; font-size:15px; letter-spacing:1px;
  padding-bottom:14px; margin-bottom:6px; border-bottom:2px solid var(--accent); display:inline-block;
}
.facilities-list{ list-style:none; padding:0; margin:0; }
.facilities-list li{ padding:11px 0; color:#333;; font-size:17px; }
.facilities-list li i{ width:34px; color:var(--accent); font-size:16px; text-align:center; }

/* -------------------------------------------------------------------------
   GALLERY + LIGHTBOX
   ------------------------------------------------------------------------- */
.gallery-tabs{ text-align:center; margin-bottom:35px; }
.gallery-tabs button{
  margin:0 5px; padding:11px 30px; border:1px solid #ddd; background:#fff; cursor:pointer;
  text-transform:uppercase; font-size:12px; letter-spacing:1px; color:#666; transition:all .25s;
}
.gallery-tabs button.active,.gallery-tabs button:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:992px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
.gallery-grid a{ display:block; overflow:hidden; position:relative; border-radius:3px; }
.gallery-grid img{ width:100%; height:200px; object-fit:cover; display:block; transition:transform .5s ease; }
.gallery-grid a:hover img{ transform:scale(1.08); }
.gallery-grid a:after{
  content:"\f00e"; font-family:FontAwesome; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px;
  background:rgba(0,33,60,.55); opacity:0; transition:opacity .3s;
}
.gallery-grid a:hover:after{ opacity:1; }
.gallery-pane{ display:none; }
.gallery-pane.active{ display:block; }

#lightbox{
  position:fixed; inset:0; z-index:100000; display:none;
  background:rgba(0,0,0,.92); text-align:center;
}
#lightbox.open{ display:flex; align-items:center; justify-content:center; }
#lightbox img{ max-width:90%; max-height:86%; }
#lightbox .lb-close,#lightbox .lb-prev,#lightbox .lb-next{
  position:absolute; color:#fff; cursor:pointer; user-select:none;
  font-size:40px; opacity:.8; transition:opacity .2s;
}
#lightbox .lb-close:hover,#lightbox .lb-prev:hover,#lightbox .lb-next:hover{ opacity:1; }
#lightbox .lb-close{ top:20px; right:30px; font-size:34px; }
#lightbox .lb-prev{ left:25px; top:50%; transform:translateY(-50%); }
#lightbox .lb-next{ right:25px; top:50%; transform:translateY(-50%); }
#lightbox .lb-counter{ position:absolute; bottom:22px; left:0; right:0; color:#fff; font-size:15px; opacity:.7; }

/* -------------------------------------------------------------------------
   LOCATION
   ------------------------------------------------------------------------- */
.nearby-col h4{ color:var(--navy); text-transform:uppercase; font-size:15px; letter-spacing:1px; margin-bottom:18px; }
.nearby-col h4 i{ color:var(--accent); margin-right:8px; }
.nearby-list{ list-style:none; padding:0; margin:0 0 25px; }
.nearby-list li{ padding:9px 0; border-bottom:1px dashed #e0e0e0; color:#333; font-size:17px; }
.nearby-list li span{ float:right; color:var(--accent); font-weight:600; }
.location-map{ margin-top:15px; }
.location-map iframe{ width:100%; height:430px; border:0; display:block; filter:grayscale(.15); }

/* -------------------------------------------------------------------------
   CONTACT details sidebar
   ------------------------------------------------------------------------- */
.contact-details{ padding:10px 0; }
.contact-details li{ list-style:none; padding:14px 0; border-bottom:1px solid #eee; color:#555; }
.contact-details li i{ width:42px; height:42px; line-height:42px; text-align:center; border-radius:50%; background:var(--accent); color:#fff; margin-right:14px; }
.contact-social a{ width:40px; height:40px; line-height:40px; text-align:center; display:inline-block; border-radius:50%; background:#eef3f5; color:var(--accent); margin-right:8px; transition:all .25s; }
.contact-social a:hover{ background:var(--accent); color:#fff; }

/* -------------------------------------------------------------------------
   CONTACT FORM CARD (custom — not the theme's absolute .contact-box)
   ------------------------------------------------------------------------- */
.contact-wrap{ background:#fff; padding:38px; border:1px solid #ececec; }
.contact-wrap .default-form input,
.contact-wrap .default-form textarea{
  width:100%; margin-bottom:18px; padding:13px 15px; border:1px solid #dcdcdc;
  background:#fafafa; color:#333; font-size:15px;
}
.contact-wrap .default-form .select-box{ width:100%; margin-bottom:18px; }
.contact-wrap .default-form input:focus,
.contact-wrap .default-form textarea:focus{ border-color:var(--accent); outline:none; background:#fff; }
.contact-wrap .default-form textarea{ min-height:130px; resize:vertical; }
.contact-wrap .form-note{ font-size:13px; color:#999; margin-top:6px; }
.contact-wrap .btn{ border:none; cursor:pointer; }
.field-half{ width:48%; float:left; }
.field-half.right{ float:right; }
@media (max-width:600px){ .field-half,.field-half.right{ width:100%; float:none; } }

/* back to top */
#goTop{
  position:fixed; right:24px; bottom:24px; width:46px; height:46px; line-height:46px;
  text-align:center; background:var(--accent); color:#fff; border-radius:50%; cursor:pointer;
  opacity:0; visibility:hidden; transition:all .3s; z-index:9999;
}
#goTop.show{ opacity:1; visibility:visible; }
#goTop:hover{ background:var(--navy); }

/* footer anchor list */
#footer .widget-explore ul{ list-style:none; padding:0; margin:0; }
#footer .widget-explore ul li a{
  display:block; padding:10px 0; color:#fff; opacity:.7;
  border-top:1px solid rgba(255,255,255,.1); text-transform:none;
}
#footer .widget-explore ul li a:hover{ opacity:1; }
#footer .widget-explore ul li a:before{ content:"\f105"; font-family:FontAwesome; padding-right:10px; }

/* -------------------------------------------------------------------------
   BRAND TYPOGRAPHY — Cinzel serif (echoes the logo wordmark)
   ------------------------------------------------------------------------- */
#banner .hero-heading h1,
.preamble h3,
.cta-parallax h3{
  font-family:'Cinzel', Georgia, 'Times New Roman', serif;
  letter-spacing:1px;
}
.preamble h3{ color:var(--navy); }

/* header logo badge — square */
.header-logo{ margin-left:-90px; }
.header-logo .header-logo-inner{ width:180px; height:180px; }
.header-logo .header-logo-inner img{ max-width:152px; width:100%; height:auto; }
@media (max-width:992px){
  .header-logo{ margin-left:-80px; }
  .header-logo .header-logo-inner{ width:160px; height:160px; }
}

/* footer in brand navy */
#footer .footer-top{ background:var(--navy) !important; }
#footer .footer-copyrights{ background:#001829 !important; }
#footer .footer-top .logo-footer img{ max-width:300px; }
:focus-visible {outline: none;}