/*
 * IITA ICT Portal  Gravity Forms Complete Stylesheet v2.0
 * File: assets/gravity-forms.css
 *
 * Covers ALL Gravity Forms input types site-wide.
 */

:root {
  --iita-primary: #FF5722;
  --iita-primary-dark: #F4511E;
  --iita-primary-light: rgba(255, 87, 34, .1);
  --iita-primary-glow: rgba(255, 87, 34, .18);
  --iita-border: #d1d5db;
  --iita-border-focus: #FF5722;
  --iita-bg: #fafafa;
  --iita-bg-focus: #ffffff;
  --iita-text: #111827;
  --iita-text-muted: #6b7280;
  --iita-text-label: #374151;
  --iita-radius: 9px;
  --iita-radius-sm: 6px;
  --iita-radius-lg: 12px;
  --iita-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  --iita-shadow-focus: 0 0 0 3.5px rgba(255, 87, 34, .13);
  --iita-error: #ef4444;
  --iita-error-bg: #fef2f2;
  --iita-success: #10b981;
  --iita-success-bg: #f0fdf4;
}


/* ═══ WRAPPER ═══ */
.gform_wrapper,
.gform_wrapper.gravity-theme {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  max-width: 100% !important;
  color: var(--iita-text) !important
}

.gform_wrapper .gform_body {
  margin: 0 !important
}

/* ═══ FIELD GRID ═══ */
.gform_wrapper .gfields,
.gform_wrapper .gform_fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important
}

.gform_wrapper .gfield {
  margin-bottom: 20px !important;
  padding: 0 !important
}

.gform_wrapper .gfield--width-full,
.gform_wrapper .gfield--type-textarea,
.gform_wrapper .gfield--type-html,
.gform_wrapper .gfield--type-section,
.gform_wrapper .gfield--type-captcha,
.gform_wrapper .gfield--type-fileupload,
.gform_wrapper .gfield--type-post_image,
.gform_wrapper .gfield--type-multiselect,
.gform_wrapper .gfield--type-list,
.gform_wrapper .gfield--type-radio,
.gform_wrapper .gfield--type-checkbox,
.gform_wrapper .gfield--type-consent,
.gform_wrapper .gfield--type-signature,
.gform_wrapper .gfield--type-name,
.gform_wrapper .gfield--type-address,
.gform_wrapper .gfield--type-product,
.gform_wrapper .gfield--type-total,
.gform_wrapper .gfield--type-shipping,
.gform_wrapper .gfield--type-donation,
.gform_wrapper .gfield--type-option,
.gform_wrapper .gfield--type-quantity,
.gform_wrapper .gfield--type-survey,
.gform_wrapper .gfield--type-quiz,
.gform_wrapper .gfield--type-repeater,
.gform_wrapper .gfield_html,
.gform_wrapper .gfield_submit,
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
  grid-column: 1/-1 !important
}

.gform_wrapper .gfield--width-half {
  grid-column: span 1 !important
}

/* ═══ SECTION ═══ */
.gform_wrapper .gsection {
  border: none !important;
  border-bottom: 2px solid var(--iita-primary) !important;
  margin: 8px 0 24px !important;
  padding-bottom: 10px !important;
  grid-column: 1/-1 !important
}

.gform_wrapper .gsection_title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important
}

.gform_wrapper .gsection_description {
  font-size: 12.5px !important;
  color: var(--iita-text-muted) !important;
  margin-top: 4px !important
}

/* ═══ LABELS ═══ */
.gform_wrapper .gfield_label,
label.gfield_label {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--iita-text-label) !important;
  margin-bottom: 7px !important;
  display: block !important;
  letter-spacing: .1px !important
}

.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required_text {
  color: var(--iita-primary) !important;
  margin-left: 2px !important
}

.gform_wrapper .gfield_description {
  font-size: 11.5px !important;
  color: var(--iita-text-muted) !important;
  margin-top: 5px !important;
  line-height: 1.5 !important
}

.gform_wrapper .ginput_complex .gfield_label,
.gform_wrapper .ginput_complex label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--iita-text-muted) !important;
  margin-bottom: 4px !important;
  margin-top: 10px !important;
  display: block !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important
}

/* ═══ BASE TEXT INPUTS ═══ */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="search"],
.gform_wrapper input.datepicker,
.gform_wrapper input.timepicker,
.gform_wrapper input.gform_datepicker,
.gform_wrapper input.gf_datepicker,
.gform_wrapper .ginput_container input[type="text"] {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1.5px solid var(--iita-border) !important;
  border-radius: var(--iita-radius) !important;
  font-size: 13.5px !important;
  font-family: inherit !important;
  color: var(--iita-text) !important;
  background: var(--iita-bg) !important;
  box-shadow: var(--iita-shadow) !important;
  transition: border-color .2s, box-shadow .2s, background .2s !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 1.5 !important
}

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="password"]:focus,
.gform_wrapper input.datepicker:focus,
.gform_wrapper input.timepicker:focus,
.gform_wrapper .ginput_container input[type="text"]:focus {
  border-color: var(--iita-border-focus) !important;
  background: var(--iita-bg-focus) !important;
  box-shadow: var(--iita-shadow-focus) !important
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
  color: #9ca3af !important;
  font-size: 13px !important
}

