Payment Method Cards

<div class="uk-payment-card uk-payment-card-selected">
    <div class="uk-payment-card-icon">
        <i class="fab fa-cc-visa"></i>
    </div>
    <div class="uk-payment-card-details">
        <div class="uk-payment-card-title">Visa ending in 4242</div>
        <div class="uk-payment-card-meta">Expires 12/26</div>
    </div>
    <div class="uk-payment-card-check">
        <i class="fas fa-check-circle"></i>
    </div>
</div>

<style>
    .uk-payment-card {
        display: flex;
        align-items: center;
        gap: 1rem;
        background: #fff;
        border: 1.5px solid #e2e8f0;
        border-radius: 0.85rem;
        padding: 1rem;
        cursor: pointer;
        transition: all 0.15s;
        text-align: left;
    }
    .uk-payment-card:hover {
        border-color: #cbd5e1;
    }
    .uk-payment-card-selected {
        border-color: #1e3a8a;
        background: #f8fafc;
        box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
    }
    .uk-payment-card-icon {
        width: 48px;
        height: 32px;
        background: #f1f5f9;
        border-radius: 0.3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: #1e3a8a;
    }
    .uk-payment-card-details {
        flex: 1;
    }
    .uk-payment-card-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: #0b1b2f;
        margin-bottom: 0.2rem;
    }
    .uk-payment-card-meta {
        font-size: 0.75rem;
        color: #64748b;
    }
    .uk-payment-card-check {
        color: #1e3a8a;
        font-size: 1.25rem;
    }
</style>

<div class="uk-add-card">
    <div class="uk-add-card-header">
        <h3 class="uk-add-card-title">Add payment method</h3>
    </div>
    <form class="uk-add-card-form">
        <div class="uk-form-group">
            <label>Card number</label>
            <div class="uk-input-wrap">
                <i class="fas fa-credit-card"></i>
                <input type="text" placeholder="0000 0000 0000 0000">
            </div>
        </div>
        <div class="uk-form-row">
            <div class="uk-form-group">
                <label>Expiry</label>
                <input type="text" placeholder="MM / YY">
            </div>
            <div class="uk-form-group">
                <label>CVC</label>
                <input type="text" placeholder="123">
            </div>
        </div>
        <div class="uk-form-group">
            <label>Name on card</label>
            <input type="text" placeholder="Jane Cooper">
        </div>
        <button type="submit" class="uk-add-card-btn">Save card</button>
    </form>
</div>

<style>
    .uk-add-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        padding: 1.5rem;
        text-align: left;
    }
    .uk-add-card-header {
        margin-bottom: 1.5rem;
    }
    .uk-add-card-title {
        font-size: 1.1rem;
        font-weight: 800;
        color: #0b1b2f;
        margin: 0;
    }
    .uk-add-card-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .uk-form-group {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        flex: 1;
    }
    .uk-form-group label {
        font-size: 0.75rem;
        font-weight: 700;
        color: #334155;
    }
    .uk-form-group input {
        width: 100%;
        border: 1.5px solid #e2e8f0;
        border-radius: 0.5rem;
        padding: 0.65rem 0.85rem;
        font-size: 0.85rem;
        color: #0b1b2f;
        outline: none;
        font-family: inherit;
        transition: all 0.15s;
    }
    .uk-form-group input:focus {
        border-color: #1e3a8a;
        box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
    }
    .uk-input-wrap {
        position: relative;
        display: flex;
        align-items: center;
    }
    .uk-input-wrap i {
        position: absolute;
        left: 0.85rem;
        color: #94a3b8;
        font-size: 0.9rem;
    }
    .uk-input-wrap input {
        padding-left: 2.5rem;
    }
    .uk-form-row {
        display: flex;
        gap: 1rem;
    }
    .uk-add-card-btn {
        background: #1e3a8a;
        color: #fff;
        border: none;
        border-radius: 0.5rem;
        padding: 0.75rem;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.15s;
        font-family: inherit;
        margin-top: 0.5rem;
    }
    .uk-add-card-btn:hover {
        background: #1d4ed8;
    }
