/* ==========================================================================
   COMPONENTS.CSS — Reusable UI Components
   ==========================================================================
   WordPress/Elementor: Each component maps to a Widget or Container pattern.
   ========================================================================== */

/* ==========================================================================
   TOP NAVIGATION
   Elementor: Header → Container → Logo + Nav Container + Button
   ========================================================================== */

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  padding: var(--space-md) 0;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: padding var(--transition-base), box-shadow var(--transition-base);
  /* GPU acceleration to prevent border rendering jitter against the animated background */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

.top-nav.scrolled {
  padding: var(--space-sm) 0;
  box-shadow: var(--shadow-nav);
}

.top-nav__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--margin-mobile);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 768px) {
  .top-nav__inner {
    padding: 0 var(--gutter);
  }
}

.top-nav__logo {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md);
  line-height: var(--text-headline-md-lh);
  font-weight: var(--text-headline-md-fw);
  letter-spacing: -0.04em;
  color: var(--primary);
  text-decoration: none;
  /* Safety net: keeps the logo from wrapping or pushing other header
     elements (cart icon, Get Quote button, hamburger) off-screen on
     narrow viewports if the brand text is ever changed to something
     longer than "BOSS". */
  max-width: 50vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-nav__links {
  display: none;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 768px) {
  .top-nav__links {
    display: flex;
  }
}

.nav-link {
  font-family: var(--font-body);
  font-size: var(--text-label-bold);
  line-height: var(--text-label-bold-lh);
  letter-spacing: var(--text-label-bold-ls);
  font-weight: var(--text-label-bold-fw);
  color: var(--on-surface-variant);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nav-link:hover {
  color: var(--primary);
}

.nav-link--active {
  color: var(--secondary);
  font-weight: 700;
  border-bottom: 2px solid var(--secondary);
  padding-bottom: 2px;
}

.nav-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-surface-variant);
  text-decoration: none;
  position: relative;
  padding: var(--space-xs);
  transition: color var(--transition-fast);
}

.nav-icon-link:hover {
  color: var(--primary);
}

.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: var(--secondary);
  color: var(--on-secondary);
  font-size: 10px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Mobile Menu Toggle */
.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }
}

/* Mobile Menu Overlay */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.mobile-menu.is-open {
  opacity: 1;
  pointer-events: all;
}

.mobile-menu .nav-link {
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-lh);
}

.mobile-menu__close {
  position: absolute;
  top: var(--space-md);
  right: var(--margin-mobile);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primary);
  padding: var(--space-sm);
}

