/**
 * objects/_form-step1.css — Shared "Shipping Health Check" form-step-1 system
 * @layer components
 *
 * Shared across any module that embeds this pattern (currently
 * two-col.module and cta-banner.module): a custom step-1 URL field/button
 * pill rendered inline on the page, plus the real multi-step HubSpot form
 * hidden in a modal (see .shq-ai-modal in main.css) until step 1 advances.
 * The JS driving this (prefill/advance/cancel) lives in js/main.js —
 * initFormStep1() — and is generic (queries .shq-ai-form-step1 site-wide),
 * so any module just needs to render the markup below with these classes.
 *
 * Usage in module.html:
 *   <div class="shq-ai-form-step1-group">
 *     <div class="shq-ai-form-step1" data-url-field="..." data-modal-target="...">
 *       <input class="shq-ai-form-step1-input" ...>
 *       <button class="btn btn--primary shq-ai-form-step1-button">...</button>
 *     </div>
 *     <p class="shq-ai-form-step1-error" role="alert"></p>
 *   </div>
 *   <ul class="shq-ai-form-trust-badges">
 *     <li class="shq-ai-form-trust-badge">100% Free</li>
 *   </ul>
 *   ... modal markup with <span id="hs_cos_wrapper_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_form" style="" data-hs-cos-general-type="widget" data-hs-cos-type="form" ><h3 id="hs_cos_wrapper_form_836909358_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text"></h3>

</span> wrapped in <div class="shq-ai-form"> ...
 *
 * Modifier for bright/gradient section backgrounds (e.g. cta-banner):
 *   .shq-ai-form-step1--on-gradient  — translucent white pill instead of dark Cinder
 */