/* ═══ TEXTAREA ═══ */
.gform_wrapper textarea,
.gform_wrapper textarea.medium,
.gform_wrapper textarea.large,
.gform_wrapper textarea.small {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1.5px solid var(--iita-border) !important;
  border-radius: var(--iita-radius) !important;
  font-size: 13.5px !important;
  font-family: inherit !important;
  color: var(--iita-text) !important;
  background: var(--iita-bg) !important;
  min-height: 128px !important;
  resize: vertical !important;
  line-height: 1.65 !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: var(--iita-shadow) !important;
  transition: border-color .2s, box-shadow .2s, background .2s !important
}

.gform_wrapper textarea:focus {
  border-color: var(--iita-border-focus) !important;
  background: var(--iita-bg-focus) !important;
  box-shadow: var(--iita-shadow-focus) !important
}

/* ═══ SELECT ═══ */
.gform_wrapper select,
.gform_wrapper .ginput_container select {
  width: 100% !important;
  padding: 11px 40px 11px 14px !important;
  border: 1.5px solid var(--iita-border) !important;
  border-radius: var(--iita-radius) !important;
  font-size: 13.5px !important;
  font-family: inherit !important;
  color: var(--iita-text) !important;
  background-color: var(--iita-bg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: var(--iita-shadow) !important;
  transition: border-color .2s, box-shadow .2s !important
}

.gform_wrapper select:focus {
  border-color: var(--iita-border-focus) !important;
  background-color: var(--iita-bg-focus) !important;
  box-shadow: var(--iita-shadow-focus) !important
}

/* ═══ MULTI-SELECT (improved) ═══ */
.ginput_container.ginput_container_multiselect select[multiple] {
  padding: 6px !important;
  background-image: none !important;
  min-height: 140px !important;
  border: 1.5px solid var(--iita-border) !important;
  border-radius: var(--iita-radius) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 13.5px !important;
  color: var(--iita-text) !important;
  outline: none !important;
  overflow-y: auto !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: border-color .2s, box-shadow .2s !important;
  line-height: 1.5 !important;
}

.ginput_container.ginput_container_multiselect select[multiple]:focus {
  border-color: var(--iita-primary) !important;
  box-shadow: 0 0 0 3px rgba(255, 87, 34, .12) !important;
}

/* Each option row */
.ginput_container.ginput_container_multiselect select[multiple] option {
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
  color: #1e293b !important;
  cursor: pointer !important;
  transition: background .15s !important;
}

.ginput_container.ginput_container_multiselect select[multiple] option:hover {
  background: #fff5f2 !important;
  color: var(--iita-primary) !important;
}

/* Selected items */
.ginput_container.ginput_container_multiselect select[multiple] option:checked,
.ginput_container.ginput_container_multiselect select[multiple] option:checked:focus {
  background: var(--iita-primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Helper hint shown below the multiselect */
.gform_wrapper .gfield--type-multiselect .gfield_description::before {
  content: "Hold Ctrl (Windows) or ⌘ (Mac) to select multiple options. ";
  font-weight: 600;
  color: var(--iita-primary) !important;
}

/* Label alignment for multiselect */
.gform_wrapper .gfield--type-multiselect .gfield_label {
  margin-bottom: 8px !important;
}


/* ═══ DATEPICKER ═══ */
.ui-datepicker {
  font-family: inherit !important;
  border: 1.5px solid var(--iita-border) !important;
  border-radius: var(--iita-radius-lg) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .14) !important;
  padding: 12px !important;
  background: #fff !important;
  z-index: 9999 !important
}

.ui-datepicker .ui-datepicker-header {
  background: linear-gradient(135deg, #0f172a, #1e293b) !important;
  border: none !important;
  border-radius: var(--iita-radius) !important;
  color: #fff !important;
  padding: 10px !important;
  margin-bottom: 8px !important
}

.ui-datepicker .ui-datepicker-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1a0303 !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  top: 8px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  background: rgba(255, 255, 255, .12) !important;
  border: none !important
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
  background: var(--iita-primary) !important
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  background-image: none !important;
  text-indent: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #fff !important;
  font-size: 14px !important;
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
  position: static !important
}

.ui-datepicker .ui-datepicker-prev span::before {
  content: '‹'
}

.ui-datepicker .ui-datepicker-next span::before {
  content: '›'
}

.ui-datepicker table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 2px !important
}

.ui-datepicker th {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--iita-text-muted) !important;
  text-transform: uppercase !important;
  padding: 6px 4px !important;
  text-align: center !important
}

.ui-datepicker td {
  padding: 2px !important
}

.ui-datepicker td a,
.ui-datepicker td span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  margin: auto !important;
  border-radius: 50% !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--iita-text) !important;
  text-decoration: none !important;
  transition: background .15s, color .15s !important
}

.ui-datepicker td a:hover {
  background: var(--iita-primary-light) !important;
  color: var(--iita-primary) !important
}

.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-highlight {
  background: var(--iita-primary) !important;
  color: #fff !important;
  font-weight: 700 !important
}

.ui-datepicker .ui-datepicker-today a {
  background: var(--iita-primary-light) !important;
  color: var(--iita-primary) !important;
  font-weight: 700 !important
}

.gform_wrapper .ginput_container_date {
  position: relative !important
}

.gform_wrapper .ginput_container_date input {
  padding-right: 40px !important;
  cursor: pointer !important
}

.gform_wrapper .ginput_container_date::after {
  content: '';
  position: absolute !important;
  right: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cline x1='16' x2='16' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='2' y2='6'/%3E%3Cline x1='3' x2='21' y1='10' y2='10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important
}

