/**
 * FEF Login/Register — Form Builder styles
 * ----------------------------------------
 * Drives everything from CSS variables the widget emits inline on
 * .fef-fb-scope (see FEF_LR_Form_Builder::style_vars):
 *   --fb-form-w --fb-min-h --fb-row-gap --fb-col-gap
 *   --fb-field-bg --fb-field-color --fb-field-border --fb-field-radius
 *   --fb-field-h --fb-field-padx --fb-focus-color --fb-shadow --fb-shadow-h
 *   --fb-glow --fb-label-color --fb-label-active --fb-ph-color --fb-ph-style
 *   --fb-ast-color --fb-ast-size --fb-eye-color
 *
 * Includes the pure-CSS floating-label animation (:focus + :placeholder-shown)
 * and a global variant (.fef-fb-floating-all) applied by JS to the built-in
 * Login/Register forms when the widget's floating-labels switch is on.
 */

.fef-fb-scope { max-width: var(--fb-form-w, 520px); margin: 0 auto; box-sizing: border-box; }
.fef-fb-scope *, .fef-fb-scope *::before, .fef-fb-scope *::after { box-sizing: border-box; }
.fef-fb-form { min-height: var(--fb-min-h, 0); padding: 8px 2px; }

/* ── Grid: 10 tracks; each field spans width/10 ── */
.fef-fb-row {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: var(--fb-row-gap, 14px) var(--fb-col-gap, 14px);
    align-items: start;
}
.fef-fb-col { min-width: 0; position: relative; }