/* ==========================================================================
   BUTTONS
   Elementor: Button Widget
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-label-bold);
  line-height: var(--text-label-bold-lh);
  letter-spacing: var(--text-label-bold-ls);
  font-weight: var(--text-label-bold-fw);
  padding: 1rem 2rem;
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn svg,
.btn .material-symbols-outlined {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.3, 1);
}

.btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background-size: 250% 100%;
  background-position: 0% 0%;
  z-index: -1;
  transition: background-position 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: left 0.8s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.3s ease;
}

.btn:hover {
  transform: translateY(-4px) scale(1.015);
}

.btn:hover::before {
  background-position: 100% 0%;
}

.btn:hover::after {
  left: 150%;
  opacity: 1;
}

.btn:hover svg,
.btn:hover .material-symbols-outlined {
  transform: translateX(4px);
}

.btn:active {
  transform: translateY(-1px) scale(0.985);
}

/* Primary (Bright Royal Blue) */
.btn--primary {
  background: linear-gradient(135deg, #0058be 0%, #0076f7 100%);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.btn--primary::before {
  background-image: linear-gradient(120deg, transparent 50%, #8b5cf6 50%, #ec4899 100%);
}

.btn--primary:hover {
  border-color: rgba(236, 72, 153, 0.4);
  box-shadow: 
    0 15px 30px rgba(236, 72, 153, 0.25), 
    0 4px 10px rgba(236, 72, 153, 0.15);
}

/* Secondary (Vibrant Blue/Cyan Accent) */
.btn--secondary {
  background: linear-gradient(135deg, #0076f7 0%, #00b4d8 100%);
  color: #ffffff;
}

.btn--secondary::before {
  background-image: linear-gradient(120deg, transparent 50%, #ff9f43 50%, #ff5252 100%);
}

.btn--secondary:hover {
  box-shadow: 
    0 15px 30px rgba(255, 82, 82, 0.3), 
    0 4px 10px rgba(255, 82, 82, 0.2);
}

/* WhatsApp (Bright Green) */
.btn--whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #1ea952 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.2);
}

.btn--whatsapp::before {
  background-image: linear-gradient(120deg, transparent 50%, #2cf477 50%, #1ea952 100%);
}

.btn--whatsapp:hover {
  box-shadow: 
    0 15px 30px rgba(44, 244, 119, 0.3), 
    0 4px 10px rgba(44, 244, 119, 0.15);
}

/* Outline (Bright Blue Outline) */
.btn--outline {
  background: transparent;
  color: #0058be;
  border: 2px solid #0058be;
  backdrop-filter: blur(4px);
  transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1), color 0.3s ease, border-color 0.3s ease;
}

.btn--outline::before {
  background-image: linear-gradient(120deg, transparent 50%, #8b5cf6 50%, #ec4899 100%);
}

.btn--outline:hover {
  border-color: #ec4899;
  color: #ffffff;
  box-shadow: 
    0 15px 30px rgba(236, 72, 153, 0.25),
    0 4px 10px rgba(236, 72, 153, 0.15);
}

/* White (Bright White) */
.btn--white {
  background: #ffffff;
  color: #0058be;
  border: 2px solid rgba(0, 88, 190, 0.15);
  transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1), color 0.3s ease;
}

.btn--white::before {
  background-image: linear-gradient(120deg, transparent 50%, #0058be 50%, #0076f7 100%);
}

.btn--white::after {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.05) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}

.btn--white:hover {
  color: #ffffff;
  box-shadow: 
    0 15px 30px rgba(0, 88, 190, 0.2), 
    0 4px 10px rgba(0, 88, 190, 0.1);
}

/* Ghost (text link style) */
.btn--ghost {
  background: transparent;
  color: var(--on-surface-variant);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  overflow: visible;
}

.btn--ghost::after {
  display: none;
}

.btn--ghost:hover {
  color: #0058be;
  transform: translateY(-2px);
}

/* Size Variants */
.btn--sm {
  padding: 0.625rem 1.5rem;
}

.btn--lg {
  padding: 1.25rem 2.5rem;
}

.btn--xl {
  padding: 1.25rem 3rem;
}

.btn--full {
  width: 100%;
}

/* ==========================================================================
   GLASS CARD
   Elementor: Container Widget with Custom CSS
   ========================================================================== */

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1.5px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-xl);
  /* GPU acceleration to prevent border rendering jitter against the animated background */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

.glass-card--elevated {
  box-shadow: var(--shadow-xl);
}

.glass-card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2xl);
}

/* ==========================================================================
   SERVICE CARD
   Elementor: Container → Icon Box + Heading + Text
   ========================================================================== */

.service-card {
  padding: 2rem;
  transition: transform var(--transition-base);
}

.service-card:hover {
  transform: translateY(-8px);
}

.service-card__icon {
  width: 3.5rem;
  height: 3.5rem;
  background-color: rgba(0, 88, 190, 0.1);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  margin-bottom: 1.5rem;
}

.service-card__icon .material-symbols-outlined {
  font-size: 1.875rem;
}

.service-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md);
  line-height: var(--text-headline-md-lh);
  font-weight: var(--text-headline-md-fw);
  margin-bottom: 0.75rem;
}

.service-card__text {
  color: var(--on-surface-variant);
}

/* ==========================================================================
   PRICING CARD
   Elementor: Container → Badge + Heading + Price + Icon List + Button
   ========================================================================== */

.pricing-card {
  padding: 2rem;
  border-radius: var(--radius-2xl);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--transition-base);
  overflow: visible !important;
}

.pricing-card:hover {
  transform: translateY(-4px);
}

.pricing-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md);
  line-height: var(--text-headline-md-lh);
  font-weight: var(--text-headline-md-fw);
  margin-bottom: 0.5rem;
}

.pricing-card__subtitle {
  color: var(--on-surface-variant);
  font-size: var(--text-body-md);
  margin-bottom: 1.5rem;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.pricing-card__price-currency {
  font-size: var(--text-label-bold);
  font-weight: var(--text-label-bold-fw);
  color: var(--secondary);
}

.pricing-card__price-amount {
  font-family: var(--font-heading);
  font-size: var(--text-price-display);
  line-height: var(--text-price-display-lh);
  font-weight: var(--text-price-display-fw);
}

.pricing-card__price-period {
  color: var(--on-surface-variant);
}

.pricing-card__note {
  font-size: 12px;
  font-weight: var(--text-label-bold-fw);
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 2rem;
}

.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem 0;
  flex-grow: 1;
}

