/* ============================================================
   LUXURY UNLOCKED — FOOTER STYLING ONLY
   Source of truth: original ZIP footer.jsx + base.css

   IMPORTANT:
   - No footer HTML/PHP content needs to change.
   - No links/icons/text are hidden, reordered, removed, or added.
   - Existing WhatsApp / phone / email / address content is preserved.
   ============================================================ */

/* ------------------------------------------------------------
   FOOTER SURFACE
   ZIP: .foot
   ------------------------------------------------------------ */

.footer,
.footer.dark-background {
  position: relative;
  margin: 0 !important;
  padding: clamp(64px, 9vh, 104px) 0 36px !important;

  background: var(--dark-2, #252017) !important;
  color: var(--on-dark, #F2EBDC) !important;

  border: 0 !important;
}

.footer > .container {
  width: 100% !important;
  max-width: var(--maxw, 1300px) !important;

  margin: 0 auto !important;
  padding-inline: var(--gut, clamp(20px, 5.2vw, 72px)) !important;
}

/*
 * Existing PHP has 4 content groups.
 * Preserve all 4 groups and apply the ZIP visual rhythm.
 */
.footer > .container > .row {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.45fr !important;
  gap: 40px !important;

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

  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
}

.footer > .container > .row > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  flex: none !important;

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

.footer .footer-content,
.footer .footer-links,
.footer .footer-contact,
.footer .footer-social {
  margin: 0 !important;
}


/* ------------------------------------------------------------
   LOGO
   ZIP: .foot-brand .foot-logo
   ------------------------------------------------------------ */

.footer .footer-content > .logo {
  display: inline-block !important;

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

.footer .footer-content > .logo img {
  display: block !important;

  width: auto !important;
  height: 60px !important;
  max-width: 200px !important;

  margin: 0 !important;

  filter: drop-shadow(0 1px 6px rgba(0,0,0,.3)) !important;
}

/* Existing BR is content-neutral spacing only; prevent extra legacy gap. */
.footer .footer-content > br {
  line-height: 0 !important;
}


/* ------------------------------------------------------------
   FOOTER COLUMN TITLES
   ZIP: .foot-col h6
   ------------------------------------------------------------ */

.footer-title {
  margin: 0 0 20px !important;
  padding: 0 !important;

  font-family: var(--sans, 'Jost', system-ui, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.75 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;

  color: var(--accent, #C49A4C) !important;
}


/* ------------------------------------------------------------
   LINKS
   ZIP: .foot-col ul / .foot-col ul a
   ------------------------------------------------------------ */

.footer a,
.footer a:hover,
.footer a:focus,
.footer a:active {
  text-decoration: none !important;
}

.footer .footer-links ul {
  display: grid !important;
  gap: 13px !important;

  list-style: none !important;

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

.footer .footer-links ul li {
  margin: 0 !important;
  padding: 0 !important;
}

.footer .footer-links ul li a {
  display: inline !important;

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

  font-family: var(--sans, 'Jost', system-ui, sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  letter-spacing: .005em !important;

  color: var(--on-dark-muted, #A99E89) !important;

  transition: color .3s !important;
}

.footer .footer-links ul li a:hover {
  color: var(--on-dark, #F2EBDC) !important;
}


/* ------------------------------------------------------------
   SOCIAL ICONS
   ZIP: .foot-soc
   Content/order remains exactly as supplied in PHP.
   ------------------------------------------------------------ */

.footer .footer-social {
  margin-top: 26px !important;
}

.footer .social-links {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;

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

.footer .social-links a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;

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

  background: transparent !important;
  color: var(--on-dark, #F2EBDC) !important;

  border: 1px solid rgba(242,235,220,.20) !important;
  border-radius: 50% !important;

  box-shadow: none !important;
  transform: none !important;

  transition:
    background .4s,
    border-color .4s,
    color .4s !important;
}

.footer .social-links a i {
  display: block !important;

  margin: 0 !important;

  font-size: 16px !important;
  line-height: 1 !important;

  color: currentColor !important;
}

.footer .social-links a:hover,
.footer .footer-social .social-links a:hover {
  background: var(--accent-deep, #6E4E18) !important;
  border-color: var(--accent-deep, #6E4E18) !important;
  color: var(--on-dark, #F2EBDC) !important;

  transform: none !important;
}


/* ------------------------------------------------------------
   CONTACT COLUMN
   Keep ALL existing contact icons/content.
   Fix icon alignment instead of hiding them.
   ------------------------------------------------------------ */

.footer .footer-contact {
  margin: 0 !important;
  padding: 0 !important;
}

.footer .contact-item {
  display: grid !important;
  grid-template-columns: 22px minmax(0,1fr) !important;
  column-gap: 12px !important;
  align-items: start !important;

  width: 100% !important;

  margin: 0 0 16px !important;
  padding: 0 !important;
}

.footer .contact-item:last-child {
  margin-bottom: 0 !important;
}

/*
 * This keeps phone / WhatsApp / email / location icons
 * exactly at the LEFT of their corresponding content.
 */
.footer .contact-icon {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;

  width: 22px !important;
  min-width: 22px !important;
  height: 24px !important;

  margin: 0 !important;
  padding: 2px 0 0 !important;

  position: static !important;
  transform: none !important;
}

.footer .contact-icon i {
  display: block !important;

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

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

  color: var(--accent, #C49A4C) !important;

  position: static !important;
  transform: none !important;

  transition: color .3s !important;
}

.footer .contact-info {
  min-width: 0 !important;

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

.footer .contact-info p {
  margin: 0 !important;
  padding: 0 !important;

  font-family: var(--sans, 'Jost', system-ui, sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  letter-spacing: .005em !important;

  color: var(--on-dark-muted, #A99E89) !important;
}

.footer .contact-info p + p {
  margin-top: 8px !important;
}

.footer .contact-info a,
.footer .contact-info a:focus,
.footer .white-link,
.footer .white-link:focus {
  color: var(--on-dark-muted, #A99E89) !important;

  text-decoration: none !important;

  transition: color .3s !important;
}

.footer .contact-info a:hover,
.footer .white-link:hover {
  color: var(--on-dark, #F2EBDC) !important;
}

.footer .country-flag {
  display: inline-block !important;

  margin-right: 5px !important;

  font-size: .9em !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
}


/* ------------------------------------------------------------
   FOOTER BOTTOM
   ZIP: .foot-bar
   ------------------------------------------------------------ */

.footer-bottom {
  margin-top: clamp(48px, 7vh, 80px) !important;
  padding-top: 26px !important;

  border-top: 1px solid rgba(242,235,220,.12) !important;
}

.footer-bottom > .container {
  width: 100% !important;
  max-width: var(--maxw, 1300px) !important;

  margin: 0 auto !important;
  padding-inline: var(--gut, clamp(20px, 5.2vw, 72px)) !important;

  text-align: left !important;
}

.footer-bottom p {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  flex-wrap: wrap !important;

  margin: 0 !important;

  font-family: var(--sans, 'Jost', system-ui, sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  letter-spacing: .04em !important;

  color: var(--on-dark-muted, #A99E89) !important;
}

.footer-bottom .crafted-by {
  margin: 0 !important;

  font-size: inherit !important;
  font-weight: inherit !important;

  color: inherit !important;
}

.footer-bottom .qaushik-labs,
.footer-bottom .qaushik-labs:focus {
  color: var(--on-dark-muted, #A99E89) !important;
  font-weight: 300 !important;

  transition: color .3s !important;
}

.footer-bottom .qaushik-labs:hover {
  color: var(--on-dark, #F2EBDC) !important;
}


/* ------------------------------------------------------------
   FLOATING WHATSAPP
   Existing content/functionality preserved.
   Explicit positioning prevents it from appearing in page flow.
   ------------------------------------------------------------ */

.whatsapp-float {
  position: fixed !important;

  right: 15px !important;
  bottom: 74px !important;

  width: 52px !important;
  height: 52px !important;

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

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

  background: #25D366 !important;
  color: #fff !important;

  border: 0 !important;
  border-radius: 50% !important;

  box-shadow: 0 8px 26px rgba(0,0,0,.30) !important;

  font-size: 24px !important;
  line-height: 1 !important;

  z-index: 9990 !important;

  transform: translateY(0) !important;

  transition:
    transform .4s var(--ease, cubic-bezier(.22,.61,.36,1)),
    box-shadow .4s var(--ease, cubic-bezier(.22,.61,.36,1)) !important;
}

.whatsapp-float i {
  margin: 0 !important;

  color: #fff !important;
  line-height: 1 !important;
}

.whatsapp-float:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.38) !important;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 860px) {
  .footer > .container > .row {
    grid-template-columns: 1fr 1fr !important;
  }

  .footer > .container > .row > [class*="col-"]:first-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 600px) {
  .footer,
  .footer.dark-background {
    padding-top: 64px !important;
    padding-bottom: 92px !important;
  }

  .footer > .container > .row {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px 24px !important;
  }

  .footer > .container > .row > [class*="col-"]:first-child,
  .footer > .container > .row > [class*="col-"]:last-child {
    grid-column: 1 / -1 !important;
  }

  .footer-bottom p {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}

/*
 * Mobile floating-button stack.
 * Keep WhatsApp visible above Scroll-to-Top while remaining
 * above the existing mobile sticky bar.
 */
@media (max-width: 768px) {
  .whatsapp-float {
    display: flex !important;
    position: fixed !important;
    right: 20px !important;
    bottom: 136px !important;
  }
}

/* ============================================================
   FOOTER — ONLY TWO FIXES
   1. Remove white space after footer
   2. Keep existing WhatsApp / Email text visible beside icons
   No other footer styling is changed.
   ============================================================ */

/* 1) Remove any trailing page gap after the footer */
html,
body {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#footer.footer {
  margin-bottom: 0 !important;
}

#footer .footer-bottom,
#footer .footer-bottom > .container,
#footer .footer-bottom p {
  margin-bottom: 0 !important;
}

/*
 * Do NOT change the page background globally.
 * Only ensure that any tiny trailing browser/body area after the footer
 * uses the footer colour rather than appearing white.
 */
html {
  background: var(--dark-2, #252017) !important;
}


/* 2) WhatsApp + Email content already exists in footer.php.
   Their .lu-reveal class can hide them because the footer does not use
   the homepage reveal observer. Override reveal state ONLY inside footer. */
#footer .contact-info a.lu-reveal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;

  /* retain the footer's normal link hover transition only */
  transition: color .3s !important;
}

/* Keep text directly beside its existing icon */
#footer .contact-item {
  align-items: start !important;
}

#footer .contact-info {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#footer .contact-info p,
#footer .contact-info a,
#footer .contact-info a.white-link {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================================
   SCROLL-TO-TOP — ONLY FIX
   Keeps the existing WhatsApp button unchanged.
   Places Scroll-to-Top directly below WhatsApp and removes it
   from normal document flow so no white space appears after footer.
   ============================================================ */

#scroll-top.scroll-top {
  position: fixed !important;

  right: 19px !important;
  bottom: 15px !important;

  width: 44px !important;
  height: 44px !important;

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

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

  visibility: hidden;
  opacity: 0;

  z-index: 99999 !important;

  background: linear-gradient(
    90deg,
    rgb(51, 71, 91) 0%,
    rgb(81, 111, 144) 101.34%
  ) !important;

  border: 0 !important;
  border-radius: 50% !important;

  color: #ffffff !important;
  text-decoration: none !important;

  transform: none !important;

  transition:
    opacity .4s ease,
    visibility .4s ease,
    background .4s ease !important;
}

#scroll-top.scroll-top i {
  margin: 0 !important;
  padding: 0 !important;

  font-size: 24px !important;
  line-height: 1 !important;

  color: #ffffff !important;
}

#scroll-top.scroll-top:hover {
  background: linear-gradient(
    90deg,
    rgb(61, 81, 101) 0%,
    rgb(91, 121, 154) 101.34%
  ) !important;
}

#scroll-top.scroll-top.active {
  visibility: visible !important;
  opacity: 1 !important;

  bottom: 15px !important;
}

/* Mobile: keep Scroll-to-Top above the sticky bottom bar.
   WhatsApp mobile behavior remains exactly as your existing code defines it. */
@media (max-width: 768px) {
  #scroll-top.scroll-top {
    right: 24px !important;
    bottom: 80px !important;
  }

  #scroll-top.scroll-top.active {
    bottom: 80px !important;
  }
}

/* ============================================================
   MOBILE STICKY BAR — WHITE STRIP FIX ONLY
   Keeps all existing sticky-bar content unchanged.
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --lu-sticky-h: 66px;
    --lu-sticky-gap: 18px;
    --lu-sticky-lift: calc(var(--lu-sticky-h) + var(--lu-sticky-gap));
  }

  .lu-sticky-bar {
    display: flex !important;

    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: var(--lu-sticky-h) !important;

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

    background: rgba(28, 24, 19, .96) !important;
    color: #F2EBDC !important;

    border-top: 1px solid rgba(196, 154, 76, .25) !important;

    box-shadow: 0 -10px 30px rgba(0,0,0,.32) !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    z-index: 9990 !important;
  }

  .lu-sticky-item {
    position: relative !important;

    flex: 1 1 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    min-width: 0 !important;

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

    background: transparent !important;
    color: #F2EBDC !important;

    border: 0 !important;

    font-family: var(--sans, 'Jost', system-ui, sans-serif) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: .02em !important;

    text-decoration: none !important;

    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  .lu-sticky-item:hover,
  .lu-sticky-item:focus,
  .lu-sticky-item:active {
    color: #F2EBDC !important;
    text-decoration: none !important;
  }

  .lu-sticky-item:not(:last-child)::after {
    content: "" !important;

    position: absolute !important;
    right: 0 !important;
    top: 12px !important;
    bottom: 12px !important;

    width: 1px !important;

    background: rgba(242,235,220,.10) !important;
  }

  .lu-sticky-item i {
    margin: 0 !important;

    font-size: 18px !important;
    line-height: 1 !important;

    color: #C49A4C !important;
  }

  .lu-sticky-item.lu-whatsapp i {
    color: #25D366 !important;
  }

  .lu-sticky-item span {
    display: block !important;
    color: inherit !important;
  }

  /* Keep floating buttons safely above the sticky bar */
  .whatsapp-float {
    display: flex !important;
    position: fixed !important;
    right: 20px !important;
    bottom: 136px !important;
  }

  #scroll-top.scroll-top {
    position: fixed !important;
    right: 24px !important;
    bottom: 80px !important;
  }

  #scroll-top.scroll-top.active {
    bottom: 80px !important;
  }
}