/* Scoped to the opt-in dialog; match the white sign-in modal. */
#fitmentModal .modal-dialog {
    width: calc(100% - 32px);
    max-width: 520px;
    height: auto;
    min-height: 0;
    margin: 32px auto;
}
#fitmentModal.in { display: flex !important; align-items: center; }
#fitmentModal .modal-content {
    width: 100%; height: auto; min-height: 0;
    max-height: calc(100vh - 64px); overflow-y: auto;
    color: #171b22; background: #fff !important;
    border: 1px solid #d9dce1; border-radius: 5px;
    box-shadow: 0 12px 40px rgba(0,0,0,.25) !important;
}
#fitmentModal .modal-body { padding: 40px 28px 24px; height: auto; text-align: left; background: transparent; }
#fitmentModal h2 { margin: 0 0 8px; font-family: Roboto,sans-serif; font-weight: 700; font-size: 26px; line-height: 1.25; text-align: center; }
#fitmentModalDescription { margin-bottom: 24px; color: #545b66; font-size: 15px; text-align: center; }
#fitmentModal .fitment-close { position: absolute; z-index: 2; top: 4px; right: 4px; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: #626974; font-size: 28px; line-height: 1; }
#fitmentModal #ymmModal .modal-body { padding: 0; }
#fitmentModal .borderBottom, #fitmentModal .borderTop { border: 0; }
#fitmentModal .container { width: 100%; padding: 0; }
#fitmentModal .row { margin: 0; }
#fitmentModal #ymmExtFirstGroup, #fitmentModal .ymmExtGroupInner { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; width: 100%; }
#fitmentModal #ymmExtFirstGroup > div { width: 100%; padding: 0; float: none; background: transparent !important; }
#fitmentModal #ymmExtFirstGroup > div:first-child { width: 100%; }
#fitmentModal #ymmExtFirstGroup label { color: #171b22; margin: 0; }
#fitmentModal #ymmExtFirstGroup label > strong, #fitmentModal #ymmExtFirstGroup label > br { display: none; }
#fitmentModal select { width: 100%; height: 46px; margin: 0; padding: 10px; border: 1px solid #c9cdd3; border-radius: 4px; background: #fff; color: #171b22; font-size: 16px; }
#fitmentModal select:disabled { background: #f3f5f7; color: #626974; }
#fitmentModal #ymmExtGroupDiv { margin-top: 16px; }
#fitmentModal .ymmExtGroupInner > div, #fitmentModal .ymmExtAddOpt { width: 100%; padding: 0; float: none; }
#fitmentModal .ymmExtAddOpt { margin-bottom: 12px; color: #545b66; }
#fitmentModal .ymmExtText { color: #171b22; }
#fitmentModal #ymmForm > .row > .text-center { width: 100%; padding: 20px 0 0; background: transparent !important; }
#fitmentModal .fitment-submit { min-height: 46px; background: #0059a8; border-color: #0059a8; color: #fff; font-size: 16px; }
#fitmentModal .btn-link, #fitmentModal a { color: #0059a8 !important; }
#fitmentModal .fitment-feedback { margin: 12px 0 0; font-size: 14px; color: #545b66; }
#fitmentModal .fitment-feedback:empty { display: none; }
#fitmentModal button:focus-visible, #fitmentModal a:focus-visible, #fitmentModal select:focus-visible { outline: 2px solid #0059a8; outline-offset: 3px; }
@media (max-width: 767px) {
    #fitmentModal .modal-dialog { margin: 16px auto; }
    #fitmentModal .modal-content { max-height: calc(100dvh - 32px); }
    #fitmentModal .modal-body { padding: 40px 20px 24px; }
    #fitmentModal #ymmExtFirstGroup > div { width: 100%; }
}

#fitmentModal .ymmReset, #fitmentModal .fitment-clear { background: transparent !important; border: 0; min-height: 44px; }

/* The shared YMM stylesheet paints every additional-options div dark. */
#fitmentModal #ymmExtGroupDiv div { background: transparent !important; }
#fitmentModal .ymm-additional-options-text { color: #545b66; }
#fitmentModal .fitment-feedback.sr-only { margin: 0; }

/* Overlay progress on the affected control without adding layout height. */
#fitmentModal .fitment-loading { position: relative; }
#fitmentModal .fitment-loading select { padding-right: 52px; }
#fitmentModal .fitment-loading::after {
    content: ''; position: absolute; right: 30px; top: calc(50% - 8px);
    width: 16px; height: 16px; border: 2px solid #c9cdd3;
    border-top-color: #0059a8; border-radius: 50%;
    animation: fitment-spin .8s linear infinite; pointer-events: none;
}
#fitmentModal .fitment-submit.fitment-loading::after { right: 14px; border-top-color: #fff; }
@keyframes fitment-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    #fitmentModal .fitment-loading::after { animation: none; }
}

#fitmentModal [hidden] { display: none !important; }
#fitmentModal .fitment-current { text-align: center; }
#fitmentModal .fitment-vehicle-name { margin: 0 0 8px; font-size: 22px; font-weight: 700; line-height: 1.35; }
#fitmentModal .fitment-vehicle-details { margin: 0 0 24px; color: #545b66; font-size: 15px; }
#fitmentModal a.fitment-parts-link, #fitmentModal .fitment-change {
    display: block; width: 100%; min-height: 46px; padding: 12px;
    border: 1px solid #0059a8; border-radius: 4px; font-size: 16px; line-height: 1.4;
}
#fitmentModal a.fitment-parts-link { margin: 24px 0 12px; background: #0059a8; color: #fff !important; text-decoration: none; }
#fitmentModal a.fitment-parts-link:hover { background: #004786; }
#fitmentModal .fitment-change { background: #fff; color: #0059a8; }
#fitmentModal .fitment-back { min-height: 44px; background: transparent !important; border: 0; }