/* ============================================================
   Hazri Tax form (#hazeri_mas)
   ----------------------------
   Styles for the multi-step tax-refund questionnaire and its
   branching variants (age 70-80 → insurance, status_job=עצמאי
   → business loan). The form HTML is rendered by Elementor +
   the DCE form-step plugin; these rules override their defaults
   and add the custom pill radios, grid layout, branch-step UI,
   button equalization, slider sizing, and input theming.
   All selectors are scoped to #hazeri_mas so nothing leaks to
   other forms or pages.
   ============================================================ */

/* Button-style radio options for the hazri_mas form.
   Hides the native radio circle and turns each label into a pill button.
   Palette is built around #ccd4e0 (default) → darker shades for hover/selected. */
#hazeri_mas .elementor-field-type-radio .elementor-field-subgroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
#hazeri_mas .elementor-field-type-radio .elementor-field-option {
  margin: 0;
  width: 100%;
}
/* Visually hide the radio but keep it focusable + click-toggleable via the label */
#hazeri_mas
  .elementor-field-type-radio
  .elementor-field-option
  input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
#hazeri_mas .elementor-field-type-radio .elementor-field-option label {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 24px;
  border-radius: 10px;
  background-color: #ecf0f3;
  color: #2c3a55;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  border: solid 1px #c2d3e5;
  margin: 0;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
#hazeri_mas .elementor-field-type-radio .elementor-field-option label:hover {
  background-color: #e1e9f2;
}
#hazeri_mas
  .elementor-field-type-radio
  .elementor-field-option
  input[type="radio"]:focus-visible
  + label {
  border-color: #2c3a55;
  outline: none;
}
#hazeri_mas
  .elementor-field-type-radio
  .elementor-field-option
  input[type="radio"]:checked
  + label {
  background-color: #5d9cec;
  color: #fff;
}
#hazeri_mas
  .elementor-field-type-radio
  .elementor-field-option
  input[type="radio"]:checked
  + label:hover {
  background-color: #1f2b40;
}

/* Make the form fill its container at every layer so the columns can
   spread out and questions don't wrap. Using !important here because
   Elementor (and the DCE form-step plugin) ship default rules that
   constrain widths and add negative margins — those rules can match
   with equal or higher specificity than ours.
   Also override the wrapper's default flex layout to block so the
   dce-form-step (which we make a grid below) reliably gets a full row. */
#hazeri_mas,
#hazeri_mas .elementor-form-fields-wrapper,
#hazeri_mas .dce-form-step {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}
#hazeri_mas .elementor-form-fields-wrapper {
  display: block !important;
}

/* Elementor's progress-bar indicators block ships with a large bottom
   margin (typically 40px+) that leaves a tall empty band between the
   progress meter and the first form field. Tighten it so the form
   sits closer to the meter without crowding it. */
#hazeri_mas .e-form__indicators {
  margin-bottom: 12px;
}

/* Force a 2-column grid on the visible step so col-50 field-groups in the
   same row share a single grid row that aligns at its top. minmax(0, 1fr)
   is the standard trick to make grid columns truly equal regardless of
   intrinsic content widths — without it, long labels can pull a column
   wider and squash the form against one edge.
   The :not(.elementor-hidden) filter keeps display:none on hidden steps
   so the navigation we built on top still works. */
#hazeri_mas .dce-form-step:not(.elementor-hidden) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 12px;
  align-items: start;
  width: 100%;
}
/* Full-width rows: HTML helpers, .elementor-col-100 fields, and form buttons. */
#hazeri_mas .dce-form-step:not(.elementor-hidden) > .elementor-col-100,
#hazeri_mas .dce-form-step:not(.elementor-hidden) > .e-form__buttons {
  grid-column: 1 / -1;
}
/* Elementor's .elementor-col-50 sets width:50% for its flex layout. Inside our
   grid that gets interpreted as 50% of the grid cell — which shrinks each
   field-group to 25% of the form. Force every field-group to fill its cell. */
#hazeri_mas .dce-form-step:not(.elementor-hidden) > .elementor-field-group {
  width: 100% !important;
  max-width: 100% !important;
  justify-self: stretch;
}

/* Within radio field-groups, reserve vertical space for up-to-2-line
   questions so single-line and two-line labels in the same grid row
   produce option starts at the same Y. 2.8em covers two lines at the
   form's line-height without leaving excessive whitespace beneath
   single-line questions. */
#hazeri_mas .elementor-field-type-radio .elementor-field-label {
  min-height: 2.8em;
  display: block;
  margin: 0;
}
#hazeri_mas .elementor-field-type-radio .elementor-field-subgroup {
  margin-top: 4px;
}

