/* =========================== 
   MINIMAL PAYMENT SYSTEMS STYLING
   Clean and minimal design in one line
   =========================== */

:root {
    --payment-bg: rgba(255, 107, 53, 0.05);
    --payment-accent: #ff6b35;
    --payment-border: rgba(255, 107, 53, 0.15);
    --payment-hover-bg: rgba(255, 107, 53, 0.1);
    --payment-transition: all 0.2s ease;
}

/* Payment systems container styling - minimal approach */
.d-flex.flex-wrap.align-items-center.justify-content-center {
    padding: 30px 20px;
    background: var(--payment-bg);
    border-radius: 12px;
    margin: 30px 0;
    border: 1px solid var(--payment-border);
    backdrop-filter: blur(5px);
}

/* Individual payment system styling - compact and minimal */
.paypal, .visa, .master-card, .coin-payment, .strip {
    padding: 15px 20px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 107, 53, 0.1);
    transition: var(--payment-transition);
    cursor: pointer;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    opacity: 1;
    position: relative;
    z-index: 1;
}

/* Simple hover effects - no disappearing */
.paypal:hover, .visa:hover, .master-card:hover, 
.coin-payment:hover, .strip:hover {
    background: var(--payment-hover-bg);
    border-color: var(--payment-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);
    opacity: 1;
}

/* SVG and image styling - simple and clean */
.paypal svg, .visa svg, .master-card svg {
    max-width: 100px;
    max-height: 40px;
    transition: var(--payment-transition);
    opacity: 0.9;
}

.paypal:hover svg, .visa:hover svg, .master-card:hover svg {
    opacity: 1;
    filter: brightness(1.1);
}

/* Image-based payment systems */
.coin-payment img, .strip img {
    max-width: 100px;
    max-height: 40px;
    transition: var(--payment-transition);
    opacity: 0.9;
}

.coin-payment:hover img, .strip:hover img {
    opacity: 1;
    filter: brightness(1.1);
}

/* Special styling for SBP (theme-aware) - minimal */
.sbp-light, .sbp-dark {
    padding: 15px 20px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 107, 53, 0.1);
    transition: var(--payment-transition);
    cursor: pointer;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 65px;
    opacity: 1;
    position: relative;
    z-index: 1;
}

.sbp-light:hover, .sbp-dark:hover {
    background: var(--payment-hover-bg);
    border-color: var(--payment-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);
    opacity: 1;
}

.sbp-light img, .sbp-dark img {
    max-width: 80px !important;
    max-height: 35px !important;
    width: auto !important;
    height: auto !important;
    transition: var(--payment-transition);
    opacity: 0.9;
}

.sbp-light:hover img, .sbp-dark:hover img {
    opacity: 1;
    filter: brightness(1.1);
}

/* Responsive adjustments - minimal */
@media (max-width: 767px) {
    .d-flex.flex-wrap.align-items-center.justify-content-center {
        padding: 20px 15px;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
    }
    
    .paypal, .visa, .master-card, .coin-payment, .strip,
    .sbp-light, .sbp-dark {
        padding: 12px 15px;
        min-height: 50px;
        margin: 0 3px;
        flex-shrink: 0;
        min-width: 80px;
    }
    
    .paypal svg, .visa svg, .master-card svg,
    .coin-payment img, .strip img {
        max-width: 70px;
        max-height: 35px;
    }
    
    .sbp-light img, .sbp-dark img {
        max-width: 55px !important;
        max-height: 25px !important;
    }
}