body {
    background-color: #121212; /* Match pricing-section background from index.html */
}

.checkout-container {
    width: 90%;
    max-width: 800px; /* Increased max-width to accommodate multiple plan boxes side-by-side */
    margin: 2rem auto;
    padding: 2rem;
    background-color: #121212; /* Overall background for the checkout area, like pricing-section */
    border-radius: 8px;
    /* Removed border as the main.css body background is #22223b, creating a natural boundary */
}

.checkout-container h1 {
    color: #e0e0e0; /* Match pricing-section h2 color */
    text-align: center;
    margin-bottom: 2rem; /* Increased margin */
    font-size: 2.2rem; /* Match pricing-section h2 font-size */
}

/* The .plan class from main.css will style the individual plan boxes.
   We need to ensure they can be centered or flexed appropriately if multiple are shown. 
   The .pricing-plans wrapper (used in checkout.html now) from main.css handles flex display. 
   If a single plan is shown, we might want it centered. 
   The inline style 'margin-left: auto; margin-right: auto;' in checkout.html handles this for single .plan divs.
*/

.paypal-button-wrapper {
    max-width: 300px; /* As before */
    margin: 1rem auto 0 auto; /* As before */
    /* Ensure it takes up space for proper button rendering */
    min-height: 50px; /* Adjust as needed based on PayPal button height */
}

/* --- Messages (Error, Status) --- */
.error-message, .status-message {
    text-align: center;
    padding: 1rem 1.5rem;
    border-radius: 5px;
    margin: 1.5rem auto;
    border-width: 1px;
    border-style: solid;
    max-width: 500px;
    font-size: 1.1rem;
    background-color: #2a2a4a; 
    border-color: #4a4a6a;
}

.error-message {
    color: #ff8a80;
    background-color: #4a2a2a; 
    border-color: #ff8a80;
}

.status-message.success {
    color: #a5d6a7;
    background-color: #2a4a2a; 
    border-color: #a5d6a7;
}

.status-message.error {
    color: #FFCDD2;
    background-color: rgba(211, 47, 47, 0.2); 
    border-color: #d32f2f;
}

.back-link {
    display: block;
    text-align: center;
    margin-top: 2.5rem; /* Increased margin */
    color: #64B5F6; 
    text-decoration: none;
    font-weight: 500;
    font-size: 1.1rem;
}

.back-link:hover {
    text-decoration: none; 
    color: #72d4b7;
}

/* --- Login Form Styles (if shown on checkout) --- */
.login-form {
    max-width: 400px; 
    margin: 2rem auto; /* Increased top/bottom margin */
    background-color: #1E1E1E; /* Match plan box background */
    padding: 2rem; /* Increased padding */
    border-radius: 8px; 
    border: 1px solid #333333; /* Match plan box border */
}

.login-form label {
    margin-bottom: .75rem; /* Increased margin */
    display: block;
    font-weight: 500;
    color: #BDBDBD; 
    font-size: 1.05rem;
}

.login-form input[type="email"],
.login-form input[type="password"] {
    width: 100%;
    padding: .85rem; /* Increased padding */
    margin-bottom: 1.25rem; /* Increased margin */
    border: 1px solid #424242; /* Slightly different from plan box for input fields */
    border-radius: 5px; 
    box-sizing: border-box;
    background-color: #2c2c2c; /* Darker input background */
    color: #E0E0E0; 
    font-family: inherit; 
    font-size: 1rem;
}

.login-form input[type="email"]:focus,
.login-form input[type="password"]:focus {
    border-color: #64B5F6; 
    outline: none;
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.25); /* Adjusted shadow */
}

/* General button styling for this page - primary button is the login/submit button */
.login-form .btn-primary {
    width: 100%;
    padding: 0.85rem 1.5rem; 
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-align: center;
    background-color: #009688; /* Using the plan h3 teal */
    color: #ffffff;
}

.login-form .btn-primary:hover {
    background-color: #00796B; /* Darker Teal */
    transform: translateY(-2px);
}

