/* ─── CSS Variables ──────────────────────────────────────────────────────────── */
:root {
    --sp-bg:       #111827;   /* slightly lighter than pure black */
    --sp-surface:  #1f2937;   /* cards / navbar */
    --sp-surface2: #27374d;   /* hover states / nested elements */
    --sp-border:   #374151;   /* visible borders */
    --sp-accent:   #22c55e;   /* green — success / money */
    --sp-accent2:  #3b82f6;   /* blue — primary actions */
    --sp-text:     #f1f5f9;   /* main text — near white */
    --sp-text2:    #cbd5e1;   /* secondary text */
    --sp-muted:    #94a3b8;   /* captions, labels */
    --sp-danger:   #ef4444;
    --sp-warning:  #f59e0b;
}

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

body {
    background: var(--sp-bg);
    color: var(--sp-text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    line-height: 1.6;
}

a { color: var(--sp-accent2); }
a:hover { color: #60a5fa; }

/* ─── Navbar ─────────────────────────────────────────────────────────────────── */
.sp-navbar {
    background: var(--sp-surface);
    border-bottom: 1px solid var(--sp-border);
}
.sp-navbar .navbar-brand {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--sp-text) !important;
}
.sp-navbar .nav-link {
    color: var(--sp-text2) !important;
    font-size: .92rem;
    transition: color .15s;
    padding: .5rem .9rem !important;
    border-radius: 6px;
}
.sp-navbar .nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,.07);
}
.sp-navbar .nav-link.active {
    color: #fff !important;
    background: var(--sp-accent2);
}

/* ─── Cards ──────────────────────────────────────────────────────────────────── */
.sp-card {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    padding: 1.5rem;
}

/* ─── Typography helpers ─────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { color: var(--sp-text); }
.text-muted { color: var(--sp-muted) !important; }
small, .small { color: var(--sp-text2); }
p { color: var(--sp-text2); }
code {
    background: rgba(255,255,255,.08);
    color: #93c5fd;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .88em;
}
pre {
    background: #0f172a;
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    padding: 1rem;
    color: #86efac;
    font-size: .85rem;
    overflow-x: auto;
}

/* ─── Forms ──────────────────────────────────────────────────────────────────── */
.form-control, .form-select {
    background: #0f172a !important;
    border: 1px solid var(--sp-border) !important;
    color: var(--sp-text) !important;
    border-radius: 8px;
    font-size: .92rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--sp-accent2) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.25) !important;
    background: #0f172a !important;
    color: var(--sp-text) !important;
}
.form-control::placeholder { color: var(--sp-muted) !important; opacity: 1; }
.form-label {
    color: var(--sp-text2);
    font-size: .87rem;
    font-weight: 500;
    margin-bottom: .4rem;
}
.form-text { color: var(--sp-muted) !important; font-size: .8rem; }
.form-select option {
    background: #1f2937;
    color: var(--sp-text);
}

/* Input group */
.input-group-text {
    background: #0f172a;
    border-color: var(--sp-border);
    color: var(--sp-muted);
}

