/* ── AksaPay Clone — Retro Bold Style ───────────────────────────────── */

/* ── Background patterns ────────────────────────────────────────────── */
.bg-pattern-polkadot {
    background-image: radial-gradient(#d1d5db 2px, transparent 2px) !important;
    background-size: 24px 24px !important;
    background-color: #f8fafc !important;
}
.bg-pattern-grid {
    background-image: linear-gradient(#d1d5db 1px, transparent 1px), linear-gradient(90deg, #d1d5db 1px, transparent 1px) !important;
    background-size: 30px 30px !important;
    background-color: #f8fafc !important;
}
.bg-pattern-stripes {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, #e5e7eb 10px, #e5e7eb 11px) !important;
    background-size: 100% 100% !important;
    background-color: #f8fafc !important;
}
.bg-pattern-dots {
    background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px) !important;
    background-size: 16px 16px !important;
    background-color: #f8fafc !important;
}
.bg-pattern-waves {
    background-image: repeating-linear-gradient(-3deg, transparent 0px, transparent 20px, #e2e8f0 20px, #e2e8f0 21px) !important;
    background-size: 100% 42px !important;
    background-color: #f8fafc !important;
}
.bg-pattern-cross {
    background-image: 
        linear-gradient(45deg, #e5e7eb 1px, transparent 1px),
        linear-gradient(-45deg, #e5e7eb 1px, transparent 1px) !important;
    background-size: 30px 30px !important;
    background-color: #f8fafc !important;
}

/* ── CSS utility classes ────────────────────────────────────────────── */
.sidebar-bg { background-color: #ffffff; }
.sidebar-border { border-color: #2e1065; }
.text-theme { color: #2e1065; }
.card-bg { background-color: #ffffff; }

/* ── Custom scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #fae8ff; }
::-webkit-scrollbar-thumb { background: #c084fc; border-radius: 4px; }

/* ── Retro components ──────────────────────────────────────────────── */
.retro-card {
    border: 3px solid #2e1065;
    box-shadow: 5px 5px 0px #2e1065;
    transition: all 0.2s ease;
}
.retro-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0px #2e1065;
}

.retro-btn {
    border: 2px solid #2e1065;
    box-shadow: 3px 3px 0px #2e1065;
    transition: all 0.15s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.retro-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px #2e1065;
}

/* ── Text 3D effects ────────────────────────────────────────────────── */
.text-3d-pink {
    color: #f9a8d4;
    text-shadow: 4px 4px 0px #831843,
        -1px -1px 0px #831843, 1px -1px 0px #831843,
        -1px 1px 0px #831843, 1px 1px 0px #831843,
        5px 5px 0px rgba(0,0,0,0.15);
}
.text-3d-purple {
    color: #c4b5fd;
    text-shadow: 4px 4px 0px #4c1d95,
        -1px -1px 0px #4c1d95, 1px -1px 0px #4c1d95,
        -1px 1px 0px #4c1d95, 1px 1px 0px #4c1d95,
        5px 5px 0px rgba(0,0,0,0.15);
}
.text-3d-blue {
    color: #7dd3fc;
    text-shadow: 4px 4px 0px #1e3a8a,
        -1px -1px 0px #1e3a8a, 1px -1px 0px #1e3a8a,
        -1px 1px 0px #1e3a8a, 1px 1px 0px #1e3a8a,
        5px 5px 0px rgba(0,0,0,0.15);
}

/* ── Animations ─────────────────────────────────────────────────────── */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(2deg); }
}
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-float-delay { animation: float 4s ease-in-out 2s infinite; }

/* ── Table responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .retro-card { box-shadow: 3px 3px 0px #2e1065; }
    .retro-card:hover { box-shadow: 5px 5px 0px #2e1065; }
}

/* ── Input focus overrides ──────────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #2e1065 !important;
    box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.3);
}

/* ── Code blocks ────────────────────────────────────────────────────── */
code {
    font-family: 'Courier New', monospace;
}

/* ── Link reset ─────────────────────────────────────────────────────── */
a { color: inherit; }
a:hover { opacity: 0.9; }