/* Modern Upgrade Interface Styles - Aligned with Settings V3 */

/* Hide Page Title Section */
.page-title-section.upgrade-page {
  display: none;
}

/* CSS Variables - Matching Settings V3 Design */
:root {
   --primary-gradient: linear-gradient(135deg, #4299e1 0%, #6f3abc 100%);
   --success-gradient: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
   --warning-gradient: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
   --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   --card-shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.1);
   --border-radius: 12px;
   --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   --primary: #4299e1;
   --primary-dark: #2b6cb0;
   --success: #48bb78;
   --warning: #ed8936;
   --error: #f56565;
   --purple: #6f3abc;
   --text-primary: #2d3748;
   --text-secondary: #718096;
   --bg-secondary: #f5f7fa;
}

/* Upgrade Page Container */
.upgrade-page {
   max-width: 1200px;
   margin: 0 auto;
   padding: 2rem 1rem;
   min-height: 100vh;
   background: var(--bg-secondary);
}

/* Current Plan Status Card */
.current-plan-card {
   background: var(--primary-gradient);
   color: white;
   padding: 2rem;
   border-radius: var(--border-radius);
   margin-bottom: 2rem;
   box-shadow: var(--card-shadow);
   position: relative;
   overflow: hidden;
}

.current-plan-card::before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   width: 150px;
   height: 150px;
   background: rgba(255, 255, 255, 0.08);
   border-radius: 50%;
   transform: translate(50px, -50px);
}

.current-plan-card h2 {
   margin: 0 0 0.5rem 0;
   font-size: 1.75rem;
   font-weight: 600;
   line-height: 1.2;
   position: relative;
}

.current-plan-card .plan-name {
   font-size: 1.125rem;
   opacity: 0.95;
   margin-bottom: 1rem;
   font-weight: 400;
   position: relative;
}

/* Credits Stats Grid */
.credits-stats {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1rem;
   margin-top: 1.5rem;
}

.credit-stat {
   background: rgba(255, 255, 255, 0.15);
   padding: 1rem;
   border-radius: 0.5rem;
   text-align: center;
   backdrop-filter: blur(10px);
}

.credit-stat-label {
   font-size: 0.875rem;
   opacity: 0.8;
   margin-bottom: 0.5rem;
   display: block;
}

.credit-stat-value {
   font-size: 2rem;
   font-weight: 700;
   margin: 0;
}

/* Plans Section */
.plans-section {
   margin-bottom: 2rem;
}

.plans-section h3 {
   text-align: center;
   font-size: 1.75rem;
   font-weight: 600;
   color: var(--purple);
   margin-bottom: 2rem;
}

/* Plans Grid */
.plans-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 2rem;
   margin-bottom: 2rem;
}

/* Plan Card */
.plan-card {
   background: white;
   border-radius: var(--border-radius);
   padding: 0;
   box-shadow: var(--card-shadow);
   transition: var(--transition);
   border: 2px solid transparent;
   position: relative;
   overflow: hidden;
}

.plan-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--card-shadow-hover);
}

.plan-card.featured {
   border-color: var(--primary);
   transform: scale(1.05);
}

