/* ================================================================
# DACOG Search Engine – System Architecture
# File: payment-page.css
# Path: /static/css/payment-page.css
# Version: 3.0.0
# Description: Mathematical-Unit Payment Gateway (Light/Hero Theme)
# ================================================================*/

/* 1. Base Container */
.payment-wrapper {
    padding-bottom: 3.125rem; /* 50px */
}

/* 2. Plan Summary Card (Dark/Premium Left Column) */
.plan-summary-card {
    background: linear-gradient(145deg, var(--dacog-bg-topbar), #000000);
    color: #ffffff;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    -webkit-box-shadow: var(--dacog-shadow-dropdown);
    -moz-box-shadow: var(--dacog-shadow-dropdown);
    box-shadow: var(--dacog-shadow-dropdown);
    padding: 3.125rem; /* 50px */
    height: 100%;
    display: flex;
    flex-direction: column;
}

.plan-summary-card .text-success {
    color: var(--dacog-accent-green) !important;
}

.plan-summary-card ul li {
    font-size: 1.05rem;
    display: flex;
    align-items: center;
}

/* 3. Payment Methods Card (Theme-Aware Right Column) */
.payment-methods-card {
    background-color: var(--dacog-bg-nav);
    border: 0.0625rem solid var(--dacog-border-color);
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    -webkit-box-shadow: var(--dacog-shadow-sm);
    -moz-box-shadow: var(--dacog-shadow-sm);
    box-shadow: var(--dacog-shadow-sm);
    padding: 3.125rem;
    height: 100%;
}

.payment-methods-card h4 {
    color: var(--dacog-text-main);
}

/* Dynamic Buttons based on Database Category */
.btn-pay-method {
    padding: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    -webkit-border-radius: 0.75rem;
    -moz-border-radius: 0.75rem;
    border-radius: 0.75rem;
    -webkit-transition: -webkit-transform 0.2s ease, box-shadow 0.2s ease;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-width: 0.125rem; /* 2px */
}

.btn-pay-method:hover {
    -webkit-transform: translateY(-0.125rem);
    -moz-transform: translateY(-0.125rem);
    -ms-transform: translateY(-0.125rem);
    -o-transform: translateY(-0.125rem);
    transform: translateY(-0.125rem);
    -webkit-box-shadow: var(--dacog-shadow-sm);
    -moz-box-shadow: var(--dacog-shadow-sm);
    box-shadow: var(--dacog-shadow-sm);
}

/* Specific styling for Card vs Bank/Wallet */
.btn-pay-card {
    color: var(--dacog-text-main);
    background-color: var(--dacog-bg-nav);
    border-color: var(--dacog-text-main);
}

.btn-pay-card:hover {
    background-color: var(--dacog-text-main);
    color: var(--dacog-bg-nav);
}

.btn-pay-alt {
    color: var(--dacog-accent-primary);
    background-color: var(--dacog-bg-nav);
    border-color: var(--dacog-accent-primary);
}

.btn-pay-alt:hover {
    background-color: var(--dacog-accent-primary);
    color: #ffffff;
}

/* Auto-Renew Info Box */
.auto-renew-box {
    background-color: var(--dacog-bg-base);
    border: 0.0625rem solid var(--dacog-border-color);
    color: var(--dacog-text-muted);
}

/* ==========================================================================
   4. MEDIA QUERIES (AFRICAN TARGET OPTIMIZATION)
   ========================================================================== */

@media screen and (max-width: 62em) { /* 992px */
    .plan-summary-card, .payment-methods-card {
        padding: 2rem;
    }
}

@media screen and (max-width: 30em) { /* 480px */
    .payment-wrapper {
        padding-top: 1.5rem;
    }
    
    .plan-summary-card {
        padding: 1.5rem;
        -webkit-border-radius: 1rem 1rem 0 0;
        border-radius: 1rem 1rem 0 0;
    }
    
    .payment-methods-card {
        padding: 1.5rem;
        -webkit-border-radius: 0 0 1rem 1rem;
        border-radius: 0 0 1rem 1rem;
        border-top: none; /* Merge the two cards visually on mobile */
    }
    
    .plan-summary-card h2 {
        font-size: 2rem;
    }
    
    .btn-pay-method {
        padding: 1rem;
        font-size: 0.9rem;
    }
}