/* ===== cricketnwillow.com: site fixes (static build) ===== */

/* Prevent broken first paint of Elementor/Swiper carousel */
html.ugen-swiper-hiding .elementor-element-296b09a .elementor-image-carousel-wrapper{ opacity:0; }
.elementor-element-296b09a .elementor-image-carousel-wrapper{ overflow:hidden; }

/* ugen-slider-width-1500: Desktop: make hero slider wider (1500px) but centered */
@media (min-width: 1025px){
  /* IMPORTANT: this widget lives inside a "content" container.
     Use a fixed width + translate centering so Swiper calculates 1500px on desktop. */
  .elementor-element-296b09a{
    width: 1500px !important;
    max-width: calc(100vw - 40px) !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }
  .elementor-element-296b09a .elementor-image-carousel-wrapper{
    width: 100% !important;
    max-width: none !important;
    border-radius: 10px;
  }
}

/* Make hero slider a bit less tall without changing width */
.elementor-element-296b09a .swiper-slide-inner{ max-height: 420px; }
.elementor-element-296b09a .swiper-slide-image{ height: 420px; width:100% !important; max-width:none !important; object-fit: cover; object-position:center; display:block; }
@media (max-width: 1024px){
  .elementor-element-296b09a .swiper-slide-inner{ max-height: 320px; }
  .elementor-element-296b09a .swiper-slide-image{ height: 320px; width:100% !important; max-width:none !important; }
}
@media (max-width: 767px){
  .elementor-element-296b09a .swiper-slide-inner{ max-height: 240px; }
  .elementor-element-296b09a .swiper-slide-image{ height: 240px; width:100% !important; max-width:none !important; }
}
/* Hide testimonial/carousel until JS fixes Swiper */
html.ugen-swiper-hiding .elementor-main-swiper{ opacity:0; }
.elementor-main-swiper{ overflow:hidden; }

/* FIX (stable): in exported Elementor HTML, some image widgets keep "sticky" markup that causes
   absolute positioning + runtime clones -> shaking/overlap. We strip sticky classes in HTML,
   and keep images responsive here. */
.site-main img.attachment-large,
.site-main img.size-large,
.site-main .elementor-widget-image img{
  display:block;
  max-width:100%;
  height:auto;
  margin: 0 auto 18px;
}

/* Just in case any sticky spacers/clones appear at runtime, hide them */
.site-main .elementor-sticky__spacer{
  display:none !important;
}

/* cricketnwillow: stability + mobile CTA fixes */
.elementor-invisible{opacity:1!important;visibility:visible!important;}
.animated{animation:none!important;}
.elementor-widget-image img{display:block;max-width:100%;height:auto;}
/* prevent sticky overlays from breaking layout */
.elementor-sticky, .elementor-sticky--active{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important;}
.elementor-sticky__spacer{display:none!important;height:0!important;}
/* ensure CTA buttons render on mobile even if Elementor hidden rules exist elsewhere */
@media (max-width:1024px){
  .elementor-widget-button{display:block!important;}
  .elementor-widget-button .elementor-button{display:inline-flex!important;align-items:center;justify-content:center;}
}

/* Disable all entrance/scroll animations + autoplay-ish transitions */
*, *::before, *::after {
  animation: none !important;
}
.elementor-invisible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
/* Ensure header logo is consistent on all devices */
.elementor-location-header .elementor-element.elementor-element-1fd53e0 {
  max-width: 150px !important;
}
.elementor-location-header .elementor-element.elementor-element-1fd53e0 img,
.elementor-location-header .elementor-element.elementor-element-4348757 img {
  width: 150px !important;
  height: auto !important;
}
@media (min-width:1025px){
  .elementor-location-header .elementor-element.elementor-element-1fd53e0 {
    max-width: 220px !important;
  }
  .elementor-location-header .elementor-element.elementor-element-1fd53e0 img,
  .elementor-location-header .elementor-element.elementor-element-4348757 img {
    width: 220px !important;
  }
}
/* Stop dropdown menu fading/sliding */
.elementor-nav-menu--dropdown {
  transform: none !important;
}

