/**
 * BEM Checkout - Payment Section Styles (v6.2.52)
 *
 * Modular CSS for the payment gateway section.
 * Loaded AFTER checkout.css to override any conflicting rules.
 *
 * CRITICAL RULE: Never use display:none on payment_box containers
 * for Stripe/PayPal. Stripe Elements mount during updated_checkout —
 * display:none causes 0 dimensions and mount() fails silently.
 * Use visibility approach instead. display:none IS safe for gateways
 * that don't mount iframes (Confirmo crypto).
 *
 * @package BEM_Checkout
 * @since   6.2.2
 */

/* ============================================
   1. PAYMENT CONTAINER — single outer box
   ============================================ */

#bem-payment-section {
    width: 100%;
    background: var(--bem-surface, #151515) !important;
    border: 1px solid var(--bem-border, #2F2F2F) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-sizing: border-box;
}

/* Inner #payment: no extra box, keep content in flow */
#bem-payment-section #payment {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide order review table (we have custom order summary) */
#bem-payment-section .woocommerce-checkout-review-order-table {
    display: none !important;
}

/* Hide duplicate coupon form in payment section */
#bem-payment-section .woocommerce-form-coupon-toggle,
#bem-payment-section .checkout_coupon {
    display: none !important;
}

/* ============================================
   2. WC PAYMENT METHODS LIST
   Native WC radio list is hidden — our custom
   .pay-tabs handle the tab UI. The native list
   stays in the DOM for form submission + Stripe.
   ============================================ */

#bem-payment-section .wc_payment_methods,
#bem-payment-section #payment .payment_methods {
    display: block !important;
    margin: 0 !important;
    margin-top: 12px !important;
    padding: 0 !important;
    border: none !important;
    list-style: none !important;
    /* No min-height — content defines height naturally.
       Gateways without form fields (Confirmo) collapse to 0. */
}

/* Each payment method <li> — block layout, relative for absolute children */
#bem-payment-section .wc_payment_method {
    display: block !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    list-style: none !important;
}

/* Non-active methods: fully hidden so no collapsed detail lines show
   Overrides checkout.css flex/block rules for .wc_payment_methods li */
#bem-payment-section .wc_payment_method:not(.bem-active-method),
#bem-payment-section #payment .wc_payment_methods li:not(.bem-active-method),
#bem-payment-section .wc_payment_methods li:not(.bem-active-method),
body.woocommerce-checkout #bem-payment-section .wc_payment_methods li:not(.bem-active-method) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

/* Hide native radio buttons and labels (custom .pay-tabs handle UI) */
#bem-payment-section .wc_payment_method > input[type="radio"],
#bem-payment-section .wc_payment_method > label {
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* ============================================
   3. PAYMENT BOX VISIBILITY (Stripe-Safe)

   WooCommerce adds inline style="display:none"
   to non-selected payment_boxes. This breaks
   Stripe Elements mount (0 dimensions).

   Fix: Force ALL boxes to display:block.
   Hide non-active via visibility + position.
   Active box uses bem-active-method class.
   ============================================ */

/* Default: all payment boxes rendered but visually hidden */
#bem-payment-section .wc_payment_method .payment_box {
    display: block !important;
    visibility: hidden !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
    /* Styling */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #FFFFFF !important;
}

/* Active payment box — fully visible and in flow */
#bem-payment-section .wc_payment_method.bem-active-method .payment_box {
    visibility: visible !important;
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: auto !important;
    padding: 16px 0 0 0 !important;
}

/* ============================================
   4. STRIPE UPE ELEMENTS
   ============================================ */

/* Stripe UPE form container */
#bem-payment-section #wc-stripe-upe-form,
#bem-payment-section .wc-upe-form {
    display: block !important;
    width: 100% !important;
    margin-top: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Stripe Payment Element mount point */
#bem-payment-section .wc-stripe-upe-element {
    min-height: 40px !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
}

/* Stripe Elements field containers */
#bem-payment-section .wc-stripe-elements-field,
#bem-payment-section .stripe-card-group {
    background: #0a0a0a !important;
    border: 1px solid var(--bem-border, #2F2F2F) !important;
    border-radius: 8px !important;
    padding: 12px !important;
}

