/* ==========================================================================
   Modern theme refresh — custom-modern.css
   Loaded last (after global.css and all module CSS) so these rules win
   without editing the original Bootstrap/PrestaShop stylesheets.
   Safe by design: only visual properties are touched (color, spacing,
   radius, shadow, type) — no class names, markup or JS hooks are changed.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,300;1,9..144,400&display=swap');

:root {
  --c-ink:        #1c2430;   /* near-black navy, primary text/dark surfaces */
  --c-navy:       #36454F;   /* deep navy, header/footer surfaces */
  --c-navy-2:     #202d4e;   /* lighter navy for gradients/hover */
  --c-gold:       #40E0D0;   /* warm brass/gold accent */
  --c-gold-dark:  #008080;
  --c-body:       #5b6472;   /* body copy grey */
  --c-muted:      #8891a0;
  --c-bg:        #FCFBFC;   /* dark navy page background */
  --c-card:       #ffffff;
  --c-border:     #e7e4dd;
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    16px;
  --shadow-sm:    0 2px 8px rgba(28, 36, 48, 0.06);
  --shadow-md:    0 10px 30px rgba(28, 36, 48, 0.10);
  --shadow-lg:    0 20px 45px rgba(28, 36, 48, 0.16);
  --font-head:    'Fraunces', Georgia, serif;
  --font-body:    'Inter', 'Oxygen', Arial, Helvetica, sans-serif;
  --ease:         cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------------
   0. Base / typography
   --------------------------------------------------------------------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }

body {
  font-family: var(--font-body) !important;
  color: var(--c-body);
  background: var(--c-bg) !important;
  letter-spacing: .1px;
}

#page,
.columns-container,
.footer-container { background: var(--c-bg); }

#columns { padding-top: 30px; padding-bottom: 60px; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-head) !important;
  color: var(--c-navy);
  font-weight: 600;
  letter-spacing: .2px;
}

a { color: var(--c-navy); transition: color .18s var(--ease); }
a:hover, a:focus { color: var(--c-gold-dark); text-decoration: none; }

::selection { background: var(--c-gold); color: #fff; }

/* thin, unobtrusive scrollbar (progressive enhancement only) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: #d7d2c6; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-gold); }

/* ---------------------------------------------------------------------
   1. Buttons — used everywhere: Book Now, View Rooms, forms, carts
   --------------------------------------------------------------------- */
.btn,
.button,
a.button,
input[type="submit"] {
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .3px;
  border-width: 1px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}

.btn:hover,
.button:hover,
a.button:hover {
  transform: translateY(-1px);
}

.btn-primary,
.button-medium,
.ajax_add_to_cart_button,
a.exclusive-medium,
button.exclusive-medium {
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-dark) 100%) !important;
  border-color: var(--c-gold-dark) !important;
  color: #fff !important;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover, .btn-primary:focus,
.button-medium:hover, .button-medium:focus,
.ajax_add_to_cart_button:hover, .ajax_add_to_cart_button:focus {
  background: linear-gradient(135deg, var(--c-gold-dark) 0%, var(--c-gold) 100%) !important;
  border-color: var(--c-gold-dark) !important;
  color: #fff !important;
  box-shadow: var(--shadow-md);
}

.btn-default {
  background: #fff !important;
  border-color: var(--c-border) !important;
  color: var(--c-navy) !important;
}
.btn-default:hover, .btn-default:focus {
  background: var(--c-navy) !important;
  border-color: var(--c-navy) !important;
  color: #fff !important;
}

.view_rooms_btn.btn-primary { background: linear-gradient(135deg, var(--c-navy-2) 0%, var(--c-navy) 100%) !important; border-color: var(--c-navy) !important; }
.view_rooms_btn.btn-primary:hover { background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-dark) 100%) !important; border-color: var(--c-gold-dark) !important; }

.htl-map-direction-btn {
  background: #fff !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-navy) !important;
  border-radius: var(--radius-sm) !important;
}
.htl-map-direction-btn:hover { border-color: var(--c-navy) !important; }

/* ---------------------------------------------------------------------
   2. Header / top bar / navigation
   --------------------------------------------------------------------- */
header { background: var(--c-card); }


}
/* Utility/logo bar */
header .header-top {
  background: var(--c-card);
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: 5010;
  box-shadow: var(--shadow-sm);
}
header .row #header_logo img { max-height: 52px; }

