/* ==========================================================
   CASHIPRO SHARED THEME — NEUMORPHIC + MOVING LIGHT BORDER
   Soft embossed cards/inputs on a flat neutral background,
   with an always-animating rainbow-gradient border around
   every button. Loaded on every page after page-specific
   styles so these rules take priority for buttons/backgrounds.

   Technique note: the animated border is drawn with a single
   ::before pseudo-element sitting behind each button (no extra
   wrapper <div> needed), so it drops straight onto every
   existing button/link across the site without editing each
   page. See "MOVING GRADIENT BORDER" section below.
   ========================================================== */

:root {
    --cp-ink: #0a0a1f;
    --cp-ink-soft: #4a4762;
    --cp-ink-faint: #6f6c85;
    --cp-purple: #3b82f6;
    --cp-magenta: #2563eb;
    --cp-gold: #06b6d4;
    --cp-blue: #3b82f6;
    --cp-cyan: #00f2fe;
    --cp-green: #1f9d68;
    --cp-red: #d43a52;

    /* Neumorphic base — matched exactly to the reference login
       page's palette (background, and light/dark shadow pair),
       so every page reads as one consistent design. */
    --neu-bg: #e0e5ec;
    --neu-shadow-dark: #bebebe;
    --neu-shadow-light: #ffffff;
}

html, body {
    background: var(--neu-bg) !important;
    color: var(--cp-ink) !important;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background-image: none !important;
}

/* ==========================================================
   CARDS / PANELS / SIDEBAR — embossed "raised" surface with
   the same always-animating gradient border used on buttons.
   ========================================================== */
/* NOTE: .admin-sidebar and .cp-sidebar are deliberately NOT
   included in this list. Both are structural, layout-critical
   elements (position: sticky / position: fixed respectively,
   with sibling content relying on their exact width/offset) —
   unlike purely-decorative cards, styling them here carries real
   risk of breaking navigation if anything about this treatment
   interacts unexpectedly with that layout. They keep their
   original, unmodified appearance so the site's core navigation
   is never put at risk for a decorative effect. */