.pricing-card__features li {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.pricing-card__features .material-symbols-outlined {
  color: var(--secondary);
  font-size: 20px;
  flex-shrink: 0;
}

.pricing-card__footer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Popular variant */
.pricing-card--popular {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 2px solid rgba(184, 117, 0, 0.25);
  position: relative;
  box-shadow: var(--shadow-xl);
  z-index: 10;
}

/* Below 1024px, .grid--3 collapses to a single column (see layout.css), so
   pricing cards stack vertically with only the grid's 24px gap between them.
   The badge below pokes above its own card by half its height via
   translateY(-50%) — on desktop that's fine since cards sit side by side,
   but stacked on mobile/tablet it visually overlaps the bottom of whichever
   card comes before it. Extra top margin here gives the badge room to float
   clear of the previous card without touching the desktop layout at all. */
@media (max-width: 1023px) {
  .pricing-card--popular {
    margin-top: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .pricing-card--popular {
    transform: scale(1.05);
  }
  .pricing-card--popular:hover {
    transform: scale(1.05) translateY(-4px);
  }
}

.pricing-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--tertiary-container);
  color: var(--tertiary-fixed);
  font-size: 12px;
  font-weight: var(--text-label-bold-fw);
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}

/* Dark pricing card */
.pricing-card--dark {
  background-color: var(--primary) !important;
  color: var(--on-primary);
  border: 4px solid rgba(0, 88, 190, 0.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.pricing-card--dark .pricing-card__subtitle {
  color: var(--secondary-fixed-dim);
}

.pricing-card--dark .pricing-card__price-currency {
  color: var(--secondary-fixed-dim);
}

.pricing-card--dark .pricing-card__price-period {
  color: var(--secondary-fixed-dim);
}

.pricing-card--dark .pricing-card__features li {
  color: var(--on-primary);
}

/* ==========================================================================
   PRODUCT CARD
   Elementor: Container → Image + Container (title + price) + Text + Buttons
   ========================================================================== */

.product-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow: var(--glass-shadow);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  /* GPU acceleration to prevent border rendering jitter against the animated background */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

.product-card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.product-card__image {
  position: relative;
  overflow: hidden;
  height: 18rem;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-image);
}

.product-card:hover .product-card__image img {
  transform: scale(1.05);
}

.product-card__tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
  color: var(--on-primary);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: var(--text-label-bold-fw);
}

.product-card__body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.product-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md);
  line-height: var(--text-headline-md-lh);
  font-weight: var(--text-headline-md-fw);
  color: var(--primary);
}

.product-card__status {
  font-size: 12px;
  font-weight: var(--text-label-bold-fw);
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.product-card__price {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md);
  line-height: var(--text-headline-md-lh);
  font-weight: var(--text-headline-md-fw);
  color: var(--secondary);
  text-align: right;
}

.product-card__price-convert {
  font-size: 10px;
  color: var(--outline);
  font-weight: 700;
}

.product-card__description {
  color: var(--on-surface-variant);
  margin-bottom: 2rem;
  flex-grow: 1;
}

.product-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ==========================================================================
   FAQ ACCORDION
   Elementor: Toggle Widget
   ========================================================================== */

.faq-item {
  padding: 1.5rem;
  border-radius: var(--radius-xl);
}

.faq-item__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-lh);
  font-weight: var(--text-label-bold-fw);
  color: var(--on-surface);
  padding: 0;
}

.faq-item__trigger .material-symbols-outlined {
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

.faq-item.is-open .faq-item__trigger .material-symbols-outlined {
  transform: rotate(180deg);
}

.faq-item__content {
  margin-top: 1rem;
  color: var(--on-surface-variant);
  font-size: var(--text-body-md);
  line-height: var(--text-body-md-lh);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base), opacity var(--transition-base);
  opacity: 0;
}

.faq-item.is-open .faq-item__content {
  max-height: 500px;
  opacity: 1;
}

