/*
 * Enrolment page styling for Gravity Forms form 2.
 *
 * IMPORTANT: the "diamondflight" theme already ships its own Gravity
 * Forms styling module in dist/css/style.css (selectors like .gfield,
 * .ginput_container_select, .gform_fields{display:grid}, .gfield_label,
 * .gfield_description, .gfield_required, the .button/.gform_button
 * colors, etc). gform_disable_css only turns off Gravity Forms' OWN
 * plugin CSS - it does not touch the theme's rules, and the theme's
 * rules are enough for most of the form already. This file must only
 * add what the theme does not cover, and must not re-declare values
 * the theme already sets correctly - doing so just risks fighting or
 * duplicating it.
 *
 * What the theme does NOT cover, and this file is responsible for:
 *   - input[type=tel] (phone) - the theme only styles type=email/text/
 *     textarea and .ginput_container_select.
 *   - Chosen (the enhanced select/multiselect widget bundled with
 *     Gravity Forms) - the theme has no .chosen-* rules at all.
 *   - .ginput_container_multiselect - the theme only boxes
 *     .ginput_container_select (single-select), never multiselect.
 *   - The date field's calendar-icon button sitting next to its input.
 *   - The custom client-side validation summary/messages.
 *
 * Two real theme/global bugs are fixed here (not worked around with
 * unrelated overrides):
 *   1. The form sits inside the theme's ".rich-text" content wrapper,
 *      which styles bare <a> tags gold+underlined and prepends a gold
 *      chevron icon to every <li>. Chosen renders its pills, dropdown
 *      results and single-select control using <li>/<a> tags, so it
 *      inherits both - the gold icon on the nationality field and the
 *      gold underlined text on the EASA field. Fixed by resetting
 *      list/link presentation scoped to the form only.
 *   2. The theme boxes .ginput_container_select (border+padding+bg)
 *      for plain selects, but Chosen then draws its OWN border+padding
 *      on top of that already-boxed container, producing a visible
 *      double border and an oversized control. Fixed by making
 *      Chosen's own single/choices box borderless/flush so only the
 *      one (theme- or below-provided) box remains.
 */

/* --- Fix 1: undo .rich-text's link/list presentation for this form --- */
#gform_wrapper_2 a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

#gform_wrapper_2 ul,
#gform_wrapper_2 li {
	list-style: none;
	margin: 0;
	padding: 0;
}

#gform_wrapper_2 li:before {
	content: none;
	background-image: none;
}

/* --- Phone field: theme does not style input[type=tel] --- */
#gform_wrapper_2 input[type="tel"] {
	display: block;
	width: 100%;
	border-radius: 0.5rem;
	border: 1px solid #d9d9d9;
	background: #fff;
	padding: 0.75rem 0.875rem;
	font-size: 1rem;
	line-height: 1.5rem;
}

#gform_wrapper_2 .gfield_error input[type="tel"] {
	border-color: #ff4e00;
}

/* --- Date field: theme styles the input itself (type=text) already;
   only the icon-button layout needs help, since nothing positions it
   next to the input. --- */
#gform_wrapper_2 .ginput_container_date {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

#gform_wrapper_2 .gform-datepicker-toggle {
	flex: 0 0 auto;
	width: 20px;
	background: none;
	border: none;
	padding: 0;
	color: #181d4e;
	cursor: pointer;
}

/* --- Fix 2 + Chosen: multiselect needs the same box the theme already
   gives single selects; both then need Chosen's own box removed so it
   sits flush inside a single border. --- */
#gform_wrapper_2 .ginput_container_multiselect {
	border-radius: 0.5rem;
	border: 1px solid #d9d9d9;
	background: #fff;
}

#gform_wrapper_2 .gfield_error .ginput_container_select,
#gform_wrapper_2 .gfield_error .ginput_container_multiselect {
	border-color: #ff4e00;
}

#gform_wrapper_2 .chosen-container {
	display: block;
	width: 100%;
}

#gform_wrapper_2 .chosen-container .chosen-single,
#gform_wrapper_2 .chosen-container .chosen-choices {
	border: none;
	background: transparent;
	padding: 0.75rem 0.875rem;
	font-size: 1rem;
	box-sizing: border-box;
	/* chosen.min.css hardcodes .chosen-single to height:25px with
	   overflow:hidden, sized for its own 0-left-only padding. Our
	   padding needs the box to grow instead of clipping the text. */
	height: auto;
	overflow: visible;
	box-shadow: none;
}

#gform_wrapper_2 .chosen-container .chosen-choices {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	cursor: text;
}

/* EASA's closed control renders its placeholder hint and a real
   selected value with identical markup, so this can only be styled
   conditionally via the .dfas-chosen-placeholder class that
   enrolment-form.js toggles based on the underlying <select>'s value -
   see updateEasaPlaceholderState() there. Positioned left of Chosen's
   own dropdown arrow (which sits in the last ~20px) so the two icons
   don't overlap. */
#gform_wrapper_2 .chosen-container-single.dfas-chosen-placeholder .chosen-single {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 32px center;
	background-size: 14px 14px;
}

#gform_wrapper_2 .chosen-container-single.dfas-chosen-placeholder .chosen-single span {
	color: #999;
}