/* ═══ TIMEPICKER ═══ */
.ui-timepicker-div,
.ui-timepicker-wrapper {
  font-family: inherit !important;
  border: 1.5px solid var(--iita-border) !important;
  border-radius: var(--iita-radius-lg) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .14) !important;
  padding: 14px !important;
  background: #fff !important
}

.ui-timepicker-div dl dt {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--iita-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  margin-bottom: 6px !important
}

.ui-timepicker-div dl dd {
  margin-bottom: 12px !important
}

.ui-timepicker-div .ui-slider {
  background: #e5e7eb !important;
  border: none !important;
  border-radius: 100px !important;
  height: 6px !important
}

.ui-timepicker-div .ui-slider .ui-slider-range {
  background: var(--iita-primary) !important;
  border-radius: 100px !important
}

.ui-timepicker-div .ui-slider .ui-slider-handle {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 2.5px solid var(--iita-primary) !important;
  box-shadow: 0 2px 8px rgba(255, 87, 34, .25) !important;
  top: -6px !important;
  cursor: grab !important;
  outline: none !important
}

.gform_wrapper .ginput_container_time {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important
}

.gform_wrapper .ginput_container_time input[type="number"],
.gform_wrapper .ginput_container_time input[type="text"] {
  width: 64px !important;
  text-align: center !important;
  padding: 11px 8px !important;
  -moz-appearance: textfield !important
}

.gform_wrapper .ginput_container_time input::-webkit-inner-spin-button,
.gform_wrapper .ginput_container_time input::-webkit-outer-spin-button {
  -webkit-appearance: none !important
}

.gform_wrapper .ginput_container_time .hour_minute_colon {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--iita-text-muted) !important
}

.gform_wrapper .ginput_container_time select {
  width: auto !important;
  padding: 11px 34px 11px 12px !important
}

/* ═══ RADIO & CHECKBOX ═══ */
.gform_wrapper .gfield_radio,
.gform_wrapper .gfield_checkbox {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important
}

.gform_wrapper .gfield_radio li,
.gform_wrapper .gfield_checkbox li {
  margin: 0 !important
}

.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 9px 16px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--iita-text-label) !important;
  cursor: pointer !important;
  transition: border-color .2s, background .2s, color .2s !important;
  background: #fafafa !important;
  margin-bottom: 0 !important;
  line-height: 1.4 !important
}

.gform_wrapper .gfield_radio label:hover,
.gform_wrapper .gfield_checkbox label:hover {
  border-color: var(--iita-primary) !important;
  background: #fff5f2 !important;
  color: var(--iita-primary) !important
}

.gform_wrapper .gfield_radio input[type="radio"]:checked~label,
.gform_wrapper .gfield_checkbox input[type="checkbox"]:checked~label {
  border-color: var(--iita-primary) !important;
  background: var(--iita-primary-light) !important;
  color: var(--iita-primary) !important;
  font-weight: 700 !important
}

.gform_wrapper .gfield_radio input[type="radio"],
.gform_wrapper .gfield_checkbox input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  accent-color: var(--iita-primary) !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
  flex-shrink: 0 !important;
  cursor: pointer !important
}

/* ═══ NAME FIELD ═══ */
.gform_wrapper .ginput_container_name {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important
}

.gform_wrapper .ginput_container_name .name_prefix,
.gform_wrapper .ginput_container_name .name_suffix {
  grid-column: 1/-1 !important
}

/* ═══ ADDRESS FIELD ═══ */
.gform_wrapper .ginput_container_address {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important
}

.gform_wrapper .ginput_container_address .ginput_full,
.gform_wrapper .ginput_container_address .address_line_1,
.gform_wrapper .ginput_container_address .address_line_2 {
  grid-column: 1/-1 !important
}

.gform_wrapper .ginput_container_address .address_city,
.gform_wrapper .ginput_container_address .address_state,
.gform_wrapper .ginput_container_address .address_zip,
.gform_wrapper .ginput_container_address .address_country {
  grid-column: span 1 !important
}

/* ═══ FILE UPLOAD ═══ */
.gform_wrapper input[type="file"] {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1.5px dashed var(--iita-border) !important;
  border-radius: var(--iita-radius) !important;
  background: #f8fafc !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: border-color .2s, background .2s !important;
  color: var(--iita-text-muted) !important
}

.gform_wrapper input[type="file"]:hover,
.gform_wrapper input[type="file"]:focus {
  border-color: var(--iita-primary) !important;
  background: #fff5f2 !important
}

.gform_wrapper .gform_fileupload_multifile {
  border: 1.5px dashed var(--iita-border) !important;
  border-radius: var(--iita-radius) !important;
  padding: 28px 20px !important;
  text-align: center !important;
  background: #f8fafc !important;
  transition: border-color .2s, background .2s !important;
  cursor: pointer !important
}

.gform_wrapper .gform_fileupload_multifile:hover {
  border-color: var(--iita-primary) !important;
  background: #fff5f2 !important
}

.gform_wrapper .gform_drop_area_instructions strong {
  color: var(--iita-primary) !important
}

/* ═══ LIST FIELD ═══ */
.gform_wrapper .add_list_item,
.gform_wrapper .delete_list_item {
  background: none !important;
  border: 1.5px solid var(--iita-border) !important;
  border-radius: 6px !important;
  width: 28px !important;
  height: 28px !important;
  cursor: pointer !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color .2s, background .2s !important;
  color: var(--iita-text-muted) !important
}

