/* Minification failed. Returning unminified contents.
(490,26): run-time error CSS1030: Expected identifier, found '.'
(490,51): run-time error CSS1031: Expected selector, found ')'
(490,51): run-time error CSS1025: Expected comma or open brace, found ')'
(496,26): run-time error CSS1030: Expected identifier, found '.'
(496,51): run-time error CSS1031: Expected selector, found ')'
(496,51): run-time error CSS1025: Expected comma or open brace, found ')'
(1606,22): run-time error CSS1039: Token not allowed after unary operator: '-L2'
 */
/* ========================================================================
   APMEX Quote Request (3-step flow)
   Scoped under body.quote-page so existing site styles are untouched.
   ======================================================================== */

/* ---------- Font Awesome Pro subset (quote-only) ----------
   Minimal @font-face + icon glyphs needed by the Quote views. Included here
   instead of the mobile bundle to avoid shipping the full FA Pro CSS on
   every mobile page. */
@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("/Content/webfonts/fa-solid-900.woff2") format("woff2"),
         url("/Content/webfonts/fa-solid-900.woff") format("woff");
}
@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("/Content/webfonts/fa-regular-400.woff2") format("woff2"),
         url("/Content/webfonts/fa-regular-400.woff") format("woff");
}
body.quote-page .fa,
body.quote-page .fas,
body.quote-page .far {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
body.quote-page .fa,
body.quote-page .fas { font-weight: 900; }
body.quote-page .far { font-weight: 400; }

body.quote-page .fa-plus-circle::before     { content: "\f055"; }
body.quote-page .fa-bolt::before            { content: "\f0e7"; }
body.quote-page .fa-lock::before            { content: "\f023"; }
body.quote-page .fa-box::before             { content: "\f466"; }
body.quote-page .fa-shield-alt::before      { content: "\f3ed"; }
body.quote-page .fa-money-bill-wave::before { content: "\f53a"; }
body.quote-page .fa-arrow-left::before      { content: "\f060"; }
body.quote-page .fa-trash-alt::before       { content: "\f2ed"; }
body.quote-page .fa-chevron-up::before      { content: "\f077"; }
body.quote-page .fa-chevron-down::before    { content: "\f078"; }
body.quote-page .fa-envelope::before        { content: "\f0e0"; }
body.quote-page .fa-phone::before           { content: "\f095"; }

body.quote-page {
    background: #fff;
    color: #0b1f2a;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

body.quote-page a { text-decoration: none; }
body.quote-page a:hover { text-decoration: underline; }

body.quote-page #modal-module-content { display: none; }
body.quote-page #modal-module-content.in,
body.quote-page #modal-module-content.show { display: block; }

.quote-main { min-height: calc(100vh - 260px); padding: 0px 0 0px; }

.quote-container { max-width: 1300px; margin: 0 auto; padding: 0; }
/* Restore side padding on tablet/mobile so page content doesn't touch the viewport edge. */
@media (max-width: 1024px) {
    .quote-container { padding: 0 16px; }
}
@media (max-width: 480px) {
    .quote-container { padding: 0 12px; }
}

/* ---------- Header ---------- */
.quote-header {
    background: #0b2b3f;
    color: #fff;
}
    .quote-header a,
    .quote-header a span {
        color: #fff !important;
    }
        .quote-header a:hover {
            text-decoration: none !important;
        }
.quote-header-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
/* Restore side padding on tablet/mobile so the brand + EXIT don't hit the edge. */
@media (max-width: 1024px) {
    .quote-header-inner { padding: 0 16px; }
}
.quote-brand {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    color: #fff;
}
    .quote-brand img {
        width: 173px;
        height: auto;
    }
.quote-brand-title {
    font-family: "Open Sans";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}
.quote-header-right {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    font-size: 15px;
}
.quote-help strong { font-weight: 700; }
.quote-exit {
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.4px;
}
.quote-exit:hover { color: #cfe5dd; text-decoration: none; }

/* ---------- Step indicator ---------- */
.quote-stepper {
    background: #fff;
    padding: 40px 0 30px;
}
.quote-stepper-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 72px;
}
.quote-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    color: #ccc;
    position: relative;
}
.quote-step + .quote-step::before { content: none; }
.quote-step-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #cfd6da;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}
.quote-step.done .quote-step-dot,
.quote-step.current .quote-step-dot { background: #24A186; }
.quote-step.done, .quote-step.current {
    color: #002539;
}

/* ---------- Footer ---------- */
.quote-footer {
    background: #2B495A;
    color: #cfd6da;
    margin-top: 40px;
}
.quote-footer a{
    color: #fff !important;
}
.quote-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 22px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    justify-content: space-between;
}
.quote-footer-brand img {
    width: 200px;
    height: auto;
}
.quote-footer-contact { margin-left: auto; }
.quote-footer-question { color: #fff; margin-right: 10px; font-size: 18px; }
.quote-footer-link { color: #fff; font-weight: 600; font-size: 18px; }
.quote-footer-reach {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    padding-left: 22px;
    border-left: 1px solid #4a6473;
}
.quote-footer-reach-item { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; font-size: 14px; line-height: 1.4; }
.quote-footer-reach-item i { color: #fff; }
.quote-footer-reach-item svg { flex: 0 0 auto; display: block; }
.quote-footer-muted { color: #cfd6da; font-weight: 400; }
.quote-footer-bottom {
    background: #002539;
    border-top: 0;
    padding: 0;
    max-width: none;
    margin: 0;
}
.quote-footer-bottom-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.quote-footer-legal { font-size: 13px; color: #99a7ae; }
.quote-footer-legal p {font-size: 12px; margin: 0; }
.quote-footer-copyright { color: #cfd6da; margin-bottom: 4px !important; }
.quote-footer-links a { color: #fff; text-decoration: none; }
.quote-footer-links a:hover { text-decoration: underline; }
.quote-footer-links span { color: #99a7ae; margin: 0 6px; }
.quote-footer-trust { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.quote-footer-trust a { display: inline-flex; align-items: center; }
.quote-footer-trust img { height: 36px; width: auto; }
.quote-footer-digicert { display: inline-flex; align-items: center; }
.quote-footer-digicert img { height: 36px !important; width: auto !important; }

/* ---------- Step 1 layout ---------- */
.quote-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
}
/* Tablet — shrink the gap so the right rail doesn't push the form too tight. */
@media (max-width: 1024px) {
    .quote-layout { gap: 24px; }
}
.quote-important {
    background: transparent;
    padding: 0 0 10px;
    font-size: 13px;
    color: #4a5a62;
}
    .quote-important p {
        color: #666;
        font-family: "Open Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }
    .quote-important strong {
        display: block;
        letter-spacing: 1px;
        color: #000;
        margin-bottom: 6px;
        font-family: "Open Sans";
        font-size: 12px;
        font-style: normal;
    }

.quote-card {
    background: #fff;
    border: 1px solid #e6ebee;
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}
.quote-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid #eef1f3;
    flex-wrap: wrap;
}
.quote-card-head h2 { font-size: 18px; margin: 0; font-weight: 700; color: #0b1f2a; flex: 1 1 auto; text-transform: initial;}
.quote-card-head-aside { font-size: 13px; color: #4a5a62; }
.quote-card-body { padding: 20px; }
.quote-step-badge {
    width: 28px; height: 28px; border-radius: 50%;
    background: #24A186; color: #fff; display: inline-flex;
    align-items: center; justify-content: center; font-weight: 700;
}

/* Contact form */
.quote-form-row { display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.quote-form-group { flex: 1 1 260px; display: flex; flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.quote-form-group label { font-size: 13px; color: #4a5a62; flex: 0 0 80px; margin: 0; }
.quote-form-group .quote-input { flex: 1 1 auto; min-width: 0; }
/* Field validation message wraps to its own line and aligns under the input
   (after the fixed 80px label column + 12px gap). */
.quote-form-group .quote-field-error {
    flex: 1 0 100%;
    margin: 4px 0 0 92px;
}
.quote-input {
    border: 1px solid #cbd3d8; border-radius: 6px; padding: 10px 12px; font-size: 14px; background: #fff;
    box-sizing: border-box; max-width: 100%;
}
.quote-input:focus { outline: none; border-color: #17876a; box-shadow: 0 0 0 2px rgba(23,135,106,0.15); }
.quote-input.is-invalid {
    border-color: #c0392b;
    box-shadow: 0 0 0 2px rgba(192,57,43,0.15);
}
.quote-input.is-invalid:focus {
    border-color: #c0392b;
    box-shadow: 0 0 0 2px rgba(192,57,43,0.25);
}
.quote-field-error {
    display: block;
    color: #c0392b;
    font-size: 12px;
    line-height: 1.3;
    margin-top: 4px;
}
.quote-error { color: #a6332b; font-size: 13px; margin-top: 6px; }
.quote-muted { color: #4a5a62; font-size: 13px; }

/* Tabs */
.quote-tabs {
    display: flex;
    background: #edf0f2;
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 20px;
}
.quote-tab {
    flex: 1 1 50%;
    border: 0;
    background: transparent;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #002539;
    cursor: pointer;
}
.quote-tab.active { background: #24A186; color: #fff; }
.quote-tab .quote-tab-count {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    margin-left: 8px;
    border-radius: 999px;
    background: #fff;
    color: #002539;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
/* Show the count badge whenever the JS has populated it (i.e. the user has
   at least one portfolio holding), regardless of whether the portfolio tab
   is the active selection. */
.quote-tab .quote-tab-count:not([hidden]) {
    display: inline-flex;
}

.quote-strong-label { font-weight: 700; display: block; margin-bottom: 8px; }
.quote-search-wrap { position: relative; margin-bottom: 16px; }
.quote-search { width: 100%; padding-right: 34px; }
.quote-search-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; font-size: 20px; color: #94a0a7; cursor: pointer;
}
.quote-search-results-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: 700;
}
.quote-search-custom-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}
.quote-search-custom-prompt {
    margin: 0;
    color: #000;
    font-family: "Open Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}
/* Custom `display: flex` above overrides the browser default `[hidden]`
   rule, so we have to restore the hidden behavior explicitly — otherwise
   the "Is your product not listed?" / "Add a Custom Product" / count
   block leaks into view when the search box is empty. */
.quote-search-results-head[hidden] { display: none; }
.quote-link-btn {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #000;
    font-family: "Open Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
}
.quote-link-btn i { margin-right: 4px; }
.quote-link-btn svg { flex: 0 0 auto; display: block; }

.quote-subhead-row { margin: 20px 0 10px; }
.quote-subhead {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #002539;
    text-transform: none;
    letter-spacing: 0;
}

/* Chip filters */
.quote-chip-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.quote-chip {
    border: 1px solid #CCC;
    background: #FFF;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    height: 34px;
}
.quote-chip.active { background: #F5F5F5; color: #0b1f2a; border-color: #F5F5F5; }
.quote-chip i { color: #17876a; margin-right: 4px; }
.quote-chip.active i { color: #fff; }
.quote-chip-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}
.quote-chip.active .quote-chip-icon path { stroke: #fff; }

/* QuickQuote Eligible checkbox-style chip in the popular products filter. */
.quote-chip-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    background: #FFF;
    color: #002539;
    cursor: pointer;
    user-select: none;
}
.quote-chip-checkbox .quote-chip-input {
    margin: 0;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    cursor: pointer;
}
/* When checked, keep the white-on-grey-border look (don't invert to dark
   like the other chips do on .active) so it still reads as a checkbox. */
.quote-chip-checkbox.active,
.quote-chip-checkbox:has(.quote-chip-input:checked) {
    background: #F5F5F5;
    color: #0b1f2a;
    border-color: #F5F5F5;
}
.quote-chip-checkbox.active .quote-chip-icon path,
.quote-chip-checkbox:has(.quote-chip-input:checked) .quote-chip-icon path {
    stroke: #0b1f2a;
}

/* Quick Add / Portfolio tile grid */
.qa-tile-grid { display: flex; flex-direction: column; gap: 12px; }
.qa-tile {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 12px 0px;
    border: 0;
    border-bottom: 1px solid #eef1f3;
    border-radius: 0;
    background: #fff;
}
.qa-tile-image img {
    width: 64px; height: 64px; object-fit: contain; border-radius: 4px; background: #f2f5f6;
}
.qa-tile-name { font-weight: 600; margin-bottom: 4px; }
.qa-tile-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.qa-chip {
    border: 1px solid #d4dbdf;
    background: #f7f9fa;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #4a5a62;
}
.qa-chip-metal { color: #0b1f2a; }
.qa-chip-quickquote {
    background: #fff;
    color: #0b6e54;
    border: 1px solid #24A186;
    border-radius: 5px;
}
.qa-chip-quickquote i { margin-right: 4px; }
.qa-chip-quickquote .qa-chip-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}
.qa-tile-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 10px;
    border-radius: 8px;
    border: 0.5px solid #DDD;
    background: #EEE;
}
/* Push "Add to Cart" rightward so the natural width of .qa-tile-actions
   resolves to ~320px (no width hard-code). Adjust this value if the cluster
   needs to be a touch wider or narrower. */
.qa-tile-actions .qa-btn-add {
    margin-left: 45px;
}
@media (max-width: 880px) {
    /* On phone the actions row is full-width with space-between — drop the
       desktop margin so the button doesn't shift away from the right edge. */
    .qa-tile-actions .qa-btn-add { margin-left: 0; }
}
.qa-tile-sell { font-weight: 600; font-size: 13px; color: #4a5a62; }

/* Stepper */
.qa-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #cbd3d8;
    border-radius: 6px;
    overflow: hidden;
}
.qa-stepper-btn {
    width: 28px; height: 32px;
    background: #fff; border: 0; cursor: pointer;
    font-size: 16px; font-weight: 700; color: #0b1f2a;
}
.qa-stepper-btn:hover { background: #f2f5f6; }
.qa-stepper-btn.is-disabled {
    color: #c5ccd1;
    cursor: not-allowed;
    pointer-events: none;
}
.qa-stepper-btn.is-disabled:hover { background: transparent; }
.qa-stepper-input {
    width: 36px; height: 32px; border: 0; text-align: center;
    font-weight: 600; font-size: 14px; background: #fff;
}
.qa-stepper-input:focus { outline: none; }

/* Buttons */
.qa-btn {
    border: 0; padding: 10px 18px; border-radius: 6px;
    font-size: 14px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.qa-btn-add { background: #f28c28; color: #fff; }
.qa-btn-add:hover { background: #e07f1f; }
.qa-btn-add[disabled], .qa-btn[disabled],
.qa-btn-add.is-disabled, .qa-btn.is-disabled {
    background: #cbd3d8;
    color: #fff;
    cursor: not-allowed;
    pointer-events: auto; /* keep cursor visible; click handler returns false */
    opacity: 1;
}
.qa-btn-add.is-disabled:hover, .qa-btn.is-disabled:hover { background: #cbd3d8; }
.qa-btn-outline { background: #fff; color: #0b1f2a; border: 1px solid #cbd3d8; }
.qa-btn-outline:hover { background: #f2f5f6; }
.qa-btn-ghost { background: transparent; color: #0b1f2a; }

.quote-loadmore-wrap { margin: 16px 0 0; text-align: center; }

/* Portfolio */
.portfolio-signin { text-align: center; padding: 40px 20px; }
.portfolio-signin h3 {
    font-size: 16px;
    font-weight: 400;
    color: #002539;
    margin: 0 0 14px;
    text-transform: none;
    letter-spacing: 0;
}
.portfolio-signin p {
    margin: 14px 0 0;
    font-size: 16px;
    font-weight: 400;
    color: #002539;
}
/* "Sign In" button on the portfolio tab — APMEX green */
.portfolio-signin .qa-btn-add {
    background: #24A186;
    color: #fff;
}
.portfolio-signin .qa-btn-add:hover { background: #1f8c74; }
.portfolio-loading { padding: 20px; color: #4a5a62; }
.portfolio-toolbar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    margin-bottom: 14px;
}
/* New inner wrapper that holds the filter chip + selects + Sell All
   button. Acts as a flex row of its own so layout stays the same as
   when these items were direct children of .portfolio-toolbar. */
.portfolio-toolbar-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
}
/* Desktop only — push the "Sell All N Products" button to the far right of
   the controls row and tone it down (12px / #666). Mobile keeps the inline
   default from .qa-btn-outline. */
@media (min-width: 881px) {
    .portfolio-toolbar #portfolio-sell-all {
        margin-left: auto;
        font-size: 12px;
        color: #666;
    }
}
/* "Sell All N Products" button — orange border on both desktop + mobile. */
#portfolio-sell-all {
    border-color: #F98D29 !important;
}
.portfolio-count { font-weight: 600; margin-right: 8px; }
.portfolio-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    border-radius: 5px;
    border: 1px solid #CCC;
    background: #fff;
    padding: 6px 12px;
    height: 34px;
    box-sizing: border-box;
    line-height: 1;
    margin-bottom: 0px;
}
.portfolio-checkbox input[type="checkbox"] { margin: 0; }
.portfolio-select {
    border: 1px solid #cbd3d8;
    border-radius: 6px;
    /* Hide the native arrow and draw our own SVG chevron so we can place
       it ~3px in from the right edge (native UA arrows ignore padding-right
       and sit flush against the border). */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23002539' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 9px center;
    padding: 6px 26px 6px 10px;
    height: 34px;
    box-sizing: border-box;
    line-height: 1;
}
/* IE11 still draws the native arrow even with -ms-expand hidden, so
   defensively hide it. */
.portfolio-select::-ms-expand { display: none; }
.portfolio-empty { text-align: center; padding: 30px 20px; color: #4a5a62; }
.portfolio-tiles { display: flex; flex-direction: column; gap: 12px; }

/* Right-rail cart preview */
.quote-right { position: sticky; top: 20px; align-self: start; }
.quote-cart-card {
    background: #F5F5F5;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}
.quote-cart-title { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0 0 12px; }
.quote-cart-scroll { position: relative; }
.quote-cart-body {
    min-height: 80px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px 0 12px;
    color: #4a5a62;
    font-size: 13px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.quote-cart-body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.quote-cart-scroll-arrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 22px;
    border: 0;
    border-radius: 4px;
    background: #edf0f2;
    color: #4a5a62;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.quote-cart-scroll-arrow:hover { background: #dde3e6; color: #0b1f2a; }
.quote-cart-scroll-arrow[hidden] { display: none; }
.quote-cart-scroll-up { top: -4px; }
.quote-cart-scroll-down { bottom: -4px; }
.quote-cart-empty { margin: 0; }

/* Bulk-delete UI (cart > 10 items) */
.quote-cart-bulk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0 10px;
    border-bottom: 1px solid #e6ebee;
    margin-bottom: 4px;
}
.quote-cart-bulk-selectall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #0b1f2a;
    cursor: pointer;
}
.quote-cart-bulk-selectall input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #c0392b;
    margin: 0;
}
.quote-cart-bulk-delete {
    background: #c0392b;
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.quote-cart-bulk-delete:hover { background: #a23223; }
.quote-cart-bulk-delete[hidden] { display: none; }

.quote-cart-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.quote-cart-line {
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-template-areas:
        "img  name"
        "qty  qty";
    column-gap: 10px;
    row-gap: 8px;
    align-items: center;
    padding: 20px;
    background: #FFF;
    border-radius: 8px;
    margin-bottom: 8px;
    position: relative;
}
.quote-cart-line > .quote-cart-line-img { grid-area: img; }
.quote-cart-line > .quote-cart-line-name { grid-area: name; }
.quote-cart-line > .quote-cart-line-qty-row { grid-area: qty; }
/* When the bulk-delete UI is on, prepend a 24px checkbox column. */
.quote-cart-list.has-bulk .quote-cart-line {
    grid-template-columns: 24px 52px 1fr;
    grid-template-areas:
        "chk  img  name"
        "qty  qty  qty";
}
.quote-cart-list.has-bulk .quote-cart-line > .quote-cart-line-check { grid-area: chk; }
.quote-cart-line-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
}
.quote-cart-line-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #c0392b;
    margin: 0;
}
.quote-cart-line.is-selected {
    background: #fdecea;
    border-radius: 4px;
}
.quote-cart-line:last-child { margin-bottom: 0; }
.quote-cart-line-img {
    width: 52px;
    height: 52px;
    border-radius: 0;
    object-fit: contain;
    background: #f5f7f8;
    border: 0;
}
.quote-cart-line-img-placeholder {
    background: #EEE;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.quote-cart-line-img-placeholder svg { display: block; width: auto; height: auto; max-width: 70%; max-height: 70%; }
.quote-cart-line-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.quote-cart-line-name {
    font-size: 13px;
    font-weight: 600;
    color: #0b1f2a;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}
.quote-cart-line-qty-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Push the trash button to the far right of the qty row. */
.quote-cart-line-qty-row .quote-cart-remove { margin-left: auto; }
.quote-cart-line-qty-label { font-size: 12px; font-weight: 600; color: #4a5a62; }
.qa-stepper-sm { transform: scale(0.9); transform-origin: left center; }

/* Desktop-only right-rail cart polish: bigger "Quantity" label, full-size
   100x40 stepper (drop the 0.9 scale), and extra right padding on each
   cart line so the trash button sits 20px in from the card edge. */
@media (min-width: 1101px) {
    .quote-cart-line-qty-label { font-size: 14px; }
    .qa-stepper.qa-stepper-sm {
        width: 100px;
        height: 40px;
        transform: none;
    }
    .qa-stepper.qa-stepper-sm .qa-stepper-btn { height: 40px; }
    .qa-stepper.qa-stepper-sm .qa-stepper-input {
        height: 40px;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
}
.quote-cart-remove {
    border: 0;
    background: transparent;
    color: #6b7c83;
    cursor: pointer;
    padding: 6px;
}
.quote-cart-remove:hover { color: #a6332b; }
.quote-cart-actions { margin: 0 0 12px; display: flex; flex-direction: column; }
.quote-cart-actions .qa-btn-add { width: 100%; justify-content: center; text-align: center; padding: 12px 16px; font-weight: 700; }

/* Guest-only "Complete Your Contact Info to Continue" nudge. Sits below the
   Review Request button on desktop, below the sticky bar on mobile, and below
   the overlay button inside the mobile cart overlay. apmex.quote.js toggles
   the [hidden] attribute based on isAuthenticated + isContactComplete. */
.quote-contact-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 0 4px;
    color: #002539;
    font-family: "Open Sans";
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}
.quote-contact-hint[hidden] { display: none; }
.quote-contact-hint .quote-contact-hint-icon { flex: 0 0 20px; display: block; }
.quote-contact-hint .quote-contact-hint-text { flex: 1 1 auto; }
/* Desktop-only tightening: smaller text, tighter gap, no horizontal padding. */
@media (min-width: 1101px) {
    .quote-contact-hint {
        gap: 5px;
        padding: 0;
    }
    .quote-contact-hint .quote-contact-hint-text {
        font-size: 12px;
    }
}

/* ---------- Step 2 - Review ---------- */
.quote-review { max-width: 780px; }
.quote-review-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.quote-review-submit-top { white-space: nowrap; }
@media (max-width: 600px) {
    /* Top Submit button is for desktop; hide it on small screens. */
    .quote-review-submit-top { display: none; }
}
.quote-back i { margin-right: 6px; }
.quote-review-qq-banner {
    background: linear-gradient(90deg, #0b2b3f, #143749);
    color: #fff;
    padding: 14px 20px;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 40px 0;
}
/* Mobile keeps the original tighter outer spacing. */
@media (max-width: 880px) {
    .quote-review-qq-banner { margin: 0 0 22px; }
}
.quote-review-qq-banner i { color: #5cd1aa; font-size: 20px; }
.quote-review-qq-banner .quote-review-banner-icon { flex: 0 0 auto; display: block; width: 22px; height: 22px; }
.quote-review-qq-banner strong { color: #fff; font-size: 16px; letter-spacing: 0.3px; }
.quote-review-section-title { font-size: 18px; font-weight: 700; margin: 0 0 14px; color: #002539; text-transform: none; }
.quote-review-items { list-style: none; margin: 0; padding: 0; }
.quote-review-item {
    display: grid;
    grid-template-columns: 56px 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #e6ebee;
}
.quote-review-item-image img { width: 56px; height: 56px; object-fit: contain; }
.quote-review-item-placeholder { display: block; width: 56px; height: 56px; background: #edf0f2; border-radius: 4px; }
/* Custom-product placeholder — silver-coin-stack inline SVG (matches the
   right-rail cart preview). 56x56 slot, SVG centered and scaled to fit. */
.quote-review-item-image-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #edf0f2;
    border-radius: 4px;
}
.quote-review-item-image-placeholder svg {
    width: 22px;
    height: 36px;
    display: block;
}
.quote-review-item-name { font-weight: 600; }
.quote-review-item-qty { display: flex; align-items: center; gap: 8px; }
.quote-review-item-qty label { font-size: 13px; color: #4a5a62; margin: 0; }
.quote-review-qty-select {
    border: 1px solid #cbd3d8; border-radius: 6px; padding: 6px 10px; background: #fff; font-size: 14px;
}
.quote-review-remove {
    border: 0; background: transparent; color: #6b7c83; cursor: pointer; font-size: 16px;
}
.quote-review-empty { text-align: center; padding: 32px 20px; color: #4a5a62; }
.quote-review-empty .qa-btn { margin-top: 12px; }
.quote-review-submit { text-align: center; padding-top: 24px; }
.quote-review-submit-btn { padding: 14px 28px; font-size: 16px; }
.quote-review-terms { margin-top: 14px; color: #4a5a62; font-size: 13px; }

/* ---------- Step 3 - Confirmation ---------- */
.quote-confirmation { max-width: 900px; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; }
.quote-confirmation-slot { margin: 0 auto 32px; }
.quote-confirmation-slot.is-dismissed,
.quote-confirmation-slot.has-quickquote.is-dismissed {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
.quote-confirmation-slot.has-quickquote {
    background: #fff;
    border: 1px solid #e6ebee;
    border-radius: 10px;
    overflow: hidden;
}

/* Overrides for the embedded QuickQuote partial to match Confirmation screenshot */
.quote-confirmation-slot.has-quickquote .qq-wrap { max-width: 100%; }
.quote-confirmation-slot.has-quickquote .qq-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 22px 28px 26px;
}
.quote-confirmation-slot.has-quickquote .qq-timer-pill {
    order: -1;
    width: 100%;
    background: #eef1f4;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 18px;
}
.quote-confirmation-slot.has-quickquote .qq-timer-pill .qq-muted { font-weight: 600; color: #4a5a62; }
.quote-confirmation-slot.has-quickquote .qq-timer-pill .qq-timer { color: #17876a; font-weight: 700; }
.quote-confirmation-slot.has-quickquote .qq-header {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 10px; text-align: center; margin-bottom: 6px;
}
.quote-confirmation-slot.has-quickquote .qq-icon,
.quote-confirmation-slot.has-quickquote .qq-icon img { width: 28px !important; height: 28px !important; }
.quote-confirmation-slot.has-quickquote .qq-title {
    font-size: 20px; font-weight: 700; line-height: 1.2;
}
.quote-confirmation-slot.has-quickquote .qq-title br { display: none; }
.quote-confirmation-slot.has-quickquote .qq-amount {
    font-size: 32px; font-weight: 800; margin: 4px 0 16px;
}
.quote-confirmation-slot.has-quickquote .qq-btn {
    font-size: 16px; font-weight: 700; padding: 12px 28px;
    border-radius: 6px; max-width: 220px; width: auto; margin: 0;
}
.quote-confirmation-slot.has-quickquote .qq-not-now-link {
    display: block; margin-top: 10px;
    font-size: 13px; font-weight: 600; color: #1f6fb2; text-decoration: none;
}
.quote-confirmation-slot.has-quickquote .qq-not-now-link:hover { text-decoration: underline; }
.quote-confirmation-slot.has-quickquote .qq-footnote {
    margin-top: 8px; font-size: 12px; font-style: normal; color: #6b7280;
}
/* Legacy `.quote-thankyou` fallback markup is no longer rendered by
   apmex.quote.js (replaced by #quote-submitted-thanks). The card-style
   rules + h2/body styles were removed because they produced an empty
   grey "QUICK QUOTE OFFER" card whenever a stale JS bundle hit an empty
   response.content. A small defensive override is kept so that if the
   markup ever reappears it doesn't inherit the global uppercase/grey h2
   rule from apmex-style.css. */
.quote-thankyou h2 { text-transform: none; color: #002539; }
.quote-confirmation-empty { text-align: center; padding: 40px 20px; }
.quote-confirmation-empty h2 { margin: 0 0 8px; }

/* 4-steps explainer */
.quote-simple-steps { background: transparent; margin: 32px 0; }
.quote-simple-steps h2 { margin: 0 0 16px; color: #002539; font-family: "Open Sans"; font-size: 20px; font-style: normal; font-weight: 600; line-height: normal; text-transform: initial; }
.quote-simple-steps-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.quote-simple-steps-list li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.quote-simple-steps-icon {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    color: #17876a; font-size: 20px;
}
.quote-simple-steps-text h3 { margin: 0 0 4px; color: #002539; font-family: "Open Sans"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 38px; }
.quote-simple-steps-text p { margin: 0; color: #000; font-family: "Open Sans"; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }

/* "Your quote request has been submitted." card (Not Now / submitted state) */
.quote-submitted-thanks {
    padding: 20px 24px 24px;
    border-radius: 10px;
    border: 1px solid #CCC;
    background: #fff;
}
.quote-submitted-thanks h2 {
    margin: 0 0 12px;
    color: #002539;
    font-family: "Open Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: none;
}
.quote-submitted-thanks p {
    margin: 0 0 12px;
    color: #000;
    font-family: "Open Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
}
.quote-submitted-thanks p:last-of-type { margin-bottom: 20px; }
.quote-submitted-thanks-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.quote-thanks-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 40px;
    padding: 0 18px;
    border-radius: 4px;
    font-family: "Open Sans";
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    text-transform: none;
}
.quote-thanks-btn-primary {
    background: #24A186;
    border: 1px solid #24A186;
    color: #fff;
}
.quote-thanks-btn-primary:hover { background: #1f8c74; border-color: #1f8c74; color: #fff; text-decoration: none; }
.quote-thanks-btn-outline {
    background: #fff;
    border: 1px solid #002539;
    color: #002539;
}
.quote-thanks-btn-outline:hover { background: #f4f6f7; color: #002539; text-decoration: none; }

/* ---------- "Exit and cancel" confirmation modal ----------
   Replaces the native browser confirm() dialog when the EXIT link in
   _QuoteHeader is clicked. Same layout primitives as the welcome-back
   modal below — centered card on a tinted backdrop. */
.quote-exit-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quote-exit-modal[hidden] { display: none; }
.quote-exit-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 31, 42, 0.55);
}
.quote-exit-modal-card {
    position: relative;
    width: min(440px, 92vw);
    background: #EEE;
    border-radius: 14px;
    padding: 56px 28px 24px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.quote-exit-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: 0;
    font-size: 22px;
    cursor: pointer;
    color: #002539;
    line-height: 1;
    padding: 0 4px;
}
.quote-exit-modal-card h2 {
    margin: 0 0 24px;
    color: #002539;
    font-family: "Open Sans";
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
}
.quote-exit-modal-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
}
.quote-exit-modal-btn {
    flex: 1 1 0;
    max-width: 180px;
    padding: 12px 18px;
    border-radius: 6px;
    font-family: "Open Sans";
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.quote-exit-modal-btn-secondary {
    background: #fff;
    color: #002539;
    border: 1px solid #d4dbdf;
}
.quote-exit-modal-btn-secondary:hover { background: #f4f6f7; }
.quote-exit-modal-btn-primary {
    background: #24A186;
    color: #fff;
    border: 1px solid #24A186;
}
.quote-exit-modal-btn-primary:hover {
    background: #1f8d76;
    border-color: #1f8d76;
    color: #fff;
    text-decoration: none;
}

/* ---------- "Welcome back" modal ---------- */
.quote-welcomeback-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quote-welcomeback-modal[hidden] { display: none; }
.quote-welcomeback-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 31, 42, 0.55);
}
.quote-welcomeback-card {
    position: relative;
    width: min(560px, 92vw);
    background: #EEE;
    border-radius: 16px;
    padding: 36px 40px 28px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.quote-welcomeback-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: 0;
    font-size: 22px;
    cursor: pointer;
    color: #002539;
    line-height: 1;
    padding: 0 4px;
}
.quote-welcomeback-card h2 {
    margin: 0 0 12px;
    color: #002539;
    font-family: "Open Sans";
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}
.quote-welcomeback-sub {
    margin: 0 0 20px;
    color: #000;
    font-family: "Open Sans";
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
}
.quote-welcomeback-icon { margin: 0 0 18px; color: #24A186; line-height: 0; }
.quote-welcomeback-icon svg { width: 64px; height: auto; display: inline-block; }
.quote-welcomeback-phone {
    display: block;
    margin: 0 0 22px;
    color: #002539;
    font-family: "Open Sans";
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
}
.quote-welcomeback-phone:hover { text-decoration: none; color: #002539; }
.quote-welcomeback-continue {
    border: 1px solid #002539;
    background: #fff;
    color: #002539;
    font-family: "Open Sans";
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    border-radius: 4px;
    padding: 10px 36px;
    cursor: pointer;
    min-width: 200px;
}
.quote-welcomeback-continue:hover { background: #f4f6f7; }
@media (max-width: 880px) {
    /* Mobile modal: leave ~24px breathing room on each side, taller card,
       phone number rendered as a dark blue pill, full-width Continue. */
    .quote-welcomeback-modal { padding: 0 24px; }
    .quote-welcomeback-card {
        width: 100%;
        max-width: 460px;
        padding: 28px 20px 24px;
        border-radius: 16px;
    }
    .quote-welcomeback-card h2 { font-size: 22px; line-height: 1.25; }
    .quote-welcomeback-sub { font-size: 15px; line-height: 1.45; }
    .quote-welcomeback-icon svg { width: 60px; height: 60px; }
    .quote-welcomeback-phone {
        display: inline-block;
        background: #002539;
        color: #fff;
        padding: 10px 28px;
        border-radius: 999px;
        font-size: 18px;
        line-height: 1.2;
        margin-bottom: 22px;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(255,255,255,0.2);
        touch-action: manipulation;
    }
    .quote-welcomeback-phone:hover,
    .quote-welcomeback-phone:focus,
    .quote-welcomeback-phone:active { color: #fff; background: #002539; text-decoration: none; }
    .quote-welcomeback-continue {
        display: block;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        padding: 12px 18px;
    }
}
@media (max-width: 480px) {
    .quote-welcomeback-card { padding: 24px 16px 20px; }
    .quote-welcomeback-card h2 { font-size: 20px; }
    .quote-welcomeback-phone { font-size: 17px; padding: 10px 22px; }
}

/* ---------- "Need help" idle modal ---------- */
.quote-needhelp-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quote-needhelp-modal[hidden] { display: none; }
.quote-needhelp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 31, 42, 0.55);
}
.quote-needhelp-card {
    position: relative;
    width: min(560px, 92vw);
    background: #EEE;
    border-radius: 16px;
    padding: 36px 40px 28px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.quote-needhelp-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: 0;
    font-size: 22px;
    cursor: pointer;
    color: #002539;
    line-height: 1;
    padding: 0 4px;
}
.quote-needhelp-card h2 {
    margin: 0 0 18px;
    color: #002539;
    font-family: "Open Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}
.quote-needhelp-icon { margin: 0 0 18px; color: #24A186; line-height: 0; }
.quote-needhelp-icon svg { width: 64px; height: auto; display: inline-block; }
.quote-needhelp-cta {
    margin: 0 0 4px;
    color: #002539;
    font-family: "Open Sans";
    font-size: 18px;
    font-weight: 700;
}
.quote-needhelp-sub {
    margin: 0 0 14px;
    color: #000;
    font-family: "Open Sans";
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}
.quote-needhelp-phone {
    display: block;
    margin: 0 0 22px;
    color: #002539;
    font-family: "Open Sans";
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
}
.quote-needhelp-phone:hover,
.quote-needhelp-phone:focus { color: #002539; text-decoration: none; }
.quote-needhelp-goback {
    border: 1px solid #002539;
    background: #fff;
    color: #002539;
    font-family: "Open Sans";
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    border-radius: 4px;
    padding: 10px 36px;
    cursor: pointer;
    min-width: 200px;
}
.quote-needhelp-goback:hover { background: #f4f6f7; }

@media (max-width: 880px) {
    .quote-needhelp-modal { padding: 0 24px; }
    .quote-needhelp-card {
        width: 100%;
        max-width: 460px;
        padding: 28px 20px 24px;
        border-radius: 16px;
    }
    .quote-needhelp-card h2 { font-size: 18px; line-height: 1.3; }
    .quote-needhelp-icon svg { width: 60px; height: 60px; }
    .quote-needhelp-cta { font-size: 16px; }
    .quote-needhelp-sub { font-size: 14px; }
    .quote-needhelp-phone {
        display: inline-block;
        background: #002539;
        color: #fff;
        padding: 10px 28px;
        border-radius: 999px;
        font-size: 18px;
        line-height: 1.2;
        margin-bottom: 22px;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(255,255,255,0.2);
        touch-action: manipulation;
    }
    .quote-needhelp-phone:hover,
    .quote-needhelp-phone:focus,
    .quote-needhelp-phone:active { color: #fff; background: #002539; text-decoration: none; }
    .quote-needhelp-goback {
        display: block;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        padding: 12px 18px;
    }
}
@media (max-width: 480px) {
    .quote-needhelp-card { padding: 24px 16px 20px; }
    .quote-needhelp-card h2 { font-size: 16px; }
    .quote-needhelp-phone { font-size: 17px; padding: 10px 22px; }
}

.quote-confirmation-items-section { margin-top: 24px; }
.quote-confirmation-items-section h2 { font-size: 18px; margin: 0 0 12px; text-transform: initial; color: #002539; }
.quote-confirmation-items { list-style: none; margin: 0; padding: 0; }
.quote-confirmation-item {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e6ebee;
}
.quote-conf-item-img { width: 48px; height: 48px; object-fit: contain; }
.quote-conf-item-placeholder { display: block; width: 48px; height: 48px; background: #edf0f2; border-radius: 4px; }
/* Custom-product placeholder on Confirmation — silver-coin-stack inline
   SVG centered inside the 48x48 slot. Matches the rail + Review page. */
.quote-conf-item-placeholder-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.quote-conf-item-placeholder-svg svg {
    width: 18px;
    height: 30px;
    display: block;
}
.quote-conf-item-name { color: #0b1f2a; font-size: 14px; }
.quote-conf-item-qty {
    border: 1px solid #cbd3d8; border-radius: 6px; padding: 6px 18px;
    font-size: 13px; background: #fff; color: #4a5a62; min-width: 90px; text-align: center;
}
.quote-conf-item-qty strong { color: #0b1f2a; font-weight: 700; margin-left: 4px; }

/* Inline "Enter Your Custom Product" panel */
.quote-custom-panel {
    position: relative;
    background: #F7F7F7;
    border: 1px solid #F7F7F7;
    border-radius: 8px;
    padding: 16px 18px;
    margin: 12px 0 16px;
}
.quote-custom-panel-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: #4a5a62;
    cursor: pointer;
    padding: 4px 8px;
}
.quote-custom-panel-close:hover { color: #0b1f2a; }
.quote-custom-panel-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: #0b1f2a;
}
.quote-custom-panel-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.quote-custom-field { display: flex; flex-direction: column; gap: 6px; }
.quote-custom-field label { font-size: 13px; color: #4a5a62; margin: 0; }
.quote-custom-field-name { flex: 1 1 260px; }
.quote-custom-field-metal { flex: 0 1 120px; }
.quote-custom-field-qty { flex: 0 0 auto; }
.quote-custom-field-action { flex: 0 0 auto; }
.quote-custom-field-action .qa-btn-add { padding: 10px 20px; }
/* Match the Sell stepper height to the description / metal inputs (40px). */
.quote-custom-field-qty .qa-stepper-btn,
.quote-custom-field-qty .qa-stepper-input { height: 40px; }
@media (max-width: 880px) {
    .quote-custom-panel-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 14px;
    }
    .quote-custom-field-name,
    .quote-custom-field-metal { flex: 1 1 100%; width: 100%; }
    .quote-custom-field-qty { flex: 0 0 auto; }
    .quote-custom-field-action { flex: 1 1 auto; }
    .quote-custom-field-action .qa-btn-add { width: 100%; justify-content: center; padding: 10px 20px; }
}

/* Search "no results" empty state */
.quote-search-empty {
    text-align: center;
    padding: 36px 20px 20px;
}
.quote-search-empty-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #0b1f2a;
    text-transform: initial;
}
.quote-search-empty-hint {
    margin: 0;
    color: #4a5a62;
    font-size: 14px;
}

/* ---------- Mobile sticky cart bar (Index.Mobile.cshtml) ---------- */
.quote-cart-bar-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--L2, #EEE);
    border-top: 0;
    border-radius: 20px 20px 0 0;
    padding: 10px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 100;
    box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.25);
}
.quote-cart-bar-mobile .quote-cart-bar-row {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 12px;
}
.quote-cart-bar-info {
    font-size: 14px;
    font-weight: 600;
    color: #0b1f2a;
    flex: 0 0 auto;
    white-space: nowrap;
}
.quote-cart-bar-info span { font-size: 16px; }
.quote-cart-bar-mobile #quote-continue-btn {
    flex: 0 0 auto;
    width: 250px;
    max-width: 100%;
    height: 48px;
    min-width: 0;
    padding: 0 16px;
    line-height: 48px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.quote-cart-bar-viewedit { text-align: center; }
.quote-cart-viewedit-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #000;
    font-family: "Open Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
    padding: 2px 4px;
}
.quote-cart-viewedit-link:hover { text-decoration: underline; }
.quote-cart-viewedit-link svg { flex: 0 0 auto; }

/* ---------- Mobile cart overlay (bottom sheet) ---------- */
.quote-cart-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: flex-end;
    justify-content: stretch;
}
.quote-cart-overlay[hidden] { display: none; }
.quote-cart-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 31, 42, 0.55);
}
.quote-cart-overlay-panel {
    position: relative;
    background: #EEE;
    width: 100%;
    max-height: 85vh;
    border-radius: 20px 20px 0 0;
    /* Clip the inner header/footer so their rectangular backgrounds don't
       paint over the panel's rounded top corners. */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -6px 20px rgba(0,0,0,.18);
    animation: quoteCartSlideUp .22s ease-out;
}
/* Mobile cart overlay: white cards with rounded corners and 20px gap. */
.quote-cart-overlay-body .quote-cart-list { display: flex; flex-direction: column; gap: 20px; }
.quote-cart-overlay-body .quote-cart-line {
    background: #fff;
    border-radius: 8px;
    margin: 0;
    padding: 12px;
}
.quote-cart-overlay-head { background: #EEE; }
@keyframes quoteCartSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.quote-cart-overlay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e6ebee;
}
.quote-cart-overlay-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0b1f2a;
}
.quote-cart-overlay-close {
    background: transparent;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: #4a5a62;
    cursor: pointer;
    padding: 0 4px;
}
.quote-cart-overlay-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 16px 16px;
}
.quote-cart-overlay-foot {
    flex: 0 0 auto;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e6ebee;
    background: #EEE;
}
.quote-cart-overlay-review {
    width: 100%;
    display: block;
    text-align: center;
}

/* 2-column tile grid for mobile (qa-tile-grid--2col modifier) */
.qa-tile-grid--2col { grid-template-columns: repeat(2, 1fr); }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
    .quote-layout { grid-template-columns: 1fr; }
    .quote-right { position: static; }
    /* Slightly wider gap between the "Add a Custom Product" block and the
       "# Matching Products" count on narrow viewports. */
    .quote-search-results-head { gap: 20px; }
    .quote-header { padding: 16px 0; }
    .quote-header-inner {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 0 12px;
        flex-wrap: nowrap;
    }
    .quote-brand { flex: 1 1 auto; gap: 10px; min-width: 0; }
    .quote-brand img { width: 132px; height: auto; }
    .quote-brand-title {
        color: #FFF !important;
        font-family: "Open Sans" !important;
        font-size: 16px !important;
        font-style: normal !important;
        font-weight: 600 !important;
        line-height: 100% !important;
        word-spacing: 100vw;
    }
    .quote-header-right {
        gap: 10px;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
    }
    .quote-help {
        font-size: 0;
        color: transparent;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        line-height: 1.2;
        position: relative;
    }
    .quote-help::before {
        content: "\f095";
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        font-size: 12px;
        color: #fff;
        width: 24px;
        height: 24px;
        border: 1px solid #fff;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }
    .quote-help strong {
        font-size: 13px;
        font-weight: 700;
        color: #fff;
        line-height: 1.15;
    }
    .quote-help strong::after {
        content: "(Option 2)";
        display: block;
        font-size: 11px;
        font-weight: 400;
        color: #cfd6da;
    }
    .quote-exit { font-size: 0; padding: 4px; }
    .quote-exit span[aria-hidden="true"] { font-size: 22px; color: #fff; }
    .quote-brand-title {font-size: 16px; line-height: 100%; font-weight:600; }
    .quote-stepper-list { gap: 36px; }
    .quote-step + .quote-step::before { left: -28px; width: 20px; }
    .qa-tile {
        grid-template-columns: 48px 1fr;
        border: none;
        border-bottom: 1px solid #ddd;
        border-radius: initial;
    }
    .qa-tile:last-child {        
        border-bottom: none;
    }
    .qa-tile-actions { grid-column: 1 / -1; justify-content: space-between; }
    .qa-tile-image img { width: 48px; height: 48px; }
    .quote-footer-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
    .quote-footer-contact {
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .quote-footer-question { margin-right: 0; }
    .quote-footer-link { font-weight: 700; font-size: 16px; }
    .quote-footer-reach {
        border-left: 0;
        padding-left: 0;
        gap: 8px;
    }
    .quote-footer-reach-item i {
        display: inline-flex !important;
        width: 22px;
        height: 22px;
        border: 1px solid #fff;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        margin-right: 8px;
    }
    .quote-footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .quote-footer-trust { order: -1; }
    .quote-footer-legal { order: 1; }
    .quote-review-item {
        grid-template-columns: 56px 1fr auto;
        column-gap: 12px;
        row-gap: 10px;
        padding: 16px 0;
    }
    .quote-review-item-image { grid-column: 1 / 2; grid-row: 1 / 2; }
    .quote-review-item-name { grid-column: 2 / 4; grid-row: 1 / 2; }
    .quote-review-item-qty { grid-column: 1 / 3; grid-row: 2 / 3; }
    .quote-review-remove { grid-column: 3 / 4; grid-row: 2 / 3; justify-self: end; align-self: center; }
    .quote-container { padding: 0 16px; }
    .quote-card-head { padding: 14px 16px; border-bottom: 0; }
    .quote-card-body { padding: 16px; }
    .quote-form-row { gap: 12px; margin-bottom: 12px; }
    .quote-tabs { flex-wrap: wrap; }
    .quote-tab { flex: 1 1 auto; text-align: center; }
    .quote-simple-steps h2 { font-size: 16px; }
    .quote-confirmation-slot.has-quickquote .qq-amount { font-size: 28px; }
    .quote-confirmation-slot.has-quickquote .qq-title { font-size: 18px; }
}

/* Tablet / iPad landscape (881–1100px) */
@media (min-width: 881px) and (max-width: 1100px) {
    .quote-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; }
    .quote-stepper-list { gap: 48px; }
    .qa-tile-grid { grid-template-columns: repeat(2, 1fr); }
    .quote-container { padding: 0 16px; }
    .quote-footer-inner { gap: 16px; }
    .quote-footer-brand img { width: 160px; }
}

/* iPad-only quick-add tile fix (768–1100px): restore the desktop 3-column
   tile layout so Sell / qty / Add to Cart stay inline on the right of each
   row instead of wrapping below the product info. */
@media (min-width: 768px) and (max-width: 1100px) {
    .qa-tile-grid {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        gap: 12px;
    }
    .qa-tile {
        grid-template-columns: 64px 1fr auto;
        border-bottom: 1px solid #eef1f3;
    }
    .qa-tile-image img { width: 64px; height: 64px; }
    .qa-tile-actions {
        grid-column: auto;
        justify-content: flex-start;
    }
    .qa-tile-actions .qa-btn-add { margin-left: 0; }
}

/* Small phones (≤480px) */
@media (max-width: 480px) {
    .quote-container { padding: 0 12px; }
    .quote-stepper-list { gap: 20px; }
    .quote-stepper { padding: 14px 0 16px; }
    .quote-step { font-size: 12px; gap: 6px; }
    .quote-step-dot { width: 16px; height: 16px; font-size: 10px; }
    .quote-form-row { flex-direction: column; gap: 10px; }
    .quote-form-group { flex: 1 1 100%; }
    .quote-form-group label { flex: 0 0 72px; font-size: 12px; }
    .quote-form-group .quote-field-error { margin-left: 84px; /* 72px label + 12px gap */ }
    .quote-tab { font-size: 12px; padding: 8px 10px; }
    .qa-tile-grid { grid-template-columns: 1fr; }
    .quote-chip-filter { flex-wrap: wrap; gap: 6px; }
    .quote-chip { font-size: 12px; padding: 6px 10px; }
    .quote-card-head h2 { font-size: 16px; }
    .quote-important { font-size: 12px; }
    .quote-confirmation-slot.has-quickquote .qq-card { padding: 18px 16px 20px; }
    .quote-confirmation-slot.has-quickquote .qq-amount { font-size: 26px; }
    .quote-confirmation-slot.has-quickquote .qq-title { font-size: 16px; }
    .quote-confirmation-slot.has-quickquote .qq-btn { max-width: 100%; width: 100%; }
    .quote-simple-steps-list li { grid-template-columns: 36px 1fr; gap: 10px; }
    .quote-simple-steps-icon { width: 36px; height: 36px; font-size: 16px; }
    .quote-footer-brand img { width: 160px; }
    .quote-footer-link { font-size: 14px; }
    .quote-footer-reach-item { font-size: 13px; }
    .quote-footer-trust img,
    .quote-footer-digicert img { height: 28px !important; }
    .quote-footer-trust { gap: 8px; }
}

/* ---- Product search: loading indicator (bottom center while fetching) ---- */
.quote-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 0;
    color: #6b7280;
    font-size: 14px;
}

.quote-search-loading[hidden] { display: none; }

.quote-search-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-top-color: #24A186;
    border-radius: 50%;
    animation: quote-search-spin 0.7s linear infinite;
}

@keyframes quote-search-spin {
    to { transform: rotate(360deg); }
}