/* Payment Page Responsive Styles */

@media (max-width: 1200px) {
    /* Payment page 3-card layout responsive */
    .payment-page [style*="grid-template-columns: 1fr 1.2fr"] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    /* Mobile payment page */
    .payment-page form#mpesaForm {
        order: 1 !important;
    }

    .payment-page [style*="right"] {
        order: 3 !important;
    }

    .week-slider-section .week-event-card,
    .week-slider-section .compact-week-card {
        flex: 0 0 calc(100% - 1rem);
        min-width: 100%;
    }

    .mobile-menu {
        top: 74px;
    }
}

/* Enhanced Payment Page Typography */
.payment-header h1 {
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    line-height: 1.2;
    margin: 0.8rem 0 0.5rem;
}

.payment-header .subtitle {
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    color: #716184;
    line-height: 1.6;
}

/* Button state feedback */
button[type="submit"],
.pay-button {
    position: relative;
    overflow: hidden;
}

button[type="submit"]:active,
.pay-button:active {
    transform: scale(0.98);
}

/* Trust badges enhancement */
.trust-badges {
    display: grid;
    gap: 0.7rem;
    padding: 0.8rem;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
}