/* Collapse to a single column on narrow viewports. Two col-50 questions
   side by side at ~200px each leave no room for the labels to breathe;
   stacking them gives the full form width to each question, which keeps
   labels readable and option pills comfortably tappable on mobile. The
   grid-column: 1 / -1 rule above still works in a 1-column grid (it
   just spans the only column), so col-100 rows stay full-width too.
   Also: on mobile each question now has the full width to work with,
   so the radio options switch from a vertical stack to a wrapping row.
   Binary yes/no questions sit side-by-side; 3- and 4-option questions
   wrap to two per row. flex-basis: calc(50% - 4px) accounts for the
   8px gap so two items fit cleanly without overflowing.
   NOTE: this block must stay AFTER the desktop label/subgroup defaults
   above — at equal specificity, source order decides the cascade, so
   if this block moves above them the desktop rules win even on mobile. */
@media (max-width: 768px) {
  #hazeri_mas .dce-form-step:not(.elementor-hidden) {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
  #hazeri_mas .elementor-field-type-radio .elementor-field-subgroup {
    flex-direction: row;
    flex-wrap: wrap;
  }
  #hazeri_mas .elementor-field-type-radio .elementor-field-option {
    width: auto;
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
  /* Tighten the gap between a question's label and its answer pills on
       mobile. The label's min-height: 2.8em reserve (which aligns option
       starts when two questions share a desktop row) is pure dead space
       in a single-column mobile layout, so zero it out. We control the
       remaining label→answers gap from the subgroup's margin-top — the
       subgroup IS the answers container, so its top margin is the
       semantically correct place to express "space before the answers".
       The spacing BETWEEN separate question groups (Elementor's 35px
       field-group bottom margin + grid row-gap) is intentionally
       untouched so the visual rhythm stays. */
  #hazeri_mas .elementor-field-type-radio .elementor-field-label {
    min-height: 0;
  }
  #hazeri_mas .elementor-field-type-radio .elementor-field-subgroup {
    margin-top: 0.5rem;
  }
  /* On mobile the prev/next buttons stack vertically (Elementor's
     responsive default). Reverse the visual order so "המשך לשלב הבא"
     (next/primary action) sits ABOVE "חזור אחורה" — primary action
     should be the first thing the thumb reaches when scrolling to the
     bottom of the step. flex-direction: column-reverse only changes
     paint order; tab order and DOM order stay prev-then-next, so
     keyboard navigation isn't affected.
     align-items: center horizontally centers each button wrapper in the
     column (Elementor's mobile default stretches them along the RTL
     start edge, which leaves them flush right). */
  #hazeri_mas .e-form__buttons {
    flex-direction: column-reverse;
    align-items: center;
  }
}

/* Branch step is a single-question layout — center the prompt and lay the
   yes/no buttons in one row instead of the default stacked column. To
   actually center the question text we need the label to be a full-width
   block (an inline/inline-block label is only as wide as its text, so
   text-align does nothing visually). We force display:block + width:100%
   with !important to beat Elementor's defaults, and also set text-align
   on the field-group parent as a belt-and-suspenders fallback. */
#dce-form-step-hazri-branch-step .elementor-field-type-radio {
  text-align: center !important;
}
#dce-form-step-hazri-branch-step
  .elementor-field-type-radio
  .elementor-field-label {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  min-height: 0;
}
#dce-form-step-hazri-branch-step
  .elementor-field-type-radio
  .elementor-field-subgroup {
  flex-direction: row;
  justify-content: center;
  gap: 12px;
}
#dce-form-step-hazri-branch-step
  .elementor-field-type-radio
  .elementor-field-option {
  width: auto;
  flex: 1 1 0;
  max-width: 200px;
}

/* Equalize every navigation button: prev/next on steps 1-4 and the
   branch step, plus the final submit button on step 5 (which doesn't
   carry the -next suffix — it's marked as submit by its wrapper's
   .elementor-field-type-submit class instead). The min-width needs to
   exceed the natural width of the longest label at any viewport size:
   200px works at desktop font sizes, but mobile font/padding bumps the
   natural width of "המשך לשלב הבא" past that, leaving the prev button
   clamped to 200px while next sits at ~260px (uneven). 260px clears
   both labels at every breakpoint so all buttons render identically. */
#hazeri_mas .e-form__buttons__wrapper__button-next,
#hazeri_mas .e-form__buttons__wrapper__button-previous,
#hazeri_mas .elementor-field-type-submit .e-form__buttons__wrapper__button {
  min-width: 260px;
}

/* Loan-amount slider on the self-employed branch was rendering at the
   full form width, which dwarfed the yes/no buttons above it. Cap the
   wrapper and center it so the slider, label, and min/max ticks all sit
   in a tighter, more proportional block.
   Scoped through #hazeri_mas to make this a 2-ID selector — the earlier
   ".dce-form-step > .elementor-field-group" rule (which forces all
   field-groups to fill their grid cell) uses !important AND has 1 ID +
   3 classes of specificity, so a plain "#hazri-loan-amount-wrap" rule
   loses to it even with !important. Two IDs beat one ID + classes. */
#hazeri_mas #hazri-loan-amount-wrap {
  max-width: 480px !important;
  margin: 12px auto 0 !important;
  text-align: center;
  padding-bottom: 1rem;
}

