/* =========================================================
   BRAVO CRM — SEND CRYPTO FORM  (sf__*)
   (SendFormControl)
   ========================================================= */

/* ── TOKENS ─────────────────────────────────── */
:root {
    --sf-ink:        #0f172a;
    --sf-muted:      #64748b;
    --sf-border:     rgba(15,23,42,.10);
    --sf-borderSoft: rgba(15,23,42,.06);
    --sf-focus:      rgba(37,99,235,.45);
    --sf-focusRing:  rgba(37,99,235,.10);
    --sf-accent:     linear-gradient(135deg,#EDC016 0%,#F28739 100%);
    --sf-accentShadow: 0 6px 18px rgba(237,192,22,.22);
    --sf-ease:       cubic-bezier(.22,.61,.36,1);
}

/* ── GROUP ──────────────────────────────────── */
.sf__group { margin-bottom: 16px; }

/* ── LABEL ──────────────────────────────────── */
.sf__label {
    display: block;
    font-size: 12px;
    color: var(--sf-muted);
    margin-bottom: 6px;
    font-weight: 700;
    letter-spacing: .2px;
}

/* ── CONTROL (input / select) ───────────────── */
.sf__control {
    width: 100%;
    /* Stronger border: was rgba(15,23,42,.10) — invisible on white */
    border: 1.5px solid rgba(15,23,42,.18);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    outline: none;
    /* Inset shadow = subtle "sunken field" cue */
    box-shadow: inset 0 1px 3px rgba(15,23,42,.06);
    /* Off-white so the input reads as its own layer on the white card */
    background: #fafbfc;
    color: var(--sf-ink);
    transition:
        box-shadow .25s var(--sf-ease),
        border-color .25s var(--sf-ease),
        background .25s var(--sf-ease);
}
.sf__control:focus {
    background: #fff;
    border-color: rgba(37,99,235,.55);
    box-shadow:
        inset 0 1px 3px rgba(15,23,42,.04),
        0 0 0 4px rgba(37,99,235,.12);
}

/* ── HINT ───────────────────────────────────── */
.sf__hint { margin-top: 6px; font-size: 12px; color: #94a3b8; }

/* ── FIELD ERROR HIGHLIGHT (Nette.showFormErrors) ─── */
.sf__control.has-error,
.sf__control.is-invalid {
    border-color: rgba(220,38,38,.55) !important;
    background: rgba(220,38,38,.03) !important;
    box-shadow: inset 0 1px 3px rgba(220,38,38,.06), 0 0 0 3px rgba(220,38,38,.09) !important;
}

/* ── ROW HEAD (label + badge/button) ────────── */
.sf__rowHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.sf__req { color: #dc2626; font-weight: 900; }

/* ── MAX BUTTON ─────────────────────────────── */
.sf__maxBtn {
    font-size: 11px;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid var(--sf-border);
    background: #fff;
    color: var(--sf-ink);
    cursor: pointer;
    transition: all .2s var(--sf-ease);
}
.sf__maxBtn:hover {
    background: #f1f5f9;
    border-color: var(--sf-ink);
}

/* ── BALANCE HINT ───────────────────────────── */
.sf__balanceHint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--sf-muted);
    font-weight: 600;
}
.sf__balanceHint span {
    color: var(--sf-ink);
    font-weight: 800;
}

/* ── NETWORK SINGLE BADGE ───────────────────── */
.sf__badge {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid rgba(15,23,42,.08);
    color: var(--sf-ink);
    font-weight: 800;
    white-space: nowrap;
}

/* ── RECAP CARD ─────────────────────────────── */
.sf__calc {
    margin-top: 12px;
    background: #FFFCF7;
    border: 1.5px solid #E6B86A;
    border-radius: 16px;
    padding: 0 18px;
    box-shadow: 0 2px 10px rgba(230, 184, 106, 0.10);
    color: var(--sf-ink);

    /* hidden by default */
    opacity: 0;
    transform: translateY(-6px);
    max-height: 0;
    overflow: hidden;

    transition:
        opacity .45s var(--sf-ease),
        transform .45s var(--sf-ease),
        max-height .45s var(--sf-ease),
        padding .45s var(--sf-ease);
}
.sf__calc.is-open {
    opacity: 1;
    transform: translateY(0);
    max-height: 220px;
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Header row */
.sf__calcHeader {
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 44px;
}
.sf__calcHeaderLeft {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.sf__calcHeaderRight {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Send icon badge */
.sf__calcBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(230, 184, 106, 0.15);
    color: #C88B2A;
    flex-shrink: 0;
}
.sf__calcBadge svg { width: 16px; height: 16px; }

/* Title "You send:" */
.sf__calcTitle {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
}

/* Vertical divider */
.sf__calcVDivider {
    width: 1px;
    height: 28px;
    background: rgba(230, 184, 106, 0.40);
    margin: 0 14px;
    flex-shrink: 0;
}

/* Main value (120.00 USDC) */
.sf__calcValue {
    font-size: 17px;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -.3px;
    text-align: right;
}

/* Secondary rows */
.sf__calcRows {
    border-top: 1px solid rgba(230, 184, 106, 0.25);
    margin-top: 10px;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sf__calcRow {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 0;
    font-size: 12.5px;
}
.sf__calcRow + .sf__calcRow {
    border-top: 1px solid rgba(15,23,42,.05);
}
.sf__calcRowIcon {
    display: inline-flex;
    align-items: center;
    color: #C88B2A;
    flex-shrink: 0;
}
.sf__calcRowIcon svg { width: 14px; height: 14px; }
.sf__calcRowLabel {
    flex: 1;
    color: #64748B;
    font-weight: 500;
}
.sf__calcRowValue {
    font-weight: 700;
    color: #1E293B;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── ACTIONS ────────────────────────────────── */
.sf__actions { margin-top: 14px; }

/* ── AUTO-SUBMIT LOADER ─────────────────────── */
.sf.is-submitting {
    pointer-events: none;
}
.sf.is-submitting .sf__control,
.sf.is-submitting .sf__btn {
    opacity: 0.6;
}
.sf__loader {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    padding: 14px 16px;
    color: var(--sf-muted, #64748b);
    font-size: 13px;
    font-weight: 600;
}
.sf__loader.is-visible {
    display: flex;
}
.sf__spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(15, 23, 42, 0.12);
    border-top-color: #0f172a;
    animation: sf-spin .7s linear infinite;
}
.sf__loaderText { line-height: 1; }
@keyframes sf-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .sf__spinner { animation-duration: 1.6s; }
}

/* Prevent white flash on brand-btn :active inside send form */
.sf .brand-btn:active,
.sf input.brand-btn:active,
.sf button.brand-btn:active {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    color: #ffffff !important;
}
:root.theme-dark .sf .brand-btn:active,
:root.theme-dark .sf button.brand-btn:active {
    background: linear-gradient(135deg, #EDC016 0%, #F28739 100%) !important;
    color: #1A1E30 !important;
}

/* ── RECAP CARD — dark mode ─────────────────── */
:root.theme-dark .sf__calc {
    background: #1a1508;
    border-color: rgba(230, 184, 106, 0.35);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    color: #e2e8f0;
}
:root.theme-dark .sf__calcBadge {
    background: rgba(230, 184, 106, 0.12);
    color: #E6B86A;
}
:root.theme-dark .sf__calcTitle { color: #94a3b8; }
:root.theme-dark .sf__calcVDivider { background: rgba(230, 184, 106, 0.25); }
:root.theme-dark .sf__calcValue { color: #f1f5f9; }
:root.theme-dark .sf__calcRows { border-top-color: rgba(230, 184, 106, 0.15); }
:root.theme-dark .sf__calcRow + .sf__calcRow { border-top-color: rgba(255,255,255,.05); }
:root.theme-dark .sf__calcRowIcon { color: #E6B86A; }
:root.theme-dark .sf__calcRowLabel { color: #94a3b8; }
:root.theme-dark .sf__calcRowValue { color: #cbd5e1; }

/* ── ALERT ──────────────────────────────────── */
.sf__alert {
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px solid rgba(220,38,38,.38);
    background: rgba(220,38,38,.06);
}
.sf__alert--danger { color: var(--danger-text, #b91c1c); }
.sf__alertList { margin: 0; padding-left: 16px; }

/* ── WHITELIST BADGE ────────────────────────── */
.sf__wlBadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(34,197,94,.10);
    color: #15803d;
    border: 1px solid rgba(34,197,94,.22);
    white-space: nowrap;
}
:root.theme-dark .sf__wlBadge {
    background: rgba(74,222,128,.10);
    color: #4ade80;
    border-color: rgba(74,222,128,.22);
}

/* ── ADDRESS HINT ───────────────────────────── */
#addressHint {
    margin-top: 6px;
    font-size: 11px;
    color: var(--sf-muted, #64748b);
    font-family: ui-monospace, monospace;
    word-break: break-all;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(15,23,42,.03);
}

/* ── RECEIVE BLOCK (deposit address result) ── */
/* Flat, minimal — sits on the white form surface, no extra cards/borders. */
.sf__receive {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    text-align: center;
}
.sf__receiveTitle {
    font-weight: 700;
    margin-bottom: 14px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
}
.sf__qrWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    background: #ffffff;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.sf__qrImg {
    max-width: 200px;
    width: 100%;
    height: auto;
    display: block;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}
.sf__qrEmpty {
    text-align: center;
    margin-bottom: 14px;
    padding: 14px;
    color: #94a3b8;
    font-size: 13px;
}

/* Address row: monospace text + inline copy icon button */
.sf__addrWrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 10px;
}
.sf__addr {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-all;
    text-align: left;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
    color: #0f172a;
    user-select: all;
}
.sf__copyBtn {
    flex: 0 0 auto;
    position: relative;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    padding: 0;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sf__copyBtn:hover {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}
.sf__copyIcon,
.sf__copyDone {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity .15s ease, transform .15s ease;
}
.sf__copyDone {
    opacity: 0;
    transform: scale(.7);
    color: #16a34a;
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
}
.sf__copyBtn.is-done {
    background: #ecfdf5;
    border-color: #86efac;
    color: #16a34a;
}
.sf__copyBtn.is-done .sf__copyIcon {
    opacity: 0;
    transform: scale(.7);
}
.sf__copyBtn.is-done .sf__copyDone {
    opacity: 1;
    transform: scale(1);
}
.sf__copyBtn.is-failed {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

/* ── DARK THEME OVERRIDES ───────────────────── */
:root.theme-dark .sf__control {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.15) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.18) !important;
    color: #eaecef !important;
}
:root.theme-dark .sf__control:focus {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(240,185,11,.55) !important;
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,.12),
        0 0 0 4px rgba(240,185,11,.12) !important;
}
:root.theme-dark .sf__receive {
    border-top-color: rgba(255, 255, 255, 0.08);
}
:root.theme-dark .sf__receiveTitle {
    color: rgba(234, 236, 239, 0.55);
}
/* QR pictures are black-on-white. In dark theme we invert them and use
   `mix-blend-mode: screen` so the (now black) background becomes
   transparent — only the light QR modules remain on top of the form
   surface. No white nor black rectangle, no extra borders. */
:root.theme-dark .sf__qrWrap {
    background: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
:root.theme-dark .sf__qrImg {
    filter: invert(1) hue-rotate(180deg);
    mix-blend-mode: screen;
}
:root.theme-dark .sf__qrEmpty {
    color: rgba(234, 236, 239, 0.55);
    background: transparent;
    border-color: rgba(255, 255, 255, 0.10);
}
:root.theme-dark .sf__addrWrap {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}
:root.theme-dark .sf__addr {
    color: #eaecef;
}
:root.theme-dark .sf__copyBtn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(234, 236, 239, 0.75);
}
:root.theme-dark .sf__copyBtn:hover {
    background: #fcd535;
    border-color: #fcd535;
    color: #0b0e11;
}
:root.theme-dark .sf__copyBtn.is-done {
    background: rgba(14, 203, 129, 0.18);
    border-color: rgba(14, 203, 129, 0.45);
    color: #0ecb81;
}
:root.theme-dark .sf__copyBtn.is-done .sf__copyDone { color: #0ecb81; }
:root.theme-dark .sf__copyBtn.is-failed {
    background: rgba(246, 70, 93, 0.16);
    border-color: rgba(246, 70, 93, 0.45);
    color: #f6465d;
}

:root.theme-dark .sf__loader { color: rgba(234, 236, 239, 0.65); }
:root.theme-dark .sf__spinner {
    border-color: rgba(255, 255, 255, 0.12);
    border-top-color: #fcd535;
}

/* ── REDUCED MOTION ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sf__control, .sf__calc, .sf__btn { transition: none !important; }
}

/* ── SWAP ROW (dual-amount indicator) ───────── */
.sf__swapRow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -4px 0 8px;
    user-select: none;
}
.sf__swapIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sf-borderSoft, rgba(15,23,42,.06));
    color: var(--sf-muted, #64748b);
    font-size: 16px;
    line-height: 1;
}