/* ============================================================
   Contact Us page - star rating widget
   (All other contact/feedback/map styles already live in treatment.css.)
   The rating markup lists stars 5 -> 1, so we use row-reverse to allow the
   pure-CSS "fill on hover / checked" effect.
   ============================================================ */

.star-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 6px;
    font-size: 22px;
    line-height: 1;
}

/* Feedback star widget (injected into the FormBuilder form). Smaller size +
   put the "3 - Good" text on its own line below, matching the live site. */
.fb-star-rating {
    font-size: 20px;
    gap: 4px;
}
.feedback-fb-form .star-rating-text {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #c21048;
}
/* Star widget uses label.fb-star pointing at FormBuilder's real radios.
   Fill = .is-filled (set by JS from the checked radio); plus hover preview. */
.fb-star-rating {
    display: inline-flex;
    flex-direction: row-reverse;  /* labels appended 5->1; row-reverse shows 1..5 L→R */
    justify-content: flex-end;
}
.fb-star-rating .fb-star {
    cursor: pointer;
    color: #d9dee6;
    margin: 0;
    transition: color 0.15s ease, transform 0.15s ease;
}
.fb-star-rating .fb-star i { pointer-events: none; color: inherit; }
.fb-star-rating .fb-star.is-filled { color: #f5b301 !important; }
/* hover preview: highlight hovered star + the ones visually to its left
   (later in DOM under row-reverse) */
.fb-star-rating .fb-star:hover,
.fb-star-rating .fb-star:hover ~ .fb-star {
    color: #f5b301;
}
.fb-star-rating .fb-star:hover { transform: scale(1.1); }

.star-rating input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.star-rating label {
    cursor: pointer;
    color: #d9dee6;
    transition: color 0.2s ease, transform 0.15s ease;
    margin: 0;
}

.star-rating label i {
    pointer-events: none;
}

/* hover: highlight the hovered star and all that follow it visually
   (because of row-reverse, "later in DOM" = "to the left") */
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #f5b301;
}

/* checked: fill the selected star and all lower ones */
.star-rating input[type="radio"]:checked ~ label {
    color: #f5b301;
}

.star-rating label:hover {
    transform: scale(1.1);
}

.star-rating input[type="radio"]:focus-visible + label {
    outline: 2px solid rgba(240, 98, 146, 0.6);
    outline-offset: 2px;
    border-radius: 4px;
}

.star-rating-text {
    display: inline-block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #f06292;
}

/* Refresh Button */
.FormBuilder-contact-enquiry .FormBuilder.InputfieldForm .math-captcha-refresh {
    background: #ffffff !important;
    color: #c21048 !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    width: 44px !important;
    height: 44px !important;
}
.feedback-fb-form .FormBuilder.InputfieldForm .math-captcha-refresh {
    background: #ffffff !important;
    color: #c21048 !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    width: 44px !important;
    height: 44px !important;
}

/* ============================================================
   FormBuilder (Basic output) - match the live "Send a Message" design.
   FB markup: form.FormBuilder > ul.Inputfields > li.Inputfield >
              .InputfieldHeader (label) + .InputfieldContent (field)
   ============================================================ */

.form-section .FormBuilder ul.Inputfields,
.form-section .FormBuilder ul.Inputfields li.Inputfield {
    list-style: none;
    margin: 0;
    padding: 0;
}

.form-section .FormBuilder li.Inputfield {
    margin-bottom: 18px;
}

/* Field labels: keep them subtle (live form uses placeholders, not labels) */
.form-section .FormBuilder .InputfieldHeader {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #0c193e;
    margin-bottom: 8px;
}

/* Inputs + textarea: rounded pill/box like the live form */
.form-section .FormBuilder input[type="text"],
.form-section .FormBuilder input[type="email"],
.form-section .FormBuilder input[type="tel"],
.form-section .FormBuilder input[type="number"],
.form-section .FormBuilder input[type="url"],
.form-section .FormBuilder textarea,
.form-section .FormBuilder select {
    width: 100%;
    padding: 15px 20px!important;
    border: 1px solid #e5e5e7;
    border-radius: 10px;
    background: #ffffff;
    font-size: 15px;
    color: #333;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.form-section .FormBuilder textarea {
    min-height: 150px;
    resize: vertical;
}

.form-section .FormBuilder input:focus,
.form-section .FormBuilder textarea:focus,
.form-section .FormBuilder select:focus {
    border-color: #c21048;
    box-shadow: 0 0 0 3px rgba(194, 16, 72, 0.08);
}

/* Required asterisk + error styling */
.form-section .FormBuilder .InputfieldHeader .InputfieldRequiredStar {
    color: #c21048;
}

.form-section .FormBuilder .Inputfield.InputfieldStateError input,
.form-section .FormBuilder .Inputfield.InputfieldStateError textarea {
    border-color: #e53935;
}

.form-section .FormBuilder .InputfieldErrors,
.form-section .FormBuilder .InputfieldError {
    color: #e53935;
    font-size: 13px;
    margin-top: 6px;
    list-style: none;
    padding: 0;
}

/* Submit button -> match .theme-button.style-1 look */
.form-section .FormBuilder .InputfieldSubmit button,
.form-section .FormBuilder button[type="submit"],
.form-section .FormBuilder input[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #498e22;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 14px 34px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease;
}

.form-section .FormBuilder .InputfieldSubmit button:hover,
.form-section .FormBuilder button[type="submit"]:hover,
.form-section .FormBuilder input[type="submit"]:hover {
    background: #c21048;
    transform: translateY(-1px);
}

/* Success + error banners from FormBuilder */
.form-section .FormBuilder .FormBuilderSubmitted,
.form-section .FormBuilder .uk-alert-success,
.form-section .FormBuilder .NoticeSuccess {
    background: #eef8e6;
    border: 1px solid #cfe8bd;
    color: #2f6b12;
    padding: 16px 20px;
    border-radius: 14px;
}

