/* ==========================================================================
   Sunteck SkyPark - Custom / Page Overrides
   --------------------------------------------------------------------------
   All page-specific styling lives here. index.php must not contain any
   inline `style="..."` attributes or <style> blocks.

   Load order: bootstrap -> aos -> owl -> style.css -> custom.css
   --------------------------------------------------------------------------
   00. Image sizing base
   01. Header / Mobile menu
   02. Banner
   03. Overview & Key features
   04. Life for the Rare (about carousel)
   05. Gallery
   06. Contact
   07. Forms
   ========================================================================== */


/* ==========================================================================
   00. Image sizing base
   ==========================================================================
   Every <img> carries width/height attributes so the browser can reserve the
   right box before the file loads (stops layout shift). Those attributes are
   also presentational hints, though: if a rule sizes an image on one axis
   only, the OTHER axis falls back to the raw attribute value and the image
   gets stretched. style.css does exactly that in 16 places - e.g.
   `.odc-o li img { width: 32px }` with no height, which rendered the 128x128
   location icons as 32px wide by 128px tall.

   Resetting both axes to `auto` here fixes all of them at once: this rule has
   element-level specificity (0,0,1), so any class rule that deliberately sets
   a dimension - `.l-img { height: 500px }`, `.about-img { height: 400px }`,
   `.odc-o li img { width: 32px }` - still wins, while the unset axis follows
   the aspect ratio instead of the attribute.
   ========================================================================== */
img {
  width: auto;
  height: auto;
}


/* ==========================================================================
   01. Header / Mobile menu
   ========================================================================== */

/* Mobile menu drops below the sticky header as a solid gold panel.
   Kept at 991px to match the Bootstrap `navbar-expand-lg` breakpoint. */
@media only screen and (max-width: 991px) {

  .navbar-collapse#mainNav {
    position: absolute;
    top: 68px;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #e9af69;
    padding: 6px 0 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.18);
  }

  #mainNav .navbar-nav {
    width: 100%;
  }

  #mainNav .nav-item {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  #mainNav .nav-item:last-child {
    border-bottom: 0;
  }

  #mainNav .nav-link {
    display: block;
    width: 100%;
    padding: 11px 15px;
    color: #ffffff !important;
  }

  #mainNav .nav-link:hover,
  #mainNav .nav-link:focus {
    background: rgba(0, 0, 0, 0.08);
    border-bottom: 0;
  }
}


/* ==========================================================================
   02. Banner
   ========================================================================== */

/* --- Carousel arrows -------------------------------------------------------
   Bootstrap ships the prev/next controls as 15%-wide invisible strips with a
   white chevron at 50% opacity. Over these light banners they were effectively
   invisible. Replaced with round translucent buttons that sit on top of the
   artwork and darken on hover. Applies to the banner and the "Life for the
   Rare" carousel alike. */
#bannerCarousel .carousel-control-prev,
#bannerCarousel .carousel-control-next,
#aboutCarousel .carousel-control-prev,
#aboutCarousel .carousel-control-next {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  background: rgba(0, 21, 42, 0.32);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 1;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

#bannerCarousel .carousel-control-prev,
#aboutCarousel .carousel-control-prev {
  left: 22px;
}

#bannerCarousel .carousel-control-next,
#aboutCarousel .carousel-control-next {
  right: 22px;
}

#bannerCarousel .carousel-control-prev:hover,
#bannerCarousel .carousel-control-next:hover,
#bannerCarousel .carousel-control-prev:focus-visible,
#bannerCarousel .carousel-control-next:focus-visible,
#aboutCarousel .carousel-control-prev:hover,
#aboutCarousel .carousel-control-next:hover,
#aboutCarousel .carousel-control-prev:focus-visible,
#aboutCarousel .carousel-control-next:focus-visible {
  background: rgba(0, 21, 42, 0.72);
  border-color: #ffffff;
  transform: translateY(-50%) scale(1.06);
}

#bannerCarousel .carousel-control-prev:focus-visible,
#bannerCarousel .carousel-control-next:focus-visible,
#aboutCarousel .carousel-control-prev:focus-visible,
#aboutCarousel .carousel-control-next:focus-visible {
  outline: 3px solid #e9af69;
  outline-offset: 3px;
}

/* Chevron glyph - drawn white so it reads on the translucent disc. */
#bannerCarousel .carousel-control-prev-icon,
#bannerCarousel .carousel-control-next-icon,
#aboutCarousel .carousel-control-prev-icon,
#aboutCarousel .carousel-control-next-icon {
  width: 17px;
  height: 17px;
  background-size: 100% 100%;
}

