/* ============================================================
   ECOSMART PAYGO — Custom CSS for Elementor (Free)
   Sections: 3 (PayGo), 6 (Download), 7 (Testimonials), 10 (How It Works)
   Covers: Hover, Scroll-reveal animations, Responsive tweaks
   ============================================================ */

/* ----------------------------------------------------------
   1. DESIGN TOKENS / CUSTOM PROPERTIES
   ---------------------------------------------------------- */
:root {
  --eco-green-dark:   #0d3d1e;
  --eco-green-mid:    #1a6b35;
  --eco-green-accent: #22c55e;
  --eco-green-light:  #bbf7d0;
  --eco-green-pale:   #f0fdf4;
  --eco-white:        #ffffff;
  --eco-gray-50:      #f9fafb;
  --eco-gray-100:     #f3f4f6;
  --eco-gray-200:     #e5e7eb;
  --eco-gray-400:     #9ca3af;
  --eco-gray-600:     #4b5563;
  --eco-gray-900:     #111827;
  --eco-shadow-sm:    0 4px 16px rgba(0,0,0,0.06);
  --eco-shadow-md:    0 12px 40px rgba(0,0,0,0.09);
  --eco-shadow-lg:    0 24px 80px rgba(0,0,0,0.13);
  --eco-transition:   0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --eco-radius-sm:    8px;
  --eco-radius-md:    12px;
  --eco-radius-lg:    20px;
}

/* ----------------------------------------------------------
   2. SCROLL-REVEAL ANIMATION BASE
   Elements with Elementor entrance animations inherit these.
   We enhance them with smoother easing.
   ---------------------------------------------------------- */
.elementor-invisible {
  opacity: 0;
}
.animated {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  animation-duration: 0.7s !important;
}
.fadeInLeft  { animation-name: ecoFadeInLeft  !important; }
.fadeInRight { animation-name: ecoFadeInRight !important; }
.fadeInUp    { animation-name: ecoFadeInUp    !important; }
.fadeIn      { animation-name: ecoFadeIn      !important; }

@keyframes ecoFadeInLeft {
  from { opacity: 0; transform: translate3d(-40px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes ecoFadeInRight {
  from { opacity: 0; transform: translate3d(40px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes ecoFadeInUp {
  from { opacity: 0; transform: translate3d(0, 36px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes ecoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Staggered delay helpers — apply via CSS Class in widget Advanced tab */
.eco-delay-100 { animation-delay: 0.10s !important; }
.eco-delay-200 { animation-delay: 0.20s !important; }
.eco-delay-300 { animation-delay: 0.30s !important; }
.eco-delay-400 { animation-delay: 0.40s !important; }
.eco-delay-500 { animation-delay: 0.50s !important; }

/* ----------------------------------------------------------
   3. SECTION 3 — ECOSMART PAYGO
   ---------------------------------------------------------- */

/* Feature icon-box hover lift */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
  transition: transform var(--eco-transition), box-shadow var(--eco-transition);
  border-radius: var(--eco-radius-sm);
  padding: 8px;
}
.elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: var(--eco-shadow-sm);
}

/* Icon pulse on hover */
.elementor-widget-icon-box:hover .elementor-icon {
  animation: ecoIconPulse 0.5s ease;
}
@keyframes ecoIconPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Phone mockup image — floating animation */
.paygo-phone-mockup {
  animation: ecoFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 20px 40px rgba(13,61,30,0.18));
  border-radius: 24px;
}
@keyframes ecoFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

/* CTA Button primary hover */
.elementor-widget-button .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13,61,30,0.25);
  transition: all var(--eco-transition);
}
.elementor-widget-button .elementor-button {
  transition: all var(--eco-transition);
}

/* ----------------------------------------------------------
   4. SECTION 6 — DOWNLOAD
   ---------------------------------------------------------- */

/* App store button hover */
.dl-phone-mockup {
  animation: ecoFloat 4s ease-in-out infinite;
  animation-delay: 0.5s;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.35));
  border-radius: 28px;
}

/* QR card entrance */
.elementor-container .qr-card-wrap {
  transition: transform var(--eco-transition), box-shadow var(--eco-transition);
}
.elementor-container .qr-card-wrap:hover {
  transform: translateY(-4px);
  box-shadow: var(--eco-shadow-md);
}

/* Dark background section — subtle animated background glow */
.e-con[style*="background-color: rgb(13, 61, 30)"],
.e-con[style*="background-color:#0d3d1e"] {
  position: relative;
  overflow: hidden;
}
.e-con[style*="background-color: rgb(13, 61, 30)"]::before,
.e-con[style*="background-color:#0d3d1e"]::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,197,94,0.07) 0%, transparent 70%);
  top: -200px;
  left: -100px;
  animation: ecoPulseGlow 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes ecoPulseGlow {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%       { transform: scale(1.2); opacity: 1; }
}

