/*
* fuform-style.css
* /public_html/fuform/assets/fuform-style.css
*
* Scoped entirely to .fuform — mirrors RSForm + UIkit classes exactly.
* Nothing outside .fuform is touched.
*
* Add ONCE in Joomla template :
*
*/
/* ─── Base container ─────────────────────────────────────────────────────── */
.fuform {
display: block;
box-sizing: border-box;
}
/* ─── Horizontal layout (label LEFT, input RIGHT)
Matches .formContainer.uk-form-horizontal exactly as RSForm renders it ── */
.fuform.uk-form-horizontal .uk-margin {
display: flex;
align-items: flex-start;
flex-wrap: nowrap;
margin-bottom: 12px;
}
.fuform.uk-form-horizontal .uk-form-label {
width: 200px;
min-width: 200px;
padding-top: 8px;
padding-right: 20px;
margin-bottom: 0;
flex-shrink: 0;
text-align: left;
}
.fuform.uk-form-horizontal .formControls {
flex: 1;
min-width: 0;
}
/* Responsive — stack on small screens */
@media (max-width: 639px) {
.fuform.uk-form-horizontal .uk-margin {
flex-wrap: wrap;
}
.fuform.uk-form-horizontal .uk-form-label {
width: 100%;
min-width: 0;
padding-top: 0;
padding-right: 0;
margin-bottom: 4px;
}
}
/* ─── Grid row (matches .uk-grid) ────────────────────────────────────────── */
.fuform .uk-grid {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
/* ─── Full-width column (matches .uk-width-1-1) ──────────────────────────── */
.fuform .uk-width-1-1 {
width: 100%;
box-sizing: border-box;
}
/* ─── Field block wrapper (matches .uk-margin.rsform-block) ─────────────── */
.fuform .uk-margin {
margin-bottom: 12px;
}
/* ─── Label (matches .uk-form-label.formControlLabel) ───────────────────── */
.fuform .uk-form-label {
display: block;
margin-bottom: 5px;
font-size: 13px;
font-weight: 600;
color: #333;
line-height: 1.4;
}
/* ─── Required asterisk (matches .formRequired) ─────────────────────────── */
.fuform .formRequired {
color: #d9534f;
margin-left: 2px;
}
/* ─── Controls wrapper (matches .formControls.uk-form-controls) ─────────── */
.fuform .formControls {
display: block;
}
/* ─── Text inputs (matches .rsform-input-box.uk-input) ──────────────────── */
.fuform .uk-input {
display: block;
width: 100%;
max-width: 400px;
height: 40px;
padding: 0 10px;
font-size: 14px;
color: #333;
background: #fff;
border: 1px solid #c8c8c8;
border-radius: 0;
box-sizing: border-box;
transition: border-color 0.15s ease;
-webkit-appearance: none;
appearance: none;
}
.fuform .uk-input:focus {
outline: none;
border-color: #1e87f0;
background: #fff;
}
.fuform .uk-input:disabled {
background: #f8f8f8;
color: #999;
cursor: not-allowed;
}
/* ─── Select (matches .rsform-select-box.uk-select) ────────────────────── */
.fuform .uk-select {
display: block;
width: 100%;
max-width: 400px;
height: 40px;
padding: 0 10px;
font-size: 14px;
color: #333;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 10px center;
border: 1px solid #c8c8c8;
border-radius: 0;
box-sizing: border-box;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.fuform .uk-select:focus {
outline: none;
border-color: #1e87f0;
}
/* Country select matches original width */
.fuform .uk-select[name="Country"],
.fuform .uk-select[name="form[Country][]"] {
max-width: 400px;
font-size: 12px;
}
/* ─── Textarea ───────────────────────────────────────────────────────────── */
.fuform textarea.uk-input {
height: 80px;
padding: 8px 10px;
resize: vertical;
}
/* ─── Date input ─────────────────────────────────────────────────────────── */
.fuform input[type="date"].uk-input {
cursor: pointer;
color: #333;
}
/* ─── Validation spans (matches .formValidation / .formNoError) ─────────── */
.fuform .formValidation {
display: block;
margin-top: 4px;
min-height: 16px;
}
.fuform .formNoError {
display: none;
font-size: 11px;
color: #d9534f;
}
.fuform .formError {
display: inline-block !important;
font-size: 11px;
color: #d9534f;
}
/* ─── Inline error banner (matches .formRed) ────────────────────────────── */
.fuform .formRed {
color: #d9534f;
font-size: 13px;
font-weight: 600;
margin-bottom: 14px;
padding: 8px 12px;
background: #fff3f3;
border: 1px solid #f5c6cb;
border-radius: 2px;
}
/* ─── Validation error state (set by lead-forms.js) ─────────────────────── */
.fuform .fu-invalid {
border-color: #d9534f !important;
}
.fuform .fu-field-error {
display: block;
font-size: 11px;
color: #d9534f;
margin-top: 3px;
}
/* ─── Submit button (matches .rsform-submit-button.uk-button.uk-button-primary) */
.fuform .uk-button {
display: inline-block;
padding: 0 24px;
height: 40px;
line-height: 38px;
font-size: 14px;
font-weight: 700;
text-align: center;
text-decoration: none;
white-space: nowrap;
border: 1px solid transparent;
border-radius: 0;
cursor: pointer;
box-sizing: border-box;
transition: background 0.1s ease, border-color 0.1s ease;
-webkit-appearance: none;
appearance: none;
}
.fuform .uk-button-primary {
background: #1e87f0;
color: #fff;
border-color: transparent;
}
.fuform .uk-button-primary:hover,
.fuform .uk-button-primary:focus {
background: #0f7ae5;
color: #fff;
outline: none;
text-decoration: none;
}
.fuform .uk-button-primary:disabled {
background: #a0c8f8;
cursor: not-allowed;
}
/* Calendar / default button */
.fuform .uk-button-default {
background: #f8f8f8;
color: #333;
border-color: #c8c8c8;
}
.fuform .uk-button-default:hover {
background: #ebebeb;
}
/* ─── reCAPTCHA spacing ─────────────────────────────────────────────────── */
.fuform .rsform-type-recaptchav2 .formControls {
padding-top: 4px;
}
/* ─── Free-text / spacer block ──────────────────────────────────────────── */
.fuform .rsform-type-freetext p {
margin: 0;
color: transparent;
line-height: 1;
font-size: 1px;
}
/* ─── Success / error feedback banner (used by lead-forms.js) ───────────── */
.fuform .fu-form-banner {
padding: 10px 14px;
margin-bottom: 16px;
font-size: 13px;
font-weight: 600;
border-radius: 2px;
display: none;
}
.fuform .fu-form-banner.fu-success {
background: #dff0d8;
color: #2d6a2d;
border: 1px solid #b2d9b2;
}
.fuform .fu-form-banner.fu-error {
background: #f9e4e4;
color: #a02020;
border: 1px solid #f0c0c0;
}
/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
.fuform .uk-input,
.fuform .uk-select {
max-width: 100%;
}
}