/* =============================================================================
   SILVRA — Reusable UI components
   ============================================================================= */

/* --- Buttons --- */
.btn {
    --btn-bg: var(--surface);
    --btn-fg: var(--silver-hi);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    font-family: var(--font-primary); font-weight: 600; font-size: .95rem;
    padding: .65rem 1.15rem; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--btn-bg); color: var(--btn-fg);
    cursor: pointer; text-align: center; line-height: 1;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease, border-color .2s ease;
    position: relative; overflow: hidden;
}
.btn:hover { border-color: var(--silver-muted); color: var(--white); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

/* Metallic silver button with light sweep */
.btn-metallic {
    background: linear-gradient(135deg, #F1F2F4 0%, #C5C8CE 38%, #9aa0a8 55%, #C5C8CE 72%, #F1F2F4 100%);
    color: #0a0b0d; border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 4px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.6);
}
.btn-metallic:hover { color: #0a0b0d; box-shadow: 0 6px 20px rgba(197,200,206,0.35), inset 0 1px 0 rgba(255,255,255,0.7); }
.btn-metallic::after {
    content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.75), transparent);
    transform: skewX(-20deg);
}
.btn-metallic:hover::after { animation: sweep .9s ease; }
.btn-metallic:disabled { background: var(--grad-silver-soft); color: rgba(10,11,13,0.6); }
@keyframes sweep { from { left: -120%; } to { left: 130%; } }

.btn-ghost { background: transparent; }
.btn-lg { padding: .85rem 1.6rem; font-size: 1.05rem; }
.btn-mini { padding: .4rem .7rem; font-size: .8rem; }
.btn-block { width: 100%; }
.btn-danger { background: transparent; border-color: var(--error); color: var(--error); }
.btn-danger:hover { background: rgba(255,92,102,0.1); color: var(--error); }
.btn-success { border-color: var(--success); color: var(--success); background: transparent; }

/* --- Fields --- */
.field-row { margin-bottom: var(--sp-4); }
.field-label {
    display: block; font-family: var(--font-primary); font-size: .85rem; font-weight: 600;
    color: var(--silver); margin-bottom: var(--sp-2); text-transform: uppercase; letter-spacing: .04em;
}
.field-input, .field-select {
    width: 100%; padding: .7rem .85rem; border-radius: var(--radius);
    background: var(--black-elevated); border: 1px solid var(--border); color: var(--white);
    font-family: var(--font-secondary); font-size: 1rem; transition: border-color .2s ease, box-shadow .2s ease;
}
.field-input::placeholder { color: var(--silver-muted); }
.field-input:focus, .field-select:focus { outline: none; border-color: var(--silver); box-shadow: 0 0 0 3px rgba(197,200,206,0.15); }
.field-input.is-invalid { border-color: var(--error); }
.field-input.is-valid { border-color: var(--success); }
.field-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--silver-muted) 50%), linear-gradient(135deg, var(--silver-muted) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }
.input-actions { display: flex; gap: var(--sp-2); }
.input-actions .field-input { flex: 1; min-width: 0; }
.field-help { font-size: .8rem; color: var(--silver-muted); margin: var(--sp-2) 0 0; }
.field-error { font-size: .82rem; color: var(--error); margin: var(--sp-2) 0 0; }

/* --- Panels --- */
.panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: var(--sp-5); box-shadow: var(--shadow);
}
.panel-title {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--silver-muted);
    margin: 0 0 var(--sp-3); font-weight: 600;
}
.empty-state { text-align: center; color: var(--silver-muted); padding: var(--sp-4) 0; }
.empty-state p { margin-bottom: var(--sp-3); }

/* --- Balance box --- */
.balance-box {
    margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius);
    background: var(--black-elevated); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.balance-box dt { color: var(--silver-muted); font-size: .85rem; }
.balance-box dd { margin: 0; font-family: var(--font-primary); color: var(--white); font-weight: 600; }