header .header-top-item .header-top-link {
  color: var(--c-navy) !important;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px !important;
  border-bottom: 1px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
header .header-top-item .header-top-link:hover {
  color: var(--c-gold-dark) !important;
  border-bottom-color: var(--c-gold-dark) !important;
}

div a.our_properties_link {
  color: var(--c-navy) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 8px 18px;
  border: 1px solid var(--c-navy);
  border-radius: 999px;
  display: inline-block;
  transition: all .18s var(--ease);
}
div a.our_properties_link:hover {
  background: var(--c-navy);
  color: #fff !important;
}

/* Primary navigation strip */
header #nav-main {
  background: linear-gradient(90deg, var(--c-navy) 0%, var(--c-navy-2) 100%) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}
header #nav-main nav,
header #nav-main a {
  font-family: var(--font-body);
}
header #nav-main .nav > li > a,
header #nav-main nav > ul > li > a,
header #nav-main a.sf-with-ul {
  color: rgba(255,255,255,.88) !important;
  font-weight: 500;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-size: 13px !important;
  transition: color .18s var(--ease);
}
header #nav-main .nav > li > a:hover,
header #nav-main nav > ul > li > a:hover {
  color: var(--c-gold) !important;
  background: transparent !important;
}
header #nav-main .dropdown-menu {
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  padding: 6px 0;
}
header #nav-main .dropdown-menu > li > a {
  color: var(--c-navy);
  font-size: 14px;
  padding: 8px 18px;
}
header #nav-main .dropdown-menu > li > a:hover {
  background: var(--c-bg);
  color: var(--c-gold-dark);
}

/* Hero banner on the homepage */
#index #header {
  position: relative;
}
#index #header:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
body:not(#index) #header { background-color: #008080 !important; }
  
  pointer-events: none;
}
#index #header .banner,
#index #header .header-top,
#index #header #nav-main {
  position: relative;
  z-index: 1;
}
#index #header .header-top,
#index #header #nav-main { background: transparent !important; box-shadow: none; border-bottom-color: rgba(255,255,255,.15); }
#index #header .header-top { position: relative; }
#index #header .header-top-item .header-top-link,
#index #header div a.our_properties_link,
#index #header .header-top-menu a { color: #fff !important; }
#index #header div a.our_properties_link { border-color: rgba(255,255,255,.6); }
#index #header #header_logo img { filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }

/* The mobile slide-out menu panel (#menu_cont) has its own solid white
   background, set by blocknavigationmenu's module CSS — it is NOT the
   transparent header bar over the hero photo, so its links must not
   inherit the white-text rule above (that made the mobile menu text and
   its hover state invisible: white on white). Restore normal readable
   colors for links inside that panel specifically. */
#index #header .header-top-menu #menu_cont a {
  color: var(--c-navy) !important;
}
#index #header .header-top-menu #menu_cont a:hover,
#index #header .header-top-menu #menu_cont a:focus {
  color: var(--c-gold-dark) !important;
}

/* Hero heading/subtext must be light — they sit on the dark photo
   overlay above, not on the page background, so they can't use the
   default navy heading color (that's for text on light page areas). */
#index #header h1,
#index #header h2,
#index #header h3,
#index #header .h1,
#index #header .h2,
#index #header .h3,
#index #header p {
  color: #fff !important;
  /* The overlay above doesn't fully darken every part of the photo (e.g.
     the bright pillows), so on its own a plain white heading can still
     lose contrast against a light patch. This shadow keeps it readable
     everywhere on the photo, dark spots included. */
 /* text-shadow: 0 2px 16px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.9) !important;*/
}
/* Testimonials block (module: wktestimonialblock) — smaller quote icon,
   tighter text, capped review height so one long review doesn't blow
   the card out to 800px tall, smaller avatar/name. Tested live. */
#hotelTestimonialBlock { padding: 25px 0 35px !important; }
/* Keep the icon column's original Bootstrap grid sizing (this is what
   actually keeps it aligned/centered with the text block on desktop —
   an earlier version of this fix forced a fixed pixel width + float
   here instead, which cancelled that positioning and sent the icon
   drifting off to the far left). Only the image itself gets smaller. */
#hotelTestimonialBlock .owl-item .col-xs-4,
#hotelTestimonialBlock .owl-item .col-sm-offset-1 {
  width: 16.66666667% !important;
  margin-left: 8.33333333% !important;
  float: left !important;
}
#hotelTestimonialBlock .owl-item img.img-responsive {
  max-width: 40px !important;
}
#hotelTestimonialBlock .testimonialContentText {
  font-size: 14px !important;
  line-height: 21px !important;
  margin-bottom: 10px !important;
}
#hotelTestimonialBlock .testimonialPersonImg {
  width: 44px !important;
  height: 44px !important;
}
#hotelTestimonialBlock .testimonialPersonName {
  font-size: 14px !important;
  margin: 6px 0 2px !important;
}
#hotelTestimonialBlock .testimonialPersonDesig {
  font-size: 12px !important;
  margin: 0 !important;
}