@layer components {

  /* ── Form step 1 (custom, not part of the HubSpot form) ─────────────────── */
  /*
   * Styled to match the real form's input/button theming (see the Form
   * section below) so step 1 and the modal's step 2 read as one continuous
   * form. js/main.js writes this value into the real form's step-1 field
   * and advances it before revealing the modal.
   */

  .shq-ai-form-step1-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);                              /* 8px */
  }

  /*
   * Single pill-shaped container wrapping input + button, so the button
   * reads as inset within the field rather than a separate element next
   * to it. Outer radius = inner .btn radius (--radius-xl, set globally in
   * _buttons.css) + this padding, so the curves stay concentric.
   */
  .shq-ai-form-step1 {
    display: flex;
    align-items: center;
    gap: var(--space-2);                              /* 8px */
    padding: var(--space-2);                          /* 8px */
    background-color: var(--primitive-cinder);        /* #272727 */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: calc(var(--radius-xl) + var(--space-2));
    transition:
      border-color var(--transition-fast),
      box-shadow var(--transition-fast);
  }

  .shq-ai-form-step1:focus-within {
    border-color: var(--primitive-azure-blue);
    box-shadow: 0 0 0 0.125rem rgba(56, 109, 220, 0.25);
  }

  .shq-ai-form-step1.is-invalid {
    border-color: var(--primitive-terracotta);
  }

  .shq-ai-form-step1.is-invalid:focus-within {
    box-shadow: 0 0 0 0.125rem rgba(201, 93, 99, 0.25);
  }

  .shq-ai-form-step1-error {
    display: none;
    margin: 0;
    padding-left: var(--space-4);                     /* aligns with the input's text inset */
    font-size: var(--font-size-sm);
    color: var(--primitive-terracotta);
  }

  .shq-ai-form-step1-error.is-visible {
    display: block;
  }

  .shq-ai-form-step1-input {
    flex: 1 1 16rem;
    min-width: 0;
    height: 2.375rem;                                 /* 38px — container padding brings total to 46px */
    padding: 0 var(--space-2) 0 var(--space-4);       /* extra left inset clears the pill's curve */
    background: transparent;
    border: none;
    color: var(--primitive-vapor-white);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);                 /* 16px */
    outline: none;
  }

  .shq-ai-form-step1-input::placeholder {
    color: var(--primitive-pewter);
  }

  .shq-ai-form-step1-button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /*
   * Below 480px the button wraps to its own line, where the merged pill
   * look reads oddly (a mostly-empty rounded bar around a stacked button).
   * Fall back to separate, individually-styled input + full-width button.
   */
  @media (max-width: 480px) {
    .shq-ai-form-step1 {
      flex-wrap: wrap;
      background: none;
      border: none;
      padding: 0;
      border-radius: 0;
    }

    .shq-ai-form-step1:focus-within {
      border-color: transparent;
      box-shadow: none;
    }

    .shq-ai-form-step1-input {
      flex: 1 1 100%;
      height: 2.875rem;                               /* 46px */
      padding: 0.75rem 1rem;
      background-color: var(--primitive-cinder);      /* #272727 */
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: var(--radius-md);
      transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
    }

    .shq-ai-form-step1-input:hover {
      border-color: rgba(255, 255, 255, 0.25);
    }

    .shq-ai-form-step1-input:focus {
      border-color: var(--primitive-azure-blue);
      box-shadow: 0 0 0 0.125rem rgba(56, 109, 220, 0.25);
    }

    .shq-ai-form-step1-button {
      flex: 1 1 100%;
    }
  }

  /* ── "On gradient" modifier — translucent white pill for bright backgrounds ── */
  /*
   * Used on sections with a bright/gradient background (e.g. cta-banner's
   * animated gradient video) where the default dark Cinder pill wouldn't
   * read — matches Figma's translucent white treatment there.
   */

  .shq-ai-form-step1--on-gradient {
    background-color: rgba(255, 255, 255, 0.31);
    border-color: rgba(255, 255, 255, 0.18);
  }

  .shq-ai-form-step1--on-gradient:focus-within {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 0.125rem rgba(255, 255, 255, 0.2);
  }

  .shq-ai-form-step1--on-gradient .shq-ai-form-step1-input {
    color: var(--primitive-white);
  }

  .shq-ai-form-step1--on-gradient .shq-ai-form-step1-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
  }

  @media (max-width: 480px) {
    .shq-ai-form-step1--on-gradient {
      background: none;
      border: none;
    }

    .shq-ai-form-step1--on-gradient .shq-ai-form-step1-input {
      background-color: rgba(255, 255, 255, 0.31);
      border-color: rgba(255, 255, 255, 0.18);
      color: var(--primitive-white);
    }
  }

  /* ── Trust badges (below the Step 1 field) ───────────────────────────────── */
  /*
   * Plain italic text separated by middots — matches Figma exactly (not
   * pills, despite the field/class names kept from an earlier iteration).
   */

  .shq-ai-form-trust-badges {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--space-1);                          /* 4px, only matters if it wraps */
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-family-base);
    font-style: italic;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);                   /* 14px */
    letter-spacing: 0.01em;
    color: var(--primitive-silver);
  }

  .shq-ai-form-trust-badge {
    white-space: nowrap;
  }

  .shq-ai-form-trust-badge:not(:last-child)::after {
    content: '\00a0\00a0\00b7\00a0\00a0'; /* "  ·  " — non-breaking so it never wraps alone */
  }

  /* ── Form (rendered inside the modal) ────────────────────────────────────── */
  /*
   * HubSpot form theming. hsfc embed renders inline (not an iframe), so
   * --hsf-* vars configure most of the embed's own theme — except the
   * button, whose base look is forced via direct !important overrides
   * instead (see below) because a form's own "Style" tab settings can
   * override page-level button variables. The hsfc-*/hs-form rules below
   * handle everything the variable system doesn't expose at all.
   */

  .shq-ai-form {
    margin-top: var(--space-4); /* 16px */

    /* HubSpot hsfc renderer theme variables — read by embed JS */
    --hsf-background__background-color: transparent;
    --hsf-background__padding: 0;
    --hsf-row__vertical-spacing: 1.5rem;             /* 24px gap between field rows */
    --hsf-row__horizontal-spacing: 1rem;              /* 16px gap in two-col rows */

    /*
     * Real property names, confirmed from HubSpot's own injected default
     * stylesheet (not documented anywhere): fields/labels/textareas use a
     * "field-" segment — --hsf-field-input__*, --hsf-field-label__*,
     * --hsf-field-textarea__* — there is no separate --hsf-select__ family;
     * dropdowns read --hsf-field-input__* directly. Textarea falls back to
     * --hsf-field-input__* for anything not set here. min-height/height
     * aren't variable-driven at all — handled via direct overrides below.
     */

    /* Labels */
    --hsf-field-label__color: var(--primitive-vapor-white);
    --hsf-field-label__font-family: var(--font-family-base);
    --hsf-field-label__font-size: var(--font-size-sm);      /* 14px */

    /* Text inputs (and dropdowns, which share this same variable family) */
    --hsf-field-input__background-color: var(--color-bg);   /* #0F0E0C Abyss */
    --hsf-field-input__border-color: rgba(255, 255, 255, 0.12);
    --hsf-field-input__border-width: 1px;
    --hsf-field-input__border-radius: var(--radius-md);     /* 8px */
    --hsf-field-input__color: var(--primitive-vapor-white);
    --hsf-field-input__font-family: var(--font-family-base);
    --hsf-field-input__font-size: var(--font-size-base);    /* 16px */
    --hsf-field-input__padding: 0.75rem 1rem;               /* 12px 16px */
    --hsf-field-input__placeholder-color: var(--primitive-pewter);

    /*
     * No --hsf-button__* variables here — a form's own "Style" tab settings
     * in the HubSpot editor win the custom-property cascade for the button
     * regardless of what's set at this ancestor level, so the button is
     * themed via direct property overrides on .hsfc-Button instead (below).
     */

    /* Full-width submit button */
    --hsf-navigationrow-buttons-single__justify-content: stretch;
  }

  /* Field labels */
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-FieldLabel,
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-FieldLabel span {
    color: var(--primitive-vapor-white) !important;
  }

  /* Remove Step default background/padding */
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-Step {
    background: none !important;
  }

  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-Step .hsfc-Step__Content {
    padding: 0 !important;
  }

  /* Row spacing */
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-Row {
    margin-bottom: 1.5rem !important;                 /* 24px */
  }

  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-NavigationRow {
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
  }

  /*
   * Hide "Previous" on steps 2+ — step 1 lives inline on the page, not in
   * this modal, so there's nothing sensible to go back to in here. Previous
   * and Next/Submit are both plain .hsfc-Button with no distinguishing
   * class, but Previous is always the first of two buttons in a
   * NavigationRow (step 1's own single advance button is unaffected by
   * :not(:only-child)).
   */
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-NavigationRow__Buttons > .hsfc-Button:first-child:not(:only-child) {
    display: none !important;
  }

  /* Input base — dark background, light text */
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-TextInput,
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-TextareaInput {
    background-color: var(--color-bg) !important;     /* #0F0E0C Abyss */
    color: var(--primitive-vapor-white) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  /* Textarea min-height */
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-TextareaInput {
    min-height: 6rem !important;
    height: auto !important;
    resize: vertical !important;
  }

  /* Input focus ring */
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-TextInput:focus,
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-TextareaInput:focus {
    outline: none !important;
    border-color: var(--primitive-azure-blue) !important;
    box-shadow: 0 0 0 0.125rem rgba(56, 109, 220, 0.25) !important;
  }

  /* Input hover */
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-TextInput:hover,
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-TextareaInput:hover {
    border-color: rgba(255, 255, 255, 0.25) !important;
  }

  /* Radio group — vertical stack */
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-RadioFieldGroup__Options {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  /* Radio label wrapper */
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-RadioFieldGroup__Options .hsfc-FieldLabel {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-medium) !important;
    color: var(--primitive-vapor-white) !important;
  }

  /* Custom radio input */
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-RadioInput {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    background-color: var(--color-bg) !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition:
      border-color var(--transition-fast),
      background-color var(--transition-fast) !important;
  }

  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-RadioInput:hover {
    border-color: rgba(255, 255, 255, 0.5) !important;
  }

  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-RadioInput:checked {
    border-color: var(--primitive-shqai-blue) !important;
    background-color: var(--primitive-shqai-blue) !important;
    box-shadow: inset 0 0 0 0.25rem var(--color-bg) !important;
  }

  /*
   * RichText (legal/disclaimer text, and the post-submit "thank you"
   * message — both render as the same .hsfc-RichText component). Only
   * font-family/margin are forced; font-size/line-height/color are NOT
   * !important so inline styles set in the form editor (e.g. a larger
   * font-size or a specific color on the thank-you message) still win —
   * these are just fallback defaults for when no inline style is set.
   */
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-RichText,
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-RichText p {
    font-family: var(--font-family-base) !important;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--primitive-pewter);
    margin: 0 !important;
  }

  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-RichText a {
    color: var(--primitive-shqai-blue) !important;
    text-decoration: underline !important;
  }

  /* Phone input — flag + caret button */
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-PhoneInput__FlagAndCaret {
    background-color: var(--color-bg) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--primitive-vapor-white) !important;
  }

  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-PhoneInput__FlagAndCaret:hover {
    background-color: var(--color-surface) !important;
  }

  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-PhoneInput__FlagAndCaret__Caret {
    border-top-color: var(--primitive-vapor-white) !important;
    border-bottom-color: var(--primitive-vapor-white) !important;
    opacity: 0.6;
  }

  /* Dropdown options panel */
  .shq-ai-form [data-hsfc-id="DropdownOptions"] {
    background-color: var(--color-surface) !important; /* #1B1B19 — elevated above input */
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5) !important;
  }

  /* Dropdown search input */
  .shq-ai-form [data-hsfc-id="DropdownOptions"] .hsfc-TextInput {
    background-color: var(--color-bg) !important;
    color: var(--primitive-vapor-white) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    border-radius: 0 !important;
    border-width: 0 0 1px 0 !important;
  }

  /* Dropdown list + items */
  .shq-ai-form [data-hsfc-id="DropdownOptions"] .hsfc-DropdownOptions__List {
    background-color: var(--color-surface) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .shq-ai-form [data-hsfc-id="DropdownOptions"] .hsfc-DropdownOptions__List__ListItem {
    background-color: var(--color-surface) !important;
    color: var(--primitive-vapor-white) !important;
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-base) !important;
  }

  .shq-ai-form [data-hsfc-id="DropdownOptions"] .hsfc-DropdownOptions__List__ListItem:hover,
  .shq-ai-form [data-hsfc-id="DropdownOptions"] .hsfc-DropdownOptions__List__ListItem[aria-selected="true"] {
    background-color: rgba(255, 255, 255, 0.06) !important;
  }

  /* Privacy / consent text */
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-ConsentText,
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-LegalConsent {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-xs) !important;
    line-height: 1.5 !important;
    color: var(--primitive-pewter) !important;
  }

  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-ConsentText a,
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-LegalConsent a {
    color: var(--primitive-shqai-blue) !important;
    text-decoration: underline !important;
  }

  /*
   * Submit button — direct property overrides, not --hsf-button__* variables.
   * A form's own "Style" tab settings in the HubSpot editor compile to a
   * scoped stylesheet on the Renderer element itself, which sits closer to
   * the button than our variables declared on .shq-ai-form — so the form's
   * own theme wins the custom-property cascade regardless of what we set up
   * the tree. Forcing the real properties with !important sidesteps that
   * entirely (same approach already used for text inputs).
   */
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-Button {
    background-color: var(--primitive-terracotta) !important;
    color: var(--primitive-white) !important;
    border-style: solid !important;
    border-color: var(--primitive-terracotta) !important;
    border-width: 1px !important;
    border-radius: var(--radius-xl) !important;         /* 24px */
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-base) !important;        /* 16px */
    font-weight: 600 !important;
    padding: 0.8125rem 1.5rem !important;                /* 13px 24px */
    box-shadow: 0 0.125rem 0 0 var(--primitive-black) !important;
    width: 100% !important;
    overflow: hidden !important;
    will-change: transform !important;
    transition:
      transform var(--transition-fast),
      box-shadow var(--transition-fast),
      background-color var(--transition-fast) !important;
  }

  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-Button::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
      105deg,
      transparent 40%,
      rgba(255, 255, 255, 0.22) 50%,
      transparent 60%
    ) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.9s ease !important;
    pointer-events: none !important;
  }

  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-Button:not([disabled]):hover {
    background-color: #d4757a !important;
    border-color: #d4757a !important;
    transform: scale(1.02) !important;
    box-shadow:
      0 0 1.375rem rgba(201, 93, 99, 0.55),
      0 0.125rem 0 0 var(--primitive-black) !important;
  }

  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-Button:not([disabled]):hover::before {
    transform: translateX(200%) !important;
  }

  /* Success / post-submit message */
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-PostSubmit {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-base) !important;
    color: var(--primitive-shqai-blue) !important;
  }

  /* Error messages */
  .shq-ai-form [data-hsfc-id="Renderer"] .hsfc-ErrorMessage {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-sm) !important;
    color: var(--primitive-terracotta) !important;
    margin-top: 0.25rem !important;
  }

  /* ── Legacy hs-form overrides (classic embed — renders inline, not iframe) ── */

  .shq-ai-form .hs-form {
    font-family: var(--font-family-base);
  }

  .shq-ai-form .hs-form-field {
    margin-bottom: 1.5rem;                            /* 24px */
  }

  .shq-ai-form .hs-form-field > label {
    display: block;
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);                   /* 14px */
    font-weight: 500;
    line-height: var(--line-height-base);
    color: var(--primitive-vapor-white);
    margin-bottom: 0.375rem;                          /* 6px */
  }

  .shq-ai-form .hs-form-required {
    color: var(--primitive-terracotta);
    margin-left: 0.25rem;
  }

  .shq-ai-form .hs-form-field .input {
    margin: 0;
  }

  .shq-ai-form .hs-input {
    width: 100% !important;
    background-color: var(--color-bg);                /* #0F0E0C Abyss */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);                  /* 8px */
    color: var(--primitive-vapor-white);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);                 /* 16px */
    font-weight: 400;
    padding: 0.75rem 1rem;
    height: 2.875rem;                                 /* 46px */
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition:
      border-color var(--transition-fast),
      box-shadow var(--transition-fast);
  }

  .shq-ai-form .hs-input:hover {
    border-color: rgba(255, 255, 255, 0.25);
  }

  .shq-ai-form .hs-input:focus {
    border-color: var(--primitive-azure-blue);
    box-shadow: 0 0 0 0.125rem rgba(56, 109, 220, 0.25);
  }

  .shq-ai-form .legal-consent-container {
    margin-bottom: 1.5rem;
  }

  .shq-ai-form .legal-consent-container p {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: var(--primitive-pewter);
    margin: 0;
  }

  .shq-ai-form .legal-consent-container a {
    color: var(--primitive-shqai-blue);
    text-decoration: underline;
  }

  .shq-ai-form .hs_submit .actions {
    margin: 0;
  }

  .shq-ai-form .hs-button {
    width: 100%;
    background-color: var(--primitive-terracotta);    /* #C95D63 */
    color: var(--primitive-white);
    border: 1px solid var(--primitive-terracotta);
    border-radius: var(--radius-xl);                  /* 24px */
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);                 /* 16px */
    font-weight: 600;
    padding: 0.8125rem 1.5rem;
    box-shadow: 0 0.125rem 0 0 var(--primitive-black);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
      transform var(--transition-fast),
      box-shadow var(--transition-fast),
      background-color var(--transition-fast);
  }

  .shq-ai-form .hs-button:hover {
    background-color: #d4757a;
    border-color: #d4757a;
    transform: scale(1.02);
    box-shadow:
      0 0 1.375rem rgba(201, 93, 99, 0.55),
      0 0.125rem 0 0 var(--primitive-black);
  }

}