.gform_wrapper .add_list_item:hover {
  border-color: var(--iita-success) !important;
  background: var(--iita-success-bg) !important;
  color: var(--iita-success) !important
}

.gform_wrapper .delete_list_item:hover {
  border-color: var(--iita-error) !important;
  background: var(--iita-error-bg) !important;
  color: var(--iita-error) !important
}

/* ═══ CONSENT ═══ */
.gform_wrapper .ginput_container_consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important
}

.gform_wrapper .ginput_container_consent input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  accent-color: var(--iita-primary) !important;
  cursor: pointer !important
}

.gform_wrapper .ginput_container_consent .gfield_consent_description {
  font-size: 13px !important;
  color: var(--iita-text-label) !important;
  line-height: 1.6 !important
}

.gform_wrapper .ginput_container_consent .gfield_consent_description a {
  color: var(--iita-primary) !important;
  text-decoration: underline !important
}

/* ═══ SIGNATURE ═══ */
.gform_wrapper .gfield--type-signature .ginput_container {
  border: 1.5px solid var(--iita-border) !important;
  border-radius: var(--iita-radius) !important;
  overflow: hidden !important;
  background: #fff !important
}

.gform_wrapper .ginput_container_signature_clear {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-top: 8px !important;
  font-size: 12px !important;
  color: var(--iita-text-muted) !important;
  cursor: pointer !important;
  background: none !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  transition: border-color .2s, color .2s !important
}

.gform_wrapper .ginput_container_signature_clear:hover {
  border-color: var(--iita-error) !important;
  color: var(--iita-error) !important
}

/* ═══ SURVEY ═══ */
.gform_wrapper .gsurvey-likert table {
  width: 100% !important;
  border-collapse: collapse !important
}

.gform_wrapper .gsurvey-likert th,
.gform_wrapper .gsurvey-likert td {
  padding: 10px 8px !important;
  text-align: center !important;
  font-size: 12.5px !important;
  border-bottom: 1px solid #f1f5f9 !important
}

.gform_wrapper .gsurvey-likert th {
  font-weight: 700 !important;
  color: var(--iita-text-muted) !important;
  background: #f8fafc !important
}

.gform_wrapper .gsurvey-likert input[type="radio"] {
  accent-color: var(--iita-primary) !important
}

.gform_wrapper .gfield_rating label {
  font-size: 24px !important;
  color: #d1d5db !important;
  cursor: pointer !important;
  transition: color .15s !important;
  padding: 0 2px !important
}

.gform_wrapper .gfield_rating input:checked~label,
.gform_wrapper .gfield_rating label:hover {
  color: var(--iita-primary) !important
}

/* ═══ ORDER SUMMARY ═══ */
.gform_wrapper .gf_order_summary {
  border: 1.5px solid #e5e7eb !important;
  border-radius: var(--iita-radius) !important;
  overflow: hidden !important
}

.gform_wrapper .gf_order_summary tr td,
.gform_wrapper .gf_order_summary tr th {
  padding: 10px 14px !important;
  font-size: 13px !important;
  border-bottom: 1px solid #f1f5f9 !important
}

.gform_wrapper .gf_order_summary tfoot tr td {
  font-weight: 800 !important;
  color: var(--iita-primary) !important;
  font-size: 15px !important;
  border-bottom: none !important
}

/* ═══ SUBMIT BUTTON ═══ */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
  margin-top: 10px !important;
  padding-top: 0 !important;
  border-top: none !important;
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  flex-wrap: wrap !important
}

.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"],
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--iita-primary) !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  padding: 13px 28px !important;
  border-radius: var(--iita-radius) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  letter-spacing: .3px !important;
  box-shadow: 0 4px 14px rgba(255, 87, 34, .28) !important;
  transition: background .2s, transform .15s, box-shadow .2s !important;
  -webkit-appearance: none !important;
  appearance: none !important
}

.gform_wrapper input[type="submit"]:hover,
.gform_wrapper button[type="submit"]:hover,
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_next_button:hover {
  background: var(--iita-primary-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(255, 87, 34, .36) !important
}

.gform_wrapper .gform_previous_button {
  background: #f1f5f9 !important;
  color: var(--iita-text-label) !important;
  box-shadow: none !important
}

.gform_wrapper .gform_previous_button:hover {
  background: #e2e8f0 !important;
  transform: none !important
}

/* ═══ PROGRESS BAR (multi-page) ═══ */
.gform_wrapper .gf_progressbar_wrapper {
  margin-bottom: 28px !important;
  grid-column: 1/-1 !important
}

.gform_wrapper .gf_progressbar {
  background: #e5e7eb !important;
  border-radius: 100px !important;
  height: 6px !important;
  overflow: hidden !important
}

.gform_wrapper .gf_progressbar_percentage {
  background: linear-gradient(90deg, var(--iita-primary), #FF7043) !important;
  height: 100% !important;
  border-radius: 100px !important;
  transition: width .4s ease !important;
  font-size: 0 !important;
  color: transparent !important
}

.gform_wrapper .gf_step {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--iita-text-muted) !important;
  margin-bottom: 10px !important
}

.gform_wrapper .gf_step_active {
  color: var(--iita-primary) !important
}

.gform_wrapper .gf_step_completed {
  color: var(--iita-success) !important
}

.gform_wrapper .gf_step_number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: #e5e7eb !important;
  color: var(--iita-text-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  margin-right: 6px !important
}

.gform_wrapper .gf_step_active .gf_step_number {
  background: var(--iita-primary) !important;
  color: #fff !important
}

.gform_wrapper .gf_step_completed .gf_step_number {
  background: var(--iita-success) !important;
  color: #fff !important
}

/* ═══ VALIDATION & ERRORS ═══ */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
  border-color: var(--iita-error) !important;
  background: var(--iita-error-bg) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .1) !important
}

