/*
 * Shared baseline styles for shared form blocks (templates/shared/forms/*).
 * Selectors are wrapped in :where() => specificity 0, so any theme CSS overrides them
 * (except the password checklist layout, see below).
 */
/*
 * Messenger row (shared/forms/fields/messenger.html.twig). Plain-class selectors on purpose: every theme must get
 * the same layout, so theme rules like `.custom-dropdown { width: 260px }` / `.custom-dropdown-wrapper { display: flex }`
 * must not win. Row 1 = dropdown + input (same height), row 2 = their errors, each under its own column.
 */
.custom-dropdown-wrapper--inline { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: stretch; width: 100%; }
.custom-dropdown-wrapper--inline > .custom-dropdown { grid-column: 1; grid-row: 1; width: auto; min-width: 0; }
.custom-dropdown-wrapper--inline > .input-wrapper { grid-column: 2; grid-row: 1; width: auto; min-width: 0; }
.custom-dropdown-wrapper--inline > .custom-dropdown-errors { grid-column: 1; grid-row: 2; min-width: 0; }
.custom-dropdown-wrapper--inline > .input-wrapper-errors { grid-column: 2; grid-row: 2; min-width: 0; }
.custom-dropdown-wrapper--inline > .custom-dropdown > .select-selected { height: 100%; box-sizing: border-box; }
.custom-dropdown-wrapper--inline > .custom-dropdown > .select-items { top: 100%; }
.custom-dropdown-wrapper--inline > .input-wrapper > *,
.custom-dropdown-wrapper--inline > .input-wrapper input { height: 100%; box-sizing: border-box; border-radius: 0 4px 4px 0; }
/* stacked (ua11): dropdown above the input, errors below both */
.custom-dropdown-wrapper--stacked { display: flex; flex-direction: column; width: 100%; }
/* dropdown width = its longest option: hidden copies of all options share one grid cell with the selected value */
.custom-dropdown .select-value { display: inline-grid; align-items: center; }
.custom-dropdown .select-value > * { grid-area: 1 / 1; }
.custom-dropdown .select-sizer { visibility: hidden; display: flex; align-items: center; gap: 12px; white-space: nowrap; pointer-events: none; }
.custom-dropdown .selected-content { white-space: nowrap; }
/* form icons: <svg class="form-icon"> from web/shared/img/form-icons.svg (form_icon() in Twig) */
:where(.form-icon) { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; flex-shrink: 0; }
:where(.custom-dropdown) { position: relative; user-select: none; cursor: pointer; }
:where(.custom-dropdown .select-selected) {
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
  height: 100%; box-sizing: border-box; padding: 10px 12px;
  background: #fff; color: #212529; border: 1px solid #ced4da; border-right: none; border-radius: 4px 0 0 4px;
  font-size: 15px; line-height: 20px;
}
:where(.custom-dropdown + .input-wrapper input) { width: 100%; box-sizing: border-box; border-radius: 0 4px 4px 0; }
:where(.custom-dropdown .selected-content) { display: flex; align-items: center; gap: 8px; }
:where(.custom-dropdown .arrow-icon) { font-size: .8rem; transition: transform .2s ease; }
:where(.custom-dropdown .arrow-rotate) { transform: rotate(180deg); }
:where(.custom-dropdown .select-items) {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 99; margin-top: 2px;
  background: #fff; color: #212529; border: 1px solid #ced4da; border-radius: 4px; overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,.08); transition: opacity .2s ease, transform .2s ease;
}
:where(.custom-dropdown .select-items > div) { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 15px; }
:where(.custom-dropdown .select-items > div:hover) { background: #f1f3f5; }
:where(.custom-dropdown .select-hide) { opacity: 0; transform: translateY(-6px); pointer-events: none; }
:where(.custom-dropdown .form-icon) { font-size: 1.15rem; display: block; }
:where(.custom-dropdown .form-icon--telegram) { color: #24A1DE; }
:where(.custom-dropdown .form-icon--facebook) { color: #1877F2; }
:where(.custom-dropdown .form-icon--microsoft-teams) { color: #4B53BC; }
:where(.custom-dropdown .form-icon--chat-left-text-fill) { color: #7360F2; }
:where(.custom-dropdown .form-icon--whatsapp) { color: #25D366; }
:where(.custom-dropdown .form-icon--instagram) { color: #E1306C; }

/* captcha v2 widget container */
:where([data-captcha-v2]) { display: flex; justify-content: center; margin: 8px 0; }
:where([data-captcha-v2][hidden]), :where([data-captcha-v2].hidden) { display: none; }
/* nothing visible in the captcha block (v2 hidden, no error text): take it out of the layout, otherwise a flex/grid
   form gives the empty block its own gap. form-validation.js un-hides v2 and fills the error, so the block comes back. */
.form-captcha-off, [data-captcha]:not(:has([data-captcha-v2]:not([hidden]), [data-captcha-error]:not(:empty))) { display: none; }

/* password checklist (form-validation.js): neutral -> .is-met (green) / .is-unmet (red, after the field was touched) */
/* layout via a plain class: theme resets like `ul { margin: 0 }` must not win; colours stay overridable */
.password-checklist { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; line-height: 1.45; text-align: left; }
.password-checklist li { position: relative; margin: 0; padding: 0 0 0 20px; }
:where(.password-checklist li) { opacity: .75; transition: color .15s ease, opacity .15s ease; }
:where(.password-checklist li)::before { content: "\25CB"; position: absolute; left: 2px; top: 0; width: 14px; text-align: center; }
:where(.password-checklist li.is-met) { color: #1e9e57; opacity: 1; }
:where(.password-checklist li.is-met)::before { content: "\2713"; font-weight: 700; }
:where(.password-checklist li.is-unmet) { color: #dc3545; opacity: 1; }
:where(.password-checklist li.is-unmet)::before { content: "\2715"; }

/* password input + show/hide icon box (popup templates). Plain class: themes that centre field children
   (e.g. egypt `.field { align-items: center }`) must not shrink it; the icon is positioned against this box. */
.password-wrapper { position: relative; width: 100%; align-self: stretch; box-sizing: border-box; }
/* no baseline gap under an inline input: the box is exactly as tall as the input, so the icon centres on it */
.password-wrapper > input { vertical-align: top; }
/* show/hide icon: centred on the input in every theme (replaces theme float + negative margin hacks) */
.password-wrapper > .field-icon[data-password-toggle],
.password-wrapper > [data-password-toggle] {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  float: none; margin: 0; z-index: 2;
}
:where(.password-wrapper > [data-password-toggle]) { cursor: pointer; line-height: 1; }

/* ===== shared form theme (shared/forms/form_theme.html.twig): default look, zero specificity ===== */
:where(.form-field__control) { position: relative; width: 100%; }
:where(.form-field__clear, .form-field__error-icon, .form-field__eye) {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  margin: 0; padding: 0; border: 0; background: none; color: inherit; line-height: 1; transition: opacity .2s;
}
:where(.form-field__input.has-value, .form-field__control_password .form-field__input) { padding-right: 44px; }
/* text fields: clear button while filled, error icon instead of it while invalid */
:where(.form-field__clear) { opacity: 0; pointer-events: none; cursor: pointer; }
:where(.form-field__input.has-value ~ .form-field__clear) { opacity: .6; pointer-events: auto; }
:where(.form-field__input.has-value ~ .form-field__clear:hover) { opacity: 1; }
:where(.form-field__error-icon) { opacity: 0; pointer-events: none; color: #dc3545; }
:where(.form-field__input[aria-invalid="true"] ~ .form-field__clear) { opacity: 0; pointer-events: none; }
:where(.form-field__input[aria-invalid="true"] ~ .form-field__error-icon) { opacity: 1; }
/* password: eye only, icon follows the state */
:where(.form-field__eye) { cursor: pointer; opacity: .7; font-size: 1.1em; }
:where(.form-field__eye:hover) { opacity: 1; }
:where(.form-field__eye .form-field__eye-hide) { display: none; }
:where(.form-field__eye.is-visible .form-field__eye-show) { display: none; }
:where(.form-field__eye.is-visible .form-field__eye-hide) { display: inline; }
/* reCAPTCHA notice: required by Google when the badge is hidden; as unobtrusive as possible */
:where(.form-legal) { margin: 6px 0 0; font-size: 8px; line-height: 1.3; opacity: .55; text-align: center; }
:where(.form-legal a) { color: inherit; text-decoration: underline; }
/* the notice is one small line of text in every theme: theme rules for links / blocks inside forms (float, display:block,
   own font, margins) must not reach it, hence the higher specificity here */
[data-captcha-legal].form-legal { display: block; float: none; width: 100%; font-size: 8px; line-height: 1.3; }
[data-captcha-legal].form-legal a {
  display: inline; float: none; position: static; width: auto; height: auto; margin: 0; padding: 0; border: 0;
  font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; text-decoration: underline; background: none;
}
/* submit while the form is being sent */
:where(.form-submit.is-loading, button[type="submit"].is-loading) { cursor: progress; opacity: .7; }
/* advertiser-only block: full width, children spaced like the form's own rows (gap inherited from a flex form) */
:where(.form-depends) { display: flex; flex-direction: column; gap: inherit; width: 100%; align-self: stretch; }
:where(.form-depends[hidden]) { display: none; }

#captchaV2.hidden, .captcha-v2.hidden { display: none; }