/**
 * One form language for the whole site (front, student panel, login, checkout,
 * Gravity Forms, comments) — after the client's reference: a quiet filled
 * field with soft corners, a bold label above it, iOS-style switches, and a
 * full-height button. Two accents only: coral red and green, identical
 * everywhere. The tokens also retarget the theme's own `--color-content-*`
 * variables, so us-core buttons, links and hovers turn the same red.
 *
 * wp-admin is deliberately left alone (it stays WordPress-native).
 */

:root {
	--hy-red: #EE6B65;
	--hy-red-deep: #E2564F;
	--hy-red-soft: #FDEDEC;
	--hy-green: #3DB47F;
	--hy-green-deep: #33A171;
	--hy-green-soft: #E9F7F0;
	--hy-field: #F5F6F9;
	--hy-field-line: #E6E9F0;
	--hy-ink: #1E1C26;
	--hy-soft: #6B7280;
	--hy-placeholder: #A9AFBA;
	--hy-field-radius: 12px;
	--hy-field-h: 48px;
	--hy-ring: 0 0 0 4px rgba(238, 107, 101, .16);

	/* the theme's palette, retargeted */
	--color-content-primary: #EE6B65;
	--color-content-primary-grad: #EE6B65;
	--color-content-secondary: #F39590;
}

/* ---- text fields ----------------------------------------------------------- */

.hy-forms input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not(.ql-container *):not(.otp_input),
.hy-forms textarea,
.hy-forms select,
.hy-forms .form-control,
.hy-forms .form-select,
.hy-forms .gform_wrapper .gfield input:not([type="checkbox"]):not([type="radio"]),
.hy-forms .gform_wrapper .gfield select,
.hy-forms .gform_wrapper .gfield textarea,
.hy-forms .woocommerce .input-text,
.hy-forms .woocommerce select,
.hy-forms .select2-container--default .select2-selection--single,
.hy-forms .comment-form input:not([type="submit"]),
.hy-forms .comment-form textarea {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--hy-field-h);
	height: auto;
	padding: 0 16px;
	border: 1.5px solid transparent;
	border-radius: var(--hy-field-radius);
	background-color: var(--hy-field);
	background-image: none;
	color: var(--hy-ink);
	font: inherit;
	font-size: 14px;
	line-height: 1.6;
	box-shadow: none;
	outline: 0;
	transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.hy-forms .select2-container--default .select2-selection--single { display: flex; align-items: center; }
.hy-forms .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--hy-ink); padding: 0; line-height: 1.6; }
.hy-forms .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; inset-inline-end: 12px; }

.hy-forms textarea,
.hy-forms .form-control[rows],
.hy-forms .gform_wrapper .gfield textarea,
.hy-forms .comment-form textarea {
	min-height: 120px;
	padding: 14px 16px;
	resize: vertical;
}

.hy-forms select,
.hy-forms .form-select,
.hy-forms .gform_wrapper .gfield select,
.hy-forms .woocommerce select {
	padding-inline-end: 44px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: left 16px center;
	background-size: 16px;
	cursor: pointer;
}
[dir="ltr"] .hy-forms select { background-position: right 16px center; }

.hy-forms input:focus:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.hy-forms textarea:focus,
.hy-forms select:focus,
.hy-forms .form-control:focus,
.hy-forms .form-select:focus,
.hy-forms .woocommerce .input-text:focus,
.hy-forms .select2-container--default.select2-container--focus .select2-selection--single,
.hy-forms .select2-container--default.select2-container--open .select2-selection--single {
	background-color: #fff;
	border-color: var(--hy-red);
	box-shadow: var(--hy-ring);
	outline: 0;
}

.hy-forms ::placeholder { color: var(--hy-placeholder); opacity: 1; }
.hy-forms input:disabled, .hy-forms textarea:disabled, .hy-forms select:disabled { opacity: .6; cursor: not-allowed; }

/* validation states the plugins set */
.hy-forms .gfield_error input, .hy-forms .gfield_error textarea, .hy-forms .gfield_error select,
.hy-forms .woocommerce-invalid .input-text, .hy-forms .is-invalid, .hy-forms .error input { border-color: var(--hy-red) !important; background-color: var(--hy-red-soft) !important; }
.hy-forms .woocommerce-validated .input-text { border-color: var(--hy-green) !important; }

/* ---- labels ---------------------------------------------------------------- */

.hy-forms label,
.hy-forms .form-label,
.hy-forms .gform_wrapper .gfield_label,
.hy-forms .woocommerce form .form-row label,
.hy-forms .comment-form label {
	display: block;
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--hy-ink);
	line-height: 1.6;
}
.hy-forms .gform_wrapper .gfield_required { color: var(--hy-red); }
.hy-forms .gform_wrapper .gfield_description, .hy-forms .form-note, .hy-forms .description { font-size: 12px; color: var(--hy-soft); }
.hy-forms .gform_wrapper .gfield { margin-bottom: 18px; }
.hy-forms .form-group { margin-bottom: 18px; }

