/*
Theme Name: Weblodge Theme
Theme URI: https://weblodge.agency
Description: Custom child theme for Weblodge based on Astra.
Author: Weblodge
Author URI: https://weblodge.agency
Template: astra
Version: 1.0.0
Text Domain: weblodge-theme
*/










/* =========================================================
   WEBLODGE CUSTOM MOUSE CURSOR
========================================================= */

#mouse-circle-container {
  position: fixed;
  pointer-events: none;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  z-index: 9999;
  will-change: transform;
}

.white-dot {
  width: 8px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 50%;
  position: absolute;
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

#orange-lottie {
  transform: translate(-50%, -50%);
}










/* =========================================================
   COOKIE CONSENT MODAL
========================================================= */

#cookieModalBackdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(23, 1, 84, 0.8);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#cookieModalBackdrop.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#cookieModal {
  box-sizing: border-box;
  background: #170154;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  max-width: 400px;
  width: 90%;
  padding: 24px;
  margin-bottom: 20px;
  text-align: center;
  transform: translateY(110%);
  transition:
        transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

#cookieModalBackdrop.show #cookieModal {
  transform: translateY(0);
}

/* v50 (2026-11-12): the cookie display's content slides up one by
   one when it shows on a first visit - heading, then text, then
   the buttons - the site's usual content slide (60px rise, 1s,
   10% stagger). */
@keyframes wla-cookie-content-in {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: translateY(0); }
}

#cookieModalBackdrop.show #cookieModal > * {
  animation: wla-cookie-content-in 0.8s ease both;
}

#cookieModalBackdrop.show #cookieModal > *:nth-child(2) {
  animation-delay: 80ms;
}

#cookieModalBackdrop.show #cookieModal > *:nth-child(3) {
  animation-delay: 160ms;
}

#cookieModal:hover {
  border-color: rgba(38, 198, 249, 0.4);
    box-shadow: 0 0 18px rgba(38, 198, 249, 0.30);
}

#cookieModal h2 {
  font-size: 30px;
  font-weight: 500;
  margin: 0 0 12px;
  color: #ffffff;
}

#cookieModal p {
  font-size: 18px;
  margin: 0 0 20px;
  color: #f2f2f2;
}

#cookieModal .buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* BUTTON STYLING */

#cookieModal .btn {
  position: relative;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;

    height: 40px;
    min-height: 40px;
    width: fit-content;
    max-width: 100%;
    padding: 0 19px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50px;

    border:1px solid rgba(38, 198, 249, 0.40);

    background: rgba(38, 198, 249, 0.12) !important;

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

    color: #ffffff !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;

    text-decoration: none !important;
    white-space: nowrap;

    box-shadow: none;

    cursor: pointer;

    transition: 0.35s ease;
}

#cookieModal .button-text {
  display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;

    white-space: nowrap;
    text-decoration: none !important;

    animation: wla-button-text-slide 6s linear infinite;
}

@keyframes wla-button-text-slide {
    0%, 20%, 40%, 100% {
        transform: translateX(0);
    }

    30% {
        transform: translateX(-150%);
    }

    30.01% {
        transform: translateX(150%);
    }
}

#cookieModal .btn:hover {
  background: rgba(38, 198, 249, 0.18) !important;
    border: 1px solid rgba(38, 198, 249, 0.55) !important;
    box-shadow: 0 0 25px rgba(38, 198, 249, 0.35);
    color: #ffffff !important;
}

#cookieModal .btn:active {
  transform: scale(0.97);
}

#cookieModal .btn:focus,
#cookieModal .btn:focus-visible {
  outline: 2px solid #26c6f9;
    outline-offset: 4px;
    border-radius: 50px;
}

@media (max-width: 1024px) {
  #cookieModal {
  border-radius: 21px;
}
#cookieModal h2 {
    font-size: 28px;
  }

  #cookieModal p {
    font-size: 17px;
  }

  #cookieModal .btn {
    padding: 0 18px;
    font-size: 17px;
  }
}

@media (max-width: 767px) {
  #cookieModal {
  border-radius: 18px;
}
  #cookieModal h2 {
    font-size: 26px;
  }

  #cookieModal p {
    font-size: 16px;
  }

  #cookieModal .btn {
    padding: 0 15px;
    font-size: 16px;
  }
}

/* =========================================================
   404 PAGE (v50, 2026-11-12)
   Layout only: the badge, big text, subtitle, description and
   button all use the global classes, and the entrance engine
   slides them like any first container.
========================================================= */

.weblodge-404-section .wla-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  padding-top: 110px;
  padding-bottom: 110px;
}

.weblodge-404-section .wla-badge-wrap {
  display: flex;
  justify-content: center;
}

.weblodge-404-section h1,
.weblodge-404-section h2,
.weblodge-404-section p {
  margin: 0;
}

/* v53 (2026-11-12): line breaks that exist only on mobile. Used in
   the hero stats labels so all four labels wrap to exactly two
   lines on phones (Projects Completed was the only one wrapping
   before, which looked uneven) and stay on one line on desktop. */
.wla-br-mobile {
  display: none;
}

@media (max-width: 767px) {
  .wla-br-mobile {
    display: inline;
  }
}