/**
 * Component: Fluent Forms skin
 *
 * Skins the Fluent Forms plugin's front-end form to MDSC house style: pill
 * fields, pill "reason for contact" radios, a pill submit button with a loading
 * spinner, and form-level success/error messages. Every selector is keyed to
 * the PLUGIN's own class API (.fluentform, .ff-el-form-control, .ff-el-group,
 * .ff_list_buttons, .ff-btn-submit, .ff-message-success, .ff-errors-in-stack),
 * never to a page, block or attachment id — which is why this is a component
 * rather than site CSS.
 *
 * Opt in per site: add "fluent-forms" to sites/<slug>/manifest.json "styles".
 * Currently used by: eitr (Get In Touch, /get-in-touch/).
 *
 * ── Reusability caveat — read before adopting this on a second site ──────────
 * The claim "reusable across MDSC sites" is a design judgement, not a tested
 * fact. assets/css/components/ has no second occupant, so this file has never
 * been loaded anywhere but EITR. Two things to check first:
 *
 * 1. PALETTE SLOT NUMBERS ARE PER-SITE. This file hardcodes slot NUMBERS, and a
 *    slot number carries no fixed meaning across Blocksy installs — only the
 *    hex does. On EITR the mapping is: color-3 = body text (#003741),
 *    color-8 = field background (#ffffff), color-9 = the default button fill
 *    (#7AD7FC), color-2 = button hover fill (#37B9FF). Field and chip borders
 *    are color-3 mixed 56% into color-8 (#708F95, 3.25:1 on #F0F9FC), and
 *    focus is color-3 (changed 2026-10-01 for WCAG 1.4.11),
 *    color-10 = disabled/hover wash (#F0F9FC), color-5 = disabled border
 *    (#E9EBEC), color-12/-11 = error (#FF7212 / its 20% tint),
 *    color-13 = success (#409E04), color-1 = success wash (#C9EF6A).
 *    A site whose palette orders those roles differently will render this skin
 *    in the wrong colours while every var() still resolves. Map the roles
 *    before opting in; if they do not line up, the fix is to promote these to
 *    --mdsc-form-* tokens set per site, not to fork the file.
 *
 * 2. THE TYPE AND SIZE SCALE IS EITR'S. 18/17/16px steps, 50px radius, 50px
 *    field height, 210px textarea, 48px button. It is skinnable by palette but
 *    not by size. Same follow-up: --mdsc-form-* tokens.
 *
 * ── Why every selector starts with `body ` ──────────────────────────────────
 * Load-bearing specificity, NOT a hack to be tidied away. Measured on
 * /get-in-touch/ on 2026-09-22, after the priority-20 fix: this file prints at
 * head position 17, and fluent-form-styles (30) and fluentform-public-default
 * (31) print AFTER it, because the plugin enqueues during content rendering —
 * later than any wp_enqueue_scripts priority can reach. The gap got WIDER, not
 * narrower, when inc/enqueue.php moved to hook priority 20. Blocksy also styles
 * inputs at (0,4,0) via .ff-inherit-theme-style .ff-el-form-control. Removing a
 * `body ` prefix hands those rules back to the plugin.
 *
 * ⚠️ Those integers are head positions on one page on one date and will drift
 * when a plugin is activated or removed. The durable claim is that Fluent Forms
 * prints after this file, which follows from WHERE it enqueues, not from the
 * numbers. Re-measure before relying on a number.
 *
 * Ported 2026-09-22 from EITR's Additional CSS (custom_css post 9, lines
 * 571–787) under .superpowers/sdd/2026-09-22-eitr-plan-1-child-theme-and-css.
 * Changes made during the port: bare var() gained measured fallbacks, comments
 * were rewritten in English with @date tags, and @keyframes eitr-ff-spin was
 * renamed mdsc-ff-spin (a shared component must not announce one site).
 *
 * @package MDSC_Child
 */

