/**
 * Page CSS — auto-extracted from resources/views/components/payment-method-modal.blade.php
 * 
 * @auto-generated 2026-06-11
 * @source resources/views/components/payment-method-modal.blade.php
 * 
 * Loaded via @stack('page-css') in layouts/app.blade.php
 */

.payment-modal-content {
        background: linear-gradient(135deg, #0b0b0b 0%, #1a1a1a 100%);
        border: 1px solid rgba(225, 6, 0, 0.25);
        border-radius: 1rem;
        color: #f7f7f7;
    }

    .payment-modal-title {
        font-weight: 700;
        color: #f7f7f7;
    }
    .payment-plan-name {
        color: #e10600;
    }
    .payment-modal-subtitle {
        color: #b8b8b8;
        margin-top: 0.5rem;
    }

    .payment-interval-toggle .btn-outline-light {
        border-color: rgba(255,255,255,0.2);
        color: #f7f7f7;
    }
    .payment-interval-toggle .btn-check:checked + .btn-outline-light {
        background: linear-gradient(135deg, #e10600 0%, #b10000 100%);
        border-color: #e10600;
        color: #fff;
    }

    .payment-price-display {
        font-size: 3rem;
        font-weight: 700;
        color: #f5c400;
    }
    .payment-currency {
        font-size: 1.75rem;
        vertical-align: top;
        margin-right: 0.25rem;
    }
    .payment-amount {
        font-size: 3rem;
    }
    .payment-interval-suffix {
        font-size: 1.25rem;
        color: #b8b8b8;
        font-weight: 400;
        margin-left: 0.25rem;
    }

    .payment-method-card {
        background: rgba(255,255,255,0.04);
        border: 2px solid rgba(255,255,255,0.1);
        border-radius: 0.75rem;
        padding: 1.5rem 1rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease;
        color: #f7f7f7;
    }
    .payment-method-card:hover {
        background: rgba(255,255,255,0.08);
        border-color: #e10600;
        transform: translateY(-2px);
    }
    .payment-method-card-stripe:hover {
        border-color: #635bff;
    }
    .payment-method-card.recommended {
        border-color: #e10600;
        position: relative;
    }
    .payment-method-card.recommended::before {
        content: "Recommended";
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, #e10600 0%, #b10000 100%);
        color: white;
        font-size: 0.7rem;
        font-weight: 700;
        padding: 0.15rem 0.6rem;
        border-radius: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .payment-method-logo {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        color: #f5c400;
    }
    .payment-stripe-wordmark {
        font-weight: 800;
        font-style: italic;
        font-size: 1.75rem;
        background: linear-gradient(135deg, #635bff 0%, #00d4ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .payment-method-name {
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    .payment-method-badges .badge {
        font-weight: 500;
        font-size: 0.7rem;
    }
    .payment-method-wallet-icons {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        font-size: 1.5rem;
        color: #b8b8b8;
    }
    .payment-method-wallet-icons i {
        transition: color 0.2s;
    }
    .payment-method-card:hover .payment-method-wallet-icons i {
        color: #f7f7f7;
    }

    .payment-coupon-details summary {
        cursor: pointer;
        list-style: none;
        text-align: center;
    }
    .payment-coupon-details summary::-webkit-details-marker { display: none; }
    .payment-coupon-details summary::before { content: "▸ "; }
    .payment-coupon-details[open] summary::before { content: "▾ "; }

    .payment-trust-signals {
        padding-top: 1rem;
        border-top: 1px solid rgba(255,255,255,0.05);
    }