:root {
  --cyan: #00aeef;
  --magenta: #ec008c;
  --green: #7ac143;
  --orange: #f47b20;
  --dark-blue: #2e3192;
  --white: #ffffff;
  --text-main: #333333;
  --text-muted: #666666;
  --light-bg: #f4f7f9;
  --border-color: #d1d9e2;
}

/* ==========================================================================
   1. FORM WRAPPER
   ========================================================================== */
.webform-submission-form {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Kelson Sans', system-ui, sans-serif;
  color: var(--text-main);
  padding: 40px 20px;
  background-color: var(--light-bg);
}

/* ==========================================================================
   2. FIELDSET "CARDS"
   ========================================================================== */
.webform-submission-form fieldset {
  background: var(--white);
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.03);
  padding: 40px;
  margin: 0 0 60px 0 !important;
  display: block;
}

.webform-submission-form > fieldset:nth-of-type(1) { border-top: 6px solid var(--cyan); }
.webform-submission-form > fieldset:nth-of-type(2) { border-top: 6px solid var(--green); }
.webform-submission-form > fieldset:nth-of-type(3) { border-top: 6px solid var(--orange); }

/* Pushes the first input down so it isn't glued to the title line */
.webform-submission-form fieldset > .fieldset-wrapper {
  padding-top: 20px;
}

/* Nested fieldsets (e.g. telephone) shouldn't inherit that top padding */
.webform-submission-form fieldset fieldset > .fieldset-wrapper {
  padding-top: 0 !important;
}

/* ==========================================================================
   3. CARD TITLES (LEGENDS)
   ========================================================================== */
.webform-submission-form fieldset > legend {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--dark-blue);
  text-align: left;
  width: 100%;
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 2px solid var(--light-bg);
}

/* ==========================================================================
   4. LABELS & DESCRIPTIONS
   ========================================================================== */
.webform-submission-form label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-main);
  margin-bottom: 8px;
  display: block;
}

.webform-submission-form .description,
.webform-submission-form .webform-element-description {
  margin-top: 4px;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
  display: block;
}

/* Prevent secret screen-reader labels from breaking layout or spawning asterisks */
.webform-submission-form label.visually-hidden,
.webform-submission-form .visually-hidden {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   5. INPUTS, SELECTS, TEXTAREAS
   ========================================================================== */
.webform-submission-form input[type="text"],
.webform-submission-form input.form-text,
.webform-submission-form input.form-email,
.webform-submission-form input.form-tel,
.webform-submission-form input.form-date,
.webform-submission-form select.form-select,
.webform-submission-form input.form-file {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--border-color) !important;
  background-color: #fafbfc !important;
  border-radius: 6px;
  font-size: 1.05rem;
  color: var(--text-main);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.webform-submission-form input.form-text:hover,
.webform-submission-form input.form-email:hover,
.webform-submission-form select.form-select:hover {
  border-color: #b5c0cd !important;
}

.webform-submission-form input.form-text:focus,
.webform-submission-form input.form-email:focus,
.webform-submission-form select.form-select:focus {
  outline: none !important;
  background-color: var(--white) !important;
}

/* Dynamic focus states per section color */
.webform-submission-form > fieldset:nth-of-type(1) input:focus,
.webform-submission-form > fieldset:nth-of-type(1) select:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.15) !important;
}
.webform-submission-form > fieldset:nth-of-type(2) input:focus,
.webform-submission-form > fieldset:nth-of-type(2) select:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(122, 193, 67, 0.15) !important;
}
.webform-submission-form > fieldset:nth-of-type(3) input:focus,
.webform-submission-form > fieldset:nth-of-type(3) select:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(244, 123, 32, 0.15) !important;
}

/* ==========================================================================
   6. SUBMIT BUTTON
   ========================================================================== */
.webform-submission-form input.webform-button--submit {
  display: block;
  margin: 10px auto 0 auto;
  background-color: var(--dark-blue);
  color: var(--white);
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  font-weight: 600;
  padding: 16px 40px;
  border: 2px solid var(--dark-blue);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.webform-submission-form input.webform-button--submit:hover {
  background-color: var(--white);
  color: var(--dark-blue);
}

/* ==========================================================================
   7. FIELD SPACING
   ========================================================================== */
.webform-submission-form .form-item {
  margin-bottom: 30px;
}
.webform-submission-form .form-item:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   8. RADIOS AS CLICKABLE CARDS
   ========================================================================== */
.webform-submission-form .form-radios {
  margin-top: 0 !important;
  margin-bottom: 20px;
}

.webform-submission-form .form-type-radios > .fieldset-wrapper {
  padding-top: 0 !important;
}

.webform-submission-form .form-type-radio {
  display: block;
  width: 100%;
  background-color: #fafbfc;
  border: 1.5px solid var(--border-color);
  padding: 18px;
  border-radius: 6px;
  margin-bottom: 12px;
  box-sizing: border-box;
  transition: all 0.2s ease;
  cursor: pointer;
  text-align: center;
}

.webform-submission-form .form-type-radio:hover {
  border-color: #b5c0cd;
  background-color: var(--white);
}

.webform-submission-form .form-type-radio input[type="radio"] {
  display: none !important;
}

.webform-submission-form .form-type-radio label {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0;
  cursor: pointer;
  display: block;
  width: 100%;
}

/* Selected state */
.webform-submission-form .form-type-radio:has(input[type="radio"]:checked) {
  background-color: rgba(122, 193, 67, 0.08) !important;
  border-color: var(--green) !important;
  box-shadow: 0 0 0 1px var(--green);
}

.webform-submission-form .form-type-radio:has(input[type="radio"]:checked) label {
  color: var(--green);
}

/* ==========================================================================
   9. INTRO HEADER CARD
   ========================================================================== */
.custom-intro-card {
  background: var(--white);
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.03);
  border-top: 6px solid var(--magenta);
  padding: 40px;
  margin: 0 0 60px 0;
  text-align: center;
}
.custom-intro-card .intro-title {
  color: var(--dark-blue);
  font-size: 2.5rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 16px;
}
.custom-intro-card .intro-text {
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 800px;
}
@media (max-width: 768px) {
  .custom-intro-card .intro-title {
    font-size: 2rem;
  }
}

