/* Reset box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Base page styling */
body {
  margin: 0;
  padding: 20px;
  font-family: 'RTLUnited', Arial, sans-serif;
  background: transparent;
  color: #333;
}

/* Remove default margin/padding for html/body for full width iframe compatibility */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Form container & success page */
#formContainer,
#successPage {
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
  background: #fff;
  border-radius: 4px;
  text-align: left !important;
}

#formContainer {
  margin: 0 !important;
  padding: 0 !important;
}

/* Success page: force all content left aligned */
#successPage {
  text-align: left !important;
}
.success-header {
  display: flex;
  align-items: flex-start !important;
  margin-bottom: 2rem;
  justify-content: flex-start !important;
  text-align: left !important;
}
#successPage .summary-item {
  text-align: left !important;
}

/* SVG sized to 1.25rem (same as before) and centered in its circle */
.success-header svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-right: 0.5rem;
}

/* Text at 1.25rem, bold, green, no extra margins */
.success-text {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: bold;
  color: #28a745;
  margin: 0;
  line-height: 1;
}

/* Summary items */
.summary-item {
  margin-bottom: .75rem;
}
.summary-item span:first-child {
  font-weight: bold;
  text-align: left !important;
}

/* Grid layout */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1rem;
}

/* Inputs (bottom border only, minimal style, black text) */
.form-control,
.form-select {
  border: none !important;
  border-bottom: 1px solid #ccc !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #000 !important;
  box-shadow: none !important;
}

/* Hide native placeholder text */
.form-control::placeholder,
textarea.form-control::placeholder {
  color: transparent !important;
}

/* Label always grey */
.form-floating > label {
  color: #6c757d !important;
}

/* Label stays grey when focused or filled */
.form-control:focus ~ label,
.form-control:not(:placeholder-shown) ~ label {
  color: #6c757d !important;
}

/* Select placeholder grey when invalid/disabled */
.form-select:invalid,
.form-select:disabled {
  color: #6c757d !important;
}

/* Custom open chevron for selects */
.form-select {
  appearance: none !important;
  padding-right: 2.5rem !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpolyline points='1,1 7,7 13,1' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 1rem !important;
}
.form-floating > .form-select {
  height: calc(3.5rem + 2px); /* matches .form-control height in .form-floating */
  padding-top: 1.625rem;
  padding-bottom: .625rem;
}
.form-floating > label {
  left: 0.75rem;
}
/* Make textarea bigger & non-resizable */
.form-floating > textarea.form-control {
  height: 200px;
  resize: none;
}

/* Checkbox + warning text */
.checkbox-group {
  margin-top: 1rem;
  display: flex;
  align-items: center;
}
/* Custom black checkbox */
.checkbox-group input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.15rem;       /* Slight rounding */
  border: 2px solid #6c757d;       /* Subtle border when unchecked */
  background-color: #fff;       /* White background unchecked */
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: all 0.2s ease-in-out;
  margin-right: .5rem;
}

/* Checked: dark background */
.checkbox-group input[type="checkbox"]:checked {
  background-color: #111827;    /* Near-black (same as Tailwind/Bootstrap dark) */
  border-color: #111827;
}

/* White checkmark */
.checkbox-group input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 5px;
  width: 6px;
  height: 13px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.warning-text {
  display: flex;
  align-items: center;
  margin-top: .25rem;
  font-size: .85rem;
  color: #666;
}
.warning-icon {
  margin-right: .5rem;
  color: #ffcc00;
}

/* Button styles, including loading/disabled state */
button,
#submitBtn {
  margin-top: 1.5rem;
  padding: 14px 24px;
  width: 100%;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: opacity .2s;
}
button:disabled,
#submitBtn:disabled,
#submitBtn.loading {
  opacity: .6;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  cursor: not-allowed;
}

/* FORCE ALL CONTENT IN SUCCESS PAGE TO LEFT ALIGN, OVERRIDING EVERYTHING */
#successPage,
#successPage * {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#successPage .summary-item,
#successPage .success-header {
  width: 100% !important;
  display: block !important;
}