.gform_wrapper .gfield_error .gfield_label {
  color: var(--iita-error) !important
}

.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message {
  color: var(--iita-error) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  margin-top: 5px !important
}

.gform_wrapper .validation_error,
.gform_wrapper .gform_validation_errors {
  background: var(--iita-error-bg) !important;
  border: 1.5px solid rgba(239, 68, 68, .25) !important;
  border-radius: var(--iita-radius) !important;
  color: #dc2626 !important;
  padding: 14px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
  grid-column: 1/-1 !important
}

.gform_wrapper .gform_validation_errors h2 {
  font-size: 14px !important;
  color: #dc2626 !important;
  margin: 0 !important
}

/* ═══ CONFIRMATION ═══ */
.gform_wrapper .gform_confirmation_message,
.gforms_confirmation_message {
  background: var(--iita-success-bg) !important;
  border: 1.5px solid rgba(16, 185, 129, .3) !important;
  border-radius: var(--iita-radius-lg) !important;
  color: #065f46 !important;
  padding: 20px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important
}


/* ═══ CF7 ═══ */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--iita-border);
  border-radius: var(--iita-radius);
  font-size: 13.5px;
  font-family: inherit;
  color: var(--iita-text);
  background: var(--iita-bg);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: var(--iita-shadow);
  margin: 10px;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  border-color: var(--iita-border-focus);
  background: var(--iita-bg-focus);
  box-shadow: var(--iita-shadow-focus)
}

.wpcf7-form input[type="submit"] {
  background: var(--iita-primary);
  color: #fff;
  border: none;
  padding: 12px 26px;
  border-radius: var(--iita-radius);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 87, 34, .28);
  transition: background .2s
}

.wpcf7-form input[type="submit"]:hover {
  background: var(--iita-primary-dark)
}

.wpcf7-not-valid-tip {
  color: var(--iita-error);
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 4px;
  display: block
}

.wpcf7-response-output {
  border-radius: var(--iita-radius);
  padding: 12px 18px;
  font-size: 13px;
  margin-top: 14px
}

.wpcf7-response-output.wpcf7-mail-sent-ok {
  background: var(--iita-success-bg);
  border-color: var(--iita-success);
  color: #065f46
}

.wpcf7-response-output.wpcf7-validation-errors {
  background: var(--iita-error-bg);
  border-color: var(--iita-error);
  color: #dc2626
}

/* ═══ LEGACY ICONBOX ═══ */
.iita-legacy-iconbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 28px 26px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
  text-decoration: none;
  color: inherit;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  position: relative;
  overflow: hidden
}

.iita-legacy-iconbox::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--iita-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease
}

.iita-legacy-iconbox:hover {
  border-color: var(--iita-primary);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .1);
  transform: translateY(-3px)
}

.iita-legacy-iconbox:hover::before {
  transform: scaleX(1)
}

.iita-iconbox-icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: var(--iita-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
  transition: background .2s, transform .2s
}

.iita-legacy-iconbox:hover .iita-iconbox-icon {
  background: var(--iita-primary);
  transform: scale(1.05) rotate(-2deg)
}

.iita-iconbox-icon svg {
  width: 26px;
  height: 26px;
  transition: stroke .2s
}

.iita-legacy-iconbox:hover .iita-iconbox-icon svg {
  stroke: #fff !important
}

.iita-iconbox-body {
  width: 100%
}

.iita-iconbox-title {
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px !important;
  line-height: 1.3;
  transition: color .2s
}

.iita-legacy-iconbox:hover .iita-iconbox-title {
  color: var(--iita-primary)
}

.iita-iconbox-content {
  font-size: 13.5px;
  color: var(--iita-text-muted);
  line-height: 1.75
}

.iita-iconbox-content p {
  margin: 0 0 10px !important;
  line-height: 1.75 !important
}

.iita-iconbox-content p:last-child {
  margin-bottom: 0 !important
}

.iita-iconbox-content a {
  color: var(--iita-primary) !important;
  text-decoration: none !important;
  font-weight: 600 !important
}

.iita-iconbox-content a:hover {
  text-decoration: underline !important
}

.iita-iconbox-content ul,
.iita-iconbox-content ol {
  margin: 8px 0 10px 18px !important;
  padding: 0 !important
}

.iita-iconbox-content li {
  margin-bottom: 5px !important;
  line-height: 1.6 !important
}

.iita-iconbox-content strong {
  font-weight: 700 !important;
  color: #0f172a !important
}

/* ═══ LEGACY TEXT ═══ */
.iita-legacy-text {
  font-size: 14px;
  color: var(--iita-text-muted);
  line-height: 1.8;
  margin-bottom: 30px;
}

.iita-legacy-text p {
  margin: 0 0 14px !important
}

.iita-legacy-text p:last-child {
  margin-bottom: 0 !important
}

.iita-legacy-text a {
  color: var(--iita-primary) !important
}

.iita-legacy-text strong {
  color: var(--iita-text) !important;
  font-weight: 700 !important
}