/* Search / booking widgets that sit inside the header */
header .header-top form,
header .booking-form,
header .card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ---------------------------------------------------------------------
   3. Cards, room listings, hotel listings
   --------------------------------------------------------------------- */
.card {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--c-border);
}

.room_cont {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}
.room_cont:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.room_cont .room-type-image {
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.room_cont .rm_heading {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--c-navy);
  font-size: 20px;
  text-transform: none;
}
.room_cont .rm_left {
  color: var(--c-gold-dark);
  font-weight: 600;
}
.room_cont .rm_desc { color: var(--c-body); }
.room_cont .view_more { color: var(--c-gold-dark); font-weight: 600; }
.room_cont .view_more:hover { color: var(--c-navy); }
.room_cont .rm_amen { border-radius: var(--radius-sm); }
.room_cont .capa_txt { color: var(--c-muted); }
.room_cont .capa_data { color: var(--c-ink); font-weight: 500; }

.rm_price_val {
  color: var(--c-navy) !important;
  font-family: var(--font-head);
  font-weight: 700 !important;
  font-size: 19px;
}
.rm_price_val.room_type_old_price {
  color: var(--c-muted) !important;
  font-weight: 400 !important;
  font-size: 15px;
  text-decoration: line-through;
}
.rm_price_txt { color: var(--c-muted); }

/* Homepage intro section — sits right after the hero banner (#index #header)
   and before whatever the HOOK_HOME modules render below it (accommodation
   listing, features, etc.). Eyebrow label + centered heading + subtext,
   styled to match the hero's typography treatment. */
.naeco-intro-section {
  max-width: 760px;
  margin: 0 auto;
  padding: 70px 20px 50px;
}
.naeco-intro-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--c-gold-dark);
  text-transform: uppercase;
  margin: 0 0 24px;
}
.naeco-intro-eyebrow:before,
.naeco-intro-eyebrow:after {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--c-border);
}
.naeco-intro-heading {
  font-family: var(--font-head);
  font-size: 32px;
  line-height: 1.3;
  color: var(--c-ink);
  margin: 0 0 20px;
}
.naeco-intro-subtext {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-body);
  margin: 0;
}
@media (max-width: 767px) {
  .naeco-intro-heading { font-size: 24px; }
}


/* Our properties listing */
.title-container .our-properties-header { text-align: center; margin-bottom: 6px; }
.title-container .our-properties-desc { color: var(--c-body); margin-bottom: 30px; }

.hotel-address-container {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
  padding-top: 12px;
  padding-bottom: 12px;
}
.hotel-address-container:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.hotel-address-container .htl-img { border-radius: var(--radius-sm); }
.hotel-address-container .hotel-name span {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 19px;
  color: var(--c-navy);
}
.hotel-address-container .hotel-branch-info-value { color: var(--c-body); }
.hotel-address-container .hotel-branch-info-actions { margin-top: 14px; }

/* generic content cards / product boxes get the same soft-card treatment */
.product-list li.ajax_block_product,
.product_list li.ajax_block_product,
#center_column .page_product_box {
  border-radius: var(--radius-md);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}

/* ---------------------------------------------------------------------
   4. Forms / inputs (booking form, search, occupancy, contact, etc.)
   --------------------------------------------------------------------- */
.form-control,
input.form-control,
select.form-control,
textarea.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"] {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: none !important;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.form-control:focus,
input:focus {
  border-color: var(--c-gold) !important;
  box-shadow: 0 0 0 3px rgba(201,161,90,.18) !important;
}
label.control-label { color: var(--c-navy); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; }

/* ---------------------------------------------------------------------
   5. Breadcrumb
   --------------------------------------------------------------------- */
.breadcrumb {
  background: transparent;
  border-bottom: 1px solid var(--c-border);
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 24px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--c-muted);
}
.breadcrumb a { color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-gold-dark); }
.breadcrumb a.home { color: var(--c-navy); }

/* ---------------------------------------------------------------------
   6. Footer
   --------------------------------------------------------------------- */
