/**
 * Product Landing Page - Main Styles
 *
 * Purpose: Complete styling for product landing pages
 * Colors: Set via CSS variables for easy customization (populated from config.js)
 * Architecture: Mobile-first responsive design with BEM-like naming
 *
 * @package eRide
 * @version 1.2.2
 * @since 1.2.0
 *
 * Changelog:
 * 1.2.2 - Reduced hero-ctas gap on mobile (1.5rem → 1rem)
 *         Fixes large vertical spacing between CTA buttons on mobile devices
 * 1.2.1 - Fixed floating CTA centering on mobile
 *         Removed translateX transform conflict on mobile
 *         Added width: auto and display: block for proper stretching
 */

/* ===== CSS VARIABLES ===== */
/* Note: Variables are defined in critical.css and overridden by config.js */

/* ===== NAVIGATION (Extended) ===== */
/* Logo + Brand Styling */
.nav-logo .wp-block-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.nav-logo .wp-block-image {
  margin: 0;
}

.nav-logo .wp-block-image img {
  display: block;
  height: auto;
}

.nav-logo p {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: hsl(var(--color-foreground));
}

.nav-logo p a {
  color: hsl(var(--color-foreground));
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nav-logo p a:hover {
  color: hsl(var(--color-primary));
}

.nav-links {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
}

.nav-link {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: hsl(var(--color-foreground));
  transition: color var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

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

.nav-link.nav-cta {
  background-color: hsl(var(--color-primary));
  color: white;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-full);
}

.nav-link.nav-cta:hover {
  background-color: hsl(var(--color-primary-dark));
}

/* ===== COUNTDOWN BANNER (Extended) ===== */
.countdown-banner.ended {
  background: hsl(var(--color-foreground-muted));
}

/* ===== HERO SECTION (Extended) ===== */
.hero-text {
  max-width: 600px;
}

.hero-tagline {
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: hsl(var(--color-primary));
  margin-bottom: var(--spacing-sm);
}

.hero-description {
  font-size: var(--font-size-lg);
  color: hsl(var(--color-foreground-muted));
  margin-bottom: var(--spacing-xl);
  line-height: 1.6;
}

/* Pricing Display */
.pricing {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.pricing-badge {
  display: flex;
  align-items: center;
}

.discount-badge {
  background-color: hsl(var(--color-error));
  color: white;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--font-size-sm);
}

.pricing-content {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
}

.price-original {
  font-size: var(--font-size-lg);
  color: hsl(var(--color-foreground-muted));
  text-decoration: line-through;
}

.price-sale {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: hsl(var(--color-primary));
}

.hero-ctas {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.hero-image {
  position: relative;
}

.product-image {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 20px 60px hsl(var(--color-primary) / 0.2));
  transition: transform var(--transition-slow);
}

.product-image:hover {
  transform: scale(1.05);
}

/* Responsive image sizes - Best practice heights */
@media (max-width: 480px) {
  .product-image {
    max-width: 300px;
    max-height: 300px;
    object-fit: contain;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .product-image {
    max-width: 400px;
    max-height: 400px;
    object-fit: contain;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .product-image {
    max-width: 500px;
    max-height: 500px;
    object-fit: contain;
  }
}

@media (min-width: 1025px) {
  .product-image {
    max-width: 600px;
    max-height: 600px;
    object-fit: contain;
  }
}

/* ===== BUTTONS (Extended) ===== */
.btn-secondary {
  background-color: transparent;
  color: hsl(var(--color-foreground));
  border: 2px solid hsl(var(--color-border));
  padding: var(--spacing-xs) var(--spacing-md);
}

.btn-secondary:hover {
  background-color: hsl(var(--color-background-muted));
  border-color: hsl(var(--color-primary));
}

/* ===== BENEFITS GRID ===== */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
}

@media (max-width: 1200px) {
  .benefits-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 425px) {
  .benefits-grid {
    grid-template-columns: 1fr;
  }
}

.benefit-card {
  background-color: hsl(var(--color-card));
  border: 1px solid hsl(var(--color-border));
  border-radius: var(--radius-2xl);
  padding: var(--spacing-xl);
  transition: all var(--transition-base);
}

.benefit-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: hsl(var(--color-primary) / 0.5);
}

.benefit-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: hsl(var(--color-primary) / 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-2xl);
}

