/* ============================================================
   MONCOACH MOBILE CONVERSION - OPTIMISATIONS CHECKOUT
   Focus sur la conversion, pas la structure
   ============================================================ */

/* ========================================
   1. SOCIAL PROOF STYLING (injecté par JS)
   ======================================== */
#mc-social-proof {
  margin: 16px 0 !important;
  padding: 16px !important;
  background: linear-gradient(135deg, #F0FDF4, #DCFCE7) !important;
  border: 1px solid #86EFAC !important;
  border-radius: 12px !important;
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   2. CTA BUTTON - CONVERSION GREEN
   ======================================== */
#mc-cta-enhanced,
.mc-cta-green {
  background: linear-gradient(135deg, #10B981, #059669) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
  border: none !important;
  color: white !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

#mc-cta-enhanced:hover,
.mc-cta-green:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5) !important;
}

/* ========================================
   3. TIMER - URGENCE VISUELLE
   ======================================== */
#mc-timer-display {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace !important;
  font-weight: 700 !important;
  font-size: 1.2em !important;
  color: #DC2626 !important;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A) !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  display: inline-block !important;
}

/* ========================================
   4. GUARANTEE BADGE
   ======================================== */
#mc-guarantee {
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5) !important;
  border: 1px solid #10B981 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 12px 0 !important;
}

/* ========================================
   5. TRUST INDICATORS
   ======================================== */
.mc-stars {
  color: #FBBF24 !important;
  font-size: 16px !important;
  letter-spacing: 2px !important;
}

.mc-rating {
  font-weight: 700 !important;
  color: #166534 !important;
}

.mc-users-count {
  color: #166534 !important;
  font-weight: 600 !important;
}

/* ========================================
   6. TESTIMONIAL STYLE
   ======================================== */
.mc-testimonial {
  font-style: italic !important;
  color: #374151 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  border-left: 3px solid #10B981 !important;
  padding-left: 12px !important;
  margin: 12px 0 !important;
}

/* ========================================
   7. MOBILE CHECKOUT MODAL
   ======================================== */
@media screen and (max-width: 768px) {
  /* Popup checkout - fullscreen sur mobile */
  .upgrade-modal,
  [class*="checkout-modal"],
  [class*="payment-modal"] {
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  
  /* Sticky CTA en bas */
  .upgrade-cta,
  #mc-cta-enhanced {
    position: sticky !important;
    bottom: 0 !important;
    margin-top: auto !important;
  }
  
  /* Card input plus grand pour touch */
  [class*="card-element"],
  [class*="stripe"],
  .StripeElement {
    padding: 16px !important;
    font-size: 18px !important;
    min-height: 52px !important;
  }
}