/* Predict Page Styles */
:root {
  --ease-out-custom: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Light Theme Overrides */
.bg-gradient-to-b.from-white.to-gray-50 {
  background-attachment: fixed;
}

/* Form Elements */
.form-group input,
.form-group select {
  transition: all 0.3s var(--ease-out-custom);
  background-color: #f9fafb !important;
}

.form-group input:focus,
.form-group select:focus {
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
  border-color: #06b6d4 !important;
  background-color: white !important;
}

/* Option Selection */
.gender-option.active,
.attempt-option.active {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(6, 182, 212, 0.05)) !important;
  border-color: #06b6d4 !important;
  color: #0891b2 !important;
  font-weight: 600;
}

/* Attempt option specific active states */
.attempt-option[data-value="first"].active {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(6, 182, 212, 0.05)) !important;
  border-color: #06b6d4 !important;
}

.attempt-option[data-value="dropper"].active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05)) !important;
  border-color: #10b981 !important;
}

.attempt-option[data-value="repeater"].active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.05)) !important;
  border-color: #a855f7 !important;
}

/* Plan Cards */
.plan-card {
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--ease-out-custom);
  background: white;
}

.plan-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

/* Premium Plan Special Styling */
.plan-card[data-plan="premium"] {
  border-width: 3px !important;
  border-color: #10b981 !important;
  box-shadow: 0 20px 40px rgba(16, 185, 129, 0.15);
}

.plan-card[data-plan="premium"]:hover {
  border-color: #059669 !important;
  box-shadow: 0 30px 60px rgba(16, 185, 129, 0.2) !important;
}

/* Selected Plan Styling */
.plan-card.selected {
  border-color: #06b6d4 !important;
  box-shadow: 0 20px 40px rgba(6, 182, 212, 0.15) !important;
  transform: translateY(-8px) !important;
}

.plan-card.selected::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #06b6d4, #10b981, #06b6d4);
  border-radius: 1.75rem;
  z-index: -1;
  animation: borderRotate 3s linear infinite;
}

@keyframes borderRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Progress Bar Animation */
.progress-bar {
  transition: transform 0.6s var(--ease-out-custom);
}

/* Section Transitions */
#plansSection.show,
#reviewSection.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
  display: block !important;
}

/* Button Animations */
#predictNowBtn:not(:disabled):hover,
#proceedToPaymentBtn:not(:disabled):hover,
#confirmPaymentBtn:hover,
#predictFreeBtn:hover {
  animation: buttonGlow 2s var(--ease-out-custom) infinite;
  box-shadow: 0 10px 30px rgba(6, 182, 212, 0.3);
}

@keyframes buttonGlow {
  0%, 100% {
    box-shadow: 0 10px 30px rgba(6, 182, 212, 0.3), 0 0 40px rgba(16, 185, 129, 0.2);
  }
  50% {
    box-shadow: 0 15px 40px rgba(6, 182, 212, 0.4), 0 0 60px rgba(16, 185, 129, 0.3);
  }
}

/* Plan Select Button Animation */
.plan-select-btn,
.free-plan-btn {
  transition: all 0.3s var(--ease-out-custom);
}

.plan-select-btn:hover,
.free-plan-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .form-group input,
  .form-group select {
    padding: 0.75rem 1rem !important;
    font-size: 16px !important; /* Prevents iOS zoom */
  }
  
  .gender-option,
  .attempt-option {
    padding: 0.75rem 0.5rem !important;
    font-size: 0.875rem !important;
  }
  
  .plan-card {
    padding: 1.5rem !important;
  }
  
  #predictNowBtn,
  #proceedToPaymentBtn,
  #confirmPaymentBtn,
  #predictFreeBtn {
    padding: 1rem 1.5rem !important;
    font-size: 1.125rem !important;
    width: 100%;
  }
  
  .plan-card[data-plan="premium"] .absolute.-top-3.-right-3 {
    top: -10px;
    right: -10px;
  }
  
  .plan-card[data-plan="premium"] .w-16.h-16 {
    width: 50px;
    height: 50px;
  }
}