.iita-legacy-text ul,
.iita-legacy-text ol {
  margin: 10px 0 14px 20px !important
}

.iita-legacy-text li {
  margin-bottom: 6px !important
}

/* ═══ LEGACY HEADING ═══ */
.iita-legacy-heading {
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
  margin: 0 0 16px !important
}

/* ═══ LEGACY DIVIDER ═══ */
.iita-legacy-divider {
  border: none !important;
  border-top: 2px solid #e5e7eb !important;
  margin: 24px 0 !important
}

/* ═══ PROGRESS BAR SHORTCODE ═══ */
.iita-progress-wrap {
  margin-bottom: 20px;
  opacity: 0;
  animation: iitaFadeIn .5s ease forwards
}

@keyframes iitaFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.iita-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px
}

.iita-progress-label {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a
}

.iita-progress-value {
  font-size: 12px;
  font-weight: 800;
  color: var(--iita-primary);
  background: var(--iita-primary-light);
  padding: 2px 9px;
  border-radius: 100px
}

.iita-progress-track {
  background: #e5e7eb;
  border-radius: 100px;
  height: 8px;
  overflow: hidden;
  position: relative
}

.iita-progress-bar {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--iita-primary), #FF7043);
  position: relative;
  transition: width 1.2s cubic-bezier(.4, 0, .2, 1)
}

.iita-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25));
  border-radius: 100px
}

/* ═══ IMAGE LAYERS ═══ */
.iita-image-layers {
  position: relative;
  width: 100%;
  min-height: 320px;
  border-radius: 14px;
  overflow: hidden;
  background: #1e293b
}

.iita-image-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .75s ease, transform .75s ease;
  pointer-events: none
}

.iita-image-layer.iita-layer-active {
  opacity: 1;
  transform: scale(1)
}

/* ═══ RESPONSIVE MAP ═══ */
.iita-map-wrap {
  width: 100%;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid #e5e7eb;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08)
}

.iita-map-iframe {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  border: 0 !important;
  display: block !important
}

/* ═══ RESPONSIVE ═══ */
@media(max-width:640px) {

  .gform_wrapper .gfields,
  .gform_wrapper .gform_fields {
    grid-template-columns: 1fr !important
  }

  .gform_wrapper .gfield--width-half {
    grid-column: 1/-1 !important
  }

  .gform_wrapper .ginput_container_name,
  .gform_wrapper .ginput_container_address {
    grid-template-columns: 1fr !important
  }

  .iita-legacy-iconbox {
    padding: 20px 18px
  }
}

/* ════════════════════════════════════════════════════════════
   IITA GF v2.1  TARGETED FIXES based on real rendered HTML
   ════════════════════════════════════════════════════════════

   1. DATEPICKER  fix icon layout, calendar popup, trigger img
   2. TIME FIELD   fix .clear-multi / .gfield_time_hour layout
   3. ICONBOX      fix dark-bg context, empty <p>, centred text
   4. MAP          fix overflow & responsive container
   5. PROGRESS BAR / IMAGE LAYERS  fix opacity=0 initial state
   ════════════════════════════════════════════════════════════ */

/* ── 1. DATEPICKER ───────────────────────────────────────────
   Real markup:
   .ginput_container_date
     input.datepicker.gform-datepicker
     img.ui-datepicker-trigger
─────────────────────────────────────────────────────────── */

/* Container: flex so icon sits beside input */
.gform_wrapper .ginput_container_date {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
}

/* Date input: fill flex space, right-round corners removed */
.gform_wrapper .ginput_container_date input.datepicker,
.gform_wrapper .ginput_container_date input.gform-datepicker,
.gform_wrapper .ginput_container_date input[type="text"] {
  flex: 1 !important;
  min-width: 0 !important;
  border-radius: var(--iita-radius) 0 0 var(--iita-radius) !important;
  border-right: none !important;
}

/* Calendar trigger image → styled button-like box */
.gform_wrapper .ginput_container_date img.ui-datepicker-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: auto !important;
  padding: 0 12px !important;
  background: var(--iita-primary) !important;
  border: 1.5px solid var(--iita-primary) !important;
  border-left: none !important;
  border-radius: 0 var(--iita-radius) var(--iita-radius) 0 !important;
  cursor: pointer !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  /* make icon white */
  transition: background .2s !important;
  flex-shrink: 0 !important;
}

.gform_wrapper .ginput_container_date img.ui-datepicker-trigger:hover {
  background: var(--iita-primary-dark) !important;
  border-color: var(--iita-primary-dark) !important;
}

/* Focus state: left part glows, right part stays orange */
.gform_wrapper .ginput_container_date:focus-within input {
  border-color: var(--iita-border-focus) !important;
  background: var(--iita-bg-focus) !important;
  box-shadow: var(--iita-shadow-focus) !important;
  border-right: none !important;
}

/* jQuery UI datepicker popup  full reskin */
.ui-datepicker {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .16), 0 2px 8px rgba(0, 0, 0, .08) !important;
  padding: 14px !important;
  background: #fff !important;
  z-index: 100000 !important;
  min-width: 280px !important;
}

.ui-datepicker .ui-datepicker-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  margin: -2px -2px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.ui-datepicker .ui-datepicker-title {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-align: center !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  background: rgba(255, 255, 255, .15) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .2s !important;
}

.ui-datepicker .ui-datepicker-prev {
  left: 8px !important;
}