/* ==========================================================================
   BADGE / PILL
   Elementor: Container → Icon + Text
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  border-radius: var(--radius-full);
  font-size: var(--text-label-bold);
  font-weight: var(--text-label-bold-fw);
  letter-spacing: var(--text-label-bold-ls);
}

.badge--secondary {
  background-color: var(--secondary-fixed);
  color: var(--on-secondary-fixed-variant);
}

.badge--tertiary {
  background-color: var(--tertiary-fixed);
  color: var(--on-tertiary-fixed);
}

.badge--surface {
  background: rgba(231, 232, 233, 0.5);
  border: 1px solid rgba(198, 198, 205, 0.3);
  color: var(--on-surface-variant);
}

.badge--primary-soft {
  background: rgba(0, 88, 190, 0.1);
  border: 1px solid rgba(0, 88, 190, 0.2);
  color: var(--secondary);
}

.badge .material-symbols-outlined {
  font-size: 18px;
}

/* ==========================================================================
   TRUST STRIP
   Elementor: Section → Container → Icon + Text (repeated)
   ========================================================================== */

.trust-strip {
  padding: var(--space-lg) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(252, 252, 253, 0.45);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.trust-strip__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 768px) {
  .trust-strip__inner {
    justify-content: space-between;
    gap: 1rem;
  }
}

.trust-strip__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.trust-strip__item .material-symbols-outlined {
  color: var(--secondary);
}

.trust-strip__item span:last-child {
  font-weight: var(--text-label-bold-fw);
  color: var(--on-surface);
}

.trust-strip__divider {
  display: none;
  width: 1px;
  height: 1.5rem;
  background: rgba(198, 198, 205, 0.5);
}

@media (min-width: 768px) {
  .trust-strip__divider {
    display: block;
  }
}

/* ==========================================================================
   PORTFOLIO CARD
   Elementor: Container → Image + Overlay Container
   ========================================================================== */

.portfolio-card {
  position: relative;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-3xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255, 255, 255, 0.35);
  /* GPU acceleration to prevent border rendering jitter against the animated background */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

.portfolio-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  transition: transform var(--transition-slow);
}

.portfolio-card:hover .portfolio-card__image {
  transform: scale(1.05);
}

.portfolio-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.portfolio-card__title {
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: var(--text-headline-md);
  line-height: var(--text-headline-md-lh);
  font-weight: var(--text-headline-md-fw);
  margin-bottom: 0.5rem;
}

.portfolio-card__subtitle {
  color: rgba(255, 255, 255, 0.8);
}

.portfolio-card__stat {
  text-align: right;
}

.portfolio-card__stat-value {
  color: var(--secondary);
  font-weight: 700;
  font-size: 1.5rem;
}

.portfolio-card__stat-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

/* ==========================================================================
   FORM ELEMENTS
   Elementor: Form Widget fields
   ========================================================================== */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-family: var(--font-body);
  font-size: var(--text-label-bold);
  line-height: var(--text-label-bold-lh);
  letter-spacing: var(--text-label-bold-ls);
  font-weight: var(--text-label-bold-fw);
  color: var(--on-surface-variant);
  display: block;
  padding-left: 0.25rem;
  text-transform: uppercase;
  transition: color var(--transition-fast);
}

.form-label.is-focused {
  color: var(--secondary);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 1rem;
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  background: rgba(237, 238, 239, 0.5);
  backdrop-filter: blur(4px);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--text-body-md-lh);
  color: var(--on-surface);
  transition: all var(--transition-base);
  outline: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--secondary);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 88, 190, 0.1);
}

.form-input::placeholder {
  color: var(--outline);
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%2376777d' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 3rem;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

/* Form States */
.form-input.is-error,
.form-select.is-error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.1);
}

.form-error {
  color: var(--error);
  font-size: 12px;
  font-weight: var(--text-label-bold-fw);
  display: none;
}

.form-group.has-error .form-error {
  display: block;
}

.form-success {
  background: rgba(37, 211, 102, 0.1);
  color: #1a7f37;
  padding: 1rem;
  border-radius: var(--radius-lg);
  text-align: center;
  font-weight: var(--text-label-bold-fw);
  display: none;
}

.form-success.is-visible {
  display: block;
}

/* ==========================================================================
   WHATSAPP FAB
   Elementor: Floating Buttons plugin or custom HTML widget
   ========================================================================== */

.whatsapp-fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 50;
  width: 4rem;
  height: 4rem;
  background-color: var(--whatsapp-green);
  color: #ffffff;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.4);
  text-decoration: none;
  transition: transform var(--transition-fast);
  /* GPU acceleration to prevent rendering jitter against the animated background */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

.whatsapp-fab:hover {
  transform: scale(1.1);
}

.whatsapp-fab:active {
  transform: scale(0.95);
}

.whatsapp-fab svg {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
}
/* Adjust for mobile bottom nav */
@media (max-width: 767px) {
  .whatsapp-fab {
    bottom: 6rem;
  }
}

