/* ====================================================================
   PAYMENT METHODS — PREMIUM STYLES
   ==================================================================== */

.payment-horizontal-card {
    border: 1px solid rgba(16, 185, 129, 0.08) !important;
    position: relative;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

/* Subtle green-tint gradient wash */
.payment-horizontal-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(16, 185, 129, 0.025) 0%,
        transparent 60%
    );
    pointer-events: none;
}

.payment-horizontal-card:hover {
    transform: translateY(-3px);
    border-color: rgba(16, 185, 129, 0.28) !important;
    box-shadow: 0 10px 28px rgba(16, 185, 129, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.payment-horizontal-card:active {
    transform: scale(0.975);
    background-color: #f8fffe;
}

/* Animated verified icon on hover */
.payment-horizontal-card .ti-circle-check-filled {
    font-size: 16px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.payment-horizontal-card:hover .ti-circle-check-filled {
    transform: scale(1.28);
    color: #10b981 !important;
    opacity: 1 !important;
}

/* Image wrapper */
.img-wrapper {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.object-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.x-extra-small {
    font-size: 11px;
    line-height: 1.3;
}

/* ==================== DARK MODE ==================== */

[data-bs-theme="dark"] .payment-horizontal-card {
    background: #1e1f2e !important;
    border-color: rgba(16, 185, 129, 0.1) !important;
}

[data-bs-theme="dark"] .payment-horizontal-card:hover {
    border-color: rgba(16, 185, 129, 0.35) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

[data-bs-theme="dark"] .payment-horizontal-card:active {
    background-color: #252636 !important;
}

[data-bs-theme="dark"] .payment-horizontal-card .img-wrapper {
    background: #252636 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
