/* General "Get a quote" widget button + popup tweaks (MHM2-733).
   The popup itself reuses the shared .mbq- modal styles from quote-request.css
   (same class names + .mbq-modal-wrap). This file only adds the widget button
   variants and a couple of general-popup-specific touches. */

/* ---- widget button ---- */
.mbq-gq-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font:700 14px/1 Manrope,Arial,sans-serif;letter-spacing:.01em;
  border:0;border-radius:10px;padding:14px 22px;
  color:#fff;background:#ef7622;
  transition:background .15s,color .15s,box-shadow .15s,transform .15s;
  box-shadow:0 6px 18px rgba(239,118,34,.28)}
.mbq-gq-btn:hover{background:#dd6813;color:#fff}
.mbq-gq-btn:active{transform:translateY(1px)}
.mbq-gq-btn:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(239,118,34,.32)}
.mbq-gq-btn__arrow{font-size:15px;line-height:1}

/* hero: larger, for banners / homepage */
.mbq-gq-btn--hero{font-size:16px;padding:18px 30px;border-radius:12px}

/* footer: subdued dark surface variant */
.mbq-gq-btn--footer{
  background:#16202b;box-shadow:none;border:1.5px solid #2b3945}
.mbq-gq-btn--footer:hover{background:#22303d}

/* link: plain text link, no button chrome */
.mbq-gq-btn--link{
  background:none;color:#ef7622;box-shadow:none;padding:2px 0;border-radius:0}
.mbq-gq-btn--link:hover{background:none;color:#dd6813;text-decoration:underline}

/* MHM2-733: hover must ONLY change colour — never move or resize the button.
   Neutralises the theme's global `button:hover{border:1px}` (which grows the box)
   and any context hover transform (e.g. .hb-mid-magnet button:hover{translateY}). */
/* Hover effect (matches the hero "Search products" pill): a subtle lift +
   colour shift, smoothly transitioned. The lift is a TRANSFORM, so it never
   shifts surrounding layout; the box itself never grows because the border is
   locked below — so no janky reflow, just a clean lift. */
.mbq-gq-btn:hover{transform:translateY(-1px) !important;}
.mbq-gq-btn,
.mbq-gq-btn:active{transform:none !important;}
.mbq-gq-btn:not(.mbq-gq-btn--footer),
.mbq-gq-btn:not(.mbq-gq-btn--footer):hover,
.mbq-gq-btn:not(.mbq-gq-btn--footer):focus,
.mbq-gq-btn:not(.mbq-gq-btn--footer):active{border:0 !important;}
.mbq-gq-btn--footer,
.mbq-gq-btn--footer:hover,
.mbq-gq-btn--footer:focus,
.mbq-gq-btn--footer:active{border:1.5px solid #2b3945 !important;}

/* MHM2-733: the theme's global button style adds an inset top highlight
   (`box-shadow: inset 0 1px 0 #fff`) — a white line across the top edge.
   Strip it on our buttons (keep only the focus ring for a11y). */
.mbq-gq-btn,
.mbq-gq-btn:hover,
.mbq-gq-btn:active{box-shadow:none !important;}
.mbq-gq-btn:focus-visible{box-shadow:0 0 0 3px rgba(239,118,34,.32) !important;}

/* MHM2-733: the shared mobile rule bumps the placeholder to 16px (to match the
   input value, which must be 16px so iOS doesn't zoom on focus). The placeholder
   itself never triggers iOS zoom, so shrink it for a cleaner look — the input
   VALUE stays 16px. Scoped to the general popup so the product modal is untouched. */
#mbq-gq-form .mbq-input::placeholder{font-size:12.5px !important;}
/* Date field: its empty "mm/dd/yyyy" is the datetime-edit text at the input's
   font-size (16px on mobile, no ::placeholder to target). Shrink the EMPTY state
   to match the other placeholders; the chosen date (.has-value) keeps its size. */
#mbq-gq-form .mbq-input[type="date"]:not(.has-value),
#mbq-gq-form .mbq-input[type="date"]:not(.has-value)::-webkit-datetime-edit{font-size:12.5px !important;}

/* ---- general popup: use-case select + optional artwork spacing ---- */
.mbq-gq .mbq-modal__intro{margin-bottom:18px}