/* v6.3.11: Remove white lines from Stripe iframe wrappers */
#bem-payment-section .__PrivateStripeElement,
#bem-payment-section .p-Input,
#bem-payment-section .wc-stripe-upe-element > div,
#bem-payment-section .wc-stripe-upe-element > div > div,
#bem-payment-section iframe.stripe_checkout_app,
#bem-payment-section .wc-stripe-upe-element iframe,
#bem-payment-section #wc-stripe-upe-form > div,
#bem-payment-section .payment_box.payment_method_stripe {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

#bem-payment-section .payment_box.payment_method_stripe > fieldset,
#bem-payment-section .payment_box.payment_method_stripe > p {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Stripe field labels */
#bem-payment-section label[for^="stripe-"],
#bem-payment-section label[for^="wc-stripe-"] {
    color: #FFFFFF !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
}

/* Stripe error messages */
#bem-payment-section .wc-stripe-error,
#bem-payment-section .stripe-source-errors {
    color: #ff4444 !important;
    margin-top: 8px !important;
}

/* Saved payment methods + Stripe mandate text — DISABLED (v6.5.9) */
#bem-payment-section .woocommerce-SavedPaymentMethods,
#bem-payment-section #wc-stripe-new-payment-method,
#bem-payment-section .wc-stripe-upe-element + p label[for="wc-stripe-new-payment-method"],
#bem-payment-section .wc-stripe-upe-element ~ p:not(.form-row),
#bem-payment-section .stripe-upe-mandate,
#bem-payment-section .payment_box.payment_method_stripe > p,
#bem-payment-section .payment_box.payment_method_stripe > fieldset > p {
    display: none !important;
}

/* Saved payment methods list (kept for fallback styling if re-enabled) */
#bem-payment-section .woocommerce-SavedPaymentMethods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
}

#bem-payment-section .woocommerce-SavedPaymentMethods li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    margin-bottom: 6px !important;
    background: #111 !important;
    border: 1px solid var(--bem-border, #2F2F2F) !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease !important;
}

#bem-payment-section .woocommerce-SavedPaymentMethods li:hover {
    border-color: var(--bem-primary, #715df5) !important;
}

#bem-payment-section .woocommerce-SavedPaymentMethods li.selected,
#bem-payment-section .woocommerce-SavedPaymentMethods li:has(input[type="radio"]:checked) {
    border-color: var(--bem-primary, #715df5) !important;
    background: rgba(113, 93, 245, 0.12) !important;
    box-shadow: 0 0 0 1px rgba(113, 93, 245, 0.22) inset !important;
}

#bem-payment-section .woocommerce-SavedPaymentMethods li input[type="radio"] {
    accent-color: var(--bem-primary, #715df5) !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

#bem-payment-section .woocommerce-SavedPaymentMethods li label {
    color: #FFFFFF !important;
    cursor: pointer !important;
    margin: 0 !important;
    font-size: 14px !important;
}

/* "Use a new payment method" option — style consistently */
#bem-payment-section .woocommerce-SavedPaymentMethods-new {
    border-style: dashed !important;
}

/* Stripe "Save payment info" checkbox styling */
#bem-payment-section .wc-stripe-upe-element + p,
#bem-payment-section #wc-stripe-new-payment-method {
    color: #FFFFFF !important;
    font-size: 14px !important;
    margin-top: 12px !important;
}

#bem-payment-section #wc-stripe-new-payment-method input[type="checkbox"] {
    accent-color: var(--bem-primary, #715df5) !important;
}

/* ============================================
   5. CONFIRMO (Crypto) + EMPTY-BOX GATEWAYS
   Gateways without form fields — collapse everything.
   display:none is safe (no iframe mounting like Stripe).
   Uses [class*=] attribute selector because the actual
   WooCommerce gateway ID may vary (confirmo_gateway, etc).
   ============================================ */

/* Hide payment_box for Confirmo */
#bem-payment-section [class*="confirmo"].bem-active-method .payment_box,
#bem-payment-section [class*="confirmo"] .payment_box {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

/* Confirmo active <li> — collapse entirely since it has no form content.
   Radio button stays off-screen but still submits with the form. */
#bem-payment-section [class*="confirmo"].bem-active-method {
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* JS adds .bem-empty-gateway to <li> when payment_box has no form content.
   Collapse the entire <li> so no empty space remains. */
#bem-payment-section .wc_payment_method.bem-empty-gateway.bem-active-method {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* When the active gateway is empty, collapse the entire payment methods list
   so no gap appears between tabs and Place Order button.
   Covers both JS-detected (bem-empty-gateway) and CSS-known (Confirmo) gateways. */