#bannerCarousel .carousel-control-prev-icon,
#aboutCarousel .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.5 2 4.5 8l6 6'/%3e%3c/svg%3e");
  /* Optical centering - the chevron sits slightly right of the disc centre. */
  margin-right: 2px;
}

#bannerCarousel .carousel-control-next-icon,
#aboutCarousel .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m5.5 2 6 6-6 6'/%3e%3c/svg%3e");
  margin-left: 2px;
}

/* Tablet / phone - smaller discs, tucked closer to the edge. */
@media only screen and (max-width: 767.98px) {

  #bannerCarousel .carousel-control-prev,
  #bannerCarousel .carousel-control-next,
  #aboutCarousel .carousel-control-prev,
  #aboutCarousel .carousel-control-next {
    width: 40px;
    height: 40px;
  }

  #bannerCarousel .carousel-control-prev,
  #aboutCarousel .carousel-control-prev {
    left: 10px;
  }

  #bannerCarousel .carousel-control-next,
  #aboutCarousel .carousel-control-next {
    right: 10px;
  }

  #bannerCarousel .carousel-control-prev-icon,
  #bannerCarousel .carousel-control-next-icon,
  #aboutCarousel .carousel-control-prev-icon,
  #aboutCarousel .carousel-control-next-icon {
    width: 14px;
    height: 14px;
  }
}

/* --- Clearing the fixed header ---------------------------------------------
   style.css overrides Bootstrap's .sticky-top to `position: fixed`, so the
   header is out of the document flow and reserves no space. On desktop
   `.top { margin-top: 6rem }` compensates, but style.css resets that to
   `margin-top: 0 !important` below 768px - so the banner needs its own offset
   here or it slides underneath the header. (This used to be a `margin-top:69px`
   inline style on each mobile banner image.)
   69px = the header height on mobile; keep the two in sync. */
@media (max-width: 767.98px) {
  #bannerCarousel.top {
    margin-top: 69px !important;
  }
}

/* --- Banner aspect ratio ---------------------------------------------------
   width/height on <source> is not honoured by every browser, so the ratio is
   also pinned in CSS. Without this the page reflows when the banner lands.
   Both ratios match the artwork exactly, so nothing is ever cropped. */
#bannerCarousel .carousel-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 500 / 800;
  object-fit: cover;
}

@media (min-width: 768px) {
  #bannerCarousel .carousel-item img {
    aspect-ratio: 2000 / 900;
  }
}


/* ==========================================================================
   03. Overview & Key features
   ========================================================================== */

/* Overview copy is left-aligned even where the theme centres section text. */
.about-first-section .content-wrap.content-wrap--start,
.about-first-section .content-wrap.content-wrap--start > p {
  text-align: start !important;
}

.about-first-section .content-wrap.content-wrap--start {
  margin: 0;
}

/* "Infinity Pool," label sits tight above the 50 ft figure. */
.feature-box .feature-desc--tight {
  margin-top: -21px;
  margin-bottom: 0;
}

/* "(approx)" qualifier next to the big number. */
.feature-title .feature-approx {
  font-size: 12px;
}

/* Small-print legal note under the infinity pool figure. */
.feature-box .feature-note {
  font-size: 8px;
}


/* ==========================================================================
   04. Life for the Rare (about carousel)
   ========================================================================== */

.about-carousel {
  margin: 10px;
}

/* Feature list on phones: style.css stacks the two columns into one long
   left-aligned list under a centred paragraph. Instead lay the six items out
   as a centred 2 x 3 grid, each icon above its label. `display: contents`
   lets the items of both .feature-col wrappers share the one grid. */
@media (max-width: 768px) {
  .feature-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }

  .feature-col {
    display: contents;
  }

  .feature-item {
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 0;
    text-align: center;
  }

  .feature-item img {
    width: 46px;
    height: 46px;
    margin: 0 0 8px;
  }

  .feature-item span {
    line-height: 1.35;
  }
}


/* ==========================================================================
   05. Gallery
   ========================================================================== */

.gallery-head {
  margin-top: 10px;
}

/* Breathing room around the synced thumbnail strip so the owl nav arrows
   are not clipped by the container edge. */
.gallery-thumbs-wrap {
  margin: 10px 25px 0;
}


/* ==========================================================================
   06. Contact
   ========================================================================== */

.contact-info .whatsapp-link {
  color: #000000;
  font-weight: bolder;
}


