/* =====================================================================
   Shared form styling — floating-label fields + Just-Validate states.
   Used site-wide: add class "jv-form" to a <form>, and structure each
   field as:
     <div class="fld"><i class="fa-solid fa-x"></i>
        <input id="x" placeholder=" "><label for="x">Label</label></div>
   For <select> fields add class "fld-select" on the .fld wrapper.
   Info callouts: add class "jv-note" to the box.
   ===================================================================== */

.jv-form .fld{position:relative;margin-bottom:26px}
.jv-form .fld > i{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:15px;color:#9aa1ab;transition:color .15s;z-index:2;pointer-events:none}
.jv-form .fld > input,
.jv-form .fld > select,
.jv-form .fld > textarea{width:100%;box-sizing:border-box;height:50px;padding:0 14px 0 43px;border:1.5px solid #e3e6ea;border-radius:11px;background:#fff;color:#222;font-size:15px;outline:none;box-shadow:0 3px 10px rgba(20,30,50,.05);transition:border-color .15s,box-shadow .15s,background .15s}
.jv-form .fld > textarea{height:auto;min-height:90px;padding-top:12px;resize:vertical}
.jv-form .fld > label{position:absolute;left:36px;top:50%;transform:translateY(-50%);font-size:14px;color:#9aa1ab;background:#fff;padding:0 6px;pointer-events:none;transition:.15s;z-index:2}
.jv-form .fld > textarea ~ label{top:18px;transform:none}

/* float the label on focus / when filled (selects: when focused or a value is chosen) */
.jv-form .fld > input:focus + label,
.jv-form .fld > input:not(:placeholder-shown) + label,
.jv-form .fld > textarea:focus ~ label,
.jv-form .fld > textarea:not(:placeholder-shown) ~ label,
.jv-form .fld-select > select:focus + label,
.jv-form .fld-select > select:valid + label{top:0;font-size:11px;font-weight:700;letter-spacing:.2px}
.jv-form .fld-select > select:invalid:not(:focus) + label{top:50%;font-size:14px;font-weight:400;letter-spacing:0}

/* neutral focus */
.jv-form .fld > input:focus,
.jv-form .fld > select:focus,
.jv-form .fld > textarea:focus{border-color:#c9a86a;box-shadow:0 7px 20px rgba(20,30,50,.12)}
.jv-form .fld:focus-within > i{color:#b8932e}

/* valid (green) — box + icon + label */
.jv-form .fld > input.jv-valid,
.jv-form .fld > select.jv-valid,
.jv-form .fld > textarea.jv-valid{border-color:#27ae60 !important}
.jv-form .fld:has(.jv-valid) > i,
.jv-form .fld > .jv-valid + label,
.jv-form .fld > .jv-valid ~ label{color:#27ae60}

/* invalid (red) — box + icon + label */
.jv-form .fld > input.jv-invalid,
.jv-form .fld > select.jv-invalid,
.jv-form .fld > textarea.jv-invalid{border-color:#e74c3c !important}
.jv-form .fld:has(.jv-invalid) > i,
.jv-form .fld > .jv-invalid + label,
.jv-form .fld > .jv-invalid ~ label{color:#e74c3c}

/* error text — starts after the icon, absolutely placed so it never resizes the form */
.jv-form .jv-error{position:absolute;top:calc(100% + 4px);left:44px;font-size:11px;font-weight:600;margin:0;color:#e74c3c}

.jv-form .btn-block{width:100%}

/* static/display block — a labelled, non-floating region for ajax pickers or read-only values */
.jv-form .fld-static{margin-bottom:22px}
.jv-form .fld-static > .fld-label{display:block;margin-bottom:8px;font-size:13px;font-weight:600;color:#5a626d}
.jv-form .fld-static > .fld-label > i{margin-right:7px;color:#9aa1ab}
.jv-form .fld-static input{width:100%;box-sizing:border-box;height:46px;padding:0 14px;border:1.5px solid #e3e6ea;border-radius:11px;background:#f4f6f8;color:#5a626d;font-size:15px;outline:none}

/* terms / single-checkbox row (e.g. register) */
.jv-form .terms_agreement{position:relative;margin:4px 0 16px;font-size:12.5px;color:#52b327}
.jv-form .terms_agreement .jv-error{left:2px;top:calc(100% - 4px)}

/* polished info callout — add class "jv-note" to an info box */
.jv-note{position:relative;background:#eff5fc;border:1px solid #d3e3f6;border-left:3px solid #3b7fc4;border-radius:10px;color:#3c5168;font-size:12.5px;line-height:1.55;padding:13px 15px 13px 44px;background-image:none}
.jv-note::before{content:"\f05a";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#3b7fc4;font-size:16px}