/* =========================================================
   cricketnwillow.com — Luxury theme (static)
   Palette: deep navy + champagne + gold (“дорого и богато”)
   ========================================================= */
:root{
  --cw-bg:#070a15;
  --cw-surface:#0f172a;
  --cw-champ:#f7f3ea;
  --cw-card:#ffffff;
  --cw-text:#111827;
  --cw-muted:#5b6475;
  --cw-gold:#d4af37;
  --cw-gold2:#f3d67a;
  --cw-border:rgba(212,175,55,.28);
  --cw-shadow:0 18px 46px rgba(2,6,23,.18);
}

html,body{background:var(--cw-bg);}
body{
  color:var(--cw-text);
  font-family: Lato, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 520px at 50% 0%, rgba(212,175,55,.18), transparent 60%),
    radial-gradient(900px 520px at 10% 80%, rgba(99,102,241,.10), transparent 62%),
    radial-gradient(900px 520px at 90% 85%, rgba(59,130,246,.08), transparent 60%),
    var(--cw-bg);
}

/* Premium “card on dark background” feel */
#outer-wrap{background: var(--cw-champ);}
@media (min-width: 1100px){
  #outer-wrap{box-shadow: var(--cw-shadow);}
}

/* Typography */
h1,h2,h3,h4,h5,h6,.elementor-heading-title{
  font-family: "Roboto Slab", "Roboto", Georgia, serif;
  letter-spacing: .2px;
}
h1,h2{font-weight:800;}

/* ===== Header / Menu (luxury light) ===== */
#top-bar-wrap{display:none !important;}
#site-header,.elementor-location-header{
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid rgba(212,175,55,.35) !important;
  box-shadow: 0 14px 44px rgba(2,6,23,.10) !important;
  backdrop-filter: blur(12px);
}
.elementor-location-header .e-con-inner{padding-top:12px;padding-bottom:12px;}

/* Fix: the container that only holds the floating button had a dark background -> black stripe */
.elementor-element-925d417{
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: visible !important;
}
.elementor-element-925d417 > .e-con-inner{padding:0 !important;}

#site-header .elementor-nav-menu--main a,
#site-header a.elementor-item{
  color: rgba(10,16,28,.90) !important;
  font-weight: 800;
}
#site-header a.elementor-item:hover,
#site-header a.elementor-item:focus,
#site-header .elementor-nav-menu--main .current-menu-item > a{
  color: var(--cw-gold2) !important;
}

/* Burger icon contrast on light header */
#site-header .elementor-menu-toggle{color: rgba(10,16,28,.92) !important;}
#site-header .elementor-menu-toggle svg{fill: rgba(10,16,28,.92) !important;}

/* Dropdown menu */
#site-header .elementor-nav-menu--dropdown{
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(2,6,23,.10) !important;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(2,6,23,.12);
  overflow: hidden;
}
#site-header .elementor-nav-menu--dropdown a{color: rgba(10,16,28,.92) !important;}
#site-header .elementor-nav-menu--dropdown a:hover{
  background: rgba(212,175,55,.10) !important;
  color: var(--cw-gold2) !important;
}

/* Header CTA button */
#site-header .elementor-button,
#site-header .theme-button{
  background: linear-gradient(135deg, #f7d17a, var(--cw-gold2)) !important;
  color: #111 !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(212,175,55,.28);
}
#site-header .elementor-button:hover{
  filter: brightness(1.03);
  box-shadow: 0 18px 38px rgba(212,175,55,.34);
}

/* Logo on light header */
.elementor-location-header img{filter: drop-shadow(0 8px 16px rgba(2,6,23,.14));}

/* ===== Main content ===== */
main#main,.site-main{background: transparent;}
.elementor-section,.e-con{background: transparent;}