/* ----------------------------------------------------------
   5. SECTION 7 — TESTIMONIALS
   ---------------------------------------------------------- */

/* Testimonial card hover */
.ecosmart-test-card {
  transition: transform var(--eco-transition), box-shadow var(--eco-transition), border-color var(--eco-transition);
  cursor: default;
}
.ecosmart-test-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--eco-shadow-md);
}
.ecosmart-test-card:hover .elementor-widget-star-rating .elementor-star-full::before {
  color: #f59e0b;
  text-shadow: 0 0 8px rgba(245,158,11,0.4);
}

/* Featured card extra glow */
.ecosmart-test-card--featured {
  box-shadow: 0 0 0 2px #22c55e, var(--eco-shadow-sm);
}
.ecosmart-test-card--featured:hover {
  box-shadow: 0 0 0 2px #22c55e, var(--eco-shadow-md);
  transform: translateY(-8px);
}

/* Stat cards hover */
.e-con .elementor-widget-heading + .elementor-widget-text-editor {
  transition: color var(--eco-transition);
}

/* Counter number entrance — works with Elementor Counter widget too */
.elementor-counter .elementor-counter-number-wrapper {
  transition: color var(--eco-transition);
}

/* ----------------------------------------------------------
   6. SECTION 10 — HOW IT WORKS
   ---------------------------------------------------------- */

/* How-step card hover */
.ecosmart-how-step {
  transition: background var(--eco-transition), box-shadow var(--eco-transition), transform var(--eco-transition);
  position: relative;
}
.ecosmart-how-step:hover {
  background: #ffffff !important;
  box-shadow: var(--eco-shadow-sm);
  transform: translateX(4px);
}
/* Connector line between steps */
.ecosmart-how-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 37px;
  bottom: -5px;
  width: 2px;
  height: 10px;
  background: var(--eco-green-light);
  z-index: 1;
}
/* Active step highlight */
.ecosmart-how-step--active {
  background: #ffffff !important;
  box-shadow: var(--eco-shadow-sm);
}
.ecosmart-how-step--active .elementor-widget-text-editor div {
  background: var(--eco-green-dark) !important;
}

/* Phone mockup */
.ecosmart-how-phone {
  animation: ecoFloat 4.5s ease-in-out infinite;
  animation-delay: 1s;
  filter: drop-shadow(0 20px 48px rgba(13,61,30,0.14));
  border-radius: 28px;
}

/* Usage history table row hover */
.elementor-widget-text-editor table tbody tr {
  transition: background var(--eco-transition);
}
.elementor-widget-text-editor table tbody tr:hover {
  background: var(--eco-green-pale) !important;
}
.elementor-widget-text-editor table tbody tr:hover td {
  color: var(--eco-green-dark) !important;
}

/* Load more button hover */
#load-more .elementor-button:hover,
.elementor-button:hover {
  border-color: var(--eco-green-accent) !important;
  color: var(--eco-green-dark) !important;
  background: var(--eco-green-pale) !important;
}