</style>

<div class="uk-payment-list">
    <label class="uk-payment-list-item">
        <input type="radio" name="pm" checked>
        <div class="uk-payment-list-icon">
            <i class="fab fa-cc-visa"></i>
        </div>
        <div class="uk-payment-list-details">
            <div class="uk-payment-list-title">Visa ending in 4242</div>
            <div class="uk-payment-list-meta">Expires 12/26</div>
        </div>
    </label>
    <!-- Repeat for Mastercard -->
</div>

<style>
    .uk-payment-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    .uk-payment-list-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        background: #fff;
        border: 1.5px solid #e2e8f0;
        border-radius: 0.75rem;
        padding: 1rem;
        cursor: pointer;
        transition: all 0.15s;
        text-align: left;
    }
    .uk-payment-list-item:hover {
        border-color: #cbd5e1;
    }
    .uk-payment-list-item input[type="radio"] {
        width: 18px;
        height: 18px;
        accent-color: #1e3a8a;
        cursor: pointer;
    }
    .uk-payment-list-item:has(input:checked) {
        border-color: #1e3a8a;
        background: #f8fafc;
        box-shadow: 0 0 0 3px rgba(30,58,138,0.05);
    }
    .uk-payment-list-icon {
        width: 40px;
        height: 26px;
        background: #f1f5f9;
        border-radius: 0.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        color: #1e3a8a;
    }
    .uk-payment-list-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: #0b1b2f;
    }
    .uk-payment-list-meta {
        font-size: 0.75rem;
        color: #64748b;
    }
</style>

<div class="uk-credit-card">
    <div class="uk-credit-card-top">
        <div class="uk-credit-card-chip"></div>
        <div class="uk-credit-card-brand">
            <i class="fab fa-cc-visa"></i>
        </div>
    </div>
    <div class="uk-credit-card-number">
        <span>••••</span>
        <span>••••</span>
        <span>••••</span>
        <span>4242</span>
    </div>
    <div class="uk-credit-card-bottom">
        <div>
            <div class="uk-credit-card-label">Card Holder</div>
            <div class="uk-credit-card-value">Jane Cooper</div>
        </div>
        <div>
            <div class="uk-credit-card-label">Expires</div>
            <div class="uk-credit-card-value">12/26</div>
        </div>
    </div>
</div>

<style>
    .uk-credit-card {
        background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
        border-radius: 1rem;
        padding: 1.5rem;
        color: #fff;
        box-shadow: 0 12px 32px rgba(30,58,138,0.3);
        position: relative;
        overflow: hidden;
        aspect-ratio: 1.586;
    }
    .uk-credit-card::before {
        content: '';
        position: absolute;
        width: 200px;
        height: 200px;
        background: rgba(255,255,255,0.05);
        border-radius: 50%;
        top: -80px;
        right: -80px;
    }
    .uk-credit-card-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 2rem;
        position: relative;
        z-index: 1;
    }
    .uk-credit-card-chip {
        width: 44px;
        height: 32px;
        background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
        border-radius: 0.35rem;
        position: relative;
    }
    .uk-credit-card-chip::after {
        content: '';
        position: absolute;
        inset: 6px;
        border: 1px solid rgba(0,0,0,0.15);
        border-radius: 0.15rem;
    }
    .uk-credit-card-brand {
        font-size: 2rem;
        opacity: 0.9;
    }
    .uk-credit-card-number {
        display: flex;
        gap: 1rem;
        font-size: 1.25rem;
        font-weight: 700;
        font-family: 'Courier New', monospace;
        letter-spacing: 0.05em;
        margin-bottom: 1.5rem;
        position: relative;
        z-index: 1;
    }
    .uk-credit-card-bottom {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        position: relative;
        z-index: 1;
    }
    .uk-credit-card-label {
        font-size: 0.55rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        opacity: 0.6;
        margin-bottom: 0.2rem;
    }
    .uk-credit-card-value {
        font-size: 0.85rem;
        font-weight: 700;
    }
</style>