/* ==========================================================================
   MOBILE BOTTOM NAV
   Elementor: Sticky Footer Container + Button
   ========================================================================== */

.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 40;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-bottom-nav);
  display: block;
  /* GPU acceleration to prevent rendering jitter against the animated background */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

@media (min-width: 768px) {
  .mobile-bottom-nav {
    display: none;
  }
}

.mobile-bottom-nav .btn {
  width: 100%;
  padding: 1rem 1.5rem;
}

/* ==========================================================================
   DECORATIVE ELEMENTS
   ========================================================================== */

/* Glow Blob */
.glow-blob {
  position: absolute;
  width: 400px;
  height: 400px;
  background: var(--gradient-glow-blob);
  border-radius: 50%;
  z-index: 0;
  filter: blur(40px);
  pointer-events: none;
}

.glow-blob--fixed {
  position: fixed;
  width: 600px;
  height: 600px;
  filter: blur(80px);
  z-index: -1;
}

/* Mesh Gradient Background */
.mesh-gradient {
  background-color: var(--background);
  background-image: var(--gradient-mesh);
}

.mesh-gradient-alt {
  background-color: var(--background);
  background-image: var(--gradient-mesh-alt);
}

/* Ambient Glow */
.ambient-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 88, 190, 0.1) 0%, rgba(0, 88, 190, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

/* ==========================================================================
   PAYMENT BADGES
   ========================================================================== */

.payment-badge {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: nowrap !important;
}

.payment-badge--muted {
  opacity: 0.6;
  filter: grayscale(1);
  transition: all var(--transition-base);
}

.payment-badge--muted:hover {
  opacity: 1;
  filter: grayscale(0);
}

.payment-badge img {
  display: none !important;
}

.payment-badge::before {
  content: "payments" !important;
  font-family: "Material Symbols Outlined" !important;
  font-size: 20px !important;
  color: var(--secondary) !important;
  font-variation-settings: 'FILL' 1 !important;
  display: inline-block !important;
}

.payment-badge span {
  font-size: 10px;
  font-weight: var(--text-label-bold-fw);
  text-transform: uppercase;
}


/* ==========================================================================
   FOOTER
   Elementor: Footer → Container → Grid of Containers
   ========================================================================== */

.site-footer {
  width: 100%;
  padding: var(--section-padding) 0;
  background: rgba(252, 252, 253, 0.45);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

/* The mobile bottom WhatsApp bar (.mobile-bottom-nav, defined further down)
   is fixed to the bottom of the viewport below 768px and sits on top of
   whatever content happens to be there when the page is scrolled all the
   way down — including the footer's last row. Reserving extra bottom
   padding here, sized to clear the bar's own height (1rem top+bottom
   padding plus the button), keeps the real footer content visible above it
   instead of hidden underneath. */
@media (max-width: 767px) {
  .site-footer {
    padding-bottom: calc(var(--section-padding) + 5rem);
  }
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.site-footer__brand-text {
  color: var(--on-surface-variant);
  max-width: 24rem;
}

.site-footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-label-bold);
  font-weight: var(--text-label-bold-fw);
  letter-spacing: var(--text-label-bold-ls);
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1.5rem;
}

.site-footer__link {
  display: block;
  color: var(--on-surface-variant);
  margin-bottom: 1rem;
  transition: color var(--transition-fast);
}

.site-footer__link:hover {
  color: var(--secondary);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(198, 198, 205, 0.1);
  color: var(--on-surface-variant);
  font-size: 14px;
}

@media (min-width: 768px) {
  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.site-footer__social {
  display: flex;
  gap: 1.5rem;
}

.site-footer__social a {
  color: var(--on-surface-variant);
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-footer__social a:hover {
  color: var(--secondary);
}

/* ==========================================================================
   ICON CIRCLE
   ========================================================================== */

.icon-circle {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-circle--sm {
  width: 2.5rem;
  height: 2.5rem;
}

.icon-circle--md {
  width: 3rem;
  height: 3rem;
}

.icon-circle--lg {
  width: 4rem;
  height: 4rem;
}

.icon-circle--secondary-soft {
  background-color: rgba(0, 88, 190, 0.1);
  color: var(--secondary);
}

.icon-circle--primary {
  background-color: var(--primary);
  color: var(--on-primary);
}

.icon-circle--whatsapp-soft {
  background-color: rgba(37, 211, 102, 0.1);
}

.icon-circle--secondary-20 {
  background-color: rgba(0, 88, 190, 0.2);
}