/* ── Inputs ── */
.fef-fb-input {
    width: 100%;
    height: var(--fb-field-h, 48px);
    padding: 0 var(--fb-field-padx, 14px);
    background: var(--fb-field-bg, #f8fafc);
    color: var(--fb-field-color, #1e293b);
    border: 1px solid var(--fb-field-border, #e2e8f0);
    border-radius: var(--fb-field-radius, 8px);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    outline: none;
    box-shadow: var(--fb-shadow, none);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.fef-fb-textarea { height: auto; min-height: calc(var(--fb-field-h, 48px) * 2); padding: 12px var(--fb-field-padx, 14px); resize: vertical; }
.fef-fb-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; }

.fef-fb-input:hover { box-shadow: var(--fb-shadow-h, var(--fb-shadow, none)); }
.fef-fb-input:focus {
    border-color: var(--fb-focus-color, #3b82f6);
    background: #fff;
    box-shadow: var(--fb-glow, 0 0 0 3px rgba(59,130,246,.2));
}
.fef-fb-input::placeholder { color: var(--fb-ph-color, #94a3b8); font-style: var(--fb-ph-style, normal); }

/* ── Labels ── */
.fef-fb-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--fb-label-color, #334155); }
.fef-fb-ast { color: var(--fb-ast-color, #dc2626); font-size: var(--fb-ast-size, 13px); margin-left: 3px; line-height: 1; }

/* Hidden label (placeholder-only) */
.fef-fb-mode-none .fef-fb-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Inside (static) label overlay */
.fef-fb-mode-inside .fef-fb-control { position: relative; }
.fef-fb-mode-inside .fef-fb-label { position: absolute; left: var(--fb-field-padx, 14px); top: 10px; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--fb-label-color, #334155); }
.fef-fb-mode-inside .fef-fb-input { height: calc(var(--fb-field-h, 48px) + 12px); padding-top: 22px; }

/* ── Floating label animation ──────────────────────────────────────
   The float is driven by two robust signals rather than the adjacent
   sibling combinator (which breaks for the password field, whose input
   is wrapped for the eye toggle, and for browser autofill):
     • :focus-within on the control  → floats on focus, any nesting
     • .fb-float on the column (JS)   → stays floated while it has a value
   :placeholder-shown is kept only as a no-JS progressive fallback.
   ------------------------------------------------------------------ */
.fef-fb-mode-floating .fef-fb-control { position: relative; }
.fef-fb-mode-floating .fef-fb-label {
    position: absolute;
    left: calc(var(--fb-field-padx, 14px) - 2px);
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0 6px;
    font-size: 15px;
    font-weight: 400;
    color: var(--fb-ph-color, #94a3b8);
    background: transparent;
    pointer-events: none;
    z-index: 1;
    transition: top .18s ease, transform .18s ease, font-size .18s ease, color .18s ease, background .18s ease;
}
/* Textarea label anchors near the top, not vertical-centre */
.fef-fb-mode-floating.fef-fb-type-textarea .fef-fb-label { top: 16px; transform: none; }

/* Floated state */
.fef-fb-mode-floating.fb-float .fef-fb-label,
.fef-fb-mode-floating .fef-fb-control:focus-within .fef-fb-label,
.fef-fb-mode-floating.fef-fb-type-select .fef-fb-label,
.fef-fb-mode-floating.fef-fb-type-date .fef-fb-label,
.fef-fb-mode-floating .fef-fb-input:not(:placeholder-shown) ~ .fef-fb-label {
    top: 0;
    transform: translateY(-50%) scale(.92);
    font-size: 12px;
    color: var(--fb-label-active, #3b82f6);
    background: #fff;
    padding: 0 5px;
}
/* Textarea floated variant (anchored to top edge, no vertical offset) */
.fef-fb-mode-floating.fef-fb-type-textarea.fb-float .fef-fb-label,
.fef-fb-mode-floating.fef-fb-type-textarea .fef-fb-control:focus-within .fef-fb-label,
.fef-fb-mode-floating.fef-fb-type-textarea .fef-fb-input:not(:placeholder-shown) ~ .fef-fb-label {
    top: 0; transform: scale(.92);
}
/* Keep the placeholder hidden until the field is focused, so the resting
   label is the only visible text. */
.fef-fb-mode-floating .fef-fb-input:not(:focus)::placeholder { color: transparent; }

/* ── Password eye ── */
.fef-fb-col .fef-lr-input-wrap { position: relative; }
.fef-fb-col .fef-lr-eye { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); background: transparent; border: 0; padding: 8px; cursor: pointer; color: var(--fb-eye-color, #94a3b8); }
.fef-fb-col .fef-lr-input-wrap .fef-fb-input { padding-right: 42px; }
.fef-fb-mode-floating .fef-lr-input-wrap + .fef-fb-label { } /* label targets input via sibling below */

/* ── Choices (radio / checkbox) ── */
.fef-fb-choices { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 4px 0; }
.fef-fb-choice { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--fb-field-color, #1e293b); cursor: pointer; }
.fef-fb-choice input { accent-color: var(--fb-focus-color, #3b82f6); }

/* ── Help + validation messages ── */
.fef-fb-hint { margin-top: 5px; font-size: 12px; color: #94a3b8; line-height: 1.4; }
.fef-fb-validate { margin-top: 5px; font-size: 12px; min-height: 15px; line-height: 1.4; display: none; }
.fef-fb-validate.show { display: block; }
.fef-fb-validate.checking { color: #64748b; }
.fef-fb-validate.valid   { color: #059669; }
.fef-fb-validate.invalid { color: #dc2626; }
.fef-fb-col.fef-fb-invalid .fef-fb-input { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.fef-fb-col.fef-fb-valid   .fef-fb-input { border-color: #059669; }

/* ── Multi-image / file upload ── */
.fef-fb-upload { }
.fef-fb-drop {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 76px; padding: 14px;
    border: 1.5px dashed var(--fb-field-border, #cbd5e1);
    border-radius: var(--fb-field-radius, 8px);
    background: var(--fb-field-bg, #f8fafc);
    color: #64748b; font-size: 13px; cursor: pointer; text-align: center;
    transition: border-color .15s ease, background .15s ease;
}
.fef-fb-drop:hover, .fef-fb-upload.dragover .fef-fb-drop { border-color: var(--fb-focus-color, #3b82f6); background: #fff; }
.fef-fb-file { display: none; }
.fef-fb-upload-hint { margin-top: 6px; font-size: 11px; color: #94a3b8; }
.fef-fb-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.fef-fb-thumb {
    position: relative; width: 78px; height: 78px; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--fb-field-border, #e2e8f0); background: #f1f5f9;
    display: flex; align-items: center; justify-content: center;
}
.fef-fb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fef-fb-thumb .fef-fb-fileicon { font-size: 11px; color: #475569; padding: 6px; text-align: center; word-break: break-word; }
.fef-fb-thumb .fef-fb-thumb-del {
    position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%;
    border: none; background: rgba(15,23,42,.72); color: #fff; font-size: 12px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.fef-fb-thumb .fef-fb-thumb-del:hover { background: #dc2626; }
.fef-fb-thumb.uploading { }
.fef-fb-thumb.uploading::after {
    content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.6);
    background-image: linear-gradient(90deg, transparent, rgba(59,130,246,.35), transparent);
    background-size: 200% 100%; animation: fef-fb-shimmer 1s linear infinite;
}
@keyframes fef-fb-shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* ── Submit ── */
.fef-fb-submit-wrap { display: flex; margin-top: 4px; }
.fef-fb-submit {
    min-width: 120px; padding: 14px 20px; border: 0; border-radius: var(--fb-field-radius, 8px);
    background: var(--fb-focus-color, #3b82f6); color: #fff; font-size: 15px; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: filter .15s ease, transform .1s ease, opacity .15s ease;
}
.fef-fb-submit:hover { filter: brightness(.94); }
.fef-fb-submit:active { transform: translateY(1px); }
.fef-fb-submit:disabled { opacity: .7; cursor: not-allowed; }

/* ── Form-level message ── */
.fef-fb-message { margin-top: 14px; display: none; padding: 12px 14px; border-radius: 8px; font-size: 14px; line-height: 1.5; }
.fef-fb-message.show { display: block; }
.fef-fb-message.error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.fef-fb-message.success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

/* ================================================================
   GLOBAL FLOATING LABELS for the built-in forms
   Applied by JS (fef-fb-floating-all): it restructures .fef-lr-field
   so the label follows the input, then this styles the animation.
   ================================================================ */
.fef-fb-floating-all .fef-lr-field.fef-fb-floated { position: relative; }
.fef-fb-floating-all .fef-lr-field.fef-fb-floated > label {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    margin: 0; padding: 0 6px; font-weight: 400; color: #94a3b8; background: transparent;
    pointer-events: none; transition: top .16s ease, transform .16s ease, font-size .16s ease, color .16s ease, background .16s ease;
}
.fef-fb-floating-all .fef-lr-field.fef-fb-floated.fb-float > label,
.fef-fb-floating-all .fef-lr-field.fef-fb-floated:focus-within > label,
.fef-fb-floating-all .fef-lr-field.fef-fb-floated input:not(:placeholder-shown) ~ label {
    top: 0; transform: translateY(-50%) scale(.92); font-size: 12px; color: #3b82f6; background: #fff;
}
.fef-fb-floating-all .fef-lr-field.fef-fb-floated input:not(:focus)::placeholder { color: transparent; }

/* ================================================================
   CONDITIONAL DISPLAY
   ================================================================ */
.fef-fb-cond-hidden { display: none !important; }

/* ================================================================
   BUTTON GROUPS
   ================================================================ */
.fef-fb-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.fef-fb-btn {
    appearance: none; cursor: pointer; user-select: none;
    padding: 0 16px; min-height: 42px;
    background: var(--fb-field-bg, #f8fafc);
    color: var(--fb-field-color, #1e293b);
    border: 1.5px solid var(--fb-field-border, #e2e8f0);
    border-radius: var(--fb-field-radius, 8px);
    font: inherit; font-size: 14px; line-height: 1.2;
    transition: all .15s ease;
}
.fef-fb-btn:hover { border-color: var(--fb-focus-color, #3b82f6); }
.fef-fb-btn.active {
    background: var(--fb-focus-color, #3b82f6);
    border-color: var(--fb-focus-color, #3b82f6);
    color: #fff; box-shadow: var(--fb-glow, 0 0 0 3px rgba(59,130,246,0.20));
}

/* ================================================================
   TOGGLE SWITCH
   ================================================================ */
.fef-fb-toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.fef-fb-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.fef-fb-toggle-track {
    position: relative; flex: 0 0 auto;
    width: 50px; height: 28px; border-radius: 999px;
    background: #cbd5e1; transition: background .2s ease;
}
.fef-fb-toggle-thumb {
    position: absolute; top: 3px; left: 3px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform .2s ease;
}
.fef-fb-toggle-input:checked + .fef-fb-toggle-track { background: var(--fb-focus-color, #3b82f6); }
.fef-fb-toggle-input:checked + .fef-fb-toggle-track .fef-fb-toggle-thumb { transform: translateX(22px); }
.fef-fb-toggle-input:focus-visible + .fef-fb-toggle-track { box-shadow: var(--fb-glow, 0 0 0 3px rgba(59,130,246,0.20)); }
.fef-fb-toggle-text .fef-fb-toggle-on { display: none; color: var(--fb-focus-color, #3b82f6); font-weight: 600; }
.fef-fb-toggle-text .fef-fb-toggle-off { display: inline; color: #64748b; }
.fef-fb-toggle-input:checked ~ .fef-fb-toggle-text .fef-fb-toggle-on { display: inline; }
.fef-fb-toggle-input:checked ~ .fef-fb-toggle-text .fef-fb-toggle-off { display: none; }

/* ================================================================
   CALCULATED FIELD
   ================================================================ */
.fef-fb-calc {
    display: flex; align-items: center; min-height: var(--fb-field-h, 48px);
    padding: 0 var(--fb-field-padx, 14px);
    background: var(--fb-field-bg, #f8fafc);
    border: 1.5px dashed var(--fb-field-border, #e2e8f0);
    border-radius: var(--fb-field-radius, 8px);
}
.fef-fb-calc-value { font-size: 18px; font-weight: 700; color: var(--fb-field-color, #1e293b); font-variant-numeric: tabular-nums; }

/* ================================================================
   CAPTCHA
   ================================================================ */
.fef-fb-captcha { margin: 4px 0 2px; }
.fef-fb-captcha > .fef-fb-label { position: static; display: block; margin: 0 0 6px; font-weight: 600; color: var(--fb-label-color, #334155); background: none; }
.fef-fb-captcha-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fef-fb-captcha-code, .fef-fb-captcha-q {
    display: inline-flex; align-items: center; justify-content: center; gap: 2px;
    min-width: 120px; height: 46px; padding: 0 14px;
    background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 6px, #e9eef5 6px, #e9eef5 12px);
    border: 1px solid var(--fb-field-border, #e2e8f0); border-radius: 6px;
    font-size: 24px; font-weight: 700; letter-spacing: 4px; color: #1e293b;
    user-select: none; font-family: "Courier New", monospace;
}
.fef-fb-captcha-q { letter-spacing: 1px; font-family: inherit; }
.fef-fb-captcha-refresh {
    appearance: none; border: 1px solid var(--fb-field-border, #e2e8f0); background: #fff;
    width: 42px; height: 42px; border-radius: 6px; cursor: pointer; font-size: 18px;
    transition: transform .3s ease, border-color .15s ease; line-height: 1;
}
.fef-fb-captcha-refresh:hover { border-color: var(--fb-focus-color, #3b82f6); transform: rotate(180deg); }
.fef-fb-captcha-answer {
    flex: 1 1 140px; min-width: 120px; height: 46px; padding: 0 14px;
    background: var(--fb-field-bg, #f8fafc); color: var(--fb-field-color, #1e293b);
    border: 1.5px solid var(--fb-field-border, #e2e8f0); border-radius: var(--fb-field-radius, 8px);
    font: inherit; outline: none;
}
.fef-fb-captcha-answer:focus { border-color: var(--fb-focus-color, #3b82f6); box-shadow: var(--fb-glow, 0 0 0 3px rgba(59,130,246,0.20)); }
.fef-fb-captcha .g-recaptcha, .fef-fb-captcha .h-captcha, .fef-fb-captcha .cf-turnstile { margin-top: 4px; }

/* ================================================================
   MOBILE
   ================================================================ */
@media (max-width: 600px) {
    .fef-fb-scope { max-width: 100%; }
    .fef-fb-row { grid-template-columns: 1fr; gap: var(--fb-row-gap, 14px); }
    .fef-fb-col { grid-column: 1 / -1 !important; }
    .fef-fb-input, .fef-fb-textarea, .fef-fb-captcha-answer { font-size: 16px; } /* stop iOS zoom */
    .fef-fb-submit { width: 100% !important; }
    .fef-fb-submit-wrap { justify-content: stretch !important; }
    .fef-fb-thumb { width: 72px; height: 72px; }
    .fef-fb-captcha-answer { flex-basis: 100%; }
    .fef-fb-btn { flex: 1 1 auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .fef-fb-mode-floating .fef-fb-label,
    .fef-fb-floating-all .fef-lr-field.fef-fb-floated > label,
    .fef-fb-input { transition: none !important; }
    .fef-fb-thumb.uploading::after { animation: none !important; }
    .fef-fb-captcha-refresh:hover { transform: none; }
}