.ui-datepicker .ui-datepicker-next {
  right: 8px !important;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
  background: var(--iita-primary) !important;
}

/* Hide default jQuery UI arrow text and use CSS arrows */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: block !important;
  overflow: hidden !important;
  text-indent: -9999px !important;
  width: 0 !important;
  height: 0 !important;
}

.ui-datepicker .ui-datepicker-prev::after {
  content: '‹' !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.ui-datepicker .ui-datepicker-next::after {
  content: '›' !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.ui-datepicker table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 2px !important;
  margin: 0 !important;
}

.ui-datepicker thead th {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: var(--iita-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  padding: 6px 0 !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
}

.ui-datepicker tbody td {
  padding: 1px !important;
  border: none !important;
}

.ui-datepicker tbody td a,
.ui-datepicker tbody td span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  margin: auto !important;
  border-radius: 50% !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--iita-text) !important;
  text-decoration: none !important;
  transition: background .15s, color .15s !important;
  border: none !important;
  background: transparent !important;
}

.ui-datepicker tbody td a:hover {
  background: var(--iita-primary-light) !important;
  color: var(--iita-primary) !important;
}

.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-active:hover {
  background: var(--iita-primary) !important;
  color: #fff !important;
  font-weight: 800 !important;
}

.ui-datepicker .ui-datepicker-today a {
  background: rgba(255, 87, 34, .08) !important;
  color: var(--iita-primary) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1.5px var(--iita-primary) !important;
}

.ui-datepicker .ui-datepicker-unselectable .ui-state-default {
  color: #d1d5db !important;
  cursor: not-allowed !important;
}

.ui-datepicker-trigger {
  cursor: pointer !important;
}


/* ── 2. TIME FIELD  REAL MARKUP FIX ─────────────────────────
   Real structure:
   .ginput_complex.gform-grid-row > .clear-multi
     .gfield_time_hour.gform-grid-col > input[type=number] <i>:</i>
     .gfield_time_minute.gform-grid-col > input[type=number]
     .gfield_time_ampm.gform-grid-col > select
─────────────────────────────────────────────────────────── */

/* Override the grid-row so time parts stay inline */
.gform_wrapper .ginput_complex.gform-grid-row {
  display: block !important;
}

.gform_wrapper .ginput_complex .clear-multi {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

/* Each time column: don't let them stack */
.gform_wrapper .gfield_time_hour,
.gform_wrapper .gfield_time_minute,
.gform_wrapper .gfield_time_ampm {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  /* Kill any inherited grid column sizing */
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* HH and MM inputs */
.gform_wrapper .gfield_time_hour input[type="number"],
.gform_wrapper .gfield_time_minute input[type="number"] {
  width: 60px !important;
  text-align: center !important;
  padding: 11px 8px !important;
  border: 1.5px solid var(--iita-border) !important;
  border-radius: var(--iita-radius) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  background: var(--iita-bg) !important;
  color: var(--iita-text) !important;
  box-shadow: var(--iita-shadow) !important;
  outline: none !important;
  -moz-appearance: textfield !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.gform_wrapper .gfield_time_hour input[type="number"]:focus,
.gform_wrapper .gfield_time_minute input[type="number"]:focus {
  border-color: var(--iita-border-focus) !important;
  background: var(--iita-bg-focus) !important;
  box-shadow: var(--iita-shadow-focus) !important;
}

/* Hide browser spinners */
.gform_wrapper .gfield_time_hour input::-webkit-inner-spin-button,
.gform_wrapper .gfield_time_hour input::-webkit-outer-spin-button,
.gform_wrapper .gfield_time_minute input::-webkit-inner-spin-button,
.gform_wrapper .gfield_time_minute input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
}

/* Colon separator */
.gform_wrapper .gfield_time_hour i {
  font-style: normal !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--iita-text-muted) !important;
  line-height: 1 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* AM/PM select */
.gform_wrapper .gfield_time_ampm select,
.gform_wrapper .gfield_time_ampm.below select {
  width: auto !important;
  min-width: 72px !important;
  padding: 11px 32px 11px 12px !important;
  border: 1.5px solid var(--iita-border) !important;
  border-radius: var(--iita-radius) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  background-color: var(--iita-bg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
  color: var(--iita-text) !important;
  box-shadow: var(--iita-shadow) !important;
}

.gform_wrapper .gfield_time_ampm select:focus {
  border-color: var(--iita-border-focus) !important;
  box-shadow: var(--iita-shadow-focus) !important;
}

/* Hide screen-reader labels visually but keep them accessible */
.gform_wrapper .gfield_time_hour .hour_label,
.gform_wrapper .gfield_time_minute .minute_label,
.gform_wrapper .gfield_time_ampm .am_pm_label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* gform-grid-col: prevent them taking 100% width */
.gform_wrapper .ginput_complex .gform-grid-col {
  width: auto !important;
  float: none !important;
}


/* ── 3. ICONBOX  DARK BACKGROUND CONTEXT ────────────────────
   The iconbox is on a dark section (contact page).
   When its background is transparent/dark, flip the card style.
   Detect via parent: section with dark bg, or explicit class.
─────────────────────────────────────────────────────────── */

/* Dark section context  WPBakery dark rows */
.vc_row[style*="background"] .iita-legacy-iconbox,
.vc_row.wpb_row .iita-legacy-iconbox,
.iita-stats .iita-legacy-iconbox,
.iita-shop .iita-legacy-iconbox {
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .15) !important;
  color: #fff !important;
}

.vc_row .iita-legacy-iconbox:hover {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 87, 34, .6) !important;
  transform: translateY(-4px) !important;
}

/* Icon on dark */
.vc_row .iita-iconbox-icon {
  background: rgba(255, 87, 34, .2) !important;
}

.vc_row .iita-legacy-iconbox:hover .iita-iconbox-icon {
  background: var(--iita-primary) !important;
}

/* Title on dark */
.vc_row .iita-iconbox-title {
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 10px !important;
  line-height: 1.3 !important;
  transition: color .2s !important;
  letter-spacing: -.1px !important;
}

/* Content on dark */
.vc_row .iita-iconbox-content {
  color: #6b7280 !important;
}

/* Empty <p> tags (blank lines in WP editor) */
.iita-iconbox-content p:empty,
.iita-iconbox-content p:blank {
  display: none !important;
  margin: 0 !important;
  height: 0 !important;
}

/* Suppress the leading empty <p> that WP auto-inserts */
.iita-iconbox-content>p:first-child:empty {
  display: none !important;
}

.iita-iconbox-content>p:last-child:empty {
  display: none !important;
}

/* text-align: center inside content */
.iita-iconbox-content p[style*="text-align"] {
  text-align: center !important;
}

/* <strong> inside dark iconbox */
.vc_row .iita-iconbox-content strong {
  font-weight: 700 !important;
}

/* Links in dark iconbox */
.vc_row .iita-iconbox-content a {
  color: #FF8A65 !important;
}

/* Centre-align the entire iconbox content on contact-style rows */
.vc_row .iita-legacy-iconbox {
  align-items: center !important;
  text-align: center !important;
}

.vc_row .iita-iconbox-icon {
  margin-left: auto !important;
  margin-right: auto !important;
}

.vc_row .iita-iconbox-body {
  text-align: center !important;
}


/* ── 4. MAP  RESPONSIVE OVERFLOW FIX ────────────────────────
   Real cause: .iita-map-wrap has no explicit height, so the
   absolutely-positioned iframe collapses to 0.
   Fix: use padding-top aspect-ratio trick + max-width clamp.
─────────────────────────────────────────────────────────── */

.iita-map-wrap {
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1.5px solid #e5e7eb !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08) !important;
  /* Prevent the iframe from pushing the container wider.
     The shortcode (functions.php: iita_sc_google_map) already sets
     the actual height:0 + padding-top:{px}px inline per-instance so
     the configurable "height" attribute works  don't override it here. */
  box-sizing: border-box !important;
}

.iita-map-iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}