/* --- Referral promotion modal --- */
.promotion-panel { width: min(100%, 500px); }
.promotion-rewards { display: grid; gap: var(--sp-3); }
.promotion-rewards p {
    margin: 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--black-elevated);
}
.promotion-rewards strong { color: var(--success); font-family: var(--font-primary); font-size: 1.2rem; }
.promotion-invite-label { margin: var(--sp-4) 0 var(--sp-2); font-weight: 600; }
.promotion-link-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--black-elevated);
}
.promotion-link-row a { min-width: 0; overflow-wrap: anywhere; color: var(--silver-hi); }
.promotion-copy {
    display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--silver-hi); cursor: pointer;
}
.promotion-copy:hover { border-color: var(--silver); color: var(--white); }
.promotion-copy-status { min-height: 1.2em; margin: var(--sp-2) 0 0; color: var(--success); font-size: .85rem; }
.promotion-disclaimer {
    margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--error);
    border-radius: var(--radius); background: rgba(255,92,102,0.08); color: var(--error);
    font-size: .88rem; font-weight: 600;
}
.promotion-disclaimer p { margin: 0; }
.promotion-disclaimer p + p { margin-top: var(--sp-2); }

/* --- Fee summary --- */
.fee-summary {
    margin: var(--sp-5) 0; padding: var(--sp-4); border-radius: var(--radius);
    background: var(--black-elevated); border: 1px solid var(--border);
}
.fee-line { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; font-size: .95rem; }
.fee-line span:last-child { font-family: var(--font-primary); color: var(--white); }
.fee-total { border-top: 1px solid var(--border); margin-top: var(--sp-2); padding-top: var(--sp-3); font-weight: 600; }
.fee-recipient span:last-child { color: var(--success); }
.fee-stamp { font-size: .75rem; color: var(--silver-muted); margin: var(--sp-2) 0 0; }

/* --- Notices / callouts --- */
.form-notice { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); margin-bottom: var(--sp-4); font-size: .9rem; border: 1px solid; }
.form-notice.is-warn { border-color: #5e4a2a; background: rgba(255,214,143,0.08); color: #ffd68f; }
.form-notice.is-error { border-color: var(--error); background: rgba(255,92,102,0.08); color: var(--error); }
.form-notice.is-info { border-color: #2a4a5e; background: rgba(143,211,255,0.07); color: #8fd3ff; }
.callout {
    margin-top: var(--sp-6); padding: var(--sp-5); border-radius: var(--radius-lg);
    background: var(--surface); border: 1px solid var(--border);
}
.callout h3 { color: var(--white); }
.callout-warn { border-color: #5e4a2a; }
.callout ul { margin: 0; padding-left: var(--sp-5); }

/* --- Tables --- */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th, .data-table td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table th { color: var(--silver-muted); font-family: var(--font-primary); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.data-table td.mono { font-size: .8rem; word-break: break-all; color: var(--silver); }

/* --- Badges / tags --- */
.tag {
    display: inline-block; font-family: var(--font-primary); font-size: .68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: var(--radius-pill);
    border: 1px solid var(--border); color: var(--silver-muted);
}
.tag-test { color: #8fd3ff; border-color: #2a4a5e; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-family: var(--font-primary); font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-pending { color: #ffd68f; border-color: #5e4a2a; }
.status-pending .status-dot { animation: pulse 1.2s ease-in-out infinite; }
.status-submitted { color: #8fd3ff; border-color: #2a4a5e; }
.status-submitted .status-dot { animation: pulse 1.2s ease-in-out infinite; }
.status-confirmed { color: var(--success); border-color: #2a5e4a; }
.status-failed { color: var(--error); border-color: var(--error); }
.status-reverted { color: var(--error); border-color: var(--error); }
.status-unknown { color: var(--silver-muted); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* --- Toasts --- */
.toast-region { position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: 200; display: flex; flex-direction: column; gap: var(--sp-2); max-width: 360px; }
.toast {
    padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: var(--surface);
    border: 1px solid var(--border); color: var(--silver-hi); box-shadow: var(--shadow-lg);
    font-size: .9rem; animation: toast-in .25s ease;
}
.toast.is-success { border-color: var(--success); }
.toast.is-error { border-color: var(--error); color: var(--error); }
.toast.is-warn { border-color: #5e4a2a; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }