/* ════════════════════════════════════════════════════════════
   BUFO FORMS — OSINT CINEMATIC STYLES v1.0.0
   ════════════════════════════════════════════════════════════ */

/* ── Container ── */
.bf{position:relative;border-radius:16px;border:1px solid rgba(34,197,94,.15);background:radial-gradient(600px 300px at 10% 0%,rgba(34,197,94,.06),transparent 55%),linear-gradient(180deg,rgba(5,8,10,.95),rgba(2,4,6,.98));overflow:hidden}
.bf--compact{border-radius:12px}
.bf--compact .bf__head{padding:10px 16px}
.bf--compact .bf__form{padding:16px}

/* ── Head ── */
.bf__head{display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid rgba(34,197,94,.10);background:linear-gradient(180deg,rgba(34,197,94,.04),transparent 80%)}
.bf__dot{width:6px;height:6px;border-radius:99px;background:rgba(34,197,94,1);box-shadow:0 0 8px rgba(34,197,94,.5);animation:bf-pulse 2s ease-in-out infinite}
@keyframes bf-pulse{0%,100%{opacity:1;box-shadow:0 0 8px rgba(34,197,94,.5)}50%{opacity:.6;box-shadow:0 0 4px rgba(34,197,94,.3)}}
.bf__title{font-family:var(--bufo-mono,monospace);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(34,197,94,.85);flex:1}
.bf__sub{font-family:var(--bufo-mono,monospace);font-size:9px;font-weight:700;letter-spacing:.10em;padding:2px 8px;border-radius:99px;border:1px solid rgba(34,197,94,.20);color:rgba(34,197,94,.65);background:rgba(34,197,94,.06)}

/* ── Form body ── */
.bf__form{padding:24px 20px}

/* ── Fields grid ── */
.bf__fields{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:20px}
.bf__field{flex:1 1 100%;min-width:0}
.bf__field--half{flex:1 1 calc(50% - 8px);min-width:200px}
@media(max-width:480px){.bf__field--half{flex:1 1 100%}}

/* ── Label ── */
.bf__label{display:block;font-family:var(--bufo-mono,monospace);font-size:10px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:6px}
.bf__req{color:rgba(34,197,94,.70)}

/* ── Inputs ── */
.bf__input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(34,197,94,.12);background:rgba(0,0,0,.40);font-family:var(--bufo-mono,monospace);font-size:13px;color:rgba(255,255,255,.90);outline:none;transition:border-color .20s ease,box-shadow .20s ease;box-sizing:border-box}
.bf__input::placeholder{color:rgba(255,255,255,.18);font-weight:400}
.bf__input:focus{border-color:rgba(34,197,94,.40);box-shadow:0 0 0 3px rgba(34,197,94,.06)}
.bf__input:hover:not(:focus){border-color:rgba(34,197,94,.20)}

/* Invalid state (after submission attempt) */
.bf__input:invalid:not(:placeholder-shown):not(:focus){border-color:rgba(239,68,68,.30)}
.bf--tried .bf__input:invalid{border-color:rgba(239,68,68,.40);box-shadow:0 0 0 3px rgba(239,68,68,.06)}

/* ── Textarea ── */
.bf__textarea{resize:vertical;min-height:100px;line-height:1.6}

/* ── Select ── */
.bf__selectWrap{position:relative}
.bf__select{appearance:none;padding-right:36px;cursor:pointer}
.bf__selectArr{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:rgba(34,197,94,.40);pointer-events:none;transition:color .18s}
.bf__selectWrap:hover .bf__selectArr{color:rgba(34,197,94,.70)}

/* ── File upload ── */
.bf__fileWrap{position:relative;cursor:pointer}
.bf__fileInput{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2}
.bf__filePlaceholder{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:10px;border:1px dashed rgba(34,197,94,.18);background:rgba(0,0,0,.25);color:rgba(255,255,255,.35);font-family:var(--bufo-mono,monospace);font-size:12px;transition:all .18s}
.bf__fileWrap:hover .bf__filePlaceholder{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.04);color:rgba(34,197,94,.70)}
.bf__filePlaceholder svg{color:rgba(34,197,94,.40)}

/* ── Checkbox ── */
.bf__field--check{flex:1 1 100%}
.bf__checkLabel{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.bf__checkInput{position:absolute;opacity:0;width:0;height:0}
.bf__checkBox{flex-shrink:0;width:18px;height:18px;border-radius:4px;border:1px solid rgba(34,197,94,.20);background:rgba(0,0,0,.40);display:flex;align-items:center;justify-content:center;transition:all .18s;margin-top:1px}
.bf__checkBox svg{opacity:0;color:rgba(5,8,10,.95);transition:opacity .15s}
.bf__checkInput:checked+.bf__checkBox{background:rgba(34,197,94,.90);border-color:rgba(34,197,94,.90);box-shadow:0 0 8px rgba(34,197,94,.20)}
.bf__checkInput:checked+.bf__checkBox svg{opacity:1}
.bf__checkInput:focus+.bf__checkBox{box-shadow:0 0 0 3px rgba(34,197,94,.10)}
.bf__checkText{font-size:12px;color:rgba(255,255,255,.50);line-height:1.5}

/* ── Submit button ── */
.bf__submit{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 24px;border-radius:12px;border:1px solid rgba(34,197,94,.30);background:linear-gradient(135deg,rgba(34,197,94,.15),rgba(34,197,94,.06));font-family:var(--bufo-mono,monospace);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(34,197,94,.95);cursor:pointer;transition:all .22s ease;position:relative;overflow:hidden}
.bf__submit::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(34,197,94,.90),rgba(34,197,94,.70));opacity:0;transition:opacity .22s}
.bf__submit:hover::before{opacity:1}
.bf__submit:hover{color:rgba(5,8,10,.95);box-shadow:0 0 30px -6px rgba(34,197,94,.20);transform:translateY(-1px)}
.bf__submit:hover svg,.bf__submit:hover span{position:relative;z-index:1}
.bf__submit svg,.bf__submitText{position:relative;z-index:1}
.bf__submit:disabled{opacity:.5;cursor:not-allowed;transform:none}
.bf__submit:disabled::before{opacity:0}

/* Loading spinner */
.bf__submitLoad{display:none}
.bf__submit.is-loading .bf__submitText{display:none}
.bf__submit.is-loading .bf__submitLoad{display:inline-flex}
.bf__spinner{animation:bf-spin .8s linear infinite}
@keyframes bf-spin{to{transform:rotate(360deg)}}

/* ── Message box ── */
.bf__msg{display:none;margin-top:16px;padding:12px 16px;border-radius:10px;font-family:var(--bufo-mono,monospace);font-size:12px;line-height:1.5;animation:bf-fadeIn .3s ease}
@keyframes bf-fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.bf__msg--ok{display:block;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.20);color:rgba(34,197,94,.90)}
.bf__msg--error{display:block;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.20);color:rgba(239,68,68,.85)}

/* ── Scanline overlay (subtle) ── */
.bf::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,rgba(255,255,255,.008) 3px,rgba(255,255,255,.008) 4px);pointer-events:none;border-radius:16px}
.bf--compact::after{border-radius:12px}

/* ── Focus glow on form when active ── */
.bf:focus-within{border-color:rgba(34,197,94,.22);box-shadow:0 0 40px -12px rgba(34,197,94,.08)}

/* ── Perf tiers ── */
.perf-tier-3 .bf::after{display:none}
.perf-tier-3 .bf__submit::before{transition:none}
@media(prefers-reduced-motion:reduce){.bf__dot,.bf__spinner{animation:none}.bf__msg,.bf__submit{transition:none}}