.benefit-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: hsl(var(--color-foreground));
}

.benefit-description {
  font-size: var(--font-size-base);
  color: hsl(var(--color-foreground-muted));
  line-height: 1.6;
}

/* ===== SECTION GENERAL ===== */
.section {
  padding: var(--spacing-3xl) 0;
}

.section-alt {
  background-color: hsl(var(--color-background-muted));
}

.section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--spacing-lg);
}

.section-title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  color: hsl(var(--color-foreground));
}

.section-description {
  font-size: var(--font-size-lg);
  color: hsl(var(--color-foreground-muted));
  line-height: 1.6;
}

/* ===== INGREDIENTS ===== */
.ingredients-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-xl);
  justify-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.ingredients-list .ingredient-card {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 1025px) {
  .ingredients-list {
    /* On desktop, if there are 3 items, center them */
    justify-content: center;
  }
}

@media (max-width: 1024px) {
  .ingredients-list {
    grid-template-columns: repeat(2, 1fr);
    justify-items: stretch;
  }
}

@media (max-width: 425px) {
  .ingredients-list {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
}

.ingredient-card {
  background-color: hsl(var(--color-card));
  border: 1px solid hsl(var(--color-border));
  border-radius: var(--radius-2xl);
  padding: var(--spacing-xl);
  transition: all var(--transition-base);
}

.ingredient-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: hsl(var(--color-primary) / 0.5);
}

.ingredient-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.ingredient-name {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: hsl(var(--color-foreground));
}

.ingredient-percentage {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: hsl(var(--color-primary));
}

.ingredient-description {
  font-size: var(--font-size-lg);
  color: hsl(var(--color-foreground-muted));
  line-height: 1.6;
}

/* ===== FAQ ACCORDION ===== */
.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.faq-item {
  background-color: hsl(var(--color-card));
  border: 1px solid hsl(var(--color-border));
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  padding: var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: none;
  border: none;
  font-size: var(--font-size-lg);
  font-weight: 600;
  text-align: left;
  color: hsl(var(--color-foreground));
  transition: all var(--transition-fast);
}

.faq-question:hover {
  background-color: hsl(var(--color-background-muted));
}

.faq-icon {
  font-size: var(--font-size-xl);
  transition: transform var(--transition-base);
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}

.faq-answer-content {
  padding: 0 var(--spacing-lg) var(--spacing-lg);
  color: hsl(var(--color-foreground-muted));
  line-height: 1.8;
}

.faq-item.active .faq-answer {
  max-height: 500px;
}

/* ===== CHECKOUT SECTION ===== */
.section-checkout {
  background: linear-gradient(135deg, hsl(var(--color-background)) 0%, hsl(var(--color-background-muted)) 100%);
}

.checkout-wrapper {
  max-width: 800px;
  margin: 0 auto;
  background-color: hsl(var(--color-card));
  border-radius: var(--radius-2xl);
  padding: var(--spacing-xl) 1rem;
  box-shadow: var(--shadow-xl);
}

/* ===== FLOATING CTA (Mobile) ===== */
.floating-cta {
  position: fixed;
  bottom: var(--spacing-lg);
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  z-index: var(--z-floating-cta);
  opacity: 0;
  transition: all var(--transition-base);
  pointer-events: none;
}

.floating-cta.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: all;
}

.btn-floating {
  background-color: hsl(var(--color-primary));
  color: white;
  padding: var(--spacing-md) var(--spacing-2xl);
  font-size: var(--font-size-lg);
  font-weight: 700;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xl);
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
}

.btn-floating:hover {
  background-color: hsl(var(--color-primary-dark));
  transform: scale(1.05);
}

/* ===== TRUST BADGES ===== */
.trust-badges {
  display: flex;
  gap: var(--spacing-lg);
  justify-content: center;
  align-items: center;
  margin-top: var(--spacing-lg);
  flex-wrap: wrap;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: hsl(var(--color-foreground-muted));
}