/* ==========================================================================
   10. REQUIRED ASTERISKS
   ========================================================================== */
/* Hide every native/theme required marker (abbr-based and span-based) */
.webform-submission-form abbr,
.webform-submission-form .form-required--indicator {
  display: none !important;
}

/* Apply one consistent red asterisk to the label/legend itself
   (extra class selectors added for specificity, to beat any
   theme-native ::after with the same !important) */
.webform-submission-form label.form-label.form-required::after,
.webform-submission-form label.form-required::after,
.webform-submission-form legend.form-required::after {
  content: '*' !important;
  color: red !important;
  margin-left: 0.3em !important;
  background-image: none !important;
  background-color: transparent !important;
  display: inline-block !important;
}

/* Prevent the wrapping fieldset/div from adding a duplicate asterisk */
.webform-submission-form fieldset.form-required::after,
.webform-submission-form div.form-item.form-required::after {
  display: none !important;
  content: none !important;
}

/* Certificative Document: its "form-required" class is likely stripped
   by the field's own auto-upload JS behavior after page load, which
   silently breaks both the theme's asterisk and the rule above. Target
   it instead by its "for" attribute, which comes from the field's
   machine name and isn't touched by that script. */
.webform-submission-form label[for^="edit-certificative-document-upload"]::after {
  content: '*' !important;
  color: red !important;
  margin-left: 0.3em !important;
  display: inline-block !important;
}

/* ==========================================================================
   11. TELEPHONE FIELD (nested fieldset) STRUCTURE
   ========================================================================== */
.webform-submission-form fieldset fieldset {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 30px 0 !important;
}

.webform-submission-form fieldset fieldset > legend {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 8px !important;
}

.webform-submission-form input.form-tel,
.webform-submission-form .iti input {
  padding-left: 52px !important;
}

.webform-submission-form .form-type-webform-advanced-telephone .form-item {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.webform-submission-form fieldset fieldset {
  width: 100% !important;
  min-width: 0 !important;
}

/* ==========================================================================
   12. VALIDATION / ERROR STATES
   ========================================================================== */
/* Radio-card group: error message styling, matched to the same
   size/weight as the other error messages in the form */
.webform-submission-form fieldset.error > .fieldset-wrapper > div:first-child {
  color: red !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
}

/* Keep radio-card labels their normal color even when marked invalid
   (covers both "is-invalid" and plain "error" class conventions) */
.webform-submission-form .form-check-input.is-invalid ~ .form-check-label,
.webform-submission-form .form-check-input.error ~ .form-check-label {
  color: var(--text-main) !important;
}

/* File upload: show the real "please upload" message */
.webform-submission-form .form-item.has-error .invalid-feedback {
  display: block !important;
  color: red !important;
}

/* Kill the native browser "valid" checkmark icon everywhere in the form.
   Several inputs (file, tel) lack a native `required` attribute in the DOM,
   so the browser treats them as :valid by default and Bootstrap draws a
   green check background-image regardless of whether they're actually
   filled in. This form doesn't use Bootstrap's valid/invalid icon system
   at all, so it's removed globally rather than field-by-field. */
.webform-submission-form input:valid {
  background-image: none !important;
}

/* Show a red invalid icon on fields marked invalid. Bootstrap normally
   does this automatically via its own "is-invalid" class, but Drupal
   marks failed fields with a plain "error" class instead, so Bootstrap's
   built-in icon never triggers. This recreates the same icon, wired to
   Drupal's class instead. */
.webform-submission-form .form-control.error {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right calc(0.375em + 0.1875rem) center !important;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
  padding-right: calc(1.5em + 0.75rem) !important;
  border-color: #dc3545 !important;
}

/* Radio-card group: reorder the error message to appear below the
   options visually, since the actual HTML places it above them and
   we can't reorder Drupal's markup directly */
.webform-submission-form fieldset.error > .fieldset-wrapper {
  display: flex;
  flex-direction: column;
}
.webform-submission-form fieldset.error > .fieldset-wrapper > .form-radios {
  order: 1;
}
.webform-submission-form fieldset.error > .fieldset-wrapper > div:first-child {
  order: 2;
  margin-top: 8px;
}

img.qr-code {
  width: 100%;
  max-width: 750px; /* Adjust this to make it bigger or smaller */
  height: auto !important;
  object-fit: contain;
  display: block;
  margin: 20px 0; /* Adds spacing above and below */
}

.webform-submission-form .iti,
.webform-submission-form .iti.iti--allow-dropdown {
  width: 100% !important;
  display: block !important;
}

/* Target the input inside .iti regardless of its type attribute, 
   and override theme-imposed max-widths */
.webform-submission-form .iti input {
  width: 100% !important;
  max-width: 100% !important; 
  box-sizing: border-box !important;
}