/* ----------------------------------------------------------
   7. GLOBAL RESPONSIVE — FREE ELEMENTOR OVERRIDES
   ---------------------------------------------------------- */

/* ---- Tablet (768px – 1024px) ---- */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Stack two-col layouts */
  .e-con > .e-con[style*="width: 50%"],
  .e-con > .e-con[style*="width:50%"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Fix phone mockup sizing */
  .paygo-phone-mockup,
  .dl-phone-mockup,
  .ecosmart-how-phone {
    max-width: 260px;
    margin: 0 auto;
  }
  /* Testimonial cards: 2 per row */
  .ecosmart-test-card {
    width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    flex: 0 0 calc(50% - 10px) !important;
  }
  /* Download QR card: hide on tablet */
  .e-con > .e-con[style*="width: 25%"] {
    display: none !important;
  }
  /* How It Works: hide right steps column */
  #how-steps-right {
    display: none !important;
  }
}

/* ---- Mobile (max 767px) ---- */
@media (max-width: 767px) {
  /* Full-width all columns */
  .e-con > .e-con {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  /* Section padding reduction */
  .e-con {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Testimonial cards: 1 per row */
  .ecosmart-test-card {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Stats grid: 2 columns on mobile */
  #stats-grid > .e-con {
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    flex: 0 0 calc(50% - 8px) !important;
  }
  /* Feature grid: single column on mobile */
  #paygo-features-container > .e-con,
  #dl-features-grid > .elementor-widget {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  /* Hide phone mockups on smallest mobile */
  .paygo-phone-mockup { display: none !important; }
  .dl-phone-mockup { max-width: 220px; margin: 0 auto; }
  .ecosmart-how-phone { max-width: 200px; margin: 0 auto 24px; }
  /* Step cards on mobile */
  .ecosmart-how-step:hover { transform: none; }
  /* Table horizontal scroll on mobile */
  .elementor-widget-text-editor table {
    min-width: 600px;
  }
  .elementor-widget-text-editor div[style*="overflow-x:auto"],
  .elementor-widget-text-editor div[style*="overflow-x: auto"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Download buttons: stack vertically */
  #dl-store-btns .e-con {
    flex-direction: column !important;
  }
  /* Heading sizes on mobile */
  h1, .elementor-heading-title[class*="h1"] { font-size: 28px !important; }
  h2, .elementor-heading-title[class*="h2"] { font-size: 24px !important; }
}

/* ---- Large Desktop (1440px+) ---- */
@media (min-width: 1440px) {
  .e-con[style*="max-width: 1200px"],
  .e-con > .e-con { max-width: 1280px; }
}

/* ----------------------------------------------------------
   8. UTILITY CLASSES (add via Elementor → Advanced → CSS Class)
   ---------------------------------------------------------- */

/* eco-card — generic card style */
.eco-card {
  background: var(--eco-white);
  border: 1px solid var(--eco-gray-100);
  border-radius: var(--eco-radius-lg);
  box-shadow: var(--eco-shadow-sm);
  transition: box-shadow var(--eco-transition), transform var(--eco-transition);
}
.eco-card:hover {
  box-shadow: var(--eco-shadow-md);
  transform: translateY(-4px);
}

/* eco-badge — pill label */
.eco-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--eco-green-mid);
  background: var(--eco-green-pale);
  border: 1px solid var(--eco-green-light);
  border-radius: 100px;
  padding: 5px 14px;
}

/* eco-section-dark — for dark green sections */
.eco-section-dark {
  background: var(--eco-green-dark);
  color: var(--eco-white);
}

/* eco-animate-float — floating animation */
.eco-animate-float {
  animation: ecoFloat 4s ease-in-out infinite;
}

