/*!
 * WPWALLETBRAND_V5 — wallet card
 *
 * Two changes over V4:
 *   1. Text colour is set with long selector chains. The theme colours these
 *      elements with more specific rules than the earlier ones used, so white
 *      kept losing. Every rule below leads with `html body` and names the full
 *      ancestry, which beats anything the theme declares.
 *   2. The face is no longer flat purple. It runs deep indigo into violet on
 *      the diagonal, with a soft sheen and a low highlight, so it reads as a
 *      card rather than a coloured rectangle.
 *
 * DELETE THIS FILE TO ROLL BACK. Nothing else needs undoing.
 */

/* ── the card face ────────────────────────────────────────────────────── */
html body .walet-inner,
html body .single-card-box .walet-slider .walet-inner {
    background:
        radial-gradient(120% 90% at 12% 8%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 46%),
        linear-gradient(135deg, #3B1E8F 0%, #5B21B6 34%, #7C3AED 68%, #9061F9 100%) !important;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 16px !important;
    box-shadow:
        0 12px 30px rgba(49, 24, 122, .34),
        inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

/* the stock blue artwork stays in the flow but out of sight */
html body .walet-inner .bg-img { opacity: 0 !important; }

/* a wide, very soft sheen sweeping across the face */
html body .walet-inner::before {
    content: '';
    position: absolute;
    left: -30%;
    top: -60%;
    width: 90%;
    height: 220%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.09) 50%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 0;
}

/* a low bloom in the lower right, so the corner is not dead space */
html body .walet-inner::after {
    content: '';
    position: absolute;
    right: -54px;
    bottom: -78px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
    z-index: 0;
}

/* keep content above both overlays */
html body .walet-inner .sim-card,
html body .walet-inner .title,
html body .walet-inner .amount { position: relative; z-index: 2; }

/* ── text, with enough specificity to win ─────────────────────────────── */
html body .single-card-box .walet-slider .walet-inner,
html body .single-card-box .walet-slider .walet-inner h5,
html body .single-card-box .walet-slider .walet-inner h6,
html body .single-card-box .walet-slider .walet-inner span,
html body .single-card-box .walet-slider .walet-inner i,
html body .single-card-box .walet-slider .walet-inner .sim-card,
html body .single-card-box .walet-slider .walet-inner .sim-card span,
html body .single-card-box .walet-slider .walet-inner .title,
html body .single-card-box .walet-slider .walet-inner .amount,
html body .walet-inner h5.amount,
html body .walet-inner h6.title,
html body .walet-inner h6.sim-card,
html body .walet-inner h6.sim-card span,
html body .walet-inner .text-white {
    color: #FFFFFF !important;
}

/* currency code as a small glass pill, top right */
html body .walet-inner .sim-card span {
    background: rgba(255, 255, 255, .17);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    backdrop-filter: blur(3px);
}

/* wallet id: quieter, monospaced, so the balance leads */
html body .single-card-box .walet-slider .walet-inner .title,
html body .walet-inner h6.title {
    color: rgba(255, 255, 255, .78) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: .6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* the balance carries the weight */
html body .single-card-box .walet-slider .walet-inner .amount,
html body .walet-inner h5.amount {
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: -.8px;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 8px rgba(23, 10, 60, .34);
}

/* the chip graphic */
html body .walet-inner .sim-card img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .28));
    opacity: .96;
}

/* copy icon */
html body .walet-inner .copy-icon,
html body .walet-inner .copyNow,
html body .walet-inner .fa-copy {
    color: rgba(255, 255, 255, .7) !important;
    transition: color .15s ease;
}
html body .walet-inner .copy-icon:hover,
html body .walet-inner .copyNow:hover,
html body .walet-inner .fa-copy:hover { color: #FFFFFF !important; }

/* ── buttons under the card ───────────────────────────────────────────── */
html body .single-card-box .btn-base {
    background: linear-gradient(135deg, #7C3AED, #5B21B6) !important;
    border: 0 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(91, 33, 182, .3);
}
html body .single-card-box .btn-base:hover { filter: brightness(1.07); }

html body .single-card-box .btn-border-base {
    border: 1px solid #DDD6FE !important;
    color: #5B21B6 !important;
    background: #FFFFFF !important;
}
html body .single-card-box .btn-border-base:hover {
    background: #F5F3FF !important;
    border-color: #C4B5FD !important;
    color: #4C1D95 !important;
}

/* carousel arrows above the card */
html body .single-card-box .owl-nav button,
html body .single-card-box .owl-nav button span {
    background: linear-gradient(135deg, #7C3AED, #5B21B6) !important;
    color: #FFFFFF !important;
    border: 0 !important;
}

/* ── the Wallets page card, kept consistent ───────────────────────────── */
html body .wallet-card {
    background:
        radial-gradient(120% 90% at 12% 8%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 46%),
        linear-gradient(135deg, #3B1E8F 0%, #5B21B6 34%, #7C3AED 68%, #9061F9 100%) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    box-shadow: 0 12px 30px rgba(49, 24, 122, .3) !important;
}
html body .wallet-card,
html body .wallet-card * { color: #FFFFFF !important; }
html body .wallet-card .wallet-footer,
html body .wallet-card .wallet-transaction-info { color: rgba(255,255,255,.8) !important; }


/* ═══ WPWALLETBRAND_V6 — refinements ═════════════════════════════════════
   Four small things, no restructuring:
     1. a faint brand mark in the corner, so the card is recognisably yours
     2. the chip scaled down — it was competing with the balance for attention
     3. the balance and wallet id given a tighter vertical rhythm
     4. a gentle lift on hover, so the card feels like an object
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. brand mark, sitting under the sheen at very low opacity */
html body .walet-inner,
html body .single-card-box .walet-slider .walet-inner {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M12 18 L23 47 L32 28 L41 47 L52 18' fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
        radial-gradient(120% 90% at 12% 8%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 46%),
        linear-gradient(135deg, #3B1E8F 0%, #5B21B6 34%, #7C3AED 68%, #9061F9 100%) !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-position: right -18px bottom -24px, 0 0, 0 0 !important;
    background-size: 128px 128px, auto, auto !important;
    transition: transform .18s ease, box-shadow .18s ease;
}

/* 2. the chip was oversized against the rest of the card */
html body .walet-inner .sim-card img {
    width: 40px !important;
    height: auto !important;
}

/* 3. tighter rhythm: the id sits closer to the balance it labels */
html body .single-card-box .walet-slider .walet-inner .title,
html body .walet-inner h6.title {
    margin-bottom: 2px !important;
    opacity: .82;
}
html body .single-card-box .walet-slider .walet-inner .amount,
html body .walet-inner h5.amount {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
html body .walet-inner .sim-card {
    margin-bottom: 6px !important;
}

/* 4. a gentle lift, so it reads as a physical card */
html body .walet-inner:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 38px rgba(49, 24, 122, .38),
        inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}

/* the copy icon: quieter until reached for */
html body .walet-inner .copy-icon,
html body .walet-inner .fa-copy {
    opacity: .55;
    font-size: 12px !important;
    transition: opacity .15s ease;
}
html body .walet-inner:hover .copy-icon,
html body .walet-inner:hover .fa-copy { opacity: .95; }