.cancel-button {
    margin: 1.5rem auto 0 auto; /* Center and add top margin */
    max-width: 300px; 
    display: block; 
    padding: 0.85rem 1.5rem;
    border: none;
    border-radius: 5px;
    font-size: 1.05rem;
    font-weight: bold;
    cursor: pointer;
    background-color: #c62828; 
    color: #ffffff;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.cancel-button:hover {
    background-color: #b71c1c; 
    transform: translateY(-2px);
}

/* User Info on Checkout */
.user-info {
    text-align: right; 
    margin-bottom: 2.5rem; /* Increased margin */
    line-height: 1.9; /* Increased line height */
    background-color: #1E1E1E; /* Match plan box background */
    padding: 1.5rem; /* Increased padding */
    border-radius: 8px; 
    border: 1px solid #333333; /* Match plan box border */
    font-size: 1.05rem;
}

.user-info p {
    margin-bottom: 0.6rem; /* Adjusted margin */
    color: #BDBDBD; 
}

.user-info span {
    font-weight: 600;
    color: #E0E0E0; 
}

#plan-selection-title {
    color: #e0e0e0; /* Match main heading style for consistency */
    font-weight: 500;
    font-size: 1.5rem; /* Made it a bit larger */
    margin-bottom: 2rem; /* Increased margin */
}

/* Coupon Section Styles */
.coupon-section {
    transition: all 0.3s ease;
}

.coupon-section:hover {
    border-color: #009688;
}

.coupon-input-container input {
    transition: border-color 0.3s ease;
}

.coupon-input-container input:focus {
    outline: none;
    border-color: #009688;
    box-shadow: 0 0 5px rgba(0, 150, 136, 0.3);
}

.coupon-input-container button {
    transition: all 0.3s ease;
}

.coupon-input-container button:hover {
    background-color: #00796B;
    transform: translateY(-1px);
}

.coupon-input-container button:disabled {
    background-color: #555;
    cursor: not-allowed;
    transform: none;
}

/* Coupon Bonus Display */
.coupon-bonus {
    border: 2px solid #2e7d32 !important;
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
    transition: all 0.3s ease;
}

.coupon-bonus:hover {
    box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4);
    transform: translateY(-2px);
}

/* Coupon action buttons */
#change-coupon-btn, #remove-coupon-btn {
    transition: all 0.2s ease;
}

#change-coupon-btn:hover {
    background-color: #f57c00 !important;
}

#remove-coupon-btn:hover {
    background-color: #d32f2f !important;
}

/* Legal disclaimer styling */
.coupon-disclaimer {
    background-color: #2a2a2a;
    border-left: 3px solid #ff9800;
    border-radius: 4px;
    padding: 0.75rem;
    margin-top: 1rem;
}

.coupon-disclaimer p {
    color: #bdbdbd;
    font-size: 0.8rem;
    margin: 0;
    text-align: right;
    line-height: 1.4;
}

.coupon-disclaimer strong {
    color: #ff9800;
}

/* Responsive coupon section */
@media (max-width: 768px) {
    .coupon-input-container {
        flex-direction: column;
        gap: 1rem;
    }

    .coupon-input-container input {
        min-width: 100%;
    }

    .coupon-input-container button {
        width: 100%;
    }
}

/* Discount Banner for ILS Plans */
.plan.has-discount {
    position: relative;
    border: 2px solid #6366f1;
    overflow: visible;
    padding-top: 3.5rem;
}

.discount-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    color: white;
    text-align: center;
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 6px 6px 0 0;
    letter-spacing: 0.5px;
}

.discount-badge {
    display: inline-block;
    background: #dcfce7;
    color: #166534;
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.price-main {
    font-size: 2.5rem;
    font-weight: 800;
    color: #22c55e;
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

.price-period {
    font-size: 1.2rem;
    color: #9ca3af;
    font-weight: 500;
}

.price-original {
    font-size: 1.3rem;
    color: #6b7280;
    text-decoration: line-through;
    margin-top: 0.5rem;
}

.price-info {
    font-size: 1rem;
    color: #9ca3af;
    margin-top: 0.75rem;
    line-height: 1.5;
}