
/* ===========================================================
   FBL  Forms - Unified CSS
   #part1 + #part2 Integrated and Cleaned 12.nov25
   =========================================================== */

/* Comment form wrapper */
.fbl-form,
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 99%;
  max-width: 600px;
  margin: 0 auto 0 0;
  padding: 1.5rem;
  background-color: #f9f9f9;
  border-radius: 8px;
  font-family: sans-serif;
}

/* Labels */
.fbl-form label {
  font-weight: bold;
  margin-bottom: 0.25rem;
  width: 8rem !important;
}

.comment-form-math-captcha label {
  font-weight: bold;
  margin: 0;
  white-space: nowrap;
}

/* ==============================================
   Inputs and textareas
   ============================================== */
.fbl-form input:not(.search-submit)[type="text"],
.fbl-form input[type="email"],
.fbl-form input[type="tel"],
.fbl-form input[type="url"],
.fbl-form input[type="number"],
.comment-form-author input,
.comment-form-email input,
.comment-form-phone input,
.comment-form-url input,
.comment-form textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #888;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1rem;
  font-family: inherit;
}
/*********************************************/     .fbl-form #message{  border: 1px solid #888;}
/* Focus style */
.fbl-form input:focus,
.fbl-form textarea:focus {
  border-color: #001630;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,22,48,0.2);
}

/* Textarea / comment box alignment */
.comment-form-comment textarea,
.fbl-form .checkboxpara {
  display: flex;
  flex: 0;
  align-items: center;
}

/* Checkbox styling */
.fbl-form input[type="checkbox"] {
  width: 1.8em !important;
  height: 1.8em !important;
  border: 1px solid #888 !important;
  border-radius: 4px !important;
}

/* Math captcha layout */
.comment-form-math-captcha {
  display: flex;
  align-items: center;
  vertical-align: middle;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.comment-form-math-captcha input,
.fbl-form input[type="number"],
.comment-form-math-captcha input[type="number"] {
  max-width: 3.2em !important;
  max-height: 1.8em !important;
  border: 1px solid #888 !important;
  border-radius: 4px !important;
}

.comment-form-math-captcha input,
.fbl-form input:focus[type="checkbox"],
.fbl-form input[type="number"]:focus {
  border: 1px solid #888 !important;
  outline: none !important;
}

.comment-form-cookies-consent input[type="checkbox"] {
  margin-right: 8px;
  vertical-align: middle;
}

/* Math captcha specific IDs */
#math_answer {
  max-width: 2rem !important;
  padding-left: 0;
  margin: 0;
}

#mathanswer {
  min-width: 300px !important;
  border: 0px dashed blue !important;
}

/* Form buttons */
.fbl-form .form-buttons {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  margin-top: 1rem;
}

/* Honeypot hidden */
.comment-form input[name="hp_email"] {
  display: none !important;
}

/* ===========================================================
   WordPress defaults cleanup and consistency
   =========================================================== */

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="tel"],
.comment-form input[type="url"],
.comment-form input[type="number"],
.comment-form textarea {
  width: 100%;
  box-sizing: border-box;
}
/* Hide honeypot field accessibly */
.comment-form input[name="hp_email"],
.honeypot-field {
  display: none !important;
}
/* ===========================================================
   Buttons
   =========================================================== */
.fbl-form [type="submit"],
input:not(.search-submit)[type="submit"],
#submit {
  background-color: #001630 !important;
  color: white !important;
  padding: .8em 3em;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  max-width: 12rem;
}

.fbl-form [type="submit"]:hover,
input:not(.search-submit)[type="submit"]:hover {
  background-color: #45a049;
}

input:not(.search-submit)[type="reset"] {
  background-color: #f44336;
  color: white;
  padding: .8em 3em;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
  vertical-align: middle;
  max-width: 12rem;
}

input:not(.search-submit)[type="reset"]:hover {
  background-color: #e53935;
}

.form-submit {
  display: flex;
  gap: .8rem;
  align-items: center;
  max-width: 12rem;
}

/* ===========================================================
   Accessibility helpers
   =========================================================== */
.screen-reader-text,
#reply-title,
.comment-reply-title {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  overflow: hidden;
}

/* ===========================================================
   Success / thank-you message
   =========================================================== */
.comment-success {
  background-color: #e9ffe9;
  border: 1px solid #7ac77a;
  color: #0b5d0b;
  padding: 1em 1.5em;
  border-radius: 0.375em;
  width: 80%;
  min-height: 4rem;
  max-width: 500px;
  font-size: 1rem;
  margin: 1rem auto;
  position: relative;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  display: none; /* hidden by default, in case you ever want JS control */
  z-index: 10;
}

.comment-success--visible {
  display: block;
  margin-bottom: 1rem;
  color: green;
}