/* ============================================
   E-Farming Replay — styles.css
   Clean 3-file clone + addons
   ============================================ */

/* --- Base / Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
}

/* --- Container utility (matches Tailwind container) --- */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* --- Countdown Timer Section --- */
#countdown-section {
  background-color: rgb(30, 41, 59);
}

.timer-box {
  background-color: rgb(51, 65, 85);
}

.timer-digit {
  color: rgb(249, 115, 22);
}

/* --- CTA Button pulse animation --- */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(249, 115, 22, 0); }
}

.cta-button:hover {
  animation: ctaPulse 2s infinite;
}

/* --- Testimonial Ticker (Addon 2) --- */
.testimonials-slider-wrapper {
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 0 auto;
}

.igorsoloads-testimonials-slider-outline .slick-slide {
  padding: 0 5px;
}

.igorsoloads-testimonials-slider-outline .slick-slide img {
  width: 100%;
  display: block;
  border-radius: 8px;
}

.igorsoloads-testimonials-slider-outline .img-fluid {
  max-width: 100%;
  height: auto;
}

/* Slick arrow styling */
.igorsoloads-testimonials-slider-outline .slick-prev:before,
.igorsoloads-testimonials-slider-outline .slick-next:before {
  color: #1e1d1d;
  font-size: 24px;
}

.igorsoloads-testimonials-slider-outline .slick-dots li {
  width: 10px;
  margin: 0;
}
.testimonials-slider-wrapper,
.testimonials-slider-wrapper .slick-slider,
.testimonials-slider-wrapper .slick-track {
  overflow: visible !important;
}
.testimonials-slider-wrapper .slick-list {
  overflow: hidden !important;
}
/* Hide arrows on mobile, show on tablet+ */
.igorsoloads-testimonials-slider-outline .slick-arrow {
  display: none !important;
}

@media (min-width: 768px) {
  .igorsoloads-testimonials-slider-outline .slick-arrow {
    display: inline-block !important;
  }
  .testimonials-slider-wrapper {
    padding-right: 15px;
    padding-left: 15px;
  }
}

/* --- Comparison Table Mobile Tabs --- */
.compare-tab {
  cursor: pointer;
  transition: all 0.2s;
}

.compare-tab.active {
  background-color: #1e293b;
  color: white;
}

.compare-tab:not(.active) {
  background-color: #f3f4f6;
  color: #4b5563;
}

.compare-tab:not(.active):hover {
  background-color: #e5e7eb;
}

/* --- Guarantee Section Ornamental Corners --- */
.guarantee-card {
  background: linear-gradient(145deg, rgb(12, 22, 40) 0%, rgb(22, 32, 56) 40%, rgb(15, 26, 48) 100%);
}

.guarantee-pattern {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(255, 255, 255, 0.1) 4px,
    rgba(255, 255, 255, 0.1) 5px
  );
}

.guarantee-border {
  border: 2px solid rgb(184, 134, 11);
}

.guarantee-inner-border {
  border: 1px solid rgba(184, 134, 11, 0.4);
}

/* Gold gradient text */
.gold-text {
  background: linear-gradient(135deg, rgb(245, 230, 163), rgb(212, 160, 32), rgb(240, 208, 96));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Badge styles */
.badge-core {
  background: linear-gradient(135deg, rgb(26, 26, 46) 0%, rgb(15, 52, 96) 100%);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

.badge-core-text {
  background: linear-gradient(135deg, rgb(34, 211, 238), rgb(6, 182, 212));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.badge-premium-text {
  background: linear-gradient(135deg, rgb(226, 232, 240), rgb(203, 213, 225));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.badge-gold-text {
  background: linear-gradient(135deg, rgb(240, 208, 96), rgb(212, 160, 32));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- E-Farming column highlight in comparison table --- */
.efarming-col {
  background-color: rgba(240, 253, 244, 0.6);
  border-left: 2px solid rgb(187, 247, 208);
  border-right: 2px solid rgb(187, 247, 208);
}

.efarming-col-bottom {
  background-color: rgba(240, 253, 244, 0.6);
  border-left: 2px solid rgb(187, 247, 208);
  border-right: 2px solid rgb(187, 247, 208);
  border-bottom: 2px solid rgb(187, 247, 208);
}

/* --- Gold decorative line --- */
.gold-line-left {
  background: linear-gradient(90deg, transparent, rgb(212, 160, 32));
}

.gold-line-right {
  background: linear-gradient(90deg, rgb(212, 160, 32), transparent);
}

/* --- Mobile Responsiveness (Addon 4) --- */
@media (max-width: 480px) {
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Ensure no horizontal overflow */
  body {
    overflow-x: hidden;
  }

  /* Timer boxes smaller on very small screens */
  .timer-box-mobile {
    width: 65px;
    height: 65px;
  }

  /* Make comparison table scrollable */
  .comparison-table-desktop {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Reduce padding on reason cards */
  .reason-card {
    padding: 1rem;
  }
}

@media (max-width: 360px) {
  .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Tabular nums for timer */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}