/* ==========================================================================
   07. Forms
   ==========================================================================
   style.css:2362 sets `.form-control::placeholder { color: #fff !important }`,
   but .form-control keeps Bootstrap's white background - so the placeholders
   were white on white and invisible.

   The theme used to cancel that further down (style.css:3489) with
   `#priceform-fname::placeholder { color: black }`. That worked only because
   every form reused the same three ids; once the duplicate ids were made
   unique the selector stopped matching and the placeholders disappeared.

   Fixed by id-independent selectors, so it keeps working no matter how many
   forms the page grows. #222 matches the theme's own modal placeholder colour
   (style.css:1981). `opacity: 1` is needed because Firefox dims placeholders
   by default.

   IMPORTANT: each vendor-prefixed selector needs its OWN rule. If they are
   grouped in one comma-separated list, any browser that does not recognise one
   of them throws away the ENTIRE rule - which is why the first attempt at this
   fix did nothing in Chrome (it does not parse ::-moz-placeholder).
   ========================================================================== */
.form-control::placeholder {
  color: #222222 !important;
  opacity: 1;
}

.form-control::-webkit-input-placeholder {
  color: #222222 !important;
  opacity: 1;
}

.form-control::-moz-placeholder {
  color: #222222 !important;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #222222 !important;
  opacity: 1;

}
/* ==========================================================================
   08. intl-tel-input (country code on the mobile fields)
   ==========================================================================
   Initialising wraps each mobile <input> in a .iti div and appends the country
   dropdown as a <ul><li>. Two things have to be corrected for this theme.

   1. Layout. The .iti div becomes the flex child of .input-group, so it has to
      grow the way the bare input did, and the input has to fill it. Without
      this the field collapses to the width of the flag.

   2. Colour. style.css:212 has `#about-first ul li { color: #ffffff }` - an id
      selector, so it outranks any class-based rule and paints every country
      name white on the dropdown's white background. The banner form lives in
      that section, so the list was invisible. !important is the only thing
      that outranks an id here.
   ========================================================================== */

.input-group .iti {
  flex: 1 1 auto;
  width: 1%;
}

.input-group .iti input.form-control {
  width: 100%;
  border-radius: 0;
}

.iti__country-list {
  background-color: #fff !important;
  color: #222 !important;
  text-align: left !important;
  /* Above .modal (1055), so the list is not clipped inside the popups. */
  z-index: 1060;
}

.iti__country,
.iti__country-name {
  color: #222 !important;
  line-height: 1.5em;
}

.iti__dial-code {
  color: #666 !important;
}

.iti__country.iti__highlight,
.iti__country:hover {
  background-color: #f1f1f1 !important;
}

.iti__divider {
  border-bottom-color: #ddd;
}

/* The flag button sits on top of the input, so let the input's own background
   show through instead of stacking a second box on it. */
.iti--separate-dial-code .iti__selected-flag {
  background-color: transparent;
}

.iti--separate-dial-code .iti__selected-dial-code {
  color: #222;
  font-weight: 500;
}

/* The library keeps the list on one line (white-space: nowrap), so it grows to
   fit the longest name - "United Arab Emirates (الإمارات العربية المتحدة)" -
   and spills outside the form card. Wrap instead, and cap the size. */
.iti__country-list {
  white-space: normal;
  max-width: 320px;
  max-height: 220px;
}

/* Open/hover state: a tint, not a box, so the flag stays part of the input. */
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag,
.iti--separate-dial-code .iti__selected-flag:focus,
.iti__flag-container .iti__selected-flag[aria-expanded="true"] {
  background-color: rgba(0, 0, 0, 0.04);
}

/* --------------------------------------------------------------------------
   Get In Touch placeholders
   --------------------------------------------------------------------------
   The rules above put #222 on every .form-control placeholder, which is right
   for the forms that keep Bootstrap's white field background.

   #contact-form is the exception: its inputs are transparent on the dark navy
   .form-bg panel (style.css), so #222 renders as dark-on-dark and the
   placeholders read as barely-there grey. White is what that panel needs.

   Each vendor-prefixed selector gets its OWN rule, for the reason given above:
   grouped in one list, a browser that cannot parse one selector discards the
   whole rule.
   ========================================================================== */
#contact-form .form-control::placeholder {
  color: #ffffff !important;
  opacity: 1;
}

#contact-form .form-control::-webkit-input-placeholder {
  color: #ffffff !important;
  opacity: 1;
}