/* Improve button styling site-wide */
.elementor-button,button,input[type="submit"],.theme-button{border-radius:999px;}

/* Links */
a{color:#0b3a8f;}
a:hover{color:#0b3a8f;text-decoration:underline;}

/* ===== Swiper arrows & pagination — gold ===== */
.elementor-swiper-button,
.swiper-button-next,
.swiper-button-prev{
  background: rgba(15,23,42,.78);
  border: 1px solid var(--cw-border);
  border-radius: 999px;
  box-shadow: 0 14px 26px rgba(2,6,23,.18);
}
.elementor-swiper-button svg,
.swiper-button-next svg,
.swiper-button-prev svg{fill: var(--cw-gold2);}
.swiper-pagination-bullet{background: rgba(15,23,42,.25) !important;opacity:1 !important;}
.swiper-pagination-bullet-active{background: var(--cw-gold) !important;}

/* ===== Testimonials: “premium cards” ===== */
.elementor-testimonial{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--cw-border);
  border-radius: 18px;
  box-shadow: 0 20px 52px rgba(2,6,23,.12);
}
.elementor-testimonial__text{color:var(--cw-text) !important;font-size:16px;line-height:1.75;}
.elementor-testimonial__name{color:#7a5c00 !important;font-weight:800;}

/* Footer */
.elementor-location-footer{
  background: linear-gradient(180deg, #0b1220 0%, #070a15 100%) !important;
  border-top: 1px solid var(--cw-border);
}
/* Elementor static exports keep a light gradient on the main footer container.
   Override it to a darker (luxury) gradient so the menu is readable. */
.elementor-location-footer .elementor-element.elementor-element-2ba1b9e:not(.elementor-motion-effects-element-type-background),
.elementor-location-footer .elementor-element.elementor-element-2ba1b9e > .elementor-motion-effects-container > .elementor-motion-effects-layer{
  background-color: #0a0f18 !important;
  background-image: linear-gradient(180deg, #0a0f18 0%, #2b1600 100%) !important;
}
.elementor-location-footer,.elementor-location-footer *{color: rgba(255,255,255,.86) !important;}
.elementor-location-footer a:hover{color: var(--cw-gold2) !important;}

/* WhatsApp floating button (sticky on all pages) */
.whatsapp-button{
  position: fixed;
  right: 20px;
  /* keep it just above the OceanWP scroll-to-top button (bottom:20px) */
  bottom: 75px;
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, #20b557, #25D366);
  box-shadow: 0 18px 34px rgba(37,211,102,.24);
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease, background-color .2s ease;
}
.whatsapp-button svg{
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: currentColor;
}
.whatsapp-button span{display:inline-block; white-space:nowrap;}
.whatsapp-button:hover{
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 24px 44px rgba(37,211,102,.30);
}

@media (max-width: 480px){
  .whatsapp-button{
    right: 10px;
    bottom: 56px; /* scroll-top becomes smaller + moves to 10px */
    padding: 8px 14px;
    font-size: 14px;
  }
  .whatsapp-button svg{width:22px; height:22px;}
}

/* Contact page helpers */
.ugen-contact-card{
  border: 1px solid var(--cw-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 44px rgba(2,6,23,.10) !important;
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important;}
}

/* =========================================================
   Home page (desktop only): sticky “section images”
   Goal: keep the image fixed while you scroll the text in the same section,
   then let it move away when the next block starts.
   ========================================================= */
@media (min-width: 1025px){
  /* =========================================================
     Home page (desktop): replace the patterned background in the
     “Step-by-Step Login Process” section with a luxury gradient
     (gold + soft highlights). Overrides Elementor background image.
     Section container ID: 56f0146
     ========================================================= */
  body.home .elementor-27 .elementor-element.elementor-element-56f0146{
    position: relative;
    overflow: hidden;
    background-color: #fff2c9 !important; /* warm champagne base */
  }
  body.home .elementor-27 .elementor-element.elementor-element-56f0146:not(.elementor-motion-effects-element-type-background),
  body.home .elementor-27 .elementor-element.elementor-element-56f0146 > .elementor-motion-effects-container > .elementor-motion-effects-layer{
    /* Rich “champagne gold” with light flares (no external images) */
    background-image:
      radial-gradient(900px 520px at 18% 8%, rgba(255,255,255,.70), rgba(255,255,255,0) 62%),
      radial-gradient(760px 460px at 86% 22%, rgba(255,255,255,.40), rgba(255,255,255,0) 60%),
      radial-gradient(720px 520px at 45% 115%, rgba(255,255,255,.28), rgba(255,255,255,0) 62%),
      radial-gradient(1400px 820px at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.10) 100%),
      linear-gradient(135deg, #fff7df 0%, #f6df9c 32%, #e6c05a 62%, #fff1cf 100%)
      !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  /* Subtle “sheen” + micro-texture to make it look more premium */
  body.home .elementor-27 .elementor-element.elementor-element-56f0146::before{
    content: "";
    position: absolute;
    inset: -2px;
    pointer-events: none;
    opacity: .28;
    background:
      radial-gradient(520px 240px at 30% 12%, rgba(255,255,255,.55), rgba(255,255,255,0) 62%),
      radial-gradient(420px 220px at 72% 28%, rgba(255,255,255,.35), rgba(255,255,255,0) 65%),
      linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 40%, rgba(0,0,0,.14) 100%);
  }
  body.home .elementor-27 .elementor-element.elementor-element-56f0146::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .10;
    background-image: repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.22) 0,
      rgba(255,255,255,.22) 1px,
      rgba(255,255,255,0) 1px,
      rgba(255,255,255,0) 8px
    );
  }
  body.home .elementor-27 .elementor-element.elementor-element-56f0146 > .e-con-inner{
    position: relative;
    z-index: 1;
  }

  /* Sticky inside Elementor containers can break if any ancestor clips overflow */
  body.home .elementor-element-8b9393d,
  body.home .elementor-element-7b3e063,
  body.home .elementor-element-3e30c3f,
  body.home .elementor-element-56923d4{
    overflow: visible !important;
  }

  /* Make the image widgets sticky (NOT the outer containers with inline position:relative) */
  body.home .elementor-element-73b9ac5,
  body.home .elementor-element-5381234,
  body.home .elementor-element-605da58,
  body.home .elementor-element-ff39e2c{
    position: sticky !important;
    top: 120px; /* below the sticky header */
    align-self: flex-start;
    z-index: 3;
  }

  /* =========================================================
     Home page (desktop): center the last row in 5-item grids
     Containers render 3 cards per row; the 4th+5th were stuck to the left.
     We switch the grid to 6 columns and make each card span 2 columns,
     then place the last two cards in the middle.
     ========================================================= */
  body.home .elementor-element-72158c2,
  body.home .elementor-element-771aac1{
    --e-con-grid-template-columns: repeat(6, 1fr) !important;
    grid-template-columns: repeat(6, 1fr) !important; /* fallback */
  }

  body.home .elementor-element-72158c2 > .elementor-element,
  body.home .elementor-element-771aac1 > .elementor-element{
    grid-column: span 2 !important;
  }

  /* Grid #1: tiers (cards 4-5) */
  body.home .elementor-element-72158c2 > .elementor-element-3cfe68a{ /* 4th */
    grid-column: 2 / span 2 !important;
  }
  body.home .elementor-element-72158c2 > .elementor-element-c20356d{ /* 5th */
    grid-column: 4 / span 2 !important;
  }

  /* Grid #2: steps (cards 4-5) */
  body.home .elementor-element-771aac1 > .elementor-element-280b8bb{ /* 4th */
    grid-column: 2 / span 2 !important;
  }
  body.home .elementor-element-771aac1 > .elementor-element-d54b6b0{ /* 5th */
    grid-column: 4 / span 2 !important;
  }
}