#bem-payment-section .wc_payment_methods:has(.bem-empty-gateway.bem-active-method),
#bem-payment-section .wc_payment_methods:has([class*="confirmo"].bem-active-method) {
    margin-top: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ============================================
   6. PLACE ORDER BUTTON
   ============================================ */

#bem-payment-section .place-order,
#bem-payment-section .form-row.place-order {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

#bem-payment-section #place_order {
    width: 100% !important;
    background: linear-gradient(90deg, #6d5dfc, #7f67ff) !important;
    color: white !important;
    border: none !important;
    border-radius: 16px !important;
    height: 55px !important;
    padding: 0 24px !important;
    font-family: "Stack Sans Text", "Stack Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    margin-top: 16px !important;
    transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

#bem-payment-section #place_order:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(109, 93, 252, 0.4) !important;
}

#bem-payment-section #place_order:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(109, 93, 252, 0.25) !important;
}

/* ============================================
   7. CUSTOM PAYMENT TABS (.pay-tabs)
   Redesigned for v6.2.52 — 2x2 grid, logo-only,
   purple border glow on active state
   ============================================ */

#bem-payment-section .pay-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 4px !important;
}

#bem-payment-section .pay-tabs .tab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 70px !important;
    border-radius: 14px !important;
    border: 1px solid #2a2a2e !important;
    background: #1a1a1f !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    padding: 10px !important;
}

#bem-payment-section .pay-tabs .tab[data-gateway-id*="stripe"],
#bem-payment-section .pay-tabs .tab[data-gateway-id*="confirmo"] {
    color: #8E8B9E !important;
}

#bem-payment-section .pay-tabs .tab:hover {
    border-color: #6d5dfc !important;
    background: #1a1a1f !important;
}

#bem-payment-section .pay-tabs .tab[data-gateway-id*="stripe"]:hover,
#bem-payment-section .pay-tabs .tab[data-gateway-id*="confirmo"]:hover {
    color: #C8C0FF !important;
}

#bem-payment-section .pay-tabs .tab.active {
    background: #1a1a1f !important;
    border: 1px solid #6d5dfc !important;
    box-shadow: 0 0 12px rgba(109, 93, 252, 0.8) !important;
}

#bem-payment-section .pay-tabs .tab.active[data-gateway-id*="stripe"],
#bem-payment-section .pay-tabs .tab.active[data-gateway-id*="confirmo"] {
    color: var(--bem-primary, #715df5) !important;
}

#bem-payment-section .pay-tabs .tab.active:hover {
    background: #1a1a1f !important;
    border-color: #6d5dfc !important;
}

/* SVG icons in tabs — logo-only display */
#bem-payment-section .pay-tabs .tab svg {
    height: 24px !important;
    width: auto !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease !important;
}

#bem-payment-section .pay-tabs .tab[data-gateway-id*="stripe"] svg,
#bem-payment-section .pay-tabs .tab[data-gateway-id*="confirmo"] svg {
    opacity: 1 !important;
}

#bem-payment-section .pay-tabs .tab[data-gateway-id*="stripe"] svg path,
#bem-payment-section .pay-tabs .tab[data-gateway-id*="stripe"] svg rect,
#bem-payment-section .pay-tabs .tab[data-gateway-id*="stripe"] svg circle,
#bem-payment-section .pay-tabs .tab[data-gateway-id*="stripe"] svg polygon,
#bem-payment-section .pay-tabs .tab[data-gateway-id*="confirmo"] svg path,
#bem-payment-section .pay-tabs .tab[data-gateway-id*="confirmo"] svg rect,
#bem-payment-section .pay-tabs .tab[data-gateway-id*="confirmo"] svg circle,
#bem-payment-section .pay-tabs .tab[data-gateway-id*="confirmo"] svg polygon {
    fill: currentColor !important;
    transition: fill 0.2s ease, color 0.2s ease !important;
}

#bem-payment-section .pay-tabs .tab.active svg {
    opacity: 1 !important;
}

/* Hide text labels — logo-only buttons */
#bem-payment-section .pay-tabs .tab .gateway-text,
#bem-payment-section .pay-tabs .tab .gateway-label {
    display: none !important;
}

