/* ============================================
   Shared "Request a Quote" popup
   Pairs with includes/quote-modal.php + js/quote-modal.js.

   Deliberately framework-free: the product pages load the Tailwind CDN but
   inventory.php does not, so the modal cannot rely on utility classes for
   layout. Everything the component needs lives here, which is what lets the
   same partial drop into any page.
   ============================================ */

.quote-modal {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.5);
}

.quote-modal.is-open {
    display: flex;
}

.quote-modal__dialog {
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 20px;
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

.quote-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid #e3e3e3;
}

.quote-modal__title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
}

.quote-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #1a1a1a;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.quote-modal__close:hover {
    background: #f5f5f5;
}

/* inventory_style.min.css styles [type="button"]:focus with an orange fill and
   white text — specificity (0,2,0), which beats a bare component class. These
   rules are scoped through .quote-modal (0,3,0) so the popup keeps its own
   focus treatment on whichever page it is dropped into. */
.quote-modal .quote-modal__close:focus,
.quote-modal .quote-modal__close:focus-visible {
    background: #f5f5f5;
    color: #1a1a1a;
    outline: 2px solid #ff6442;
    outline-offset: 2px;
}

.quote-modal__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}

.quote-modal__form.is-hidden {
    display: none;
}

.quote-modal__label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
}

.quote-modal__input {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    /* 16px keeps iOS Safari from zooming the viewport on focus. */
    font-size: 16px;
    font-family: inherit;
    color: #1a1a1a;
    background: #ffffff;
}

.quote-modal__input:focus {
    outline: 2px solid #ff6442;
    outline-offset: 1px;
    border-color: transparent;
}

textarea.quote-modal__input {
    resize: vertical;
    min-height: 96px;
}

.quote-modal__input--readonly {
    background: #f5f5f5;
    color: #555555;
}

.quote-modal__section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
}

.quote-modal__section-heading {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.quote-modal__section .quote-modal__section-heading {
    margin-bottom: 0;
}

/* The checkbox/radio groups are real fieldsets so screen readers announce the
   group name with each option. Strip the UA border/padding so they look
   identical to the plain <div> blocks around them. */
.quote-modal__fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.quote-modal__fieldset > .quote-modal__section-heading {
    padding: 0;
}

.quote-modal__field-label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #666666;
}

.quote-modal__checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quote-modal__checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #1a1a1a;
    cursor: pointer;
}

.quote-modal__error {
    display: none;
    margin: 4px 0 0;
    font-size: 13px;
    color: #d32f2f;
}

.quote-modal__error.is-visible {
    display: block;
}

.quote-modal__submit {
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: #ff6442;
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.quote-modal__submit:hover {
    opacity: 0.9;
}

.quote-modal__submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.quote-modal .quote-modal__submit:focus,
.quote-modal .quote-modal__submit:focus-visible {
    background: #ff6442;
    color: #ffffff;
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

.quote-modal__thanks {
    display: none;
    padding: 24px;
    text-align: center;
}

.quote-modal__thanks.is-visible {
    display: block;
}

.quote-modal__thanks-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
}

.quote-modal__thanks-message {
    margin: 0;
    font-size: 16px;
    color: #555555;
}

/* Off-screen rather than display:none — some bots skip hidden inputs, and a
   real user never reaches it (tabindex="-1", aria-hidden on the wrapper). */
.quote-modal__honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

@media (prefers-reduced-motion: reduce) {
    .quote-modal__close,
    .quote-modal__submit {
        transition: none;
    }
}