/* Loading State */
.loading {
  position: relative;
  pointer-events: none;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: rgba(6, 182, 212, 0.8);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Discount Badge Animation */
@keyframes pulseDiscount {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.plan-card[data-plan="premium"] .absolute.-top-3.-right-3 {
  animation: pulseDiscount 2s ease-in-out infinite;
}

/* Bestseller Badge Animation */
@keyframes floatBadge {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -5px); }
}

.plan-card[data-plan="premium"] .absolute.-top-3.left-1\\/2 {
  animation: floatBadge 3s ease-in-out infinite;
}

/* Early Bird Progress Bar Animation */
.bg-gradient-to-r.from-amber-400.to-orange-400 {
  animation: progressWidth 2s ease-out forwards;
}

@keyframes progressWidth {
  from { width: 0%; }
  to { width: 87%; }
}
/* Add these styles to your existing predict.css */

/* Dark background theme */
.bg-gradient-to-b.from-gray-900.to-gray-800 {
  background-attachment: fixed;
}

/* Exam season timer */
#countdown div {
  min-width: 40px;
  text-align: center;
}

/* Plan card discount badges */
.plan-card[data-plan="basic"] .absolute.-top-3.-right-3,
.plan-card[data-plan="ultra"] .absolute.-top-3.-right-3 {
  animation: pulseDiscount 2s ease-in-out infinite;
}

/* Free CTA styling */
#freeCtaContainer {
  display: none;
}

#predictFreeBtn {
  display: none;
}

/* Payment CTA styling */
#paymentCtaContainer {
  display: none;
}

#proceedToPaymentBtn {
  display: none;
}

/* Button state improvements */
button:disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Mobile optimizations for timer */
@media (max-width: 768px) {
  #countdown {
    font-size: 0.875rem;
  }
  
  #countdown div {
    min-width: 35px;
    padding: 0.25rem 0.5rem;
  }
}
/* Add these styles to your existing predict.css */

/* Floating Timer Ribbon */
#floatingTimer {
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  z-index: 40;
}

#floatingTimer:hover {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Selected Plan Styling - Removed rotating border */
.plan-card.selected {
  border-color: #06b6d4 !important;
  box-shadow: 0 20px 40px rgba(6, 182, 212, 0.15) !important;
  transform: translateY(-8px) !important;
}

/* Remove the old rotating border animation */
.plan-card.selected::before {
  display: none;
}

/* Review Section Improvements */
#reviewPlanFeatures {
  list-style-type: none;
  padding: 0;
}

#reviewPlanFeatures li {
  margin-bottom: 0.75rem;
}

/* Edit Button Styling */
#editDetailsBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Button State Improvements */
button:disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Plan Cards - Limited Time Badge */
.plan-card .absolute.-top-3.left-1\\/2 {
  z-index: 10;
}

/* Discount Badge Animation */
@keyframes pulseDiscount {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.plan-card[data-plan="premium"] .absolute.-top-3.-right-3,
.plan-card[data-plan="basic"] .absolute.-top-3.-right-3,
.plan-card[data-plan="ultra"] .absolute.-top-3.-right-3 {
  animation: pulseDiscount 2s ease-in-out infinite;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  #floatingTimer {
    display: none !important;
  }
  
  #reviewSection .grid {
    grid-template-columns: 1fr !important;
  }
  
  .plan-card .absolute.-top-3.-right-3 {
    top: -10px;
    right: -10px;
  }
  
  .plan-card .w-16.h-16 {
    width: 50px;
    height: 50px;
    font-size: 0.7rem;
  }
}

/* Ensure form stays white */
.bg-white.shadow-2xl.border.border-gray-200.rounded-3xl {
  background: white !important;
}

/* Progress bar stays on top */
.progress-bar {
  z-index: 50;
}