/* =========================================
   Forminator Modern Design v2 - Kadence Palette
   ========================================= */

/* --- 1. Layout & Cards --- */

/* Main Group Cards (The White Containers) */
.forminator-ui.forminator-custom-form .forminator-field-group {
  background-color: var(--global-palette9);
  border: 1px solid var(--global-palette7);
  border-radius: 16px; /* Slightly more rounded */
  padding: 1rem 2.5rem !important;
  margin-bottom: 2.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05); /* Cleaner shadow */
}

/* Remove the default internal shadow from Forminator repeater fields */
.forminator-ui.forminator-custom-form .forminator-all-group-copies {
  box-shadow: none !important;
  margin: 0 !important;
  border: none !important;
}

/* Mobile Padding Adjustment */
@media (max-width: 768px) {
  .forminator-ui.forminator-custom-form .forminator-field-group {
    padding: 1.5rem;
  }
}

/* --- 2. Typography Hierarchy --- */

/* Section/Group Titles (Largest) */
.forminator-ui.forminator-custom-form .forminator-repeater-label {
  color: var(--global-palette1); /* Dark Blue */
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--global-palette7);
  padding-bottom: 0.5rem;
  display: block;
}

/* Field Labels (Medium - input titles) */
.forminator-ui.forminator-custom-form {
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.forminator-field-group > .forminator-label:first-child {
  color: var(--global-palette1); /* Almost Black */
  font-size: 2rem !important;
  text-align: center;
}

/* Standard Text & Descriptions (Smallest) */
.forminator-ui.forminator-custom-form .forminator-description,
.forminator-ui.forminator-custom-form input,
.forminator-ui.forminator-custom-form select,
.forminator-ui.forminator-custom-form textarea {
  font-size: 1rem;
}

/* Required Asterisk */
.forminator-ui.forminator-custom-form .forminator-required {
  color: #e53e3e;
}

/* --- 3. Inputs & Form Fields --- */

.forminator-ui.forminator-custom-form input.forminator-input,
.forminator-ui.forminator-custom-form textarea.forminator-textarea,
.forminator-ui.forminator-custom-form
  .forminator-select2
  + .select2-container
  .select2-selection {
  background-color: var(--global-palette8); /* Very light gray */
  border: 1px solid color-mix(in srgb, var(--global-palette6) 40%, white 60%);
  border-radius: 8px;
  color: var(--global-palette3);
  padding: 14px 18px;
  min-height: 50px;
  transition: all 0.2s ease-in-out;
}

/* Input Focus State - Brand Glow */
.forminator-ui.forminator-custom-form input.forminator-input:focus,
.forminator-ui.forminator-custom-form textarea.forminator-textarea:focus,
.forminator-ui.forminator-custom-form
  .forminator-select2
  + .select2-container.select2-container--open
  .select2-selection {
  background-color: var(--global-palette9);
  border-color: var(--global-palette2); /* Brand Blue */
  box-shadow: 0 0 0 4px rgba(2, 119, 180, 0.1);
  outline: none;
}

/* Force Phone Input to LTR */
.forminator-ui.forminator-custom-form input[type="tel"],
.forminator-ui.forminator-custom-form .iti__tel-input {
  direction: ltr !important;
  text-align: left !important;
}
/* Fix the flag container radius in RTL */
.forminator-ui.forminator-custom-form .iti__flag-container {
  border-radius: 0 8px 8px 0;
}

.forminator-iti-input.forminator-phone {
  & > div {
    left: 0 !important;
    right: auto !important;

    & > button {
      direction: ltr !important;
    }
  }
  & > input {
    padding-left: 83px !important;
    padding-right: 6px !important;
  }
}

/* The Individual Tile (Label) */
.forminator-ui.forminator-custom-form .forminator-radio-inline,
.forminator-ui.forminator-custom-form .forminator-checkbox-inline {
  background-color: var(--global-palette9);
  border: 1px solid var(--global-palette7);
  border-radius: 10px;
  padding: 16px 20px;

  /* Flexbox properties for the item itself */
  flex: 1 0 200px; /* Grow to fill, don't shrink too much, start at 200px width */
  display: flex;
  align-items: center;

  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden; /* Ensures hover effect stays inside border radius */
}

/* Hover Effect - Whole Tile */
.forminator-ui.forminator-custom-form .forminator-radio-inline:hover,
.forminator-ui.forminator-custom-form .forminator-checkbox-inline:hover {
  border-color: var(--global-palette2);
  background-color: var(--global-palette8);
  transform: translateY(-2px); /* Slight lift */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Checked State - Whole Tile */
.forminator-ui.forminator-custom-form
  input:checked
  + .forminator-radio-bullet
  + .forminator-radio-label,
.forminator-ui.forminator-custom-form
  input:checked
  + .forminator-checkbox-box
  + .forminator-checkbox-label {
  color: var(--global-palette1);
  font-weight: 700;
}

/* Highlight the border of the selected tile via sibling selector if possible,
   Note: CSS can't select parent based on child, so we style the bullet heavily
   to indicate selection, or use :has() if supported by your browsers.
   Below uses :has() for modern browsers */
.forminator-ui.forminator-custom-form
  .forminator-radio-inline:has(input:checked),
.forminator-ui.forminator-custom-form
  .forminator-checkbox-inline:has(input:checked) {
  border-color: var(--global-palette2);
  background-color: rgba(2, 119, 180, 0.05);
}

/* Custom Bullet/Checkbox Circles */
.forminator-ui.forminator-custom-form .forminator-radio-bullet,
.forminator-ui.forminator-custom-form .forminator-checkbox-box {
  margin-right: 0 !important;
  margin-left: 12px !important; /* RTL Spacing */
  width: 22px !important;
  height: 22px !important;
  background-color: var(--global-palette8) !important;
  border: 2px solid var(--global-palette5) !important;
}

/* Checked Bullet styling */
.forminator-ui.forminator-custom-form input:checked + .forminator-radio-bullet,
.forminator-ui.forminator-custom-form input:checked + .forminator-checkbox-box {
  background-color: var(--global-palette2) !important;
  border-color: var(--global-palette2) !important;
  box-shadow: inset 0 0 0 3px white; /* Creates the white dot inside */
}

/* --- 5. Submit Button --- */

.forminator-ui.forminator-custom-form .forminator-row-last {
  text-align: center; /* Centers the button container */
  margin-top: 2rem;
}

.forminator-ui.forminator-custom-form .forminator-button-submit {
  background-color: var(--global-palette2) !important;
  color: #ffffff !important;
  font-size: 1.2rem;
  font-weight: 700;

  /* Round Shape */
  border-radius: 50px;

  /* Size & Spacing */
  padding: 16px 60px;
  min-width: 200px;
  border: none;
  box-shadow: 0 4px 15px rgba(2, 119, 180, 0.3);
  transition: all 0.3s ease;
  display: inline-block;
}

.forminator-ui.forminator-custom-form .forminator-button-submit:hover {
  background-color: var(--global-palette1) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(2, 119, 180, 0.4);
}