/* ==========================================================================
   BNKFX MODERN FINTECH DESIGN SYSTEM STYLES
   Color System:
     Main Background:      #0B0D10
     Secondary Background: #12151B
     Card Background:       #171A21
     Elevated Surface:      #20242D
     Borders:               #292E38
     Primary Text:          #F8FAFC
     Secondary Text:        #9CA6BA
     Muted Text:            #737D90
     Primary Blue:          #246BFD
     Dark Blue:             #1748A8
     Hover Blue:            #1858D8
     Light Blue:            #E7F0FF
     Purple Accent:         #8054F6
     Success Green:         #20C997
     Warning Amber:         #F5B942
     Error Red:             #F05D6C
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    --bg-main: #0B0D10;
    --bg-secondary: #12151B;
    --bg-card: #171A21;
    --bg-elevated: #20242D;
    --border-color: #292E38;
    --text-primary: #F8FAFC;
    --text-secondary: #9CA6BA;
    --text-muted: #737D90;
    --primary: #246BFD;
    --primary-dark: #1748A8;
    --primary-hover: #1858D8;
    --primary-light: #E7F0FF;
    --accent-purple: #8054F6;
    --accent-success: #20C997;
    --accent-warning: #F5B942;
    --accent-error: #F05D6C;
}

html, body {
    background-color: #0B0D10;
    color: #F8FAFC;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100%;
}

code, kbd, samp, pre, .font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #0B0D10;
}

::-webkit-scrollbar-thumb {
    background: #292E38;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #246BFD;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Smooth Interactive Elements */
input, select, textarea, button, a {
    transition: all 0.15s ease-in-out;
}

/* Touch Target Minimum Sizes */
button, a.btn, input, select {
    min-height: 44px;
}

/* Hide Spin Buttons on Number Inputs */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type=number] {
    -moz-appearance: textfield;
}

/* Mobile Touch Optimization */
@media (max-width: 768px) {
    button, input, select, textarea {
        font-size: 16px !important; /* Prevents auto-zoom on iOS */
    }
}

/* Credit Card Aspect Ratio Helper (ISO/IEC 7810 ID-1 standard: 85.60 mm × 53.98 mm = ~1.586) */
.credit-card-aspect {
    aspect-ratio: 1.586 / 1;
}

/* Print Styles for Transaction Receipts */
@media print {
    body {
        background: white !important;
        color: black !important;
    }
    aside, header, nav, button, .no-print {
        display: none !important;
    }
    #printable-receipt {
        border: none !important;
        box-shadow: none !important;
        color: black !important;
    }
    #printable-receipt * {
        color: black !important;
        background: transparent !important;
    }
}

/* Hide scrollbar for clean horizontal carousel (iOS / Android feel) */
.no-scrollbar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ==========================================================================
   MOBILE-FIRST RESPONSIVE FIXES & REALISTIC MONVERACU CARD SYSTEM
   ========================================================================== */

/* Prevent button & container overflow across all viewport widths */
.btn-fluid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    text-align: center;
}

/* Ensure all flex children do not blow out containers */
.flex-shrink-safe {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Realistic Monveracu Banking Card styling */
.monveracu-card-container {
    perspective: 1000px;
    width: 100%;
}

.monveracu-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1.586 / 1;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    user-select: none;
}

@media (hover: hover) {
    .monveracu-card:hover {
        transform: translateY(-4px) scale(1.01);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    }
}

/* Subtle holographic/sheen effect */
.monveracu-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.05) 60%, rgba(255,255,255,0.15) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Realistic EMV Chip Graphic */
.emv-chip {
    width: 44px;
    height: 34px;
    border-radius: 6px;
    background: linear-gradient(135deg, #ECC94B 0%, #D69E2E 40%, #B7791F 70%, #D69E2E 100%);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.6), 0 2px 4px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}

.emv-chip::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 3px;
    background-image: 
        linear-gradient(to right, transparent 48%, rgba(0,0,0,0.35) 48%, rgba(0,0,0,0.35) 52%, transparent 52%),
        linear-gradient(to bottom, transparent 48%, rgba(0,0,0,0.35) 48%, rgba(0,0,0,0.35) 52%, transparent 52%);
}

@media (max-width: 480px) {
    .emv-chip {
        width: 34px;
        height: 26px;
    }
}

/* Card Themes */
.card-theme-obsidian {
    background: radial-gradient(circle at 85% 15%, #2A303C 0%, #151921 50%, #0A0D12 100%);
    color: #F8FAFC;
}

.card-theme-platinum {
    background: radial-gradient(circle at 80% 20%, #1E3A8A 0%, #172554 45%, #0B132B 100%);
    color: #F8FAFC;
}

.card-theme-titanium-gold {
    background: radial-gradient(circle at 85% 15%, #92400E 0%, #78350F 45%, #451A03 100%);
    color: #FFFBEB;
}

.card-theme-crypto-black {
    background: radial-gradient(circle at 75% 20%, #1F2937 0%, #111827 50%, #030712 100%);
    color: #F9FAFB;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Floating Navigation Bar Container */
.floating-product-bar {
    position: relative;
    z-index: 20;
    margin-top: -36px;
}

@media (max-width: 768px) {
    .floating-product-bar {
        margin-top: -20px;
    }
}