/* ====================================
   payment.css: Modern Dark Aesthetic
   ==================================== */

/* --- 1. Variables & Base Styling --- */
:root {
    --color-primary-dark: #222222;
    --color-secondary-dark: #2e2e2e;
    --color-accent: #6c5ce7; /* Vibrant Purple/Blue */
    --color-text-light: #f1f1f1;
    --color-text-muted: #a0a0a0;
}

.bg-dark-mode {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--color-primary-dark);
    color: var(--color-text-light);
}

.text-white { color: var(--color-text-light) !important; }
.text-muted-light { color: var(--color-text-muted) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-accent-muted { color: #9c92e9 !important; }

.checkout-header {
    border-bottom: 1px solid var(--color-secondary-dark);
    padding-bottom: 2rem;
}

/* --- 2. Package Box Styling (Pricing Grid) --- */
.package-box {
    background-color: var(--color-secondary-dark);
    border: 1px solid var(--color-secondary-dark); /* Subtle border matching background */
    border-radius: 14px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother transition */
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.package-box:hover:not(.selected) {
    border-color: var(--color-accent); /* Border highlight on hover */
    transform: translateY(-5px); /* Lift effect */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.package-title {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-text-light);
}

.package-credits {
    font-size: 1rem;
    font-weight: 400;
}

.price {
    line-height: 1; /* Tighter spacing */
}

/* Status text (hidden until selected, or styled differently) */
.package-status {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* --- 3. Payment Summary Card --- */
.checkout-summary {
    background-color: var(--color-secondary-dark);
    border: none;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Stronger, deeper shadow */
}

/* --- 4. Form and Button Enhancements --- */
.form-label {
    font-weight: 600;
    color: var(--color-text-light);
}

.btn-accent {
    /* Primary button uses the accent color */
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 10px;
    padding: 12px 20px;
    transition: background-color 0.2s, transform 0.1s;
}

.btn-accent:hover {
    background-color: #5d4cd6; /* Slightly darker accent on hover */
    border-color: #5d4cd6;
    transform: translateY(-1px); /* Slight press effect */
}

/* Icon styling */
.bi-shield-lock-fill {
    color: var(--color-accent);
}