/* Step 5 has three auxiliary col-100 wrappers that hold no visible
   content but still consume grid rows: the SMS verification UI (hidden
   until phone code is requested), the lm_serfer tracking input, and
   the chanel hidden input. Each leaves a blank row between the terms
   checkbox and the prev/submit buttons.
   display:contents removes the wrapper from rendering entirely (no
   grid row, no box) while keeping its children in the document tree —
   so when JS flips .container-sms from display:none to display:block
   later, it appears as a direct grid child without us having to also
   re-show its outer wrapper. */
#hazeri_mas .elementor-field-type-hidden,
#hazeri_mas .elementor-field-type-html:has(.lm_serfer),
#hazeri_mas .elementor-field-type-html:has(.container-sms) {
  display: contents;
}
/* When the SMS container becomes visible, it's now a direct grid item;
   span the full row so it doesn't sit awkwardly in one column. */
#hazeri_mas .container-sms {
  grid-column: 1 / -1;
}

/* Input fields styled as lighter cousins of the radio button pills so
   the whole form reads as one cohesive palette. Inputs sit at a lighter
   tint of the radio default (#ccd4e0) — same hue family, softer weight.
   Hover/focus darken toward the radio default and apply the radio
   selected-state border on focus. Covers all text-like Elementor inputs
   (text, tel, number, email, select) plus the standalone SMS code input
   that lives outside Elementor's field structure.
   !important on each property because Elementor's default field rules
   are scoped tightly enough (.elementor-form .elementor-field…) to beat
   a plain #id + 2 class selector. */
#hazeri_mas input.elementor-field-textual,
#hazeri_mas select.elementor-field-textual,
#hazeri_mas #smscode {
  background-color: #ecf0f3 !important;
  color: #2c3a55 !important;
  border: solid 1px #c2d3e5 !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}
#hazeri_mas input.elementor-field-textual:hover,
#hazeri_mas select.elementor-field-textual:hover,
#hazeri_mas #smscode:hover {
  background-color: #d8e0eb !important;
}
#hazeri_mas input.elementor-field-textual:focus,
#hazeri_mas select.elementor-field-textual:focus,
#hazeri_mas #smscode:focus {
  background-color: #d8e0eb !important;
  border-color: #2c3a55 !important;
  outline: none !important;
}
#hazeri_mas input.elementor-field-textual::placeholder,
#hazeri_mas #smscode::placeholder {
  color: #7b8aa4;
}
/* Chrome/Safari paint a hard-coded background (#E8F0FE) and text color
   over any autofilled input, overriding our colors. The standard
   workaround is a giant inset box-shadow that re-paints the input's
   interior in our color, plus -webkit-text-fill-color for the text. */
#hazeri_mas input.elementor-field-textual:-webkit-autofill,
#hazeri_mas select.elementor-field-textual:-webkit-autofill,
#hazeri_mas #smscode:-webkit-autofill,
#hazeri_mas input.elementor-field-textual:-webkit-autofill:hover,
#hazeri_mas input.elementor-field-textual:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #e5eaf1 inset !important;
  -webkit-text-fill-color: #2c3a55 !important;
  caret-color: #2c3a55;
}

/* Inline validation message shown beneath the branch step's yes/no question
   when the user clicks "next" without selecting an answer. Matches the look
   of the existing phone-validation message (red, centered, small). */
#hazeri_mas .hazri-field-error {
  color: #ff0000;
  margin: 8px 0 0;
  /* !important to beat the RTL theme's default right-aligned <p> style
     that would otherwise leave the message flush against the right edge. */
  text-align: center !important;
  font-size: 19px;
  padding: 0;
  width: 100%;
}

/* Loan-amount slider on the self-employed branch. The wrapper itself is
   already centered + width-capped above; this block dresses the contents:
   centers the label (Elementor's default field-label is inline and RTL-
   aligns left as a result, so the wrapper's text-align:center alone isn't
   enough), and grows the range input into a chunkier track + larger thumb
   so it reads as an interactive control rather than the browser's default
   thin line. Per-engine pseudo-elements (-webkit-slider-thumb and
   -moz-range-thumb) need separate rule blocks — they cannot be combined
   into a single selector list, since either engine throws out the whole
   rule if it doesn't recognize one of the pseudos. */
#hazeri_mas #hazri-loan-amount-wrap .elementor-field-label {
  display: block;
  width: 100%;
  text-align: center;
  min-height: 0;
  margin-bottom: 8px;
}
#hazeri_mas #hazri-loan-amount {
  -webkit-appearance: none;
  appearance: none;
  height: 1rem;
  border-radius: 6px;
  background: #ecf0f3;
  outline: none;
  margin: 0;
  padding: 0;
  border: 1px solid #c2d3e5;
}
#hazeri_mas #hazri-loan-amount::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #5d9cec;
  border: 3px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
#hazeri_mas #hazri-loan-amount::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2c3a55;
  border: 3px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
#hazeri_mas #hazri-loan-amount:hover::-webkit-slider-thumb {
  background: #1f2b40;
}
#hazeri_mas #hazri-loan-amount:hover::-moz-range-thumb {
  background: #1f2b40;
}