/**
 * Formulaires (com_siteforms) - generic look of the forms that do not use a template presentation
 * (no "presentation-*" class suffix). Original stylesheet (not a copy of Convert Forms) consuming the
 * same CSS variables and class names as the Convert Forms markup:
 *   root "cf"  : --color-primary/success/danger/warning/default/grey (global block)
 *   "#cf_N"    : --font, --max-width, --background-color, --border, --border-radius, --padding, --control-gap,
 *                --label-color/size/weight, --input-color/placeholder-color/text-align/background-color/
 *                border-color/border-radius/size/padding (form block)
 *   group      : --button-*, --heading-*, --height (field blocks)
 * Every rule is scoped to ".cf:not([class*="presentation-"])" so that the SOCOBAT presentation forms are never
 * affected, even when this file is loaded.
 *
 * @copyright   (C) 2026 SOCOBAT
 * @license     GNU General Public License version 3 or later
 */

.cf:not([class*="presentation-"]) {
  --sf-gap: var(--control-gap, 10px);
  box-sizing: border-box;
  max-width: var(--max-width, 100%);
  margin: 0 0 1.5rem;
  padding: var(--padding, 0);
  border: var(--border, 0);
  border-radius: var(--border-radius, 0);
  background-color: var(--background-color, transparent);
  font-family: var(--font, inherit);
  color: var(--input-color, #444);
  line-height: 1.5;
  overflow: hidden;
}

.cf:not([class*="presentation-"]) *,
.cf:not([class*="presentation-"]) *::before,
.cf:not([class*="presentation-"]) *::after {
  box-sizing: border-box;
}

.cf:not([class*="presentation-"]).cf-isCentered {
  margin-right: auto;
  margin-left: auto;
}

.cf:not([class*="presentation-"]) > form {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

/* Columns (content + form) */
.cf:not([class*="presentation-"]) .cf-col-16 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 768px) {
  .cf:not([class*="presentation-"]) .cf-col-medium-4 { flex: 0 0 25%; max-width: 25%; }
  .cf:not([class*="presentation-"]) .cf-col-medium-5 { flex: 0 0 31.25%; max-width: 31.25%; }
  .cf:not([class*="presentation-"]) .cf-col-medium-6 { flex: 0 0 37.5%; max-width: 37.5%; }
  .cf:not([class*="presentation-"]) .cf-col-medium-8 { flex: 0 0 50%; max-width: 50%; }
  .cf:not([class*="presentation-"]) .cf-col-medium-10 { flex: 0 0 62.5%; max-width: 62.5%; }
  .cf:not([class*="presentation-"]) .cf-col-medium-11 { flex: 0 0 68.75%; max-width: 68.75%; }
  .cf:not([class*="presentation-"]) .cf-col-medium-12 { flex: 0 0 75%; max-width: 75%; }
}

.cf:not([class*="presentation-"]) .cf-content-wrap { padding: var(--sf-gap); }
.cf:not([class*="presentation-"]) .cf-content-img img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.cf:not([class*="presentation-"]) .cf-content-text { margin-top: var(--sf-gap); }

@media (max-width: 767px) {
  .cf:not([class*="presentation-"]) .cf-hide-mobile { display: none; }
}

.cf:not([class*="presentation-"]) .cf-form-wrap { padding: 0; }

/* Response box */
.cf:not([class*="presentation-"]) .cf-response {
  display: none;
  margin: 0 0 var(--sf-gap);
  padding: 12px 15px;
  border-radius: var(--input-border-radius, 3px);
  font-size: var(--label-size, 16px);
}

.cf:not([class*="presentation-"]).cf-success .cf-response,
.cf:not([class*="presentation-"]).cf-error .cf-response { display: block; }

.cf:not([class*="presentation-"]).cf-success .cf-response {
  background-color: color-mix(in srgb, var(--color-success, #0F9D58) 12%, #fff);
  color: var(--color-success, #0F9D58);
}

.cf:not([class*="presentation-"]).cf-error .cf-response {
  background-color: color-mix(in srgb, var(--color-danger, #d73e31) 10%, #fff);
  color: var(--color-danger, #d73e31);
}

.cf:not([class*="presentation-"]).cf-success.cf-success-hideform .cf-fields,
.cf:not([class*="presentation-"]).cf-success.cf-success-hideform .cf-footer { display: none; }

.cf:not([class*="presentation-"]).cf-success.cf-success-hidetext .cf-content-wrap { display: none; }

/* Fields and control groups */
.cf:not([class*="presentation-"]) .cf-fields {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--sf-gap) / -2);
}

.cf:not([class*="presentation-"]) .cf-control-group {
  flex: 0 0 100%;
  max-width: 100%;
  margin: 0 0 var(--sf-gap);
  padding: 0 calc(var(--sf-gap) / 2);
  min-width: 0;
  border: 0;
}

.cf:not([class*="presentation-"]) fieldset.cf-control-group { margin-inline: 0; }
.cf:not([class*="presentation-"]) .cf-control-group.cf-one-half { flex-basis: 50%; max-width: 50%; }
.cf:not([class*="presentation-"]) .cf-control-group.cf-one-third { flex-basis: 33.3333%; max-width: 33.3333%; }
.cf:not([class*="presentation-"]) .cf-control-group.cf-two-thirds { flex-basis: 66.6666%; max-width: 66.6666%; }
.cf:not([class*="presentation-"]) .cf-control-group.cf-one-fourth { flex-basis: 25%; max-width: 25%; }
.cf:not([class*="presentation-"]) .cf-control-group.cf-two-fourths { flex-basis: 50%; max-width: 50%; }

@media (max-width: 575px) {
  .cf:not([class*="presentation-"]) .cf-control-group.cf-one-half,
  .cf:not([class*="presentation-"]) .cf-control-group.cf-one-third,
  .cf:not([class*="presentation-"]) .cf-control-group.cf-two-thirds,
  .cf:not([class*="presentation-"]) .cf-control-group.cf-one-fourth,
  .cf:not([class*="presentation-"]) .cf-control-group.cf-two-fourths { flex-basis: 100%; max-width: 100%; }
}

.cf:not([class*="presentation-"]) .cf-hide,
.cf:not([class*="presentation-"]) .cf-control-group.cf-hide { display: none !important; }

.cf:not([class*="presentation-"]) .cf-sr-only,
.cf:not([class*="presentation-"]) .cf-field-hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cf:not([class*="presentation-"]) .cf-control-label { margin: 0 0 6px; }

.cf:not([class*="presentation-"]) .cf-label,
.cf:not([class*="presentation-"]) legend.cf-label {
  display: block;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--label-color, #585858);
  font-size: var(--label-size, 16px);
  font-weight: var(--label-weight, 400);
  line-height: 1.4;
}

.cf:not([class*="presentation-"]) .cf-required-label {
  margin-left: 3px;
  color: var(--color-danger, #d73e31);
}

.cf:not([class*="presentation-"]) .cf-control-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cf:not([class*="presentation-"]) .cf-control-input-desc {
  color: var(--label-color, #585858);
  font-size: 0.85em;
  opacity: 0.85;
}

/* Label positions */
@media (min-width: 576px) {
  .cf:not([class*="presentation-"]).cf-labelpos-left .cf-control-group:not(fieldset) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .cf:not([class*="presentation-"]).cf-labelpos-left .cf-control-group:not(fieldset) .cf-control-label {
    flex: 0 0 30%;
    max-width: 30%;
    padding: calc(var(--input-padding-v, 12px) / 2) var(--sf-gap) 0 0;
  }

  .cf:not([class*="presentation-"]).cf-labelpos-left .cf-control-group:not(fieldset) .cf-control-input { flex: 1 1 0; }
}

/* Inputs */
.cf:not([class*="presentation-"]) .cf-input,
.cf:not([class*="presentation-"]) .cf-select select {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: var(--input-padding, 12px 12px);
  border: 1px solid var(--input-border-color, #ccc);
  border-radius: var(--input-border-radius, 0);
  background-color: var(--input-background-color, #fff);
  color: var(--input-color, #585858);
  font: inherit;
  font-size: var(--input-size, 16px);
  line-height: 1.3;
  text-align: var(--input-text-align, left);
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
}

.cf:not([class*="presentation-"]) textarea.cf-input { min-height: 3em; resize: vertical; }

.cf:not([class*="presentation-"]) .cf-input::placeholder { color: var(--input-placeholder-color, #58585870); opacity: 1; }

.cf:not([class*="presentation-"]) .cf-input:focus,
.cf:not([class*="presentation-"]) .cf-select select:focus {
  border-color: var(--color-primary, #4285F4);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #4285F4) 25%, transparent);
}

.cf:not([class*="presentation-"]) .cf-input[readonly] { opacity: 0.75; }

.cf:not([class*="presentation-"]) .cf-input.cf-width-auto,
.cf:not([class*="presentation-"]) .cf-select.cf-width-auto select { width: auto; }

.cf:not([class*="presentation-"]) .cf-select { position: relative; }

.cf:not([class*="presentation-"]) .cf-select::after {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--input-color, #585858);
  border-bottom: 2px solid var(--input-color, #585858);
  transform: rotate(45deg);
  content: "";
  pointer-events: none;
}

.cf:not([class*="presentation-"]) .cf-select select { padding-right: 36px; }

/* Choice lists */
.cf:not([class*="presentation-"]) .cf-list { display: grid; gap: 6px 16px; }
.cf:not([class*="presentation-"]) .cf-list-2-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cf:not([class*="presentation-"]) .cf-list-3-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cf:not([class*="presentation-"]) .cf-list-auto-columns { display: flex; flex-wrap: wrap; }

.cf:not([class*="presentation-"]) .cf-radio-group,
.cf:not([class*="presentation-"]) .cf-checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.cf:not([class*="presentation-"]) .cf-radio-group .cf-input,
.cf:not([class*="presentation-"]) .cf-checkbox-group .cf-input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  padding: 0;
  appearance: auto;
  accent-color: var(--color-primary, #4285F4);
}

.cf:not([class*="presentation-"]) .cf-radio-group .cf-label,
.cf:not([class*="presentation-"]) .cf-checkbox-group .cf-label {
  color: var(--input-color, #585858);
  font-size: var(--input-size, 16px);
  cursor: pointer;
}

/* Password */
.cf:not([class*="presentation-"]) .cf-password { position: relative; }
.cf:not([class*="presentation-"]) .cf-password .cf-input { padding-right: 48px; }

.cf:not([class*="presentation-"]) .cf-password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  display: flex;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--input-color, #585858);
  transform: translateY(-50%);
  cursor: pointer;
}

/* Submit button */
.cf:not([class*="presentation-"]) .cf-text-left { text-align: left; }
.cf:not([class*="presentation-"]) .cf-text-center { text-align: center; }
.cf:not([class*="presentation-"]) .cf-text-right { text-align: right; }

.cf:not([class*="presentation-"]) .cf-btn {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: var(--button-padding, 13px 20px);
  border: 0;
  border-radius: var(--button-border-radius, 3px);
  background-color: var(--button-background-color, var(--color-primary, #4285F4));
  color: var(--button-color, #fff);
  font: inherit;
  font-size: var(--button-font-size, 16px);
  line-height: 1.3;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.cf:not([class*="presentation-"]) .cf-btn.cf-width-auto { width: auto; }
.cf:not([class*="presentation-"]) .cf-btn.cf-one-third { width: 33.3333%; }
.cf:not([class*="presentation-"]) .cf-btn.cf-one-half { width: 50%; }
.cf:not([class*="presentation-"]) .cf-btn:hover,
.cf:not([class*="presentation-"]) .cf-btn:focus-visible { filter: brightness(1.08); }

.cf:not([class*="presentation-"]) .cf-spinner-container {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}

.cf:not([class*="presentation-"]).cf-working .cf-btn-text { visibility: hidden; }
.cf:not([class*="presentation-"]).cf-working .cf-spinner-container { display: flex; }
.cf:not([class*="presentation-"]).cf-disabled .cf-btn { pointer-events: none; opacity: 0.75; }

.cf:not([class*="presentation-"]) .cf-spinner > span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 3px;
  border-radius: 100%;
  background-color: var(--button-color, #fff);
  animation: sf-bounce 1.4s infinite ease-in-out both;
}

.cf:not([class*="presentation-"]) .cf-spinner .bounce1 { animation-delay: -0.32s; }
.cf:not([class*="presentation-"]) .cf-spinner .bounce2 { animation-delay: -0.16s; }

@keyframes sf-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cf:not([class*="presentation-"]) .cf-spinner > span { animation: none; }
}

/* Layout fields */
.cf:not([class*="presentation-"]) .cf-heading {
  margin: 0;
  font-family: var(--heading-font-family, inherit);
  font-size: var(--heading-font-size, 22px);
  line-height: var(--heading-line-height, 1.3);
  letter-spacing: var(--heading-letter-spacing, 0);
  text-align: var(--heading-text-align, left);
}

.cf:not([class*="presentation-"]) .cf-divider { width: 100%; height: 0; }

/* Captchas */
.cf:not([class*="presentation-"]) .captcha-container { display: flex; align-items: center; gap: var(--sf-gap); }
.cf:not([class*="presentation-"]) .captcha-equation { flex: 0 0 auto; font-weight: 600; white-space: nowrap; }
.cf:not([class*="presentation-"]) .cf-recaptcha-v3-text-badge { font-size: 0.8em; opacity: 0.8; }
.cf:not([class*="presentation-"]) .g-recaptcha,
.cf:not([class*="presentation-"]) .h-captcha,
.cf:not([class*="presentation-"]) .cf-turnstile { max-width: 100%; overflow: hidden; }

/* File upload (native control) */
.cf:not([class*="presentation-"]) input[type="file"].cf-input { padding: 8px; cursor: pointer; }

/* Editor */
.cf:not([class*="presentation-"]) .cf-control-group[data-type="editor"] iframe { min-height: var(--height, 300px); }

/* Footer */
.cf:not([class*="presentation-"]) .cf-footer { margin-top: var(--sf-gap); font-size: 0.85em; opacity: 0.85; }

@media (max-width: 575px) {
  .cf:not([class*="presentation-"]) .cf-list-2-columns,
  .cf:not([class*="presentation-"]) .cf-list-3-columns { grid-template-columns: minmax(0, 1fr); }
}