.trust-badge-icon {
  flex-shrink: 0;
}

/* ===== PRODUCT SECTION (Video + Content Grid) ===== */
.section-product {
  background-color: hsl(var(--color-primary));
  color: white;
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--spacing-2xl);
  align-items: start;
}

.product-video-column {
  position: relative;
}

.product-video-wrapper {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 8px solid hsl(var(--color-card));
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.product-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

.product-content-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.product-content-title {
  font-size: var(--font-size-3xl);
  font-weight: bold;
  margin: 0;
  color: white;
}

.product-benefits-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.product-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.product-benefit-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: hsl(var(--color-success));
}

.product-benefit-content h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0 0 var(--spacing-xs) 0;
  color: white;
}

.product-benefit-content p {
  font-size: var(--font-size-base);
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.product-cta {
  margin-top: var(--spacing-md);
}

/* ===== HOW TO USE SECTION ===== */
.section-how-to-use {
  background-color: hsl(var(--color-background));
}

.how-to-use-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.how-to-step {
  text-align: center;
  padding: var(--spacing-xl);
  background: hsl(var(--color-card));
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--color-border));
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.how-to-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background-color: hsl(var(--color-primary));
  color: white;
  font-size: var(--font-size-2xl);
  font-weight: bold;
  margin-bottom: var(--spacing-md);
}

.how-to-step h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-sm);
  color: hsl(var(--color-foreground));
}

.how-to-step p {
  font-size: var(--font-size-base);
  color: hsl(var(--color-foreground-muted));
  margin: 0;
}

/* ===== SOCIAL PROOF / REVIEWS SECTION ===== */
.section-social-proof {
  background-color: hsl(var(--color-background-muted));
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.review-card {
  background: hsl(var(--color-card));
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--color-border));
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.review-stars {
  color: hsl(var(--color-warning));
  font-size: var(--font-size-xl);
  letter-spacing: 0.1em;
}

.review-text {
  font-size: var(--font-size-base);
  color: hsl(var(--color-foreground));
  line-height: 1.6;
  margin: 0;
}

.review-text.truncated {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-read-more {
  color: hsl(var(--color-primary));
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 600;
  display: inline-block;
  margin-top: var(--spacing-xs);
  transition: color var(--transition-fast);
}

.review-read-more:hover {
  color: hsl(var(--color-primary-dark));
  text-decoration: underline;
}

.review-author {
  font-weight: 600;
  color: hsl(var(--color-foreground));
  margin: 0;
}

.review-date {
  font-size: var(--font-size-sm);
  color: hsl(var(--color-foreground-muted));
  margin: 0;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn var(--transition-slow) ease forwards;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ===== CHECKOUT BUTTON LOADER ===== */
#place_order.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.checkout-loader-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

.checkout-loader-text {
  vertical-align: middle;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  /* Navigation - Simplified for mobile */
  .nav-links {
    display: none; /* Can add hamburger menu later */
  }

  /* Hero - Standard mobile layout: image on top, text below */
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--spacing-lg);
  }

  /* Hero image appears FIRST */
  .hero-image {
    order: -1;
    margin-bottom: var(--spacing-md);
  }

  /* Hero text appears SECOND */
  .hero-text {
    order: 1;
  }

  .hero-title {
    font-size: var(--font-size-4xl);
  }

  .hero-ctas {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .pricing {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
  }

  .section-title {
    font-size: var(--font-size-3xl);
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }

  /* Hide video on mobile, keep product details text */
  .product-video-wrapper,
  .product-video {
    display: none;
  }

  /* Ensure product content column is full width on mobile */
  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-content-column {
    order: 1;
  }

  .floating-cta {
    left: var(--spacing-md);
    right: var(--spacing-md);
    transform: translateY(100px);
    width: auto;
  }

  .floating-cta.visible {
    transform: translateY(0);
  }

  .btn-floating {
    width: 100%;
    display: block;
  }

  .trust-badges {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .how-to-use-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .product-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .product-video-column {
    order: 2;
  }

  .product-content-column {
    order: 1;
  }

  .reviews-grid {
    grid-template-columns: 1fr;
  }
}