/* Hide PayPal's credit presentment / Pay Later messaging */
#bem-payment-section .ppcp-messages-container,
#bem-payment-section [class*="ppcp-message"],
#bem-payment-section [class*="paypal-message"],
#bem-payment-section .ppc-message,
#bem-payment-section [data-pp-message],
#bem-payment-section iframe[src*="credit-presentment"] {
    display: none !important;
}

/* PayPal button visibility (v6.6.9):
   The old rule blanket-hid EVERY PayPal button inside #bem-payment-section,
   which meant that even when PayPal was the selected gateway, PPCP's own
   checkout button never rendered — the customer was left with a Place
   Order button that PPCP had silently disabled (PPCP submits the order
   through its own button click, not the WC form submit). Result: on
   PayPal, no working button visible at all.

   BEMCheckout.toggleCardFields() now toggles `body.bem-gateway-paypal`
   whenever the selected gateway id matches /paypal|ppcp/i.

   When PayPal IS NOT active: hide every PayPal button fragment inside
   #bem-payment-section. PPCP pre-mounts buttons into a few containers
   at page load, and those fragments can leak outside the PayPal LI, so
   relying on the `.wc_payment_method` display:none alone is not enough.
   When PayPal IS active: do not hide PayPal buttons at all, and hide
   our #place_order so only PPCP's button is visible. */
body:not(.bem-gateway-paypal) #bem-payment-section .ppcp-button,
body:not(.bem-gateway-paypal) #bem-payment-section .wc-ppcp-checkout-buttons,
body:not(.bem-gateway-paypal) #bem-payment-section [data-funding-source="paypal"],
body:not(.bem-gateway-paypal) #bem-payment-section .paypal-buttons,
body:not(.bem-gateway-paypal) #bem-payment-section .paypal-button,
body:not(.bem-gateway-paypal) #bem-payment-section .paypal-button-container {
    display: none !important;
}

body.bem-gateway-paypal #bem-payment-section #place_order,
body.bem-gateway-paypal #bem-payment-section .place-order,
body.bem-gateway-paypal #bem-payment-section .form-row.place-order {
    display: none !important;
}

/* Hide the deleted Payment_Handler's tabs (dead code safety) */
.bem-payment-tabs {
    display: none !important;
}

/* ============================================
   8. WC TERMS & CONDITIONS
   ============================================ */

#bem-payment-section .woocommerce-terms-and-conditions-wrapper {
    margin-top: 12px !important;
}

#bem-payment-section .woocommerce-terms-and-conditions-wrapper label {
    color: var(--bem-text-muted, #A0A0A0) !important;
    font-size: 13px !important;
}

/* ============================================
   9. MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    #bem-payment-section .pay-tabs {
        gap: 10px !important;
    }

    #bem-payment-section .pay-tabs .tab {
        height: 60px !important;
        border-radius: 12px !important;
    }

    #bem-payment-section .pay-tabs .tab svg {
        height: 20px !important;
    }
}

@media (max-width: 480px) {
    #bem-payment-section .pay-tabs {
        gap: 8px !important;
    }

    #bem-payment-section .pay-tabs .tab {
        height: 55px !important;
    }
}

/* ============================================
   10. STRIPE CARD VISUAL (v6.3.8)
   3D card preview with flip animation,
   brand detection, and tilt hover effect.
   Injected by BEMCardVisual JS module.
   ============================================ */

/* === CARD CONTAINER === */
/* Card is injected between .bem-payment-tabs-wrapper and #order_review
   (outside WooCommerce AJAX zone). Visibility controlled by JS updateCardVisibility(). */
.bem-card-container {
    perspective: 1000px;
    margin-bottom: 20px;
    margin-top: 8px;
    user-select: none;
    -webkit-user-select: none;
    animation: bemCardSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    display: none; /* Hidden by default — JS shows when Stripe is active */
}