/* Labels that sit next to a control (checkbox lists) stay inline. */
.hy-forms .gchoice label, .hy-forms .custom-control-label, .hy-forms .form-check-label,
.hy-forms label:has(> input[type="checkbox"]), .hy-forms label:has(> input[type="radio"]),
.hy-forms .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }

/* ---- checks and switches ---------------------------------------------------- */

.hy-forms input[type="checkbox"], .hy-forms input[type="radio"] { accent-color: var(--hy-red); width: 18px; height: 18px; cursor: pointer; }

/* DashLite's switch (student panel, notification flags) → iOS switch, red when on. */
.hy-forms .custom-control.custom-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0; }
.hy-forms .custom-switch .custom-control-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hy-forms .custom-switch .custom-control-label { order: -1; font-size: 15px; font-weight: 500; color: var(--hy-ink); cursor: pointer; padding: 0; margin: 0; }
.hy-forms .custom-switch .custom-control-label::before,
.hy-forms .custom-switch .custom-control-label::after { display: none; }
.hy-forms .custom-switch::after {
	content: "";
	flex: 0 0 auto;
	width: 54px; height: 30px;
	border-radius: 999px;
	background: #E3E6EC;
	position: relative;
	transition: background .2s;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.02);
	background-image: radial-gradient(circle at calc(100% - 15px) 50%, #fff 0 11px, transparent 12px);
	background-image: radial-gradient(circle at calc(100% - 15px) 50%, #fff 0 11px, transparent 12px);
}
.hy-forms .custom-switch:has(.custom-control-input:checked)::after {
	background-color: var(--hy-red);
	background-image: radial-gradient(circle at 15px 50%, #fff 0 11px, transparent 12px);
}
.hy-forms .custom-switch:has(.custom-control-input:focus-visible)::after { box-shadow: var(--hy-ring); }

/* Same switch for anything marked .hy-toggle (our own forms). */
.hy-forms .hy-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; cursor: pointer; }
.hy-forms .hy-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hy-forms .hy-toggle span:last-child { flex: 0 0 auto; width: 54px; height: 30px; border-radius: 999px; background: #E3E6EC radial-gradient(circle at calc(100% - 15px) 50%, #fff 0 11px, transparent 12px); transition: background .2s; }
.hy-forms .hy-toggle input:checked + span, .hy-forms .hy-toggle input:checked ~ span:last-child { background: var(--hy-red) radial-gradient(circle at 15px 50%, #fff 0 11px, transparent 12px); }

/* ---- buttons ---------------------------------------------------------------- */

.hy-forms .w-btn,
.hy-forms .us-btn-style_1,
.hy-forms .btn,
.hy-forms button[type="submit"],
.hy-forms input[type="submit"],
.hy-forms .gform_wrapper .gform_button,
.hy-forms .woocommerce .button,
.hy-forms .woocommerce button.button,
.hy-forms .hy-btn,
.hy-forms .hy-s-btn,
.hy-forms .comment-form .submit,
.hy-forms .submit_otp_btn, .hy-forms .send_login_otp, .hy-forms .login_user_pass, .hy-forms .register_user_pass {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: var(--hy-field-h);
	padding: 0 22px;
	border: 0;
	border-radius: var(--hy-field-radius);
	background: var(--hy-red);
	background-image: none;
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	transition: background .15s, transform .12s, box-shadow .15s;
}
.hy-forms .w-btn:hover, .hy-forms .us-btn-style_1:hover, .hy-forms .btn:hover, .hy-forms button[type="submit"]:hover, .hy-forms input[type="submit"]:hover,
.hy-forms .gform_wrapper .gform_button:hover, .hy-forms .woocommerce .button:hover, .hy-forms .hy-btn:hover, .hy-forms .hy-s-btn:hover, .hy-forms .comment-form .submit:hover {
	background: var(--hy-red-deep);
	background-image: none;
	color: #fff;
}
.hy-forms .w-btn:focus-visible, .hy-forms .btn:focus-visible, .hy-forms button:focus-visible, .hy-forms .hy-btn:focus-visible { outline: 0; box-shadow: var(--hy-ring); }
.hy-forms .w-btn:active, .hy-forms .btn:active, .hy-forms .hy-btn:active { transform: translateY(1px); }

/* Green: confirmations and saves. */
.hy-forms .btn-success, .hy-forms .hy-btn--success, .hy-forms .hy-s-btn--success, .hy-forms #submit_user_data,
.hy-forms .woocommerce #place_order, .hy-forms .checkout-button, .hy-forms .single_add_to_cart_button, .hy-forms .us-btn-style_2 {
	background: var(--hy-green) !important;
	background-image: none !important;
	color: #fff !important;
}
.hy-forms .btn-success:hover, .hy-forms .hy-btn--success:hover, .hy-forms #submit_user_data:hover, .hy-forms .woocommerce #place_order:hover,
.hy-forms .checkout-button:hover, .hy-forms .single_add_to_cart_button:hover, .hy-forms .us-btn-style_2:hover { background: var(--hy-green-deep) !important; color: #fff !important; }

/* Quiet variants keep their shape, drop the fill. */
.hy-forms .btn-outline-light, .hy-forms .btn-outline-info, .hy-forms .btn-light, .hy-forms .btn-dim, .hy-forms .hy-btn--ghost, .hy-forms .hy-s-btn--ghost,
.hy-forms .btn-outline-primary, .hy-forms .btn-outline-secondary, .hy-forms .hy-btn:not(.hy-btn--primary):not(.hy-btn--success):not(.hy-btn--warn):not(.hy-btn--danger),
.hy-forms .hy-s-btn:not(.hy-s-btn--primary):not(.hy-s-btn--success) {
	background: var(--hy-field);
	color: var(--hy-ink);
}
.hy-forms .btn-outline-light:hover, .hy-forms .btn-outline-info:hover, .hy-forms .btn-light:hover, .hy-forms .btn-dim:hover, .hy-forms .hy-btn--ghost:hover, .hy-forms .hy-s-btn--ghost:hover,
.hy-forms .hy-btn:not(.hy-btn--primary):not(.hy-btn--success):not(.hy-btn--warn):not(.hy-btn--danger):hover,
.hy-forms .hy-s-btn:not(.hy-s-btn--primary):not(.hy-s-btn--success):hover { background: #ECEEF3; color: var(--hy-ink); }
.hy-forms .btn-sm, .hy-forms .hy-btn--small { min-height: 36px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.hy-forms .btn-icon { min-height: 40px; width: 40px; padding: 0; }

/* Single-column forms (the panel's account form, ticket forms): the primary action spans the row. */
.hy-forms .user_account_form #submit_user_data, .hy-forms .hy-s-form .hy-s-send { width: 100%; }

/* The vendor's «dashed separator» and card in the account form. */
.hy-forms .user_account_form .dashed_separator { border-top: 1px solid var(--hy-field-line); margin: 22px 0; }
.hy-forms .user_account_form h6 { font-size: 16px; font-weight: 700; margin: 0 0 14px; }
.hy-forms .user_main_data { border-radius: var(--hy-field-radius); background: var(--hy-field) !important; }

/* Rich-text editors are not text fields. */
.hy-forms .ql-container, .hy-forms .ql-toolbar, .hy-forms .ql-editor { border-radius: 0; }
.hy-forms .quill-basic { border-radius: var(--hy-field-radius); overflow: hidden; border: 1.5px solid var(--hy-field-line); }

/* The panel's account form floats its labels inside the field (DashLite
   "outlined"); the reference puts them above. */
.hy-forms .form-control-wrap { position: static; }
.hy-forms .user_account_form .form-label,
.hy-forms .form-label-outlined,
.hy-forms .form-control-wrap + .form-label,
.hy-forms .form-control-outlined ~ .form-label {
	position: static !important; transform: none !important; background: transparent !important;
	padding: 0 !important; margin: 0 0 8px !important; font-size: 14px !important; font-weight: 600 !important; color: var(--hy-ink) !important; opacity: 1 !important;
}
.hy-forms .user_account_form .form-group { display: flex; flex-direction: column; }
.hy-forms .user_account_form .form-group > .form-label { order: -1; }
.hy-forms .form-control-outlined { padding-top: 0 !important; }
.hy-forms .user_account_form .form-group .text-danger { color: var(--hy-red); }

/* The save button spans the form like the reference. */
.hy-forms .user_account_form #submit_user_data, .hy-forms .user_account_form .btn-success { display: flex !important; width: 100% !important; }

/* DashLite puts the label AFTER the input inside .form-control-wrap; flip it. */
.hy-forms .user_account_form .form-control-wrap { display: flex; flex-direction: column; }
.hy-forms .user_account_form .form-control-wrap > .form-label,
.hy-forms .user_account_form .form-control-wrap > label { order: -1; }
.hy-forms .user_account_form .form-control-wrap > .form-control,
.hy-forms .user_account_form .form-control-wrap > .select2, .hy-forms .user_account_form .form-control-wrap > .iti { order: 0; width: 100%; }

/* The save button sits in a <ul><li>; let the row span the form. */
.hy-forms .user_account_form ul:has(> li > #submit_user_data) { display: block; width: 100%; margin: 0; padding: 0; list-style: none; }
.hy-forms .user_account_form li:has(> #submit_user_data) { display: block; width: 100%; padding: 0; margin: 0; }

/* Every label in the account form is the same label, whatever class the vendor gave it. */
.hy-forms .user_account_form label { font-size: 14px !important; font-weight: 600 !important; color: var(--hy-ink) !important; opacity: 1 !important; }
.hy-forms .user_account_form .form-control-wrap > label + .form-control,
.hy-forms .user_account_form .form-control-wrap > label + .select2,
.hy-forms .user_account_form .form-control-wrap > label + .iti { margin-top: 0; }

/* ======================================================================
 * Retouch — dropdowns like text fields, switches beside their labels,
 * the soft colour glow from the reference on switches and buttons.
 * ====================================================================== */

/* selectWoo / select2: the closed box is a field, the open list is a card */
.hy-forms .select2-container { width: 100% !important; }
.hy-forms .select2-container--default .select2-selection--single,
.hy-forms .select2-container .select2-selection--single {
	min-height: var(--hy-field-h) !important; height: var(--hy-field-h) !important; padding: 0 16px !important;
	border: 1.5px solid transparent !important; border-radius: var(--hy-field-radius) !important; background: var(--hy-field) !important; box-shadow: none !important;
	display: flex !important; align-items: center !important;
}
.hy-forms .select2-container .select2-selection--single .select2-selection__rendered { padding: 0 !important; line-height: 1.6 !important; color: var(--hy-ink) !important; font-size: 14px; }
.hy-forms .select2-container .select2-selection--single .select2-selection__placeholder { color: var(--hy-placeholder); }
.hy-forms .select2-container .select2-selection--single .select2-selection__arrow { top: 0 !important; height: 100% !important; width: 40px !important; inset-inline-end: 4px; }
.hy-forms .select2-container .select2-selection--single .select2-selection__arrow b { border: 0 !important; width: 16px; height: 16px; margin: -8px 0 0 -8px !important; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center/16px no-repeat; }
.hy-forms .select2-container--open .select2-selection--single .select2-selection__arrow b { transform: rotate(180deg); }
.hy-forms .select2-container .select2-selection__clear { color: var(--hy-placeholder) !important; font-size: 16px; margin-inline-end: 8px; }
.hy-forms .select2-container--open .select2-selection--single { background: #fff !important; border-color: var(--hy-red) !important; box-shadow: var(--hy-ring) !important; }
.select2-container .select2-dropdown { border: 1px solid var(--hy-field-line) !important; border-radius: var(--hy-field-radius) !important; box-shadow: 0 16px 40px -18px rgba(20,24,40,.3) !important; overflow: hidden; margin-top: 6px; background: #fff; }
.select2-container .select2-search--dropdown { padding: 10px 10px 4px; }
.select2-container .select2-search--dropdown .select2-search__field { min-height: 40px; padding: 0 12px; border: 1.5px solid transparent !important; border-radius: 10px !important; background: var(--hy-field) !important; font: inherit; font-size: 14px; outline: 0; }
.select2-container .select2-results__option { padding: 10px 14px; font-size: 14px; color: var(--hy-ink); }
.select2-container .select2-results__option--highlighted[aria-selected], .select2-container .select2-results__option--highlighted { background: var(--hy-red-soft) !important; color: var(--hy-red-deep) !important; }
.select2-container .select2-results__option[aria-selected="true"] { background: var(--hy-field); }

/* multi-select chips */
.hy-forms .select2-container .select2-selection--multiple { min-height: var(--hy-field-h); border: 1.5px solid transparent !important; border-radius: var(--hy-field-radius) !important; background: var(--hy-field) !important; padding: 6px 10px !important; }
.hy-forms .select2-selection__choice { border: 0 !important; border-radius: 999px !important; background: #fff !important; padding: 2px 10px !important; font-size: 13px; }

/* intl-tel-input: the flag box belongs inside the same field */
.hy-forms .iti { width: 100%; display: block; }
.hy-forms .iti__flag-container { padding: 0; }
.hy-forms .iti__selected-flag { border-radius: var(--hy-field-radius) 0 0 var(--hy-field-radius); padding: 0 14px; background: transparent !important; }
.hy-forms .iti--allow-dropdown input { padding-inline-start: 84px !important; }

/* the calendar input and its popup */
.hy-forms .datepicker { cursor: pointer; }
.pdp-default, .pdp-default * { font-family: inherit !important; }
.pdp-default { border-radius: var(--hy-field-radius) !important; border: 1px solid var(--hy-field-line) !important; box-shadow: 0 16px 40px -18px rgba(20,24,40,.3) !important; }

/* vendor size modifiers must not break the rhythm */
.hy-forms .form-control-xl, .hy-forms .form-control-lg, .hy-forms .form-control-sm { min-height: var(--hy-field-h) !important; height: auto !important; font-size: 14px !important; padding: 0 16px !important; }
.hy-forms textarea.form-control-xl, .hy-forms textarea.form-control-lg { padding: 14px 16px !important; }

/* switch rows: the switch sits right after its label, with the reference's glow */
.hy-forms .custom-control.custom-switch { justify-content: flex-start; gap: 16px; }
.hy-forms .custom-switch::after, .hy-forms .hy-toggle span:last-child { box-shadow: inset 0 1px 2px rgba(0,0,0,.06); transition: background .2s, box-shadow .2s; }
.hy-forms .custom-switch:has(.custom-control-input:checked)::after,
.hy-forms .hy-toggle input:checked ~ span:last-child { box-shadow: 0 8px 18px -8px rgba(238,107,101,.75), inset 0 1px 2px rgba(0,0,0,.08); }

/* the buttons' soft colour shadow */
.hy-forms .w-btn, .hy-forms .btn, .hy-forms button[type="submit"], .hy-forms input[type="submit"], .hy-forms .gform_wrapper .gform_button, .hy-forms .woocommerce .button, .hy-forms .hy-btn--primary, .hy-forms .hy-s-btn--primary, .hy-forms .hy-cta {
	box-shadow: 0 10px 22px -12px rgba(238,107,101,.7);
}
.hy-forms .btn-success, .hy-forms .hy-btn--success, .hy-forms #submit_user_data, .hy-forms .woocommerce #place_order, .hy-forms .checkout-button, .hy-forms .single_add_to_cart_button, .hy-forms .hy-composer2-send {
	box-shadow: 0 10px 22px -12px rgba(61,180,127,.75) !important;
}
.hy-forms .btn-outline-light, .hy-forms .btn-outline-info, .hy-forms .btn-light, .hy-forms .btn-dim, .hy-forms .hy-btn--ghost, .hy-forms .hy-s-btn--ghost,
.hy-forms .hy-btn:not(.hy-btn--primary):not(.hy-btn--success):not(.hy-btn--warn):not(.hy-btn--danger), .hy-forms .hy-top-btn, .hy-forms .hy-sup-tab, .hy-forms .hy-tk-page, .hy-forms .hy-faq-vote button, .hy-forms .hy-thread2-close, .hy-forms .hy-icon-btn { box-shadow: none !important; }
.hy-forms .w-btn:hover, .hy-forms .btn:hover, .hy-forms .hy-btn--primary:hover, .hy-forms .hy-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(238,107,101,.8); }
.hy-forms .btn-success:hover, .hy-forms #submit_user_data:hover, .hy-forms .hy-composer2-send:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(61,180,127,.85) !important; }

/* fields: a whisper of depth so they read as wells, not flat rectangles */
.hy-forms input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
.hy-forms textarea, .hy-forms select, .hy-forms .form-control, .hy-forms .select2-container .select2-selection--single { box-shadow: inset 0 1px 2px rgba(20,24,40,.04); }
.hy-forms input:focus, .hy-forms textarea:focus, .hy-forms select:focus, .hy-forms .form-control:focus { box-shadow: var(--hy-ring) !important; }

/* section headings and the spacing rhythm in the account form */
.hy-forms .user_account_form .row.g-4 { row-gap: 20px !important; }
.hy-forms .user_account_form h6 { margin-bottom: 4px; }
.hy-forms .user_account_form .form-group { margin-bottom: 0; }
.hy-forms .user_account_form .avatar-upload-section .btn { min-height: 42px; padding: 0 16px; font-size: 13px; }

/* account form, last details: every caption above its field; eye icon inside
   the password field; the phone's country box clear of the digits; select's
   clear «×» clear of its arrow */
.hy-forms .user_account_form .form-control-wrap { position: relative; }
.hy-forms .user_account_form .form-control-wrap > :is(label, span, div, small):not(.select2):not(.iti):not(.form-icon):not(.form-control):not(.select2-container) {
	order: -1; display: block; margin: 0 0 8px !important; font-size: 14px !important; font-weight: 600 !important; color: var(--hy-ink) !important; opacity: 1 !important;
}
.hy-forms .user_account_form .form-control-wrap > .form-note, .hy-forms .user_account_form .form-control-wrap > .text-soft.fs-12px { order: 1; font-size: 12px !important; font-weight: 400 !important; color: var(--hy-soft) !important; margin: 6px 0 0 !important; }
.hy-forms .user_account_form .form-icon { position: absolute; top: auto !important; bottom: 0 !important; height: var(--hy-field-h) !important; display: flex; align-items: center; padding: 0 14px; color: var(--hy-placeholder); z-index: 2; }
.hy-forms .user_account_form .form-icon-right { inset-inline-end: auto !important; inset-inline-start: 0 !important; }
.hy-forms .iti input, .hy-forms .iti input[type="tel"] { padding-left: 96px !important; padding-right: 16px !important; direction: ltr; text-align: left; }
.hy-forms .iti .iti__country-container, .hy-forms .iti .iti__flag-container { left: 0 !important; right: auto !important; padding: 0 0 0 6px; }
.hy-forms .iti .iti__selected-country, .hy-forms .iti .iti__selected-flag { height: 100%; padding: 0 10px; background: transparent !important; border-radius: 0; }
.hy-forms .select2-container .select2-selection--single .select2-selection__clear { position: absolute; inset-inline-end: 44px; top: 50%; transform: translateY(-50%); margin: 0 !important; font-size: 18px; line-height: 1; z-index: 2; }

/* ======================================================================
 * Account form, round three — the switch itself is clickable, the phone's
 * country list is a card like every other dropdown, the business logo
 * uploader is a field like the rest.
 * ====================================================================== */

/* The invisible checkbox stretches over the whole row, so the label and
   the drawn switch both toggle it — one native click, no double firing. */
.hy-forms .custom-control.custom-switch { position: relative; }
.hy-forms .custom-switch .custom-control-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.hy-forms .custom-switch .custom-control-label { pointer-events: none; }

/* intl-tel-input v29: dropdown card, search row, country rows */
.hy-forms .iti__dropdown-content {
	border: 1.5px solid var(--hy-field-line); border-radius: var(--hy-field-radius); background: #fff;
	box-shadow: 0 18px 44px -18px rgba(20,24,40,.35); overflow: hidden; margin-top: 6px; z-index: 100001;
}
.hy-forms .iti__search-input, .hy-forms .iti__search-input:focus {
	min-height: 44px !important; height: 44px !important; border: 0 !important; border-bottom: 1px solid var(--hy-field-line) !important; border-radius: 0 !important;
	background: #fff !important; box-shadow: none !important; padding: 0 16px !important; font-size: 14px; direction: rtl; text-align: right; width: 100%;
}
.hy-forms .iti__country-list { border: 0; border-radius: 0; box-shadow: none; max-height: 232px; padding: 6px 0; margin: 0; }
.hy-forms .iti__country { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 14px; color: var(--hy-ink); direction: rtl; }
.hy-forms .iti__country.iti__highlight, .hy-forms .iti__country:hover { background: var(--hy-field); }
.hy-forms .iti__country-name { flex: 1 1 auto; }
.hy-forms .iti__dial-code { color: var(--hy-soft); }
.hy-forms .iti__divider { border-color: var(--hy-field-line); margin: 6px 0; }

/* business logo: caption, dashed drop box, quiet button, preview tile */
.hy-forms .user_account_form .hy-logo-caption { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--hy-ink); }
.hy-forms .user_account_form .hy-logo-row {
	display: flex; align-items: center; gap: 14px; margin: 0; padding: 10px 12px; min-height: var(--hy-field-h);
	border: 1.5px dashed #D3D8E2; border-radius: var(--hy-field-radius); background: var(--hy-field);
}
.hy-forms .user_account_form .hy-logo-row img { height: 44px; width: 44px; object-fit: contain; border-radius: 10px; border: 1px solid var(--hy-field-line); background: #fff; padding: 4px; }
.hy-forms .user_account_form .hy-logo-btn.btn {
	display: inline-flex !important; align-items: center; gap: 8px; min-height: 40px !important; height: 40px; padding: 0 16px !important; font-size: 13px !important; font-weight: 600;
	background: #fff !important; color: var(--hy-ink) !important; border: 1.5px solid var(--hy-field-line) !important; border-radius: 10px !important; box-shadow: 0 6px 14px -10px rgba(20,24,40,.35) !important; cursor: pointer;
}
.hy-forms .user_account_form .hy-logo-btn.btn::before {
	content: ""; width: 16px; height: 16px; flex: 0 0 16px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EE6B65' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4m0 0-4 4m4-4 4 4M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E");
}
.hy-forms .user_account_form .hy-logo-btn.btn:hover { border-color: var(--hy-red) !important; color: var(--hy-red) !important; }
.hy-forms .user_account_form .hy-logo-state { font-size: 12px; color: var(--hy-soft); }
.hy-forms .user_account_form .hy-job-hint { display: block; margin: 6px 0 0; font-size: 12px; color: var(--hy-soft); }
/* the row is only as wide as its label and switch, so empty space beside it is not a click target */
.hy-forms .custom-control.custom-switch { display: inline-flex; width: max-content; max-width: 100%; }
.hy-forms .iti__search-input, .hy-forms .iti__search-input:focus { padding-right: 44px !important; }
.hy-forms .iti__search-icon { right: 14px; left: auto; }
.hy-forms .iti__search-clear { left: 10px; right: auto; }
.hy-forms .user_account_form .form-control-wrap:has(.iti) { z-index: 5; }
/* every caption the same height, so the two columns of the account form line up */
.hy-forms .user_account_form label:not(.custom-control-label):not(.hy-logo-btn), .hy-forms .user_account_form .hy-logo-caption { line-height: 24px !important; min-height: 24px; }

/* ======================================================================
 * Round four — no red frame on focus, buttons never fall back to the
 * theme's hover gradient, the phone field is one flex row so the country
 * box never sits under the digits, and a form's "thank you" is a card.
 * ====================================================================== */

/* focus: the field lifts to white with a hairline, nothing red */
.hy-forms { --hy-ring: 0 0 0 4px rgba(30, 28, 38, .05); }
.hy-forms input:focus:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.hy-forms textarea:focus, .hy-forms select:focus, .hy-forms .form-control:focus, .hy-forms .form-select:focus, .hy-forms .woocommerce .input-text:focus,
.hy-forms .select2-container--default.select2-container--focus .select2-selection--single,
.hy-forms .select2-container--default.select2-container--open .select2-selection--single,
.hy-forms .iti:focus-within {
	border-color: #E1E4EC !important; background-color: #fff !important; box-shadow: 0 0 0 4px rgba(30, 28, 38, .05) !important; outline: 0 !important;
}
.hy-forms .gfield_error input:focus, .hy-forms .gfield_error textarea:focus { border-color: var(--hy-red) !important; background-color: #fff !important; }

/* hover: the deep red or deep green, whatever the theme tries to paint */
.hy-forms .w-btn:hover, .hy-forms .us-btn-style_1:hover, .hy-forms .btn:hover, .hy-forms button[type="submit"]:hover, .hy-forms input[type="submit"]:hover,
.hy-forms .gform_wrapper .gform_button:hover, .hy-forms .woocommerce .button:hover, .hy-forms .hy-btn--primary:hover, .hy-forms .hy-cta:hover, .hy-forms .comment-form .submit:hover,
.hy-forms .w-btn:focus, .hy-forms .gform_wrapper .gform_button:focus, .hy-forms input[type="submit"]:focus {
	background-color: var(--hy-red-deep) !important; background-image: none !important; color: #fff !important; border-color: transparent !important; filter: none !important; opacity: 1 !important;
}
.hy-forms .w-btn::before, .hy-forms .w-btn::after, .hy-forms .gform_button::before, .hy-forms .gform_button::after { display: none !important; }
.hy-forms .btn-success:hover, .hy-forms .hy-btn--success:hover, .hy-forms #submit_user_data:hover, .hy-forms .woocommerce #place_order:hover, .hy-forms .checkout-button:hover,
.hy-forms .single_add_to_cart_button:hover, .hy-forms .us-btn-style_2:hover, .hy-forms .hy-composer2-send:hover {
	background-color: var(--hy-green-deep) !important; background-image: none !important; color: #fff !important;
}
.hy-forms .btn-outline-light:hover, .hy-forms .btn-outline-info:hover, .hy-forms .btn-light:hover, .hy-forms .btn-dim:hover, .hy-forms .hy-btn--ghost:hover { background-color: #ECEEF3 !important; background-image: none !important; color: var(--hy-ink) !important; }

/* intl-tel-input: the wrapper is the field; country box and digits share the row */
.hy-forms .iti, .hy-forms .user_account_form .form-control-wrap > .iti {
	display: flex !important; align-items: stretch; width: 100%; min-height: var(--hy-field-h); position: relative;
	background: var(--hy-field); border: 1.5px solid transparent; border-radius: var(--hy-field-radius); box-shadow: inset 0 1px 2px rgba(20,24,40,.04);
	transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.hy-forms .iti .iti__country-container, .hy-forms .iti .iti__flag-container {
	position: static !important; flex: 0 0 auto; display: flex; align-items: stretch; padding: 0 !important; margin: 0; inset: auto !important;
}
.hy-forms .iti .iti__selected-country, .hy-forms .iti .iti__selected-flag {
	display: flex; align-items: center; gap: 6px; height: 100%; min-height: calc(var(--hy-field-h) - 3px); padding: 0 12px 0 14px; margin: 0;
	background: transparent !important; border: 0; border-inline-end: 1.5px solid #E1E4EC; border-radius: 0; color: var(--hy-ink); font-size: 14px; direction: ltr;
}
.hy-forms .iti .iti__selected-country:hover { background: rgba(30,28,38,.04) !important; }
.hy-forms .iti .iti__selected-dial-code { font-weight: 600; color: var(--hy-ink); }
.hy-forms .iti input, .hy-forms .iti input[type="tel"], .hy-forms .iti .form-control, .hy-forms .iti .form-control-xl, .hy-forms .iti .large, .hy-forms .iti .medium {
	flex: 1 1 auto; min-width: 0; width: auto !important; min-height: 0 !important; height: auto !important;
	padding: 0 14px !important; border: 0 !important; border-radius: 0 var(--hy-field-radius) var(--hy-field-radius) 0 !important; background: transparent !important; box-shadow: none !important;
	direction: ltr; text-align: left;
}
.hy-forms .iti input:focus { box-shadow: none !important; background: transparent !important; }
.hy-forms .iti__dropdown-content { top: calc(100% + 6px); left: 0; right: auto; min-width: 320px; max-width: 100%; }
.hy-forms .iti--fullscreen-popup .iti__dropdown-content { top: auto; left: auto; right: auto; }
.hy-forms .gfield_error .iti { border-color: var(--hy-red); background: var(--hy-red-soft); }

/* Gravity Forms: the thank-you and the error summary, both as cards */
.hy-forms .gform_confirmation_wrapper, .hy-forms .gform_confirmation_message {
	display: block; text-align: center;
}
.hy-forms .gform_confirmation_message {
	position: relative; max-width: 560px; margin: 24px auto; padding: 68px 32px 34px;
	background: #fff; border: 1.5px solid #E8F5EE; border-radius: 18px; box-shadow: 0 24px 50px -30px rgba(61,180,127,.5), 0 2px 10px -6px rgba(30,28,38,.12);
	color: var(--hy-ink); font-size: 16px; font-weight: 600; line-height: 1.9; text-wrap: balance;
}
.hy-forms .gform_confirmation_message::before {
	content: ""; position: absolute; top: 20px; inset-inline-start: 50%; transform: translateX(50%);
	width: 40px; height: 40px; border-radius: 12px; background: #EEF8F3 no-repeat center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233DB47F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
[dir="ltr"] .hy-forms .gform_confirmation_message::before { transform: translateX(-50%); }
.hy-forms .gform_confirmation_message p { margin: 0 0 6px; }
.hy-forms .gform_confirmation_message p:last-child { margin: 0; }
.hy-forms .gform_confirmation_message a { color: var(--hy-red); font-weight: 700; }
.hy-forms .gform_validation_errors {
	max-width: 100%; margin: 0 0 20px; padding: 14px 18px 14px 48px; border: 1.5px solid #FBD3D0; border-radius: 12px; background: var(--hy-red-soft); box-shadow: none;
	color: #B8423C; font-size: 13.5px; position: relative;
}
.hy-forms .gform_validation_errors::before {
	content: "!"; position: absolute; top: 12px; inset-inline-start: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--hy-red); color: #fff; font-weight: 800; line-height: 24px; text-align: center;
}
.hy-forms .gform_validation_errors h2 { margin: 0; font-size: 14px; font-weight: 700; color: #B8423C; }
.hy-forms .gform_validation_errors ol { margin: 6px 0 0; padding: 0 18px 0 0; }
.hy-forms .gform_validation_errors a { color: #B8423C; text-decoration: underline dotted; }
.hy-forms .gfield_validation_message, .hy-forms .validation_message { margin: 6px 0 0; padding: 0; background: transparent; border: 0; color: var(--hy-red); font-size: 12.5px; font-weight: 500; }

/* Phones: 16px inside fields, otherwise iOS zooms the page when a field is
   focused and the phone field seems to jump and grow. */
@media (max-width: 767px) {
	.hy-forms input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), .hy-forms textarea, .hy-forms select, .hy-forms .form-control, .hy-forms .form-control-xl,
	.hy-forms .iti input, .hy-forms .iti__search-input, .hy-forms .select2-container .select2-selection--single .select2-selection__rendered, .hy-forms .select2-search__field, .hy-forms .hy-otp-box { font-size: 16px !important; }
}

/* Gravity Forms on a dark row: captions take the surrounding text colour. */
.hy-forms .gform_wrapper .gfield_label, .hy-forms .gform_wrapper legend.gfield_label, .hy-forms .gform_wrapper .gfield_description,
.hy-forms .gform_wrapper .ginput_complex label, .hy-forms .gform_wrapper .gfield_consent_label { color: inherit !important; }
.hy-forms .gform_wrapper .gfield_description { opacity: .75; }

/* The phone input must stay inside its row: flex-basis zero, whatever width
   Gravity Forms' size classes ask for (it used to overflow to the right and
   the page slid sideways on focus). */
.hy-forms .iti { overflow: hidden; }
.hy-forms .iti > input, .hy-forms .iti > input.large, .hy-forms .iti > input.medium, .hy-forms .iti > input.small,
.hy-forms .gform_wrapper .gfield .iti input[type="tel"], .hy-forms .gform_wrapper .gfield .iti input.large, .hy-forms .gform_wrapper .gfield .iti input.medium,
.hy-forms .user_account_form .iti input { flex: 1 1 0% !important; width: 0 !important; min-width: 0 !important; max-width: none !important; }