/* Form wrapper and vertical rhythm. The plugin ships its own margins on the
   form and on every field group; these set the house rhythm instead.
   @date 2026-09-22 */
body .fluentform { margin: 0; }
body .fluentform .frm-fluent-form { margin: 0; }
body .fluentform .ff-el-group { margin-bottom: 32px; }
body .fluentform .ff_submit_btn_wrapper { margin-top: 36px; margin-bottom: 0; }

/* The plugin prints a visible <h*> form title for screen readers. The design
   has no title, so it is visually hidden rather than display:none — removing it
   from the accessibility tree would strip the form's accessible name.
   @date 2026-09-22 */
body .fluentform .ff_screen_reader_title {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}

/* Two-column row (name / email). The plugin's grid uses table-ish cells with no
   gutter control, so the container is re-declared as flex. Stacks under 690px
   (see the mobile block at the end of this file). @date 2026-09-22 */
body .fluentform .ff-t-container { display: flex; gap: 40px; margin: 0; }
body .fluentform .ff-t-cell { flex: 1 1 0; min-width: 0; padding: 0; margin: 0; }

/* Labels at body size. @date 2026-09-22 */
body .fluentform .ff-el-input--label { margin-bottom: 10px; }
body .fluentform .ff-el-input--label label {
  font-family: inherit;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--theme-palette-color-3, #003741);
  margin: 0;
  display: block;
}

/* No required asterisk: the design shows none, but the fields stay required in
   the form builder, so the marker is suppressed in CSS rather than by making
   fields optional. !important because the plugin sets the ::after content in
   its own stylesheet, which prints after this one. @date 2026-09-22 */
body .fluentform .ff-el-is-required.asterisk-right label::after,
body .fluentform .ff-el-is-required.asterisk-left label::before { content: none !important; }

/* Blocksy's form custom properties, scoped to .fluentform. Blocksy styles
   inputs through .ff-inherit-theme-style .ff-el-form-control using these
   variables, so setting the variables is cheaper than out-specifying the
   selector. Scoped here on purpose: the site-wide values differ (radius 25px,
   border var(--theme-border-color), height 170px) and moving these to the
   Customizer would restyle Blocksy's own footer newsletter form.
   @date 2026-09-22 */