.bem-card {
    width: 100%;
    aspect-ratio: 1.586 / 1;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bem-card.bem-flip {
    transform: rotateY(180deg);
}

/* === CARD FACES === */
.bem-card-face {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Front */
.bem-card-front {
    background: linear-gradient(145deg, #1a1b2e, #0f1018);
    box-shadow:
            0 16px 40px rgba(0,0,0,0.45),
            0 2px 8px rgba(0,0,0,0.3),
            inset 0 1px 0 rgba(255,255,255,0.06);
    padding: 24px;
    color: #fff;
}

/* Brand-specific themes */
.bem-card-front[data-brand="visa"] {
    background: linear-gradient(145deg, #1a1b3a, #0c0d1f);
}
.bem-card-front[data-brand="visa"]::before {
    background: radial-gradient(ellipse at 85% 15%, rgba(26, 75, 179, 0.35), transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(245, 187, 44, 0.12), transparent 50%);
}

.bem-card-front[data-brand="mastercard"] {
    background: linear-gradient(145deg, #1e1318, #110a0e);
}
.bem-card-front[data-brand="mastercard"]::before {
    background: radial-gradient(ellipse at 80% 20%, rgba(235, 0, 27, 0.25), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(255, 95, 0, 0.15), transparent 50%);
}

.bem-card-front[data-brand="amex"] {
    background: linear-gradient(145deg, #0a1e2e, #061220);
}
.bem-card-front[data-brand="amex"]::before {
    background: radial-gradient(ellipse at 75% 25%, rgba(0, 110, 195, 0.35), transparent 55%),
    radial-gradient(ellipse at 25% 75%, rgba(0, 180, 220, 0.12), transparent 50%);
}

/* Glow overlay */
.bem-card-front::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 15%, rgba(109, 93, 252, 0.2), transparent 55%),
    radial-gradient(ellipse at 20% 85%, rgba(109, 93, 252, 0.06), transparent 50%);
    pointer-events: none;
    transition: background 0.5s ease;
}

/* Noise texture */
.bem-card-front::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Back */
.bem-card-back {
    transform: rotateY(180deg);
    background: linear-gradient(145deg, #1a1b2e, #0f1018);
    box-shadow:
            0 16px 40px rgba(0,0,0,0.45),
            inset 0 1px 0 rgba(255,255,255,0.06);
    color: #fff;
}

.bem-card-magnetic {
    height: 42px;
    background: linear-gradient(180deg, #111 0%, #1a1a1a 50%, #0a0a0a 100%);
    margin-top: 24px;
}

.bem-card-cvc-area {
    padding: 20px 24px;
}

.bem-card-cvc-label {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 9px;
    letter-spacing: 1.5px;
    opacity: 0.5;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.bem-card-cvc-box {
    background: linear-gradient(90deg, #e8e8e8, #f5f5f5);
    color: #111;
    padding: 8px 14px;
    width: 72px;
    text-align: right;
    border-radius: 4px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    float: right;
}

/* === CARD CONTENT === */
.bem-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: auto;
    position: relative;
    z-index: 1;
}

.bem-card-chip {
    width: 48px;
    height: 36px;
    border-radius: 7px;
    background: linear-gradient(145deg, #e8d088, #c9a84c);
    box-shadow:
            inset 0 1px 2px rgba(255,255,255,0.4),
            inset 0 -1px 2px rgba(0,0,0,0.25),
            0 1px 3px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
}

.bem-card-chip::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 4px;
    right: 4px;
    height: 1px;
    background: rgba(0,0,0,0.15);
    box-shadow: 0 -8px 0 rgba(0,0,0,0.1), 0 8px 0 rgba(0,0,0,0.1);
}

.bem-card-chip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(0,0,0,0.12);
}

.bem-card-contactless {
    width: 20px;
    height: 20px;
    opacity: 0.4;
    margin-left: 10px;
}

.bem-card-brand {
    position: relative;
    z-index: 1;
    height: 32px;
    display: flex;
    align-items: center;
    transition: all 0.4s ease;
}

.bem-card-brand svg {
    height: 28px;
    width: auto;
}

.bem-card-brand-text {
    font-weight: 700;
    letter-spacing: 2.5px;
    font-size: 17px;
    color: rgba(255,255,255,0.85);
}

.bem-card-number {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 19px;
    letter-spacing: 3.5px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.bem-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    z-index: 1;
}

.bem-card-label {
    font-size: 8px;
    letter-spacing: 1.5px;
    opacity: 0.45;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.bem-card-value {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.8);
}

.bem-card-holder-name {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === CARD ANIMATIONS === */
@keyframes bemCardSlideIn {
    from { opacity: 0; transform: translateY(-15px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* === CARD RESPONSIVE === */
@media (max-width: 480px) {
    .bem-card-front { padding: 18px; }
    .bem-card-number { font-size: 15px; letter-spacing: 2.5px; }
    .bem-card-value { font-size: 11px; }
    .bem-card-chip { width: 40px; height: 30px; }
}