/* Non-critical styles for BLeafIt – main.css */

/* Button variant that isn't critical for first paint */
.btn-ghost{
  background:transparent;
  color:var(--color-primary-600);
  border-color:transparent;
}

/* Sections */
.section{
  padding:var(--sp-64) var(--sp-16);
}
@media (min-width:768px){
  .section{
    padding:calc(var(--sp-64) + 1rem) var(--sp-16);
  }
}
.section-alt{
  background:linear-gradient(135deg, rgba(168,201,184,.25), rgba(200,213,185,.2));
}
.container{
  max-width:1200px;
  margin-inline:auto;
}
.section-header{
  text-align:center;
  margin-block-end:var(--sp-40);
}
.section-badge{
  display:inline-block;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(107,155,127,.25);
  padding:6px 14px;
  border-radius:999px;
  font-weight:700;
  color:var(--color-primary-600);
}
.section-title{
  margin:.5rem 0;
  font-size:clamp(1.6rem,4vw,2.4rem);
  font-weight:900;
}
.section-desc{
  max-width:720px;
  margin-inline:auto;
  color:var(--text-700);
}

/* Cards / grids */
.grid{
  display:grid;
  gap:var(--sp-20);
}
@media (min-width:768px){
  .grid.cols-3{grid-template-columns:repeat(3,1fr);}
  .grid.cols-2{grid-template-columns:repeat(2,1fr);}
}
.card{
  background:#fff;
  border-radius:var(--r-24);
  padding:var(--sp-24);
  box-shadow:var(--shadow-sm);
  border:2px solid transparent;
  transition:.25s;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:var(--color-primary-100);
}
.card .icon{
  display:grid;
  place-items:center;
  width:80px;
  height:80px;
  border-radius:50%;
  margin-inline:auto var(--sp-16);
  background:linear-gradient(135deg,#6B9B7F,#9DB89D);
  color:#fff;
  font-size:2rem;
}
.card h3{
  text-align:center;
  margin:0 0 var(--sp-12);
}
.card p{
  text-align:center;
  margin:0;
  color:var(--text-700);
}

/* Benefits */
.benefits{
  max-width:900px;
  margin-inline:auto;
  display:grid;
  gap:var(--sp-16);
}
@media (min-width:768px){
  .benefits{grid-template-columns:repeat(2,1fr);}
}
.benefit{
  display:flex;
  gap:var(--sp-16);
  align-items:flex-start;
  background:#fff;
  border-radius:var(--r-16);
  padding:var(--sp-20);
  box-shadow:var(--shadow-sm);
  border-inline-start:4px solid transparent;
}
.benefit:hover{
  border-inline-start-color:var(--color-primary-100);
  background:linear-gradient(135deg, rgba(168,201,184,.15), rgba(200,213,185,.15));
}
.benefit .emoji{
  font-size:1.6rem;
}

/* Gallery – coverflow/cards style */
.gallery .swiper{
  padding-block:var(--sp-24);
}
.gallery .slide{
  height:420px;
  border-radius:var(--r-24);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
@media (min-width:768px){
  .gallery .slide{height:520px;}
}
.gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s;
}
.gallery .slide:hover img{
  transform:scale(1.08);
}

/* Optional static (non-slider) layout if JS is disabled / different mode */
.carousel-static .swiper-wrapper{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.carousel-static .swiper-button-next,
.carousel-static .swiper-button-prev,
.carousel-static .swiper-pagination{
  display:none!important;
}

/* Testimonials */
.testi .card{
  text-align:center;
  padding:var(--sp-32);
}
.avatar{
  width:96px;
  height:96px;
  margin:0 auto var(--sp-16);
  border-radius:50%;
  overflow:hidden;
  border:4px solid var(--color-primary-100);
}
.quote{
  font-style:italic;
  margin:0 0 var(--sp-16);
}
.author{
  font-weight:800;
  color:var(--color-primary-600);
}

/* Info section */
.info-grid{
  display:grid;
  gap:var(--sp-20);
}
@media (min-width:768px){
  .info-grid{grid-template-columns:repeat(2,1fr);}
}
.info-card h3{
  font-size:1.5rem;
  font-weight:900;
  margin:0 0 var(--sp-16);
  background:linear-gradient(135deg,#6B9B7F,#9DB89D);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.list{
  list-style:none;
  margin:0;
  padding:0;
}
.list li{
  display:flex;
  justify-content:space-between;
  gap:var(--sp-12);
  padding-block:var(--sp-12);
  border-bottom:1px solid rgba(107,155,127,.12);
}
.list li:last-child{
  border-bottom:0;
}

/* Pricing */
.pricing{
  display:grid;
  gap:var(--sp-20);
}
@media (min-width:768px){
  .pricing{grid-template-columns:repeat(3,1fr);}
}
.price-card{
  position:relative;
  overflow:hidden;
}
.price-tag{
  display:flex;
  align-items:flex-end;
  gap:.25rem;
  font-weight:900;
  font-size:2rem;
  color:var(--color-primary-600);
}
.price-tag small{
  font-size:.9rem;
  font-weight:700;
  color:var(--text-700);
}
.features{
  list-style:none;
  margin:var(--sp-16) 0 0;
  padding:0;
  display:grid;
  gap:.5rem;
}
.features li:before{
  content:"✓";
  margin-inline-start:.5rem;
  color:var(--color-primary-600);
}
.pill{
  position:absolute;
  inset-inline-start:12px;
  inset-block-start:12px;
  background:linear-gradient(135deg,#D4A574,#B8956A);
  color:#fff;
  border-radius:999px;
  padding:4px 10px;
  font-weight:800;
  font-size:.85rem;
}

/* CTA bands */
.cta-band{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-24);
  padding:var(--sp-24);
  background:linear-gradient(135deg,#6B9B7F,#9DB89D);
}
.cta-band h3{
  color:#fff;
  margin:0 0 .5rem;
}
.cta-band p{
  color:#f5fff8;
  margin:0 0 1rem;
}

/* Contact */
.contact-grid{
  display:grid;
  gap:var(--sp-24);
}
@media (min-width:768px){
  .contact-grid{grid-template-columns:1fr 1fr;}
}
.form-group{
  margin-block-end:var(--sp-16);
}
label{
  display:block;
  font-weight:700;
  margin-block-end:var(--sp-8);
}
input,
select,
textarea{
  width:100%;
  font-family:inherit;
  font-size:1rem;
  padding:var(--sp-12);
  border-radius:var(--r-16);
  border:2px solid #e5ece8;
  transition:border-color .2s, background .2s;
}
input:focus,
select:focus,
textarea:focus{
  outline:0;
  border-color:var(--color-primary-100);
  background:linear-gradient(135deg, rgba(168,201,184,.15), rgba(200,213,185,.1));
}
textarea{
  min-height:150px;
  resize:vertical;
}
.helper{
  font-size:.9rem;
  color:var(--text-700);
}
.consent{
  display:flex;
  gap:.5rem;
  align-items:flex-start;
}
.consent input{
  inline-size:auto;
  margin-block-start:.35rem;
}
.status{
  min-height:1.5rem;
}

/* Floating CTAs (WhatsApp / Call) */
.fab{
  position:fixed;
  inset-block-end:var(--sp-24);
  inset-inline-start:var(--sp-16);
  display:grid;
  gap:var(--sp-12);
  z-index:998;
}
.fab a{
  width:56px;
  height:56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  text-decoration:none;
  box-shadow:var(--shadow-lg);
  transition:.25s;
}
.fab a:hover{
  transform:scale(1.12);
}
.wa{
  background:linear-gradient(135deg,#25D366,#128C7E);
}
.call{
  background:linear-gradient(135deg,#6B9B7F,#9DB89D);
}

/* Back to top button */
.back-to-top{
  position:fixed;
  inset-block-end:var(--sp-24);
  inset-inline-end:var(--sp-16);
  width:48px;
  height:48px;
  border-radius:50%;
  display:none;
  place-items:center;
  border:0;
  color:#fff;
  background:linear-gradient(135deg,#D4A574,#B8956A);
  box-shadow:var(--shadow-md);
  cursor:pointer;
  z-index:998;
}
.back-to-top.visible{
  display:grid;
}

/* Footer */
footer{
  background:linear-gradient(135deg,#24352E,#1F2D28);
  color:#fff;
}
.footer-inner{
  max-width:1200px;
  margin-inline:auto;
  padding:var(--sp-64) var(--sp-16) var(--sp-24);
}
.footer-grid{
  display:grid;
  gap:var(--sp-24);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-block-end:var(--sp-24);
}
.footer-grid h4{
  margin:0 0 var(--sp-12);
  color:var(--color-primary-100);
}
.footer-links{
  list-style:none;
  margin:0;
  padding:0;
}
.footer-links a{
  color:rgba(255,255,255,.85);
  text-decoration:none;
}
.footer-links a:hover{
  color:#fff;
}

/* Floating nature elements from original design */
.floating-elements{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}
.floating-element{
  position:absolute;
  opacity:0.3;
}
@keyframes float-random-1{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  25%{transform:translate(-20px,-30px) rotate(10deg);}
  50%{transform:translate(15px,20px) rotate(-5deg);}
  75%{transform:translate(-10px,40px) rotate(15deg);}
}
@keyframes float-random-2{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  33%{transform:translate(25px,-20px) rotate(-10deg);}
  66%{transform:translate(-15px,30px) rotate(8deg);}
}
@keyframes float-random-3{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  20%{transform:translate(-30px,15px) rotate(12deg);}
  40%{transform:translate(20px,-25px) rotate(-8deg);}
  60%{transform:translate(-10px,35px) rotate(5deg);}
  80%{transform:translate(15px,-10px) rotate(-12deg);}
}
@keyframes float-up{
  0%{transform:translateY(100vh) rotate(0deg);opacity:0.3;}
  100%{transform:translateY(-100vh) rotate(360deg);opacity:0;}
}
@keyframes float-down{
  0%{transform:translateY(-100vh) rotate(0deg);opacity:0;}
  20%{opacity:0.3;}
  80%{opacity:0.3;}
  100%{transform:translateY(100vh) rotate(360deg);opacity:0;}
}
@keyframes sway{
  0%,100%{transform:rotate(-5deg);}
  50%{transform:rotate(5deg);}
}
.leaf-1{animation:float-random-1 12s ease-in-out infinite;}
.leaf-2{animation:float-random-2 15s ease-in-out infinite;}
.leaf-3{animation:float-random-3 18s ease-in-out infinite;}
.flower-1{animation:float-up 20s linear infinite;}
.flower-2{animation:float-down 25s linear infinite;}
.branch-1{animation:sway 8s ease-in-out infinite;}

/* Dividers from original design */
.wave-divider{
  position:relative;
  width:100%;
  height:60px;
  overflow:hidden;
  margin:0;
  display:block;
}
.wave-divider svg{
  width:100%;
  height:100%;
  animation:wave 8s ease-in-out infinite;
}
@keyframes wave{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(-25px);}
}
.leaf-divider{
  position:relative;
  width:100%;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 var(--sp-16);
  margin:0;
}
.leaf-divider-line{
  flex:1;
  height:2px;
  max-width:400px;
  background:linear-gradient(90deg, transparent, var(--color-primary-100), transparent);
}
.leaf-divider-icon{
  margin:0 var(--sp-16);
  animation:rotate-leaf 4s ease-in-out infinite;
}
@keyframes rotate-leaf{
  0%,100%{transform:rotate(0deg) scale(1);}
  50%{transform:rotate(180deg) scale(1.1);}
}

/* Reduced motion – disable heavy animations for sensitive users */
@media (prefers-reduced-motion: reduce){
  .swiper,
  .swiper *{
    animation:none!important;
    transition:none!important;
  }
  .blob{display:none;}
  .floating-elements{display:none;}
}
/* Remove mobile tap highlight + default outline on Swiper arrows */
.swiper-button-next,
.swiper-button-prev {
  -webkit-tap-highlight-color: transparent; /* mobile blue tap overlay */
  outline: none;
}

/* Extra safety for focus states */
.swiper-button-next:focus,
.swiper-button-prev:focus,
.swiper-button-next:focus-visible,
.swiper-button-prev:focus-visible,
.swiper-button-next:active,
.swiper-button-prev:active {
  outline: none;
  box-shadow: none;
}