@font-face {

    font-family: 'Poppins';

    src: url('./fonts/Poppins-Light.ttf');

    font-weight: 300;

}

@font-face {

    font-family: 'Poppins';

    src: url('./fonts/Poppins-Regular.ttf');

    font-weight: 400;

}

@font-face {

    font-family: 'Poppins';

    src: url('./fonts/Poppins-Medium.ttf');

    font-weight: 500;

}

@font-face {

    font-family: 'Poppins';

    src: url('./fonts/Poppins-SemiBold.ttf');

    font-weight: 600;

}

@font-face {

    font-family: 'Poppins';

    src: url('./fonts/Poppins-Bold.ttf');

    font-weight: 700;

}

        :root {

            --accent: #FF6B35;

            --text: #2D3436; 

            --light: #F8F9FA;

            --border: #E9ECEF;

        }

        * {

            font-family: 'Poppins', sans-serif;

        }

        body {

            background: var(--light);

            color: var(--text);

            line-height: 1.5;

        }

        .navbar {

            background: white;

            border-bottom: 1px solid var(--border);

            padding: 12px 0;

        }

        .navbar-toggler {

            border: none;

            padding: 0;

        }

        .navbar-toggler:focus {

            box-shadow: none;

        }

        .bi-list {

            font-size: 24px;

            color: var(--text);

        }

        .main-card {

            background: white;

            border-radius: 12px;

            border: 1px solid var(--border);

            padding: 24px;

            margin-top: 20px;

        }

        .success-card {

            background: white;

            border-radius: 12px;

            border: 1px solid var(--border);

            padding: 32px 24px;

            margin-top: 50px;

            text-align: center;

            max-width: 500px;

            margin-left: auto;

            margin-right: auto;

        }

        

        .success-icon {

            font-size: 64px;

            color: var(--success);

            margin-bottom: 24px;

        }

        

        .success-title {

            font-size: 24px;

            font-weight: 600;

            color: var(--text);

            margin-bottom: 8px;

        }

        

        .success-message {

            color: #6c757d;

            margin-bottom: 24px;

        }

        .voucher-card {

            padding: 20px;

            border: 1px solid var(--border);

            border-radius: 12px;

            cursor: pointer;

            transition: all 0.2s ease;

            display: flex;

            align-items: center;

            gap: 16px;

            margin-bottom: 12px;

        }

        .voucher-card:hover {

            border-color: var(--accent);

            transform: translateX(4px);

        }

        .voucher-icon {

            width: 48px;

            height: 48px;

            background: rgba(255,107,53,0.1);

            border-radius: 12px;

            display: flex;

            align-items: center;

            justify-content: center;

            color: var(--accent);

        }

        .voucher-icon i {

            font-size: 24px;

        }

        .voucher-details {

            flex: 1;

        }

        .voucher-price {

            font-size: 18px;

            font-weight: 600;

            color: var(--accent);

            margin: 0;

        }

        .voucher-duration {

            font-size: 13px;

            color: #6c757d;

            margin: 0;

        }

        .payment-option {

            display: block;

            padding: 15px;

            border: 1px solid var(--border);

            border-radius: 8px;

            margin-bottom: 10px;

            cursor: pointer;

            transition: all 0.2s ease;

            }

            .payment-option:hover {

            border-color: var(--accent);

            background: rgba(255,107,53,0.05);

            }

            .payment-option input[type="radio"] {

            display: none;

            }

            .payment-option input[type="radio"]:checked + div {

            color: var(--accent);

            }

            .payment-option input[type="radio"]:checked + div i {

            color: var(--accent);

            }

            .payment-option:has(input[type="radio"]:checked) {

            border-color: var(--accent);

            background: rgba(255,107,53,0.05);

            }

            .payment-option i {

            font-size: 20px;

            color: #6c757d;

            }

            .payment-option span {

            font-size: 14px;

            font-weight: 500;

            }

            .payment-details {

                background: var(--light);
    
                border-radius: 8px;
    
                padding: 16px;
    
                margin-bottom: 16px;
    
            }


            .detail-row {

                display: flex;
    
                justify-content: space-between;
    
                margin-bottom: 8px;
    
                font-size: 14px;
    
            }
    
            
    
            .detail-label {
    
                color: #6c757d;
    
            }
    
            
    
            .detail-value {
    
                font-weight: 500;
    
            }
    
            
    
            .qr-container {
    
                text-align: center;
    
                margin: 24px 0;
    
            }
    
            
    
            .qr-code {
    
                max-width: 300px;
    
                border-radius: 8px;
    
                padding: 8px;
    
                background: white;
    
                border: 1px solid var(--border);
    
            }

        .form-control {

            height: 45px;

            border-radius: 8px;

            border: 1px solid var(--border);

            padding: 8px 16px;

            font-size: 14px;

            font-weight: 300;

        }

        .form-control:focus {

            border-color: var(--accent);

            box-shadow: 0 0 0 3px rgba(255,107,53,0.1);

        }

        .form-label {

            font-size: 14px;

            font-weight: 500;

            margin-bottom: 8px;

        }

        .btn-primary {

            background: var(--accent);

            border: none;

            height: 45px;

            border-radius: 8px;

            font-size: 14px;

            font-weight: 500;

            padding: 0 24px;

            margin-bottom: 24px;

        }

        .btn-primary:hover {

            background: #000000;

        }

        .section-title {

            font-size: 16px;

            font-weight: 600;

            margin-bottom: 16px;

            color: var(--text);

            display: flex;

            align-items: center;

            gap: 8px;

        }

        .section-title i {

            font-size: 20px;

            color: var(--accent);

        }

        .payment-method {

            border: 1px solid var(--border);

            border-radius: 8px;

            padding: 16px;

            background: white;

        }

        .total-price {

            font-size: 18px;

            font-weight: 600;

        }

        .btn-action {

            background: var(--accent);

            border: none;

            color: white;

            padding: 12px 24px;

            border-radius: 8px;

            font-weight: 500;

            width: 100%;

            margin-bottom: 12px;

        }

        

        .btn-secondary {

            background: var(--light);

            color: var(--text);

            border: 1px solid var(--border);

        }

        

        .payment-status {

            text-align: center;

            padding: 16px;

            border-radius: 8px;

            margin-bottom: 16px;

        }

        

        .payment-status i {

            display: block;

            margin-bottom: 8px;

        }

        

        .status-success {

            background: #d4edda;

            color: #155724;

        }

        

        .status-expired {

            background: #f8d7da;

            color: #721c24;

        }

        .steps {

            font-size: 13px;

            color: #6c757d;

            padding: 16px;

            background: var(--light);

            border-radius: 8px;

            margin-bottom: 24px;

            margin-top: 24px;

        }

        .steps ol {

            margin-bottom: 0;

            padding-left: 16px;

        }

        .voucher-code {

            font-size: 18px;

            font-weight: 600;

            color: var(--accent);

            margin: 0;

        }

        

        .redirect-message {

            color: #6c757d;

            font-size: 14px;

            margin-top: 16px;

        }

        

        .countdown {

            font-weight: 600;

            color: var(--accent);

        }

        

        .loading-spinner {

            width: 24px;

            height: 24px;

            border: 3px solid var(--light);

            border-top: 3px solid var(--accent);

            border-radius: 50%;

            animation: spin 1s linear infinite;

            margin: 16px auto;

        }

        

        @keyframes spin {

            0% { transform: rotate(0deg); }

            100% { transform: rotate(360deg); }

        }

        .whatsapp-input {

            display: flex;

        }

        .country-code {

            background: var(--light);

            padding: 8px 12px;

            border: 1px solid var(--border);

            border-radius: 8px 0 0 8px;

            font-size: 14px;

            font-weight: 300;

        }

        .phone-input {

            border-radius: 0 8px 8px 0;

        }

        .divider {

            height: 1px;

            background: var(--border);

            margin: 24px 0;

        }

        .payment-option {

            cursor: pointer;

            padding: 10px;

            border-radius: 8px;

            transition: all 0.2s ease;

        }

        .payment-option:hover {

            background: var(--light);

        }

        .hidden {

            display: none;

        }