.footer-container {
  background: var(--c-navy) !important;
  margin-top: 50px;
}
.footer-container #footer { color: rgba(255,255,255,.72); padding-top: 40px; }
.footer-container #footer h4 {
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: .3px;
}
.footer-container #footer h4:after { background: var(--c-gold) !important; }
.footer-container #footer a { color: rgba(255,255,255,.72) !important; }
.footer-container #footer a:hover { color: var(--c-gold) !important; }
.footer-container #footer #block_contact_infos i { color: var(--c-gold); }
.footer-container #footer #social_block ul li a {
  background: rgba(255,255,255,.08) !important;
  border-radius: 50%;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.footer-container #footer #social_block ul li a:hover {
  background: var(--c-gold) !important;
  transform: translateY(-2px);
}
.footer-container #footer .bottom-footer {
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.55);
}

/* ---------------------------------------------------------------------
   7. Misc polish
   --------------------------------------------------------------------- */
.pagination > li > a,
.pagination > li > span {
  border-radius: var(--radius-sm) !important;
  margin: 0 3px;
  border-color: var(--c-border) !important;
  color: var(--c-navy);
}
.pagination > .active > a,
.pagination > .active > span {
  background: var(--c-navy) !important;
  border-color: var(--c-navy) !important;
}

img { transition: opacity .2s var(--ease); }

.alert { border-radius: var(--radius-sm); }

@media (max-width: 767px) {
  header .header-top { position: static; }
 /* #index #header:before { background: linear-gradient(180deg, rgba(8,12,20,.65) 0%, rgba(8,12,20,.9) 100%); } */
}

.button-medium.btn-default {
  background: linear-gradient(135deg, #c9a15a 0%, #ad8547 100%) !important;
  border-color: #ad8547 !important;
  color: #fff !important;
}
.button-medium.btn-default:hover,
.button-medium.btn-default:focus {
  background: linear-gradient(135deg, #ad8547 0%, #c9a15a 100%) !important;
  border-color: #ad8547 !important;
  color: #fff !important;
}

.header-hotel-desc {
  display: none;
}
@media (max-width: 767px) {
  .header-hotel-name {
    font-size: 32px;
    line-height: 1.3;
  }
}

#index #header #nav-main, #header #nav-main {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 10000 !important;
}

#index #header .header-top, #header .header-top {
  position: fixed !important;
  top: 36px !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: transparent !important;
  transition: background 0.3s ease !important;
}

body#index.scrolled-past-header #header .header-top,
body.scrolled-past-header #header .header-top {
  background: #0d9488 !important;
}

body#index.scrolled-past-header #header .header-top,
body#index.scrolled-past-header #header #nav-main,
body.scrolled-past-header #header .header-top,
body.scrolled-past-header #header #nav-main {
  background: #0d9488 !important;
}

.menu_cont_left, .menu_cont_right {
  z-index: 100000 !important;
}

.home-split-block {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 40px;
  margin: 0 0 40px;
}
.home-split-block .home-split-image {
  flex: 1 1 45%;
  position: relative;
  min-height: 480px;
  overflow: hidden;
}
.home-split-block .home-split-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.home-split-block .home-split-text { flex: 1 1 45%; padding: 0 15px; }
.home_block_eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-gold-dark, #a56f5a);
  margin-bottom: 12px;
}
.home-split-text .home_block_heading {
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 400;
  text-align: left;
  margin-bottom: 18px;
}
.home-split-text .home_block_description {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  text-align: left;
  margin-bottom: 24px;
}
.home_block_cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-gold-dark, #a56f5a);
  text-decoration: none;
  border-bottom: 1px solid var(--c-gold-dark, #a56f5a);
  padding-bottom: 4px;
}
.home_block_cta:hover { color: var(--c-navy, #3a322c); border-bottom-color: var(--c-navy, #3a322c); }
.home_block_cta_arrow { transition: transform 0.2s ease; }
.home_block_cta:hover .home_block_cta_arrow { transform: translateX(4px); }

@media (max-width: 767px) {
  .home-split-block { flex-direction: column; }
  .home-split-block .home-split-image,
  .home-split-block .home-split-text { flex: 1 1 100%; }
}


/* ---------------------------------------------------------------------
   8. Mobile fixes
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  #header .header-top,
  #header #nav-main,
  #index #header .header-top,
  #index #header #nav-main {
    position: static !important;
  }

  div a.our_properties_link {
    white-space: nowrap;
    font-size: 13px !important;
    padding: 6px 14px;
  }

  .home_block_heading {
    font-size: 28px;
  }
}