/* Chosen's own CSS gives single-selects (EASA) a bordered search box
   with a magnifying-glass icon inside the dropdown, but multi-selects
   (Nationality) get no equivalent box at all - their search input just
   sits bare inside the choices row. Give it the same bordered/icon
   treatment so both fields' search field look the same. */
#gform_wrapper_2 .chosen-container-multi .search-field {
	/* Force this onto its own full-width row below any selected pills,
	   instead of sharing a row with them, so it reads as a dedicated
	   search box the same way EASA's dropdown search box does. */
	flex: 0 0 100%;
}

#gform_wrapper_2 .chosen-container-multi .search-field input.chosen-search-input {
	/* chosen.min.css's own rule for this input hardcodes `border:0
	   !important`, `background:0 0 !important` and `height:25px`, and
	   Chosen's JS additionally sets an inline `width` (its auto-grow-
	   while-typing behaviour) - a plain inline style beats any external
	   stylesheet rule regardless of specificity. Every property that
	   collides with one of those needs !important to actually apply. */
	width: 100% !important;
	height: auto !important;
	box-sizing: border-box;
	margin: 4px 0 0;
	padding: 8px 32px 8px 12px;
	border: 1px solid #d9d9d9 !important;
	border-radius: 0.5rem;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat right 10px center !important;
	background-size: 14px 14px !important;
}

#gform_wrapper_2 .chosen-container .search-choice {
	padding: 4px 28px 4px 12px;
	border: 1px solid #d9d9d9;
	border-radius: 999px;
	background: #f8fafe;
	color: #181d4e;
	font-size: 14px;
	font-weight: 600;
}

#gform_wrapper_2 .chosen-container .chosen-search-input {
	color: #999;
	font-size: 13px;
}

#gform_wrapper_2 .chosen-container .chosen-drop {
	border: 1px solid #d9d9d9;
	border-radius: 0.5rem;
	background: #fff;
	box-shadow: 0 12px 24px rgba(12, 15, 40, 0.12);
}

/* Nationality's first 6 choices (France, Iceland, United Kingdom,
   Sweden, Belgium, Norway) are the site's "popular" shortlist, defined
   in that order in the field's own choices before the full alphabetical
   list resumes at Afghanistan. Mark that boundary with a divider. */
#input_2_13_chosen .chosen-results li:nth-child(6) {
	border-bottom: 1px solid #d9d9d9;
	padding-bottom: 0.75rem;
	margin-bottom: 0.25rem;
}

/* chosen.min.css's own default is a blue (#3875d7) highlighted row;
   the reference render uses the site's gold accent instead. */
#gform_wrapper_2 .chosen-results li {
	padding: 0.5rem 0.875rem;
	color: #181d4e;
	font-weight: 600;
}

#gform_wrapper_2 .chosen-results li.highlighted {
	background: #c79105;
	color: #fff;
}

/* Gravity Forms renders the field's Placeholder setting as a real,
   empty-value <option class="gf_placeholder">, and Chosen carries that
   class onto the generated <li> so it can be hidden from the results
   list - GF's own (disabled) CSS used to do this hiding. It's still
   used as the closed-control hint text (e.g. EASA license state),
   just not shown as a clickable row in the open dropdown. */
#gform_wrapper_2 .chosen-results li.gf_placeholder {
	display: none;
}

#gform_wrapper_2 input:focus,
#gform_wrapper_2 select:focus,
#gform_wrapper_2 .chosen-container-active .chosen-single,
#gform_wrapper_2 .chosen-container-active .chosen-choices {
	outline: 2px solid #181d4e;
	outline-offset: 1px;
}

/* --- Validation presentation: custom to this form, nothing to
   conflict with in the theme. --- */
#gform_wrapper_2 .gform_validation_errors {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid #ff4e00;
	border-radius: 0.5rem;
	background: #fff5f0;
	color: #181d4e;
}

#gform_wrapper_2 .gform_validation_errors h2 {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	color: #181d4e;
}

#gform_wrapper_2 .gform_validation_errors ul,
#gform_wrapper_2 .gform_validation_errors ol {
	list-style: none;
	padding-left: 0;
}

#gform_wrapper_2 .gform_validation_errors li {
	margin-top: 0.5rem;
}

#gform_wrapper_2 .gform_validation_errors a {
	color: inherit;
	text-decoration: none;
}

#gform_wrapper_2 .gfield_validation_message,
#gform_wrapper_2 .validation_message {
	/* The theme's own stylesheet has `.gfield .gfield_validation_message
	   { display: none }`. Every other property below already won on
	   specificity (ID beats the theme's two bare classes), but display
	   was never contested here, so that one property fell through to
	   the theme's rule by default and hid the element - everything
	   else about it (opacity, height, etc.) was fine. */
	display: block;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #ff4e00;
}

/* The theme also sets `.gfield--type-radio { display: flex }` (to sit
   the choices next to a wide legend). That's fine while the fieldset's
   only non-legend child is .ginput_container_radio, but once a
   validation message is inserted as a second such child it becomes a
   flex sibling too, rendering beside the radio choices instead of
   below them. Restoring block flow here doesn't touch the radio
   choices' own layout (governed separately by .ginput_container_radio
   and .gchoice). */
#gform_wrapper_2 .gfield--type-radio {
	display: block;
}

#gform_wrapper_2 .gform_ajax_spinner {
	margin-left: 0.6rem;
	vertical-align: middle;
}