.panel, .card, .req-card, .balance-box, .stat-box, .wallet-card,
.doc-thumb, .step-card, .feature-card, .method-chip, .info-row,
.support-card {
    border: 3px solid transparent !important;
    border-radius: 20px !important;
    background:
        linear-gradient(var(--neu-bg), var(--neu-bg)) padding-box,
        linear-gradient(90deg, #2563eb, #3b82f6, #06b6d4, #00f2fe, #2563eb) border-box !important;
    background-size: 100% 100%, 400% 400% !important;
    animation: cpMoveBorder 3.5s linear infinite;
    box-shadow:
        9px 9px 18px var(--neu-shadow-dark),
        -9px -9px 18px var(--neu-shadow-light) !important;
    color: var(--cp-ink) !important;
}

/* Tables keep a calmer, static embossed look — an animated
   rainbow border around a dense data-grid is distracting rather
   than helpful, so tables get the raised-surface feel without
   the moving-border treatment. */
table {
    background: var(--neu-bg) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow:
        6px 6px 12px var(--neu-shadow-dark),
        -6px -6px 12px var(--neu-shadow-light) !important;
    color: var(--cp-ink) !important;
}

body, p, span, div, label, td, th, li {
    color: inherit;
}

/* ==========================================================
   BUTTONS — neumorphic face + always-animating gradient ring
   ========================================================== */
button,
input[type="submit"],
[class*="button"],
[class*="btn"] {
    color: var(--cp-ink) !important;
    border: 3px solid transparent !important;
    border-radius: 13px !important;
    padding: 12px 22px;
    background:
        linear-gradient(var(--neu-bg), var(--neu-bg)) padding-box,
        linear-gradient(90deg, #2563eb, #3b82f6, #06b6d4, #00f2fe, #2563eb) border-box !important;
    background-size: 100% 100%, 400% 400% !important;
    animation: cpMoveBorder 3.5s linear infinite;
    box-shadow:
        5px 5px 10px var(--neu-shadow-dark),
        -5px -5px 10px var(--neu-shadow-light) !important;
    transition: box-shadow .2s ease, transform .12s ease !important;
}

@keyframes cpMoveBorder {
    0%   { background-position: 0 0, 0% 50%; }
    100% { background-position: 0 0, 400% 50%; }
}

button:hover,
input[type="submit"]:hover,
[class*="button"]:hover,
[class*="btn"]:hover {
    transform: translateY(-2px);
    box-shadow:
        7px 7px 14px var(--neu-shadow-dark),
        -7px -7px 14px var(--neu-shadow-light) !important;
}

button:active,
input[type="submit"]:active,
[class*="button"]:active,
[class*="btn"]:active {
    transform: scale(.97) translateY(0);
    box-shadow:
        inset 4px 4px 8px var(--neu-shadow-dark),
        inset -4px -4px 8px var(--neu-shadow-light) !important;
}

/* Context-specific border colours — same technique, different
   gradient hue so destructive/positive actions still read at a
   glance despite the shared neumorphic face. Substring selectors
   used because button class names are inconsistent across the
   site ("btn-approve" in some places, plain "approve" in others). */
.btn-reject, .btn-lock, .close-btn,
[class*="reject"], [class*="-lock"], [class~="lock"] {
    background:
        linear-gradient(var(--neu-bg), var(--neu-bg)) padding-box,
        linear-gradient(90deg, #f6465d, #ff8a65, var(--cp-gold), #f6465d) border-box !important;
    background-size: 100% 100%, 400% 400% !important;
}

.btn-approve, .btn-unlock,
[class*="approve"], [class*="unlock"] {
    background:
        linear-gradient(var(--neu-bg), var(--neu-bg)) padding-box,
        linear-gradient(90deg, #1f9d68, #4fd18b, var(--cp-cyan), #1f9d68) border-box !important;
    background-size: 100% 100%, 400% 400% !important;
}

/* ==========================================================
   INPUTS — embossed "pressed in" surface (inverse of buttons)
   ========================================================== */
input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    background: var(--neu-bg) !important;
    color: var(--cp-ink) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow:
        inset 4px 4px 8px var(--neu-shadow-dark),
        inset -4px -4px 8px var(--neu-shadow-light) !important;
    padding: 12px 14px;
}
input::placeholder, textarea::placeholder {
    color: var(--cp-ink-faint) !important;
}
input:focus, select:focus, textarea:focus {
    outline: none !important;
    box-shadow:
        inset 2px 2px 4px var(--neu-shadow-dark),
        inset -2px -2px 4px var(--neu-shadow-light),
        0 0 0 2px var(--cp-blue) !important;
}

a { color: var(--cp-blue); }

/* Respect reduced-motion preference — freeze the border on its
   starting frame instead of forcing animation on everyone. */
@media (prefers-reduced-motion: reduce) {
    button, input[type="submit"], [class*="button"], [class*="btn"] {
        animation: none;
    }
}

/* ==========================================================
   PAGES WITH THEIR OWN COMPLETE WRAPPER-DIV IMPLEMENTATION
   (e.g. login.php's .card-wrapper / .submit-wrapper pattern)
   already draw their own moving gradient border on the OUTER
   wrapper div. Without this section, this shared theme would
   ALSO apply its own gradient border directly to the .card /
   .submit element nested inside that wrapper — producing a
   doubled, messier border instead of the single clean one the
   wrapper is meant to show. These rules make the inner element
   plain again (flat neumorphic face, no border of its own) so
   only the outer wrapper's border is visible, exactly matching
   the reference page's intended look. The colours below use the
   same shared variables as the rest of this file, so they stay
   in sync automatically if the palette changes.
   ========================================================== */
.card-wrapper .card {
    border: none !important;
    background: var(--neu-bg) !important;
    animation: none !important;
    box-shadow:
        20px 20px 60px var(--neu-shadow-dark),
        -20px -20px 60px var(--neu-shadow-light) !important;
}

.submit-wrapper button,
.submit-wrapper .submit {
    border: none !important;
    background: var(--neu-bg) !important;
    color: var(--cp-magenta) !important;
    animation: none !important;
    box-shadow:
        5px 5px 10px var(--neu-shadow-dark),
        -5px -5px 10px var(--neu-shadow-light) !important;
}

/* ==========================================================
   SIDEBAR NAV ITEMS — "liquid glass" pill treatment.
   IMPORTANT: this only styles the individual clickable nav
   links (.cp-nav-link / .admin-nav-link) INSIDE the sidebar —
   never the sidebar container itself (.cp-sidebar /
   .admin-sidebar). Those containers rely on position: fixed /
   sticky for the whole navigation to work, so this file
   deliberately never touches them (see the note further up).
   Styling only the inner buttons carries none of that risk.
   ========================================================== */
/* ==========================================================
   SIDEBAR NAV ITEMS — "liquid glass" pill treatment.
   IMPORTANT: this only styles the individual clickable nav
   links (.cp-nav-link / .admin-nav-link) INSIDE the sidebar —
   never the sidebar container's position (position: fixed /
   sticky is left completely untouched, since that's what makes
   the whole navigation work). The sidebar container only gets a
   background-image added below — background never affects
   layout/positioning, so this carries none of that earlier risk.
   A glass effect needs some colour/variation behind it to blur;
   a flat white background wouldn't show it at all.
   ========================================================== */
.cp-sidebar, .admin-sidebar {
    background-image:
        radial-gradient(circle at 20% 10%, rgba(37, 99, 235, 0.35), transparent 50%),
        radial-gradient(circle at 80% 45%, rgba(0, 242, 254, 0.30), transparent 55%),
        radial-gradient(circle at 30% 85%, rgba(59, 130, 246, 0.30), transparent 50%) !important;
}

.cp-nav-link, .admin-nav-link {
    margin: 4px 10px !important;
    width: calc(100% - 20px) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow:
        0 4px 14px rgba(10, 10, 31, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease !important;
}

.cp-nav-link:hover, .admin-nav-link:hover {
    background: rgba(255, 255, 255, 0.55) !important;
    transform: translateY(-1px);
    box-shadow:
        0 6px 18px rgba(10, 10, 31, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.cp-nav-link.active, .admin-nav-link.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.22), rgba(0, 242, 254, 0.18)) !important;
    border: 1px solid rgba(37, 99, 235, 0.4) !important;
    box-shadow:
        0 4px 14px rgba(37, 99, 235, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}