/** * WooCommerce Out-of-Stock Inquiry — frontend styles. * * Premium-styled modal overlaying any WooCommerce theme. Classes intentionally * scoped under .wc-oos-inquiry-modal so theme overrides can still take effect * outside the popup. * * .wc-oos-inquiry-button — the Inquiry button * .wc-oos-inquiry-modal — the modal wrapper */ /* ------------------------------------------------------------------------- * Scroll lock while the modal is open (applied to via JS). * --------------------------------------------------------------------- */ html.wc-oos-inquiry-modal-open, html.wc-oos-inquiry-modal-open body { overflow: hidden; } /* ------------------------------------------------------------------------- * Inquiry button: inherits the theme's .button styles; only add the basics. * --------------------------------------------------------------------- */ .wc-oos-inquiry-button { cursor: pointer; } .wc-oos-inquiry-button[hidden] { display: none; } /* Safety net: hide Add to Cart button when WC marks it unavailable for a variation. */ .single_add_to_cart_button.wc-variation-is-unavailable, .single_add_to_cart_button.disabled { display: none !important; } .woocommerce-variation-add-to-cart-disabled .quantity { display: none !important; } /* Variable products: hide the action button area until a variation is selected. The .wc-oos-inquiry-active class is added by frontend.js to forms that have our inquiry button. */ .wc-oos-inquiry-active .woocommerce-variation-add-to-cart { display: none; } /* ------------------------------------------------------------------------- * Modal wrapper: fixed full-screen container, hidden by default. * --------------------------------------------------------------------- */ .wc-oos-inquiry-modal { position: fixed; inset: 0; z-index: 100000; /* Above sticky headers and the WP admin bar. */ display: none; opacity: 0; transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1); } .wc-oos-inquiry-modal.is-open { display: flex; align-items: center; justify-content: center; opacity: 1; } /* Dimmed backdrop — clicking it closes the modal. */ .wc-oos-inquiry-modal__overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.55) 0%, rgba(2, 6, 23, 0.82) 100%); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); } /* ------------------------------------------------------------------------- * Dialog box: premium treatment. * --------------------------------------------------------------------- */ .wc-oos-inquiry-modal__dialog { position: relative; box-sizing: border-box; width: calc(100% - 32px); max-width: 550px; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); margin: 16px; padding: 0; overflow: hidden; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 4px 24px rgba(15, 23, 42, 0.15); transform: scale(0.96) translateY(12px); transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; } .wc-oos-inquiry-modal.is-open .wc-oos-inquiry-modal__dialog { transform: scale(1) translateY(0); } /* Premium gradient accent bar at the top of the dialog. */ .wc-oos-inquiry-modal__dialog::before { content: ""; display: block; height: 3px; flex: 0 0 auto; background: #01204e; } /* Scrollable inner content — keeps the accent bar and close button fixed. */ .wc-oos-inquiry-modal__body { padding: 20px 24px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; font-family: "Exo 2", sans-serif; } /* If markup doesn't wrap content in a body div (legacy), fall back to direct padding. */ .wc-oos-inquiry-modal__dialog > .wc-oos-inquiry-modal__close ~ .wc-oos-inquiry-modal__title, .wc-oos-inquiry-modal__dialog > .wc-oos-inquiry-modal__close ~ .wc-oos-inquiry-modal__form { /* Elements are inside the padded scroll area via .wc-oos-inquiry-modal__body. */ } /* ------------------------------------------------------------------------- * Close (X) button. * --------------------------------------------------------------------- */ .wc-oos-inquiry-modal__close { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: rgba(15, 23, 42, 0.05); border-radius: 50%; color: #64748b; font-size: 14px; line-height: 1; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; text-transform: uppercase; } .wc-oos-inquiry-modal__close:hover, .wc-oos-inquiry-modal__close:focus { background: #003366; color: #fff; outline: none; } /* ------------------------------------------------------------------------- * Modal title. * --------------------------------------------------------------------- */ .wc-oos-inquiry-modal__title { margin: 0 40px 16px 0; padding: 0 0 12px; border-bottom: 1px solid #e2e8f0; color: #0f172a; font-family: "Exo 2", sans-serif; font-size: 34px; font-weight: 700; letter-spacing: 0; line-height: 1.3; } /* ------------------------------------------------------------------------- * Gravity Forms — premium overrides. * * Scoped under .wc-oos-inquiry-modal__form so we don't leak into other * GF forms on the same page. * --------------------------------------------------------------------- */ .wc-oos-inquiry-modal__form { font-family: "Exo 2", sans-serif; color: #0f172a; } /* Hide the default GF title/description inside the popup — the popup has its own premium header. */ .wc-oos-inquiry-modal__form .gform_heading, .wc-oos-inquiry-modal__form .gform_title, .wc-oos-inquiry-modal__form .gform_description { display: none !important; } /* Reset GF's default list styling. */ .wc-oos-inquiry-modal__form .gform_fields { margin: 0 !important; padding: 0 !important; gap: 0 !important; list-style: none !important; } .wc-oos-inquiry-modal__form #gform_ajax_spinner_1 { right: -100px; } .wc-oos-inquiry-modal__form .gfield { margin-bottom: 14px !important; padding: 0 !important; background: transparent !important; border: 0 !important; } .wc-oos-inquiry-modal__form .gfield:last-child { margin-bottom: 0; } /* Field labels. */ .wc-oos-inquiry-modal__form label.gfield_label, .wc-oos-inquiry-modal__form .gfield_label { display: block !important; margin-bottom: 6px !important; color: #475569 !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; } .wc-oos-inquiry-modal__form .gfield_required, .wc-oos-inquiry-modal__form .gfield_required_asterisk { color: #ef4444; margin-left: 2px; } /* Inputs: text, email, textarea, select, number. */ .wc-oos-inquiry-modal__form input[type="text"], .wc-oos-inquiry-modal__form input[type="email"], .wc-oos-inquiry-modal__form input[type="tel"], .wc-oos-inquiry-modal__form input[type="url"], .wc-oos-inquiry-modal__form input[type="number"], .wc-oos-inquiry-modal__form input[type="password"], .wc-oos-inquiry-modal__form textarea, .wc-oos-inquiry-modal__form select { width: 100% !important; padding: 10px 12px !important; background: #fff !important; border: 1px solid #d1d5db !important; color: #0f172a !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.4 !important; box-sizing: border-box !important; transition: border-color 0.18s ease, box-shadow 0.18s ease; border-radius: 0 !important; } .wc-oos-inquiry-modal__form textarea { min-height: 100px !important; resize: vertical !important; } .wc-oos-inquiry-modal__form select { appearance: none; -moz-appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; } .wc-oos-inquiry-modal__form input[type="text"]:hover, .wc-oos-inquiry-modal__form input[type="email"]:hover, .wc-oos-inquiry-modal__form input[type="tel"]:hover, .wc-oos-inquiry-modal__form input[type="url"]:hover, .wc-oos-inquiry-modal__form input[type="number"]:hover, .wc-oos-inquiry-modal__form input[type="password"]:hover, .wc-oos-inquiry-modal__form textarea:hover, .wc-oos-inquiry-modal__form select:hover { border-color: #cbd5e1; } .wc-oos-inquiry-modal__form input[type="text"]:focus, .wc-oos-inquiry-modal__form input[type="email"]:focus, .wc-oos-inquiry-modal__form input[type="tel"]:focus, .wc-oos-inquiry-modal__form input[type="url"]:focus, .wc-oos-inquiry-modal__form input[type="number"]:focus, .wc-oos-inquiry-modal__form input[type="password"]:focus, .wc-oos-inquiry-modal__form textarea:focus, .wc-oos-inquiry-modal__form select:focus { border-color: #0088FF; background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.1); } /* Field descriptions / hints. */ .wc-oos-inquiry-modal__form .gfield_description, .wc-oos-inquiry-modal__form .instruction { margin-top: 4px; color: #64748b; font-size: 12px; line-height: 1.4; } /* Field validation messages. */ .wc-oos-inquiry-modal__form .gfield_validation_error { border-color: #ef4444 !important; } .wc-oos-inquiry-modal__form .validation_message { margin-top: 4px; color: #dc2626; font-size: 12px; font-weight: 500; } /* ------------------------------------------------------------------------- * Submit button. * --------------------------------------------------------------------- */ .wc-oos-inquiry-modal__form .gform_footer, .wc-oos-inquiry-modal__form .gform_page_footer { margin-top: 20px; padding: 0; } .wc-oos-inquiry-modal__form .gform_footer input[type="submit"], .wc-oos-inquiry-modal__form .gform_footer button[type="submit"], .wc-oos-inquiry-modal__form .gform_page_footer input[type="submit"], .wc-oos-inquiry-modal__form .gform_page_footer button[type="submit"], .wc-oos-inquiry-modal__form button.gform_button, .wc-oos-inquiry-modal__form input[type="submit"].gform_button { background-color: #01204e !important; color: white !important; height: 50px !important; line-height: 50px !important; padding: 0 25px !important; transition: all 0.5s; font-size: 16px !important; font-weight: 600 !important; text-align: center !important; border: none !important; font-family: "Exo 2", sans-serif !important; width: 100% !important; border-radius: 0 !important; } .wc-oos-inquiry-modal__form .gform_footer input[type="submit"]:hover, .wc-oos-inquiry-modal__form .gform_footer button[type="submit"]:hover, .wc-oos-inquiry-modal__form .gform_page_footer input[type="submit"]:hover, .wc-oos-inquiry-modal__form .gform_page_footer button[type="submit"]:hover, .wc-oos-inquiry-modal__form button.gform_button:hover, .wc-oos-inquiry-modal__form input[type="submit"].gform_button:hover { opacity: 0.8; } .wc-oos-inquiry-modal__form .gform_footer input[type="submit"]:active, .wc-oos-inquiry-modal__form .gform_footer button[type="submit"]:active, .wc-oos-inquiry-modal__form button.gform_button:active, .wc-oos-inquiry-modal__form input[type="submit"].gform_button:active { box-shadow: 0 1px 4px rgba(0, 102, 204, 0.25); } .wc-oos-inquiry-modal__form .gform_footer input[type="submit"]:focus, .wc-oos-inquiry-modal__form .gform_footer button[type="submit"]:focus, .wc-oos-inquiry-modal__form button.gform_button:focus, .wc-oos-inquiry-modal__form input[type="submit"].gform_button:focus { outline: none; box-shadow: 0 2px 8px rgba(0, 102, 204, 0.25), 0 0 0 3px rgba(0, 136, 255, 0.15); } /* GF AJAX spinner — center it inside the footer for a cleaner look. */ .wc-oos-inquiry-modal__form .gform_ajax_spinner { display: inline-block; margin-left: 8px; } /* GF confirmation message styling. */ .wc-oos-inquiry-modal__form .gform_confirmation_wrapper, .wc-oos-inquiry-modal__form .gforms_confirmation_message { padding: 16px 20px; background: #ecfdf5; border: 1px solid #10b981; color: #065f46; font-size: 14px; font-weight: 500; line-height: 1.5; text-align: center; } /* ------------------------------------------------------------------------- * Lazy-loaded form: loading and error states. * * The form container is empty until the visitor opens the popup; these are * the only styles that apply while the Gravity Form is being fetched. * --------------------------------------------------------------------- */ .wc-oos-inquiry-modal__status { margin: 0; padding: 28px 0; color: #64748b; font-family: inherit; font-size: 14px; line-height: 1.5; text-align: center; } .wc-oos-inquiry-modal__status::before { content: ""; display: block; box-sizing: border-box; width: 24px; height: 24px; margin: 0 auto 12px; border: 2px solid rgba(1, 32, 78, 0.15); border-top-color: #01204e; border-radius: 50%; animation: wc-oos-inquiry-spin 0.7s linear infinite; } .wc-oos-inquiry-modal__status--error { color: #dc2626; font-weight: 500; } .wc-oos-inquiry-modal__status--error::before { display: none; } @keyframes wc-oos-inquiry-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .wc-oos-inquiry-modal__status::before { animation-duration: 2s; } } /* ------------------------------------------------------------------------- * Product loop footer (card hover bar). * * The inquiry button replaces the loop's Add to Cart link. Themes like * Martfury compact only `> a` links in the card footer into small circular * buttons, so a `