.form-section .FormBuilder .NoticeError,
.form-section .FormBuilder .uk-alert-danger {
    background: #fdecea;
    border: 1px solid #f5c6c2;
    color: #b3261e;
    padding: 14px 18px;
    border-radius: 14px;
}

/* The injected math captcha row spacing inside the FB form */
.form-section .FormBuilder .fb-captcha-row {
    margin: 4px 0 18px;
}

/* Inline captcha validation message (shown under the answer input, like the
   live site - no browser alert popup). */
.fb-captcha-error {
    color: #e53935;
    font-size: 13px;
    margin-top: 6px;
}
.fb-captcha-row.has-error .math-captcha-input {
    border-color: #e53935;
}

/* --------------------------------------------------------------
   Feedback form (FormBuilder) - reuse the same field styling as the
   contact form, plus the star rating widget.
   -------------------------------------------------------------- */
.feedback-fb-form .FormBuilder ul.Inputfields,
.feedback-fb-form .FormBuilder ul.Inputfields li.Inputfield {
    list-style: none;
    margin: 0;
    padding: 0;
}
.feedback-fb-form .FormBuilder li.Inputfield { margin-bottom: 18px; }

.feedback-fb-form .FormBuilder input[type="text"],
.feedback-fb-form .FormBuilder input[type="email"],
.feedback-fb-form .FormBuilder input[type="tel"],
.feedback-fb-form .FormBuilder input[type="number"],
.feedback-fb-form .FormBuilder textarea,
.feedback-fb-form .FormBuilder select {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid #e5e5e7;
    border-radius: 10px;
    background: #ffffff;
    font-size: 15px;
    color: #333;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.feedback-fb-form .FormBuilder textarea { min-height: 130px; resize: vertical; }
.feedback-fb-form .FormBuilder input:focus,
.feedback-fb-form .FormBuilder textarea:focus,
.feedback-fb-form .FormBuilder select:focus {
    border-color: #c21048;
    box-shadow: 0 0 0 3px rgba(194, 16, 72, 0.08);
}
.feedback-fb-form .FormBuilder .InputfieldHeader,
.feedback-fb-form .FormBuilder label.InputfieldHeader { /* hidden via JS too */ }

.feedback-fb-form .FormBuilder .InputfieldSubmit button,
.feedback-fb-form .FormBuilder button[type="submit"],
.feedback-fb-form .FormBuilder input[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #498e22;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 14px 34px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease;
}
.feedback-fb-form .FormBuilder .InputfieldSubmit button:hover,
.feedback-fb-form .FormBuilder button[type="submit"]:hover,
.feedback-fb-form .FormBuilder input[type="submit"]:hover {
    background: #c21048;
    transform: translateY(-1px);
}
.feedback-fb-form .FormBuilder .fb-captcha-row { margin: 4px 0 18px; }

/* --------------------------------------------------------------
   Hide FormBuilder's TOP error summary (the stacked red "Missing required
   value" banners above the form) for both the contact and feedback forms.
   Per-field inline errors under each input are kept. FormBuilder Basic output
   renders this summary as an alert/notice/error block directly inside the form
   (before the .Inputfields list) or as a .InputfieldForm level notice.
   -------------------------------------------------------------- */
/* FormBuilder renders the top error summary as <div class="FormBuilderErrors">
   (a sibling of <form>, inside the .FormBuilder wrapper). Hide it on both forms.
   Per-field inline errors are .input-error inside each .Inputfield and stay. */
.form-section .FormBuilder .FormBuilderErrors,
.feedback-fb-form .FormBuilder .FormBuilderErrors {
    display: none !important;
}

/* Success message shown after redirect (?sent=1 / ?fsent=1) */
.form-section .fb-success-message,
.feedback-form-card .fb-success-message {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #eef8e6;
    border: 1px solid #cfe8bd;
    color: #2f6b12;
    padding: 18px 22px;
    border-radius: 14px;
    font-size: 15px;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}
.form-section .fb-success-message i,
.feedback-form-card .fb-success-message i {
    color: #498e22;
    font-size: 20px;
}

/* --------------------------------------------------------------
   FIX: the decorative .form-section::before overlay was covering the
   FormBuilder inputs and eating clicks/keystrokes (couldn't type).
   The old static form escaped it via .form-group{z-index:1}; FormBuilder
   uses .Inputfield, so lift the whole FB form above the overlay and make
   the overlay non-interactive.
   -------------------------------------------------------------- */
.form-section::before,
.feedback-form-card::before {
    pointer-events: none;
}
.form-section .FormBuilder,
.feedback-fb-form .FormBuilder {
    position: relative;
    z-index: 2;
}

/* Live design uses placeholders, not labels: hide every FormBuilder field label
   (FB may render it as .InputfieldHeader or a <label>). The captcha's own label
   is inside .math-captcha, so it is NOT affected. */
.form-section .FormBuilder .InputfieldHeader,
.form-section .FormBuilder label.InputfieldHeader,
.form-section .FormBuilder li.Inputfield > label,
.form-section .FormBuilder .Inputfield > .InputfieldHeader {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Hide FormBuilder's top error/notice SUMMARY (the red stacked messages above
   the form). Per-field inline errors under each input are kept. */
.form-section .FormBuilder > .uk-alert-danger,
.form-section .FormBuilder .NoticeErrors,
.form-section .FormBuilder .InputfieldForm > .Inputfields > .InputfieldErrorsList,
.form-section .FormBuilder .FormBuilderErrors,
.form-section .FormBuilder ul.pw-errors,
.form-section .FormBuilder .ui-state-error {
    display: none !important;
}