/* eco-shimmer — loading shimmer effect */
.eco-shimmer {
  background: linear-gradient(90deg, var(--eco-gray-100) 25%, var(--eco-gray-50) 50%, var(--eco-gray-100) 75%);
  background-size: 200% 100%;
  animation: ecoShimmer 1.5s infinite;
}
@keyframes ecoShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* eco-text-gradient — green gradient text */
.eco-text-gradient {
  background: linear-gradient(135deg, var(--eco-green-mid) 0%, var(--eco-green-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* eco-divider — decorative green line */
.eco-divider {
  width: 48px;
  height: 4px;
  background: var(--eco-green-accent);
  border-radius: 100px;
  margin: 0 0 24px;
}

/* eco-icon-wrap — icon container */
.eco-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--eco-radius-sm);
  background: var(--eco-green-pale);
  border: 1px solid var(--eco-green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--eco-transition), transform var(--eco-transition);
}
.eco-icon-wrap:hover {
  background: var(--eco-green-light);
  transform: scale(1.08);
}

/* ----------------------------------------------------------
   9. ACCESSIBILITY & REDUCED MOTION
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .paygo-phone-mockup,
  .dl-phone-mockup,
  .ecosmart-how-phone,
  .eco-animate-float,
  [class*="ecoFloat"] {
    animation: none !important;
  }
  .animated {
    animation-duration: 0.01ms !important;
  }
  .e-con::before {
    animation: none !important;
  }
}

/* Focus ring for keyboard nav */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible {
  outline: 2px solid var(--eco-green-accent);
  outline-offset: 3px;
}


/* ----------------------------------------------------------
   SECTION 3 — Inner card (image + caption) responsive + hover
   ---------------------------------------------------------- */
.paygo-inner-card{
  transition: transform .3s ease, box-shadow .3s ease;
  padding: 32px;
  margin: 0;
}
.paygo-inner-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(13,61,30,.15);
}
.paygo-phone-mockup img{ border-radius: 18px; }

@media (max-width: 1024px){
  .paygo-inner-card{ padding: 24px; margin: 8px auto 0; max-width: 480px; }
}
@media (max-width: 767px){
  .paygo-inner-card{ padding: 18px; margin: 4px 0 0; max-width: 100%; }
}


/* ============================================================
   SECTION 5 — Industries We Serve
   ============================================================ */
.ecosmart-industries .paygo-heading .eco-accent{ color: var(--eco-green-accent); }

/* Industry cards */
.eco-industry-card{ position:relative; overflow:hidden; transition:transform .35s ease, box-shadow .35s ease; }
.eco-industry-card:hover{ transform:translateY(-6px); box-shadow:0 20px 44px rgba(13,61,30,.28); }
.eco-industry-card .elementor-background-overlay{ transition:background-color .35s ease; }
.eco-industry-card:hover .elementor-background-overlay{ background-color:rgba(13,61,30,.42)!important; }

/* White circle icon on cards */
.eco-card-icon .elementor-icon{ background:#ffffff!important; box-shadow:0 4px 12px rgba(0,0,0,.18); transition:transform .35s ease; }
.eco-industry-card:hover .eco-card-icon .elementor-icon{ transform:scale(1.08); }

/* Learn More arrow slide */
.eco-learn-more .elementor-button .elementor-button-icon{ transition:transform .25s ease; }
.eco-learn-more .elementor-button:hover .elementor-button-icon{ transform:translateX(5px); }

/* Section 5 feature entrance helper */
.ecosmart-industries .paygo-feature .elementor-icon-box-icon{ transition:transform .3s ease; }
.ecosmart-industries .paygo-feature:hover .elementor-icon-box-icon{ transform:translateY(-3px); }

/* Responsive */
@media (max-width:1024px){
  .eco-industry-card{ min-height:240px; }
}
@media (max-width:767px){
  .eco-industry-card{ min-height:200px; }
  .ecosmart-industries .eco-btn-primary .elementor-button,
  .ecosmart-industries .elementor-widget-button .elementor-button{ width:100%; justify-content:center; }
}