/* Base reset — Tailwind utilities come from compiled tailwind.css */
html,
body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    background-color: #f9fafb;
    color: #111827;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: inherit;
}

/*
 * Contrast safety net — all pages (loaded before tailwind.css).
 * Fixes white-on-white buttons and faint labels on gradient sections.
 */
.text-white a.bg-white,
.text-white button.bg-white {
    color: #5b21b6;
}

.text-white a.bg-white.text-purple-800,
.text-white button.bg-white.text-purple-800,
.text-white a.bg-white.text-purple-700,
.text-white button.bg-white.text-purple-700,
.text-white a.bg-white.text-purple-600,
.text-white button.bg-white.text-purple-600 {
    color: #5b21b6 !important;
}

.text-white a.bg-white.text-green-700,
.text-white button.bg-white.text-green-700,
.from-green-500 a.bg-white,
.from-green-500 button.bg-white,
[class*="from-green-"] a.bg-white,
[class*="from-green-"] button.bg-white {
    color: #15803d !important;
}

.text-white a.bg-white.text-teal-700,
.text-white button.bg-white.text-teal-700,
.from-teal-500 a.bg-white,
.from-teal-500 button.bg-white,
[class*="from-teal-"] a.bg-white,
[class*="from-teal-"] button.bg-white {
    color: #0f766e !important;
}

.text-white a.bg-white.text-red-700,
.text-white button.bg-white.text-red-700,
.text-white .bg-white\/90.text-red-700 {
    color: #b91c1c !important;
}

.from-green-500 .text-green-200,
.from-teal-500 .text-teal-200,
.from-purple-500 .text-purple-200,
[class*="from-green-"] .text-green-200,
[class*="from-teal-"] .text-teal-200,
[class*="from-purple-"] .text-purple-200 {
    color: rgba(255, 255, 255, 0.92);
}

/*
 * Wallet cards — full layout + colors for older Safari (iPhone 6s / iOS 12–14).
 * Tailwind v4 uses oklch() and "in oklab" gradients that those browsers ignore,
 * which can leave a white card with invisible pale text. These rules win with
 * !important so the card still looks correct when modern utilities fail.
 */
.wallet-card-ghs,
.wallet-card-teal {
    border-radius: 0.75rem;
    overflow: hidden;
    color: #fff;
}