#contact-form .form-control::-moz-placeholder {
  color: #ffffff !important;
  opacity: 1;
}

#contact-form .form-control:-ms-input-placeholder {
  color: #ffffff !important;
  opacity: 1;
}

/* --- Configuration dropdown ------------------------------------------------
   style.css gives the modal selects a `background: #fff` shorthand, which also
   wipes Bootstrap's .form-select arrow - so it is put back here as a longhand.
   padding-right keeps the text clear of the arrow; min-width: 0 lets the
   select shrink inside the .input-group flex row on narrow phones instead of
   pushing past the form, and a long label ends in an ellipsis. */
form select.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23222222' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 10px;
  padding-right: 36px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* The custom option list ajax-contact.js builds (initConfigDropdowns). The
   wrapper takes the select's place in the .input-group row; the list opens
   straight under the field, exactly as wide as it. */
.cfg-dd {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.cfg-dd > select.form-select {
  width: 100%;
}

/* Arrow flips up while the list is open. */
.cfg-dd.is-open > select.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23222222' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 11 6-6 6 6'/%3e%3c/svg%3e");
}

/* Sits over the select and takes its clicks, so the native list never opens. */
.cfg-dd__toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.cfg-dd__toggle:focus-visible {
  outline: 2px solid #c9a96e;
  outline-offset: -2px;
}

.cfg-dd__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 2px 0 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #d0d4da;
  box-shadow: 0 8px 20px rgba(0, 21, 42, 0.25);
}

.cfg-dd__list[hidden] {
  display: none;
}

/* !important because the list lives inside page sections whose own `li`
   rules out-rank a class: the Register form sits in #about-first, and
   `#about-first ul li { color: #fff; line-height: 27px }` in style.css
   turned these options white-on-white and stretched the rows. */
.cfg-dd .cfg-dd__list li {
  margin: 0 !important;
  padding: 10px 12px !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #222222 !important;
  background: #fff !important;
  text-align: left !important;
  list-style: none !important;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.cfg-dd .cfg-dd__list li::before,
.cfg-dd .cfg-dd__list li::after {
  content: none !important;
}

.cfg-dd .cfg-dd__list li:hover,
.cfg-dd .cfg-dd__list li:focus {
  outline: none;
  background: #00152a !important;
  color: #fff !important;
}

.cfg-dd .cfg-dd__list li[aria-selected="true"] {
  font-weight: 600 !important;
}

/* style.css gives `#contact-form select` a `background: transparent`
   shorthand, which also wipes Bootstrap's .form-select arrow - and that arrow
   is dark grey, invisible on this panel anyway. Put back a white one. */
#contact-form select.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px 10px;
  padding-right: 32px;
}

/* ==========================================================================
   FLOATING CTAs — vertical side tabs (desktop)
   Same buttons as before, only repositioned: stacked against the right edge
   and centred vertically, with the label reading bottom-to-top.
   Tablet / mobile keep their existing placement.
   ========================================================================== */
@media (min-width: 992px) {

  .brochure,
  .interested {
    position: fixed;
    right: 0;
    top: 50%;
    bottom: auto;
    left: auto;
    z-index: 9999;
    writing-mode: vertical-rl;
    margin: 0;
    /* 18px along the label (top/bottom), 0 on the sides - the fixed width
       below does the horizontal breathing room so both tabs match. */
    padding: 18px 0;
    width: 38px;
    box-sizing: border-box;
    /* Row flex in vertical-rl means the main axis runs top-to-bottom, so the
       icon and the label stack along the label, centred on both axes. */
    /* !important beats the `d-sm-block` utility on the Enquire button, which
       would otherwise force `display: block` and break the centring. */
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px !important;
    border: 0;
    border-radius: 6px 0 0 6px;
    letter-spacing: 1.5px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Brochure sits just above the centre line, Enquire Now just below it. */
  .brochure {
    transform: translateY(calc(-100% - 4px)) rotate(180deg);
  }

  .interested {
    transform: translateY(4px) rotate(180deg);
  }

  /* The icon must ignore the vertical writing mode, otherwise the glyph gets
     laid on its side. Reset it to horizontal flow, then rotate 180deg to undo
     the button's own rotation so the envelope / arrow sits upright. */
  .brochure .f-icon,
  .interested .f-icon {
    flex: 0 0 auto;
    margin: 0;
    /* Fixed square box with the glyph centred inside it, so the wide envelope
       and the narrow download arrow occupy exactly the same footprint. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: 13px;
    line-height: 1;
    transform: rotate(180deg);
  }
}