/* --- Styles for the Payment Selection Page --- */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@900&family=Inter:wght@400;500;600;700&display=swap');

.payment-selection-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 1rem;
    animation: fadeIn 0.8s ease-out;
}

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

.selection-card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 2rem 2.5rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.card-header { text-align: center; margin-bottom: 2.5rem; }
.main-title { font-family: 'Merriweather', serif; font-size: 2.5rem; font-weight: 900; color: #111827; margin-bottom: 1rem; }
.subtitle { font-family: 'Inter', sans-serif; font-size: 1.1rem; line-height: 1.7; color: #4B5563; max-width: 600px; margin: 0 auto; }
.subtitle strong { color: #4F46E5; }

.plan-summary {
    background-color: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
}
.plan-details { display: flex; flex-direction: column; }
.plan-name { font-size: 1.2rem; font-weight: 700; color: #111827; }
.plan-cycle { font-size: 0.9rem; color: #6B7280; }
.plan-price { font-size: 1.8rem; font-weight: 800; color: #111827; }

.payment-methods-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.method-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- REFINED SVG Logo Styling --- */
.logo-container {
    height: 48px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.method-logo {
    height: 100%;
    width: auto;
    max-width: 100%;
}
/* Ensure the PhonePe logo doesn't get too wide */
.phonepe-logo {
    max-width: 140px; 
}
/* Adjust PayPal logo width if needed */
.paypal-logo {
    max-width: 120px;
}
/* --- END REFINED SVG Logo Styling --- */

.method-description { font-size: 0.9rem; color: #4B5563; line-height: 1.6; flex-grow: 1; margin-bottom: 1.5rem; }

.payment-button {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.payment-button.phonepe { background-color: #5f259f; color: white; }
.payment-button.phonepe:hover { background-color: #4a1d7a; }

#paypal-button-container {
    width: 100%;
    min-height: 100px;
}

.back-link-container { text-align: center; margin-top: 2.5rem; }
.back-link { font-size: 0.9rem; color: #4B5563; text-decoration: none; font-weight: 500; }
.back-link:hover { text-decoration: underline; }

.spinner { border: 4px solid #f3f3f3; border-top: 4px solid #4F46E5; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 0 auto 1.5rem auto; }
.loader-text { font-size: 1.1rem; font-weight: 500; color: #4B5563; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .payment-methods-grid { grid-template-columns: 1fr; }
    .main-title { font-size: 2rem; }
    .selection-card { padding: 1.5rem; }
}

.error-message { text-align: center; color: #ef4444; font-weight: 500; padding: 1rem 0; }
.error-message a { color: #4F46E5; text-decoration: underline; }