.plan-card.featured::before {
   content: 'Most Popular';
   position: absolute;
   top: 1rem;
   right: -2rem;
   background: var(--primary-gradient);
   color: white;
   padding: 0.5rem 3rem;
   font-size: 0.875rem;
   font-weight: 600;
   transform: rotate(45deg);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Plan Header */
.plan-header {
   padding: 2rem 2rem 1rem 2rem;
   text-align: center;
   border-bottom: 1px solid #edf2f7;
}

.plan-header h4 {
   margin: 0 0 0.5rem 0;
   font-size: 1.5rem;
   font-weight: 600;
   color: var(--text-primary);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
}

.plan-icon {
   width: 1.5rem;
   height: 1.5rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1.25rem;
}

/* Pricing */
.plan-pricing {
   margin: 1rem 0;
}

.plan-price {
   display: flex;
   align-items: baseline;
   justify-content: center;
   gap: 0.25rem;
   margin-bottom: 0.5rem;
}

.plan-currency {
   font-size: 1.25rem;
   font-weight: 500;
   color: #6b7280;
}

.plan-amount {
   font-size: 3rem;
   font-weight: 700;
   color: var(--primary);
   line-height: 1;
}

.plan-period {
   font-size: 1rem;
   color: #6b7280;
   font-weight: 500;
}

/* Plan Features */
.plan-features {
   padding: 0 2rem 2rem 2rem;
}

.plan-features p {
   margin: 0 0 1rem 0;
   color: #6b7280;
   font-size: 0.875rem;
   text-align: center;
}

/* Features List */
.features-list {
   list-style: none;
   padding: 0;
   margin: 1.5rem 0;
}

.features-list li {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
   padding: 0.625rem 0;
   border-bottom: 1px solid #f7fafc;
   font-size: 0.875rem;
   color: var(--text-secondary);
   line-height: 1.5;
}

.features-list li:last-child {
   border-bottom: none;
}

.features-list li::before {
   content: '✓';
   display: flex;
   align-items: center;
   justify-content: center;
   width: 1.125rem;
   height: 1.125rem;
   background: var(--success);
   color: white;
   border-radius: 50%;
   font-size: 0.625rem;
   font-weight: 700;
   flex-shrink: 0;
   margin-top: 2px;
}

/* Plan Action */
.plan-action {
   padding: 0 2rem 2rem 2rem;
}

/* Modern Button Styles - Aligned with Settings V3 */
.upgrade-button {
   width: 100%;
   background: var(--primary-gradient) !important;
   color: white !important;
   border: none !important;
   padding: 0.875rem 1.5rem !important;
   border-radius: 8px !important;
   font-size: 0.9375rem !important;
   font-weight: 600 !important;
   cursor: pointer !important;
   transition: var(--transition) !important;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 0.5rem !important;
   text-decoration: none !important;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
   min-height: 44px !important;
}

.upgrade-button:hover {
   transform: translateY(-1px) !important;
   box-shadow: 0 4px 6px rgba(66, 153, 225, 0.3) !important;
   background: linear-gradient(135deg, #3182ce 0%, #5a32a3 100%) !important;
   color: white !important;
   text-decoration: none !important;
}

.upgrade-button:active {
   transform: translateY(0) !important;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.upgrade-button:focus {
   outline: 2px solid var(--primary) !important;
   outline-offset: 2px !important;
}

.upgrade-button.current {
   background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
   cursor: not-allowed !important;
}

.upgrade-button.current:hover {
   transform: none !important;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Special styling for upgrade button inside current plan card - MUST come after general styles */
.current-plan-card .upgrade-button {
   background: #fbbf24 !important;
   color: #1e293b !important;
   border: none !important;
   box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4) !important;
   font-weight: 700 !important;
}

.current-plan-card .upgrade-button:hover {
   background: #f59e0b !important;
   transform: translateY(-2px) !important;
   box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5) !important;
   color: #1e293b !important;
}

/* Downgrade Button */
.downgrade-button {
   background: transparent !important;
   color: var(--error) !important;
   border: 2px solid var(--error) !important;
   padding: 0.75rem 1.5rem !important;
   border-radius: 0.5rem !important;
   font-size: 0.875rem !important;
   font-weight: 500 !important;
   cursor: pointer !important;
   transition: var(--transition) !important;
   text-decoration: none !important;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 0.5rem !important;
}

.downgrade-button:hover {
   background: var(--error) !important;
   color: white !important;
   text-decoration: none !important;
}

/* Responsive Design */
@media (max-width: 768px) {
   .upgrade-page {
      padding: 1rem 0.5rem;
   }
   
   .current-plan-card {
      padding: 1.5rem;
   }
   
   .current-plan-card h2 {
      font-size: 1.5rem;
   }
   
   .credits-stats {
      grid-template-columns: 1fr;
   }
   
   .plans-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
   }
   
   .plan-card.featured {
      transform: none;
   }
   
   .plans-section h3 {
      font-size: 1.5rem;
   }
   
   .plan-amount {
      font-size: 2.5rem;
   }
}

/* Loading States */
.upgrade-button.loading {
   opacity: 0.7;
   cursor: not-allowed;
}

.upgrade-button.loading::after {
   content: '';
   width: 1rem;
   height: 1rem;
   border: 2px solid rgba(255, 255, 255, 0.3);
   border-top: 2px solid white;
   border-radius: 50%;
   animation: spin 1s linear infinite;
}

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

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
   .plan-card,
   .upgrade-button,
   .downgrade-button {
      transition: none;
   }
   
   .plan-card:hover {
      transform: none;
   }
   
   .upgrade-button:hover {
      transform: none;
   }
}

/* High contrast mode */
@media (prefers-contrast: high) {
   .plan-card {
      border: 2px solid #000;
   }
   
   .features-list li {
      border-bottom-color: #000;
   }
}