body .fluentform {
  --theme-form-font-size: 18px;
  --theme-form-font-weight: 400;
  --theme-form-line-height: 1.6;
  --theme-form-text-initial-color: var(--theme-palette-color-3, #003741);
  --theme-form-text-focus-color: var(--theme-palette-color-3, #003741);
  --theme-form-field-height: 50px;
  --theme-form-field-padding: 10px 24px;
  --theme-form-field-border-width: 1px;
  --theme-form-field-border-radius: 50px;
  --theme-form-field-border-initial-color: color-mix(in srgb, var(--theme-palette-color-3, #003741) 56%, var(--theme-palette-color-8, #ffffff));
  --theme-form-field-border-focus-color: var(--theme-palette-color-3, #003741);
  --theme-form-field-background-initial-color: var(--theme-palette-color-8, #ffffff);
  --theme-form-field-background-focus-color: var(--theme-palette-color-8, #ffffff);
}

/* Text inputs and textarea, default state. The variables above cover Blocksy's
   path into these fields; these declarations cover the plugin's own, which does
   not read them. @date 2026-09-22
   Border changed 2026-10-01 from #7AD7FC (1.52:1 on #F0F9FC) to color-3 mixed
   56% into color-8 = #708F95, 3.25:1 on the page and 3.47:1 on the white field
   (WCAG 1.4.11). The same value as EITR's --eitr-border-strong, derived from the
   palette here so this component carries no site token. */
body .fluentform .ff-el-form-control {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--theme-palette-color-3, #003741);
  background-color: var(--theme-palette-color-8, #ffffff);
  border: 1px solid color-mix(in srgb, var(--theme-palette-color-3, #003741) 56%, var(--theme-palette-color-8, #ffffff));
  border-radius: 50px;
  padding: 10px 24px;
  min-height: 50px;
  height: auto;
  box-shadow: none;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* Textarea is a rectangle, not a pill: a 50px radius on a 210px-tall box reads
   as a mistake. @date 2026-09-22 */
body .fluentform .ff-el-group .ff-el-input--content textarea.ff-el-form-control {
  border-radius: 15px;
  height: auto;
  min-height: 210px;
  padding: 16px 24px;
  resize: vertical;
}

/* Placeholder is the same ink at 50%, so it reads as a hint rather than a
   second colour in the palette. @date 2026-09-22 */
body .fluentform .ff-el-form-control::placeholder {
  color: var(--theme-palette-color-3, #003741);
  opacity: .5;
}

/* Hover: darker border, but not while the field is focused or disabled — focus
   owns the border in that state and must not be overwritten by pointer
   position. @date 2026-09-22
   Changed 2026-10-01: hover was color-2 #37B9FF, which DROPPED the boundary to
   2.20:1 under the pointer. Now color-3, 12.94:1. */
body .fluentform .ff-el-form-control:hover:not(:disabled):not(:focus) {
  border-color: var(--theme-palette-color-3, #003741);
}

/* Focus: deep-teal border plus a 2px teal outline, the same ring the rest of the
   site uses (eitr.css §13). @date 2026-09-22
   Changed 2026-10-01 (WCAG 1.4.11): the old #37B9FF border and 22% halo
   measured 2.06:1 against the white field and the #F0F9FC page. Teal is
   12.94:1 on white and 12.12:1 on #F0F9FC. */
body .fluentform .ff-el-form-control:focus,
body .fluentform .ff-el-form-control:focus-visible {
  border-color: var(--theme-palette-color-3, #003741);
  box-shadow: none;
  outline: 2px solid var(--theme-palette-color-3, #003741);
  outline-offset: 2px;
}

/* Filled: slightly heavier text once the field has content. Depends on every
   field carrying a placeholder (a blank one is enough) so :placeholder-shown
   can distinguish empty from filled. @date 2026-09-22 */
body .fluentform .ff-el-form-control:not(:placeholder-shown):not(:focus) { font-weight: 500; }

/* Browser autofill paints its own yellow background and text colour. The inset
   shadow repaints the field and the 9999s transition parks the browser's
   animation before it can revert. @date 2026-09-22 */
body .fluentform .ff-el-form-control:-webkit-autofill,
body .fluentform .ff-el-form-control:-webkit-autofill:hover,
body .fluentform .ff-el-form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--theme-palette-color-3, #003741);
  -webkit-box-shadow: 0 0 0 1000px var(--theme-palette-color-8, #ffffff) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* Disabled / read-only: washed background, neutral border, faded ink, so an
   inert field is distinguishable from an empty one. @date 2026-09-22 */
body .fluentform .ff-el-group .ff-el-input--content .ff-el-form-control:disabled,
body .fluentform .ff-el-group .ff-el-input--content .ff-el-form-control[readonly] {
  background-color: var(--theme-palette-color-10, #F0F9FC);
  border-color: var(--theme-palette-color-5, #E9EBEC);
  color: color-mix(in srgb, var(--theme-palette-color-3, #003741) 55%, transparent);
  cursor: not-allowed;
  box-shadow: none;
}

/* Error: the error border must survive hover and focus, otherwise the field
   loses its error state the moment the user goes back to fix it — hence the
   three explicit states. @date 2026-09-22 */
body .fluentform .ff-el-group.ff-el-is-error .ff-el-input--content .ff-el-form-control,
body .fluentform .ff-el-group.ff-el-is-error .ff-el-input--content .ff-el-form-control:hover,
body .fluentform .ff-el-group.ff-el-is-error .ff-el-input--content .ff-el-form-control:focus {
  border-color: var(--theme-palette-color-12, #FF7212);
  box-shadow: 0 0 0 4px var(--theme-palette-color-11, rgba(255, 114, 18, 0.2));
}

/* Per-field error text: the plugin renders it as an inline pill with its own
   background and border; here it is plain text under the field.
   @date 2026-09-22 */
body .fluentform .ff-el-is-error .text-danger,
body .fluentform .ff-el-group .error.text-danger {
  display: block;
  margin-top: 8px;
  padding: 0;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--theme-palette-color-12, #FF7212);
  background: none;
  border: 0;
}

/* ── "Reason for contact" pill radios ───────────────────────────────────────
   The plugin's "list buttons" layout draws a joined segmented control on the
   inner <span> and floats the wrappers. Each option is restyled as a standalone
   chip, so the wrapper's float/width/display are reset and the <span> carries
   the whole chip.

   !important throughout this section: the plugin marks these same properties
   !important in its own stylesheet, which prints at head positions 30–31 —
   after this file at 17 (measured 2026-09-22; the relationship is the durable
   claim, not the integers). Against a declaration the other side marked
   !important, neither source
   order nor specificity helps — only !important does. This is the one section
   of this component that is exempt from the no-!important rule, and every
   instance below is fighting a named adversary: fluent-form-styles.
   @date 2026-09-22 */
body .fluentform .ff-el-group.ff_list_buttons .ff-el-input--content {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

/* !important: fluent-form-styles marks display/width/margin/float !important on
   the list-button wrapper to build its segmented control. @date 2026-09-22 */
body .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0;
  float: none !important;
}

body .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label {
  display: block;
  margin: 0;
  cursor: pointer;
}

/* The chip itself. !important on display/width/border/radius/shadow: the plugin
   marks those same properties !important on this span. @date 2026-09-22
   Border changed 2026-10-01 from #7AD7FC (1.52:1 on the page) to the 56% teal
   mix, 3.25:1 on #F0F9FC (WCAG 1.4.11). */
body .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  margin: 0;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--theme-palette-color-3, #003741);
  background-color: var(--theme-palette-color-8, #ffffff);
  border: 1px solid color-mix(in srgb, var(--theme-palette-color-3, #003741) 56%, var(--theme-palette-color-8, #ffffff)) !important;
  border-radius: 50px !important;
  box-shadow: none !important;
  padding: 11px 20px;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* The real radio is moved off-screen rather than display:none, so it stays
   focusable and keeps the group keyboard- and screen-reader-operable. The
   :focus-within rule below is what makes that focus visible. @date 2026-09-22 */
body .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* Chip hover. !important: the plugin marks border-color !important here.
   @date 2026-09-22 */
body .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span:hover {
  color: var(--theme-palette-color-3, #003741);
  background-color: var(--theme-palette-color-10, #F0F9FC);
  border-color: var(--theme-palette-color-3, #003741) !important;
}

/* Keyboard focus: the visible counterpart of the off-screen radio above, hooked
   through the label with :focus-within. !important: same adversary as hover.
   @date 2026-09-22
   Changed 2026-10-01 (WCAG 1.4.11): the #37B9FF border + 22% halo measured
   1.36:1. Now a two-tone ring, a 2px white gap inside a 2px teal band:
   teal 12.12:1 on the #F0F9FC page. */
body .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label:focus-within > span {
  background-color: var(--theme-palette-color-10, #F0F9FC);
  border-color: var(--theme-palette-color-3, #003741) !important;
  box-shadow: 0 0 0 2px var(--theme-palette-color-8, #ffffff), 0 0 0 4px var(--theme-palette-color-3, #003741) !important;
}

/* Selected. Two selectors on purpose: the plugin toggles .ff_item_selected in
   JS, and :has(input:checked) covers the first paint before that JS runs (and a
   pre-checked default). !important: same adversary. @date 2026-09-22
   Changed 2026-10-01 (WCAG 1.4.11): the #7AD7FC fill was 1.62:1 against an
   unselected white chip, so "selected" was hard to see. Teal fill with pale
   text: 12.94:1 against unselected, text 12.12:1. */
body .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label > span,
body .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check:has(input:checked) label > span {
  color: var(--theme-palette-color-10, #F0F9FC);
  font-weight: 500;
  background-color: var(--theme-palette-color-3, #003741);
  border-color: var(--theme-palette-color-3, #003741) !important;
}

/* Disabled chip — matched to the disabled field styling above so the two inert
   states look alike. !important: same adversary. @date 2026-09-22 */
body .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check:has(input:disabled) label > span {
  color: color-mix(in srgb, var(--theme-palette-color-3, #003741) 55%, transparent);
  background-color: var(--theme-palette-color-10, #F0F9FC);
  border-color: var(--theme-palette-color-5, #E9EBEC) !important;
  cursor: not-allowed;
}

/* Chip group in error. !important: same adversary. @date 2026-09-22 */
body .fluentform .ff-el-group.ff_list_buttons.ff-el-is-error .ff-el-form-check label > span {
  border-color: var(--theme-palette-color-12, #FF7212) !important;
}

/* ── Submit button ──────────────────────────────────────────────────────────
   Matches the site's pill button. The selector is deliberately
   .ff-el-group button.ff-btn-submit rather than .ff-btn-submit: Blocksy styles
   .fluentform .ff-el-group button.ff-btn at (0,4,1), which a shorter selector
   loses to. @date 2026-09-22 */
body .fluentform .ff-el-group button.ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
  color: var(--theme-palette-color-3, #003741);
  background-color: var(--theme-palette-color-9, #7AD7FC);
  border: 0;
  border-radius: 50px;
  padding: 12px 26px;
  min-height: 48px;
  cursor: pointer;
  box-shadow: none;
  text-decoration: none;
  opacity: 1;
  transition: background-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

/* Hover darkens the fill; the ink stays put so contrast is unaffected.
   @date 2026-09-22 */
body .fluentform .ff-el-group button.ff-btn-submit:hover {
  background-color: var(--theme-palette-color-2, #37B9FF);
  color: var(--theme-palette-color-3, #003741);
}

/* Keyboard focus. @date 2026-09-22
   Changed 2026-10-01 (WCAG 1.4.11): it was outline:none with a #37B9FF fill and
   halo, 1.36:1, and looked exactly like hover. Now the site-wide two-tone ring
   (eitr.css §13): a pale 2px band inside a teal 2px outline, 12.12:1 on the page. */
body .fluentform .ff-el-group button.ff-btn-submit:focus-visible {
  outline: 2px solid var(--theme-palette-color-3, #003741);
  outline-offset: 2px;
  background-color: var(--theme-palette-color-2, #37B9FF);
  box-shadow: 0 0 0 2px var(--theme-palette-color-10, #F0F9FC);
}

/* Submitting. The plugin adds .ff-working to the button and .ff_submitting to
   the form; :disabled is the third path for a natively disabled button. All
   three are listed because which one appears depends on the plugin's AJAX
   settings. @date 2026-09-22 */
body .fluentform .ff-el-group button.ff-btn-submit.ff-working,
body .fluentform .ff_submitting .ff-el-group button.ff-btn-submit,
body .fluentform .ff-el-group button.ff-btn-submit:disabled {
  background-color: var(--theme-palette-color-9, #7AD7FC);
  color: var(--theme-palette-color-3, #003741);
  opacity: .7;
  cursor: progress;
  pointer-events: none;
}

/* Spinner, appended to the submitting button. The button is already
   display:inline-flex with gap:10px, so the pseudo-element sits beside the
   label without touching it. @date 2026-09-22 */
body .fluentform .ff-el-group button.ff-btn-submit.ff-working::after,
body .fluentform .ff_submitting .ff-el-group button.ff-btn-submit::after {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid var(--theme-palette-color-3, #003741);
  border-right-color: transparent;
  border-radius: 50%;
  animation: mdsc-ff-spin .7s linear infinite;
}

/* Renamed from eitr-ff-spin during the port: a keyframes name is global, and a
   shared component must not carry one site's prefix into another site's
   document. @date 2026-09-22 */
@keyframes mdsc-ff-spin { to { transform: rotate(360deg); } }

/* ── Form-level messages ────────────────────────────────────────────────────
   Shared box shape for the success and error stacks. @date 2026-09-22 */
body .fluentform .ff-message-success,
body .fluentform .ff-errors-in-stack {
  font-family: inherit;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--theme-palette-color-3, #003741);
  border-radius: 15px;
  padding: 20px 24px;
  margin: 0;
  box-shadow: none;
}

/* Success: palette-1 mixed into the field background rather than used neat —
   at full strength it is too loud for a large block. @date 2026-09-22 */
body .fluentform .ff-message-success {
  background-color: color-mix(in srgb, var(--theme-palette-color-1, #C9EF6A) 45%, var(--theme-palette-color-8, #ffffff));
  border: 1px solid var(--theme-palette-color-13, #409E04);
}

/* Error stack: palette-11 is already the 20% tint of the error orange, so it is
   used neat. @date 2026-09-22 */
body .fluentform .ff-errors-in-stack {
  background-color: var(--theme-palette-color-11, rgba(255, 114, 18, 0.2));
  border: 1px solid var(--theme-palette-color-12, #FF7212);
  margin-top: 24px;
}

/* The plugin renders the error stack container on every page load and fills it
   only on failure; without this an empty tinted box sits under the form.
   @date 2026-09-22 */
body .fluentform .ff-errors-in-stack:empty { display: none; }

body .fluentform .ff-errors-in-stack .error {
  color: var(--theme-palette-color-12, #FF7212);
  font-size: 15px;
  font-weight: 500;
  margin: 0;
}

/* ── Tablet (690–999px) ─────────────────────────────────────────────────────
   Breakpoint matches Blocksy's own tablet tier (inc/helpers/dynamic-css.php),
   so the form steps down with the rest of the page rather than on its own.
   @date 2026-09-22 */
@media (max-width: 999.98px) {
  body .fluentform .ff-el-input--label label,
  body .fluentform .ff-el-form-control,
  body .fluentform .ff-message-success,
  body .fluentform .ff-errors-in-stack { font-size: 17px; }
  body .fluentform { --theme-form-font-size: 17px; }
  body .fluentform .ff-el-group { margin-bottom: 28px; }
  body .fluentform .ff-t-container { gap: 32px; }
}

/* ── Mobile (under 690px) ───────────────────────────────────────────────────
   Blocksy's mobile tier. The two-column row stacks here; gap goes to 0 because
   the field groups' own margin-bottom then provides the spacing, and keeping
   both would double it. @date 2026-09-22 */
@media (max-width: 689.98px) {
  body .fluentform .ff-el-input--label label,
  body .fluentform .ff-el-form-control,
  body .fluentform .ff-message-success,
  body .fluentform .ff-errors-in-stack { font-size: 16px; }
  body .fluentform { --theme-form-font-size: 16px; }
  body .fluentform .ff-t-container { flex-direction: column; gap: 0; }
  body .fluentform .ff-t-cell { width: 100%; }
  body .fluentform .ff-el-group { margin-bottom: 24px; }
  body .fluentform .ff-el-group.ff_list_buttons .ff-el-input--content { gap: 10px; }
  body .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span { font-size: 15px; padding: 10px 16px; }
  body .fluentform .ff-el-group .ff-el-input--content textarea.ff-el-form-control { min-height: 170px; }
  body .fluentform .ff_submit_btn_wrapper { margin-top: 28px; }
}