/* CoinFolio additions on top of the compiled template CSS (index.css). */

/* Real <button> elements styled like the template's link-buttons */
.cf-btn { border: 0; cursor: pointer; width: 100%; font-family: inherit; font-size: 15px; }
.cf-btn:disabled { opacity: .6; cursor: not-allowed; }
.cf-btn-plain { border: 0; background: none; cursor: pointer; font-family: inherit; padding: 0; }

/* Inline form error box */
.cf-errors { background: rgba(255, 71, 87, .1); border: 1px solid rgba(255, 71, 87, .3); color: #FF4757; border-radius: 12px; padding: 12px 16px; margin-bottom: 20px; font-size: 13px; font-weight: 600; }
.cf-errors ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cf-notice { background: rgba(30, 144, 255, .1); border: 1px solid rgba(30, 144, 255, .3); color: #8cc4ff; border-radius: 12px; padding: 12px 16px; margin-bottom: 20px; font-size: 13px; font-weight: 600; line-height: 1.5; }
.cf-notice strong { color: #fff; letter-spacing: 3px; font-size: 15px; }

/* Checkbox in the app's style */
.cf-check { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex: 0 0 20px; margin: 2px 0 0; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, .25); background: transparent; cursor: pointer; display: inline-grid; place-content: center; }
.cf-check::after { content: ""; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.cf-check:checked { background: #1E90FF; border-color: #1E90FF; }
.cf-check:checked::after { opacity: 1; }

/* Password strength bar */
.cf-strength { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.cf-strength > div { height: 100%; width: 0; border-radius: 99px; transition: width .25s, background .25s; }

/* Select & date inputs on dark background */
.cf-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px !important; }
.cf-select option { background: #111A3A; color: #fff; }
input[type="date"].cf-date { color-scheme: dark; }
:root:not(.dark) input[type="date"].cf-date { color-scheme: light; }

/* ID type pills */
.cf-pill input { position: absolute; opacity: 0; pointer-events: none; }
.cf-pill span { display: flex; align-items: center; justify-content: center; text-align: center; height: 44px; padding: 0 8px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: var(--color-surface-2, #18244A); font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .6); cursor: pointer; transition: all .15s; }
.cf-pill input:checked + span { border-color: #1E90FF; background: rgba(30, 144, 255, .12); color: #1E90FF; }

/* KYC upload boxes */
.cf-upload { position: relative; display: block; cursor: pointer; }
.cf-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.cf-upload.has-file > div { border-color: #00C896 !important; border-style: solid !important; background: rgba(0, 200, 150, .06); }
.cf-upload .cf-file-name { display: none; color: #00C896; font-weight: 700; font-size: 12px; margin-top: 4px; word-break: break-all; }
.cf-upload.has-file .cf-file-name { display: block; }
.cf-upload.has-file .cf-file-hint { display: none; }

/* OTP boxes: keep the template look, allow 6 digits */
.cf-otp { letter-spacing: 0; }

/* Light theme tweaks */
:root:not(.dark) .cf-check { border-color: rgba(0, 0, 0, .25); }
:root:not(.dark) .cf-pill span { background: #f0f2fa; color: #64748b; border-color: #e2e8f0; }
:root:not(.dark) .cf-select option { background: #fff; color: #0f172a; }

/* Utility classes not present in the compiled template CSS */
.border-error\/25 { border-color: rgba(255, 71, 87, .25); }
.border-warning\/25 { border-color: rgba(255, 184, 0, .25); }

/* Biometric (passkey) elements toggled by passkey.js */
[data-passkey-if-supported].hidden,
[data-passkey-if-unsupported].hidden,
#passkey-offer.hidden { display: none !important; }