.wallet-card-ghs.bg-gradient-to-br,
.wallet-card-ghs {
    background: #22c55e linear-gradient(to bottom right, #22c55e, #15803d) !important;
    background-image: linear-gradient(to bottom right, #22c55e, #15803d) !important;
}

.wallet-card-teal.bg-gradient-to-br,
.wallet-card-teal {
    background: #14b8a6 linear-gradient(to bottom right, #14b8a6, #0f766e) !important;
    background-image: linear-gradient(to bottom right, #14b8a6, #0f766e) !important;
}

.wallet-card-ghs h2,
.wallet-card-teal h2,
.wallet-card-ghs .wallet-balance-value,
.wallet-card-teal .wallet-balance-value {
    color: #fff !important;
}

.wallet-card-ghs .text-green-100,
.wallet-card-ghs .text-green-200,
.wallet-card-teal .text-teal-100,
.wallet-card-teal .text-teal-200 {
    color: rgba(255, 255, 255, 0.88) !important;
}

.wallet-card-ghs .wallet-card-body,
.wallet-card-teal .wallet-card-body {
    padding: 1.5rem 1.5rem 1rem;
}

.wallet-card-ghs .wallet-card-balances,
.wallet-card-teal .wallet-card-balances {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.wallet-card-ghs .wallet-card-balance-col,
.wallet-card-teal .wallet-card-balance-col {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.wallet-card-ghs .wallet-card-divider,
.wallet-card-teal .wallet-card-divider {
    width: 1px;
    height: 3.5rem;
    background-color: rgba(255, 255, 255, 0.35);
    margin: 0 0.75rem;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.wallet-card-ghs .wallet-card-actions,
.wallet-card-teal .wallet-card-actions {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 0.75rem 1.5rem;
}

.wallet-card-ghs .wallet-card-actions-row,
.wallet-card-teal .wallet-card-actions-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -0.25rem;
}

.wallet-card-ghs .wallet-card-actions-row > *,
.wallet-card-teal .wallet-card-actions-row > * {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 8.5rem;
    flex: 1 1 8.5rem;
    min-width: 0;
    margin: 0.25rem;
}

.wallet-card-ghs .wallet-card-actions > button,
.wallet-card-teal .wallet-card-actions > button {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
}

.wallet-card-ghs button.bg-white,
.wallet-card-ghs .bg-white.text-green-700 {
    background-color: #fff !important;
    color: #15803d !important;
}

.wallet-card-ghs button.bg-green-800 {
    background-color: #166534 !important;
    color: #fff !important;
}

.wallet-card-ghs .bg-white\/90.text-red-700,
.wallet-card-ghs button.text-red-700 {
    background-color: rgba(255, 255, 255, 0.92) !important;
    color: #b91c1c !important;
}

.wallet-card-teal button.bg-white,
.wallet-card-teal .bg-white.text-teal-700 {
    background-color: #fff !important;
    color: #0f766e !important;
}

.wallet-card-teal button.bg-teal-800 {
    background-color: #115e59 !important;
    color: #fff !important;
}

.text-white .text-blue-100,
.text-white .text-purple-100,
.text-white .text-teal-100,
.text-white .text-green-100 {
    color: rgba(255, 255, 255, 0.9);
}

/*
 * Landing page hero — rich gradient + soft highlights (works without Tailwind v4).
 * Replaces flat purple when oklch / in-oklab utilities fail to paint.
 */
.hero-gradient {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: #667eea linear-gradient(135deg, #667eea 0%, #764ba2 55%, #5b21b6 100%) !important;
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 55%, #5b21b6 100%) !important;
}

.hero-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 50% at 15% 20%, rgba(255, 255, 255, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 60% 45% at 85% 75%, rgba(255, 255, 255, 0.12) 0%, transparent 50%);
}

.hero-gradient::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.07;
    background-image: radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 22px 22px;
}

.hero-gradient > * {
    position: relative;
    z-index: 1;
}

.hero-gradient h1,
.hero-gradient h2,
.hero-gradient p {
    color: #fff;
}

.hero-gradient .hero-subtitle {
    color: rgba(255, 255, 255, 0.92) !important;
}

.hero-gradient .hero-btn-white {
    background-color: #fff !important;
    color: #5b21b6 !important;
}

.hero-gradient .hero-btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.14) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    color: #fff !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.hero-gradient .hero-btn-login:hover {
    background-color: rgba(255, 255, 255, 0.24) !important;
    border-color: #fff !important;
}

.hero-gradient .hero-rate-panel {
    background-color: rgba(49, 46, 129, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #fff;
}

.hero-gradient .hero-rate-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
}

.hero-gradient .hero-rate-card .rate-label {
    color: rgba(255, 255, 255, 0.88);
}

.hero-gradient .hero-rate-card .rate-value {
    color: #fff;
}

/* Login / register pages — warm background (Tailwind orange-50 gradient fallback) */
.auth-page-bg {
    min-height: 100vh;
    background: #fff7ed linear-gradient(to bottom right, #fff7ed, #fffbeb 45%, #fef3c7) !important;
    background-image: linear-gradient(to bottom right, #fff7ed, #fffbeb 45%, #fef3c7) !important;
}

/*
 * iPhone 6s / 7 / iOS 12–14 (Safari): Tailwind v4 oklch/oklab gradients often do not paint.
 * Buttons keep text-white but background stays white → invisible label.
 * Solid hex fallbacks below (loaded before tailwind.css, !important wins broken utilities).
 */

#deposit_online_range_notice:not(.hidden),
#deposit_manual_minimum_notice:not(.hidden) {
    color: #4b5563 !important;
}