/* Also prevent the WPBakery column from overflowing */
.vc_col-sm-12 .iita-map-wrap,
.wpb_column .iita-map-wrap {
  max-width: 100% !important;
  overflow: hidden !important;
}


/* ── 5. PROGRESS BAR  FIX OPACITY INITIAL STATE ─────────────
   The bars start at opacity:0. If JS hasn't run or
   IntersectionObserver isn't triggered, they stay invisible.
   Add a fallback so they always render.
─────────────────────────────────────────────────────────── */

.iita-progress-wrap {
  opacity: 1 !important;
  /* override the opacity:0 from animation */
  animation: none !important;
  /* disable  JS handles visibility */
}

/* The bar fills via JS. On no-JS, show full width. */
.iita-progress-bar {
  /* Minimum visible state before JS fires */
  min-width: 4px !important;
}

/* When JS has run and set width, remove min-width */
.iita-progress-bar[style*="width"] {
  min-width: 0 !important;
}


/* ── 6. GF FIELD: gf_left_half / gf_right_half ───────────────
   GF uses these legacy classes to do 2-col layout.
   Our grid handles it but these classes may override.
─────────────────────────────────────────────────────────── */
.gform_wrapper .gfield.gf_left_half {
  grid-column: 1 !important;
}

.gform_wrapper .gfield.gf_right_half {
  grid-column: 2 !important;
}

.gform_wrapper .gfield.gf_left_half:only-child,
.gform_wrapper .gfield.gf_right_half:only-child {
  grid-column: 1 / -1 !important;
}


/* ── 7. GF: datepicker field specifically has gf_right_half ───
   Real: field_2_2 has class gf_right_half.
   Override so date+time pair sits side by side correctly.
─────────────────────────────────────────────────────────── */
.gform_wrapper .gfield--type-date.gf_right_half,
.gform_wrapper .gfield--type-date.gf_left_half {
  grid-column: span 1 !important;
}

.gform_wrapper .gfield--type-time.gf_right_half,
.gform_wrapper .gfield--type-time.gf_left_half {
  grid-column: span 1 !important;
}


/* ── 8. GF: general .gfield--type-date should NOT be full-width
   (we previously made date full-width; time+date should be 2col)
─────────────────────────────────────────────────────────── */
.gform_wrapper .gfield--type-date {
  grid-column: span 1 !important;
  /* NOT 1/-1 */
}

.gform_wrapper .gfield--type-time {
  grid-column: span 1 !important;
}


/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .iita-map-wrap {
    padding-top: 62% !important;
    border-radius: 10px !important;
  }

  .gform_wrapper .gfield--type-date,
  .gform_wrapper .gfield--type-time {
    grid-column: 1 / -1 !important;
  }

  .gform_wrapper .ginput_complex .clear-multi {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .vc_row .iita-legacy-iconbox {
    margin-bottom: 16px !important;
  }
}