/* Request-a-Quote popup (MHM2-729). Scoped to .mbq- classes + the modal wrap. */

/* ---- modal shell: centred, capped height, scrollable body ---- */
.modal-popup.mbq-modal-wrap{left:0}
.modal-popup.mbq-modal-wrap._show{display:flex;align-items:center;justify-content:center}
.modal-popup.mbq-modal-wrap .modal-inner-wrap{
  max-width:640px;width:calc(100% - 24px);margin:auto;border-radius:12px;
  box-shadow:0 30px 70px rgba(16,32,43,.28);background:#fff;
  max-height:94vh;display:flex;flex-direction:column}
.modal-popup.mbq-modal-wrap .modal-header{padding:22px 30px 0;border:0;flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-popup.mbq-modal-wrap .modal-content{padding:8px 30px 26px;overflow-y:auto;flex:1 1 auto}
.modal-popup.mbq-modal-wrap .modal-footer{display:none}
.modal-popup.mbq-modal-wrap .modal-title{border:0;margin:0;padding:0;
  font-family:Newsreader,Georgia,serif;font-weight:600;font-size:26px;line-height:1.15;color:#16202b}
.modal-popup.mbq-modal-wrap .modal-title:after{display:none}
.modal-popup.mbq-modal-wrap .action-close{position:static;top:auto;right:auto;margin:0;padding:6px;line-height:1}
.modal-popup.mbq-modal-wrap .action-close:before{font-size:20px;color:#98a0a8}

.mbq-modal__intro{margin:10px 0 20px;color:#6b7078;font-size:14px;line-height:1.55;font-family:Manrope,Arial,sans-serif}

/* ---- product context strip ---- */
.mbq-product{display:flex;align-items:center;gap:14px;background:#f7f4ee;border:1px solid #efe7d9;
  border-radius:10px;padding:12px 14px;margin:0 0 22px;font-family:Manrope,Arial,sans-serif}
.mbq-product__imgwrap{flex:0 0 auto;width:56px;height:56px;border-radius:8px;overflow:hidden;background:#fff;
  border:1px solid #eee7db;display:flex;align-items:center;justify-content:center}
.mbq-product__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.mbq-product__meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.mbq-product__name{font-weight:700;font-size:15px;color:#16202b;line-height:1.25}
.mbq-product__sku{font-size:12px;color:#6b7078}
.mbq-product__skulabel{display:inline-block;font:700 9.5px/1 Manrope,Arial,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:#9aa0a8;background:#efe7d9;border-radius:4px;padding:3px 6px;margin-right:6px}

/* ---- fields ---- */
.mbq-form{font-family:Manrope,Arial,sans-serif}
.mbq-row{display:flex;gap:16px}
.mbq-row .mbq-field{flex:1;min-width:0}
.mbq-field{margin-bottom:16px}
.mbq-label{display:block;margin:0 0 7px;font:700 12px/1.2 Manrope,Arial,sans-serif;color:#16202b}
.mbq-label--required:after,.mbq-field--required .mbq-label:after{content:" *";color:#ef7622}
/* Base field styling to the design spec (.inp/.sel/.ta): 500 14px, border #e2ddd3,
   radius 9px. Padding stays 12px 14px here for the textarea's benefit; the single-
   line controls override to the design's `0 14px` in the height rule below. */
.mbq-input{width:100%;box-sizing:border-box;height:auto;border:1.5px solid #e2ddd3;border-radius:9px;
  padding:12px 14px;font:500 14px Manrope,Arial,sans-serif;color:#16202b;background:#fff;
  transition:border-color .15s,box-shadow .15s;box-shadow:none}
.mbq-input:focus{outline:0;border-color:#ef7622;box-shadow:0 0 0 3px rgba(239,118,34,.16)}
/* Placeholder: one uniform hint style across every field (Vong: "all text
   placeholders same style"). Lighter #b7bdc3 + smaller 13px. Higher specificity
   (0-2-1) because the theme overrides bare input::placeholder to a dark #575757
   (the textarea escaped it, which is why only it looked right before). */
.mbq-form .mbq-input::placeholder{color:#b7bdc3;font-size:13px}
.mbq-textarea{min-height:84px;resize:vertical}
.mbq-select{-webkit-appearance:none;appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2367707a' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
/* Design-spec field height (.inp/.sel/.ta = 48px, padding 0 14px, 500 14px).
   The theme's native input rules (critical.css `input[type=url]{height:32px;
   padding:0 9px;font-size:14px}`, specificity 0-1-1) override .mbq-input on the
   text & date inputs — the <select> escapes them (they target `input`) — so
   re-assert at higher specificity (0-3-0) to bring every single-line control to
   the design. Textarea excluded so it keeps its min-height:84px. */
.mbq-form .mbq-input:not(.mbq-textarea){
  height:48px;
  padding:0 14px;
  font:500 14px Manrope,Arial,sans-serif;
  border:1.5px solid #e2ddd3;
  border-radius:9px}
/* keep the select's chevron gutter — the height rule's `padding:0 14px` shorthand
   would otherwise reset padding-right. This selector has the SAME specificity as the
   height rule (both 0,3,0), so it wins only by SOURCE ORDER — it MUST stay after the
   height rule above; reorder them and the gutter silently collapses. */
.mbq-form .mbq-input.mbq-select{padding-right:38px}
/* textarea keeps auto height (min-height:84px) but must match the design border/radius —
   the theme overrides these on form controls, so re-assert at the same specificity. */
.mbq-form .mbq-textarea{border:1.5px solid #e2ddd3;border-radius:9px}
/* date input (Chrome): its box height comes from the native picker widget, not
   padding — zero the internal padding so the box matches and the calendar glyph
   isn't clipped. NB: ::-webkit-inner-spin-button ALSO materialises on the number
   field (exact_quantity), so this intentionally hides that stepper too — a
   deliberate, consistent look; typing, keyboard step and min validation still work. */
.mbq-input::-webkit-datetime-edit{padding:0}
.mbq-input::-webkit-datetime-edit-fields-wrapper{padding:0}
.mbq-input::-webkit-calendar-picker-indicator{margin:0 0 0 6px;padding:0;opacity:.55;cursor:pointer}
.mbq-input::-webkit-inner-spin-button,
.mbq-input::-webkit-clear-button{-webkit-appearance:none;display:none;margin:0}
/* date empty-state (mm/dd/yyyy) is NOT a placeholder — it's Chrome's datetime-edit
   text at the input's colour, so it looked darker than the real placeholders. Match
   it to them (colour + 13px) while empty; restore the dark entered-data colour + 14px
   once a date is chosen (via the .has-value class toggled in quote-request.js — the
   field is optional so :valid can't carry the distinction). The date sub-fields
   ignore plain `color` (Chrome honours -webkit-text-fill-color). The `color`
   companion is for Firefox, which ignores the -webkit- property and honours color —
   without it Firefox renders the empty date dark, re-introducing the inconsistency. */
.mbq-form .mbq-input[type="date"]:not(.has-value){-webkit-text-fill-color:#b7bdc3;color:#b7bdc3;font-size:13px}
.mbq-form .mbq-input[type="date"].has-value{-webkit-text-fill-color:#16202b;color:#16202b;font-size:14px}
.mbq-field--error .mbq-input{border-color:#d64d3a;box-shadow:0 0 0 3px rgba(214,77,58,.12)}
.mbq-error{display:block;margin-top:5px;font-size:12px;color:#d64d3a}
.mbq-error:empty{display:none}
/* general (non-field) errors — rate-limit, server faults — rendered inline in the
   modal instead of a native alert() so they match the designed field errors. */
.mbq-formerror{margin:0 0 16px;padding:11px 14px;border-radius:9px;background:#fdecea;
  border:1.5px solid #f0c4bd;color:#c0392b;font:600 13px/1.4 Manrope,Arial,sans-serif;text-align:center;
  scroll-margin-top:16px;outline:none}
.mbq-formerror[hidden]{display:none}
.mbq-hint{margin:8px 0 0;font-size:12px;color:#a7aeb5}

/* ---- quantity chips ---- */
.mbq-chips{display:flex;gap:8px;flex-wrap:wrap}
.mbq-chip{flex:0 0 auto;min-width:62px;border:1.5px solid #e2ddd3;background:#fff;border-radius:10px;
  padding:11px 16px;cursor:pointer;font:700 14px Manrope,Arial,sans-serif;color:#16202b;
  transition:border-color .14s,background .14s,box-shadow .14s}
.mbq-chip:hover{border-color:#16202b}
.mbq-chip.is-active{border-color:#ef7622;background:#fef6f0;color:#c85a17;box-shadow:0 0 0 3px rgba(239,118,34,.12)}

/* ---- upload dropzone ---- */
.mbq-upload{display:flex;align-items:center;gap:14px;border:1.5px dashed #d9d2c4;background:#faf8f4;
  border-radius:10px;padding:16px 18px;cursor:pointer;transition:border-color .14s,background .14s}
.mbq-upload:hover{border-color:#ef7622;background:#fff}
.mbq-upload__icon{flex:0 0 auto;width:38px;height:38px;border-radius:9px;background:#fff;border:1px solid #ece5d7;
  display:flex;align-items:center;justify-content:center;color:#ef7622;font-size:18px;font-weight:700}
.mbq-upload__text{display:flex;flex-direction:column;gap:3px;min-width:0}
.mbq-upload__title{font-weight:700;font-size:14px;color:#16202b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbq-upload__hint{font-size:12px;color:#a7aeb5}

/* ---- sticky footer inside form ---- */
.mbq-formfoot{position:sticky;bottom:-26px;margin:20px -30px -26px;padding:16px 30px;
  background:#fff;border-top:1px solid #efe9df;display:flex;align-items:center;justify-content:space-between;gap:14px}
.mbq-reassure{display:inline-flex;align-items:center;gap:7px;font:600 13px Manrope,Arial,sans-serif;color:#1f9d63}
.mbq-reassure__dot{width:8px;height:8px;border-radius:50%;border:2px solid #1f9d63}
.mbq-submit{display:inline-flex;align-items:center;gap:9px;background:#16202b;border:0;color:#fff;
  font:700 15px Manrope,Arial,sans-serif;padding:14px 24px;border-radius:10px;cursor:pointer;
  transition:background .15s,transform .05s}
.mbq-submit:hover{background:#ef7622;color:#fff}
.mbq-submit:active{transform:translateY(1px)}
.mbq-submit[disabled]{opacity:.6;cursor:default}
.mbq-submit__arrow{font-size:16px}
/* loading state: swap the arrow for a spinner while the AJAX request runs, so the
   click reads as "working" and the button width doesn't jump. JS toggles .is-loading
   + disabled on submit and removes it on completion. */
.mbq-submit.is-loading{cursor:progress}
.mbq-submit.is-loading .mbq-submit__arrow{display:none}
.mbq-submit.is-loading::after{content:"";display:inline-block;width:15px;height:15px;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:mbq-spin .6s linear infinite}
@keyframes mbq-spin{to{transform:rotate(360deg)}}

/* ---- success state ---- */
.mbq-success{text-align:center;padding:40px 16px 30px}
.mbq-success__check{width:58px;height:58px;margin:0 auto 16px;border-radius:50%;background:#e7f5ed;color:#1f9d63;
  display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700}
.mbq-success__title{margin:0 0 10px;font-family:Newsreader,Georgia,serif;font-size:24px;color:#16202b}
.mbq-success__text{margin:0;color:#6b7078;font-size:14px;line-height:1.6}

/* ---- mobile: full-screen sheet ----
   Pin the card to the viewport with position:fixed so the theme's
   `.modal-popup .modal-inner-wrap{width:75%}` can't shrink it. */
@media (max-width:640px){
  .modal-popup.mbq-modal-wrap{left:0}
  .modal-popup.mbq-modal-wrap .modal-inner-wrap{
    position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
    width:auto !important;max-width:none !important;height:auto !important;max-height:none !important;
    border-radius:0 !important;margin:0 !important}
  .modal-popup.mbq-modal-wrap._show{align-items:stretch;justify-content:flex-start}
  .mbq-row{display:block}
  .mbq-row .mbq-field{margin-bottom:16px}
  /* design mobile field metrics: 52px tall, 16px font. The 16px is deliberate —
     anything smaller triggers iOS Safari's zoom-on-focus. Textarea gets 16px too
     (same reason) but keeps its own height. */
  .mbq-form .mbq-input:not(.mbq-textarea){font-size:16px;height:52px}
  .mbq-textarea{font-size:16px}
  /* keep every hint uniform on mobile at 16px: the date empty-state is locked to
     the input's own font-size, which must stay 16px (iOS zoom guard), so the real
     placeholders match it at 16px here rather than the desktop 13px. */
  .mbq-form .mbq-input::placeholder{font-size:16px}
  .mbq-form .mbq-input[type="date"]:not(.has-value){font-size:16px}
  .mbq-form .mbq-input[type="date"].has-value{font-size:16px}
  .mbq-formfoot{flex-direction:column-reverse;align-items:stretch;gap:10px}
  .mbq-submit{justify-content:center;width:100%}
  .mbq-reassure{justify-content:center}
}

/* ---- MHM2-729 client batch: conditional fields + trust line ---- */
.mbq-subfield{margin-top:12px}
[data-mbq-exact-field][hidden],
[data-mbq-rfid-field][hidden],
[data-mbq-artwork-upload][hidden]{display:none !important}
.mbq-trustline{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
  margin:20px 0 2px;font:600 12.5px Manrope,Arial,sans-serif;color:#1f9d63;text-align:center}
.mbq-trustline__sep{color:#c9d2c9}
.mbq-submit--full{width:100%;justify-content:center}