/* ─── Buttons ────────────────────────────────────────────────────────────────── */
.btn-sp-primary {
    background: var(--sp-accent2);
    border: none;
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    padding: .55rem 1.4rem;
    font-size: .9rem;
    cursor: pointer;
    transition: filter .15s, transform .1s;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.btn-sp-primary:hover {
    filter: brightness(1.15);
    color: #fff;
    transform: translateY(-1px);
}
.btn-sp-danger {
    background: var(--sp-danger);
    border: none;
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    padding: .55rem 1.4rem;
    font-size: .9rem;
    cursor: pointer;
    transition: filter .15s;
}
.btn-sp-danger:hover { filter: brightness(1.15); color: #fff; }

/* Bootstrap button overrides */
.btn-outline-secondary {
    border-color: var(--sp-border) !important;
    color: var(--sp-text2) !important;
}
.btn-outline-secondary:hover {
    background: var(--sp-surface2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
.btn-outline-danger {
    border-color: var(--sp-danger) !important;
    color: var(--sp-danger) !important;
}
.btn-outline-danger:hover {
    background: var(--sp-danger) !important;
    color: #fff !important;
}

/* ─── Alerts ─────────────────────────────────────────────────────────────────── */
.alert {
    border-radius: 10px;
    font-size: .9rem;
    border: none;
}
.alert-success {
    background: rgba(34,197,94,.12);
    color: #86efac;
    border: 1px solid rgba(34,197,94,.3) !important;
}
.alert-danger {
    background: rgba(239,68,68,.12);
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,.3) !important;
}
.alert-warning {
    background: rgba(245,158,11,.12);
    color: #fcd34d;
    border: 1px solid rgba(245,158,11,.3) !important;
}
.alert-info {
    background: rgba(59,130,246,.12);
    color: #93c5fd;
    border: 1px solid rgba(59,130,246,.3) !important;
}

/* ─── Balance badge ───────────────────────────────────────────────────────────── */
.balance-badge {
    background: rgba(34,197,94,.1);
    border: 1px solid rgba(34,197,94,.35);
    border-radius: 10px;
    padding: .6rem 1.2rem;
    display: inline-block;
}
.balance-badge .text-muted { color: var(--sp-muted) !important; }
.balance-amount {
    font-size: 1.8rem;
    font-weight: 700;
    color: #4ade80;
    line-height: 1.1;
}

/* ─── Number display ──────────────────────────────────────────────────────────── */
.number-display {
    font-family: 'Courier New', monospace;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--sp-text);
    background: #0f172a;
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    padding: 1rem 1.5rem;
    display: inline-block;
    cursor: pointer;
    user-select: all;
    transition: border-color .15s;
}
.number-display:hover { border-color: var(--sp-accent2); }

/* ─── Message cards ───────────────────────────────────────────────────────────── */
.msg-card {
    background: #0f172a;
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    padding: .9rem 1rem;
    margin-bottom: .6rem;
    animation: msgIn .3s ease;
}
.msg-card.new { border-color: var(--sp-accent); }
@keyframes msgIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.msg-from { font-size: .75rem; color: var(--sp-muted); margin-bottom: .3rem; }
.msg-body { font-size: .97rem; color: var(--sp-text); word-break: break-word; }

/* ─── Countdown ───────────────────────────────────────────────────────────────── */
.countdown-ring { font-size: 2.4rem; font-weight: 700; color: var(--sp-warning); }
.countdown-ring.urgent { color: var(--sp-danger); animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ─── Country / service cards ─────────────────────────────────────────────────── */
.country-card {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: border-color .15s, transform .1s, background .15s;
    text-align: center;
}
.country-card:hover {
    border-color: var(--sp-accent2);
    background: var(--sp-surface2);
    transform: translateY(-2px);
}
.country-flag { font-size: 2rem; }
.country-name { color: var(--sp-text2); font-size: .85rem; font-weight: 500; }
.country-price { color: #4ade80; font-weight: 700; font-size: .9rem; }

/* ─── Table ───────────────────────────────────────────────────────────────────── */
.sp-table { width: 100%; border-collapse: collapse; }
.sp-table th {
    background: #0f172a;
    color: var(--sp-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--sp-border);
    white-space: nowrap;
}
.sp-table td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--sp-border);
    color: var(--sp-text);
    font-size: .9rem;
    vertical-align: middle;
}
.sp-table tr:last-child td { border-bottom: none; }
.sp-table tr:hover td { background: rgba(255,255,255,.03); }

/* ─── Badges ──────────────────────────────────────────────────────────────────── */
.badge-credit    { background: rgba(34,197,94,.15);  color: #86efac; border-radius: 6px; padding: 3px 9px; font-size: .78rem; font-weight: 600; }
.badge-debit     { background: rgba(239,68,68,.15);  color: #fca5a5; border-radius: 6px; padding: 3px 9px; font-size: .78rem; font-weight: 600; }
.badge-pending   { background: rgba(245,158,11,.15); color: #fcd34d; border-radius: 6px; padding: 3px 9px; font-size: .78rem; font-weight: 600; }
.badge-completed { background: rgba(34,197,94,.15);  color: #86efac; border-radius: 6px; padding: 3px 9px; font-size: .78rem; font-weight: 600; }
.badge-failed    { background: rgba(239,68,68,.15);  color: #fca5a5; border-radius: 6px; padding: 3px 9px; font-size: .78rem; font-weight: 600; }
.badge-available { background: rgba(59,130,246,.15); color: #93c5fd; border-radius: 6px; padding: 3px 9px; font-size: .78rem; font-weight: 600; }

/* ─── Spinner ─────────────────────────────────────────────────────────────────── */
.sp-spinner {
    width: 2rem; height: 2rem;
    border: 3px solid var(--sp-border);
    border-top-color: var(--sp-accent2);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Auth page ───────────────────────────────────────────────────────────────── */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sp-bg);
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 16px;
    padding: 2.5rem 2rem;
}
.auth-logo {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--sp-text);
}

/* ─── Footer ──────────────────────────────────────────────────────────────────── */
.sp-footer {
    border-top: 1px solid var(--sp-border);
    background: var(--sp-surface);
    color: var(--sp-muted);
    font-size: .85rem;
}

/* ─── Copy toast ──────────────────────────────────────────────────────────────── */
.copy-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: #22c55e;
    color: #fff;
    padding: .5rem 1.4rem;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}
.copy-toast.show { opacity: 1; }

/* ─── Stat / info boxes ───────────────────────────────────────────────────────── */
.stat-box {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
}
.stat-box .stat-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--sp-muted);
    margin-bottom: .3rem;
}
.stat-box .stat-value {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--sp-text);
    line-height: 1.1;
}

/* ─── Divider ─────────────────────────────────────────────────────────────────── */
hr { border-color: var(--sp-border); opacity: 1; }

/* ─── Scrollbar ───────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--sp-bg); }
::-webkit-scrollbar-thumb { background: var(--sp-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* ─── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .number-display { font-size: 1.3rem; padding: .75rem 1rem; }
    .balance-amount { font-size: 1.4rem; }
    .sp-card { padding: 1rem; }
    .auth-card { padding: 1.5rem 1.2rem; }
}