#paystackPayBtn,
button.legacy-action-green,
button[class*="from-green-5"].text-white,
button[class*="from-green-6"].text-white,
button[class*="from-green-7"].text-white {
    background-color: #16a34a !important;
    background-image: -webkit-linear-gradient(left, #16a34a, #15803d) !important;
    background-image: linear-gradient(to right, #16a34a, #15803d) !important;
    color: #ffffff !important;
    -webkit-appearance: none;
    appearance: none;
    border: none;
}

#flutterwavePayBtn,
button.legacy-action-orange,
button[class*="from-orange-5"].text-white,
button[class*="from-orange-6"].text-white {
    background-color: #f97316 !important;
    background-image: -webkit-linear-gradient(left, #f97316, #ea580c) !important;
    background-image: linear-gradient(to right, #f97316, #ea580c) !important;
    color: #ffffff !important;
    -webkit-appearance: none;
    appearance: none;
    border: none;
}

#blupayPayBtn,
button.legacy-action-blue,
button[class*="from-blue-5"].text-white,
button[class*="from-blue-6"].text-white,
button[class*="from-blue-7"].text-white,
#confirmStatusBtn[class*="from-blue-"] {
    background-color: #2563eb !important;
    background-image: -webkit-linear-gradient(left, #2563eb, #1d4ed8) !important;
    background-image: linear-gradient(to right, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    -webkit-appearance: none;
    appearance: none;
    border: none;
}

button.legacy-action-red,
button[class*="from-red-5"].text-white,
button[class*="from-red-6"].text-white,
#confirmTransferModal .legacy-action-red {
    background-color: #dc2626 !important;
    background-image: -webkit-linear-gradient(left, #ef4444, #dc2626) !important;
    background-image: linear-gradient(to right, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    -webkit-appearance: none;
    appearance: none;
    border: none;
}

button.legacy-action-teal,
button[class*="from-teal-5"].text-white,
button[class*="from-teal-6"].text-white {
    background-color: #0d9488 !important;
    background-image: -webkit-linear-gradient(left, #14b8a6, #0d9488) !important;
    background-image: linear-gradient(to right, #14b8a6, #0d9488) !important;
    color: #ffffff !important;
    -webkit-appearance: none;
    appearance: none;
    border: none;
}

#confirmStatusBtn[class*="from-green-"] {
    background-color: #16a34a !important;
    background-image: -webkit-linear-gradient(left, #22c55e, #16a34a) !important;
    background-image: linear-gradient(to right, #22c55e, #16a34a) !important;
    color: #ffffff !important;
    -webkit-appearance: none;
    appearance: none;
    border: none;
}

button.bg-green-600,
button.bg-green-600.text-white {
    background-color: #16a34a !important;
    color: #ffffff !important;
}

button.bg-red-600,
button.bg-red-600.text-white {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

button.legacy-action-green i,
button.legacy-action-orange i,
button.legacy-action-blue i,
button.legacy-action-red i,
button.legacy-action-teal i,
#paystackPayBtn i,
#flutterwavePayBtn i,
#blupayPayBtn i,
#confirmStatusBtn i,
button[class*="from-green-"].text-white i,
button[class*="from-orange-"].text-white i,
button[class*="from-blue-"].text-white i,
button[class*="from-red-"].text-white i,
button[class*="from-teal-"].text-white i {
    color: #ffffff !important;
}

/* Modal primary actions — flex children on old Safari */
#confirmTransferModal .flex.space-x-3,
#confirmTransferModal .flex,
#updateStatusModal .flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

#confirmTransferModal button,
#confirmConvertModal button,
#confirmUsdtConvertModal button,
#updateStatusModal #confirmStatusBtn,
#paystackPayBtn,
#flutterwavePayBtn,
#blupayPayBtn {
    min-height: 2.75rem;
    line-height: 1.25;
}