/* CW Request a Quote — frontend styles */ /* Hide the native WooCommerce add-to-cart button when replacement is active. */ .cw-raq-active form.cart .single_add_to_cart_button { display: none !important; } .cw-raq-add--done { opacity: 0.85; } /* Quote count link (header/menu) */ .cw-raq-count { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .cw-raq-count__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: currentColor; color: #fff; font-size: 12px; line-height: 1; } .cw-raq-count__badge { background: #1d4ed8; color: #fff; } /* Quote request wrapper */ .cw-raq-wrap { margin: 0 0 2rem; } .cw-raq-empty { font-size: 1.05rem; } /* List table */ .cw-raq-table { width: 100%; border-collapse: collapse; margin-bottom: 1.75rem; } .cw-raq-table th, .cw-raq-table td { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: middle; } .cw-raq-table thead th { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; } .cw-raq-table__img { width: 64px; } .cw-raq-table__img img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; display: block; } .cw-raq-table__qty { width: 90px; } .cw-raq-qty { width: 70px; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; } .cw-raq-remove { background: none; border: none; cursor: pointer; font-size: 1.4rem; line-height: 1; color: #9ca3af; padding: 0 4px; } .cw-raq-remove:hover { color: #dc2626; } /* Form */ .cw-raq-form__heading { margin: 1.5rem 0 0.75rem; } .cw-raq-fields { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; margin-bottom: 0.5rem; } .cw-raq-field { margin: 0; display: flex; flex-direction: column; flex: 1 1 100%; min-width: 0; } /* Column widths. gap is 1.25rem, so subtract a proportional slice per column. */ .cw-raq-col--full { flex-basis: 100%; } .cw-raq-col--two-thirds { flex-basis: calc( 66.666% - 0.42rem ); } .cw-raq-col--half { flex-basis: calc( 50% - 0.625rem ); } .cw-raq-col--third { flex-basis: calc( 33.333% - 0.834rem ); } .cw-raq-field--full { flex-basis: 100%; } .cw-raq-field label { font-weight: 600; margin-bottom: 0.35rem; font-size: 0.95rem; } .cw-raq-field input, .cw-raq-field textarea { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font: inherit; } .cw-raq-field input:focus, .cw-raq-field textarea:focus { outline: none; border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba( 29, 78, 216, 0.12 ); } .cw-raq-req { color: #dc2626; } .cw-raq-submit { margin-top: 1.5rem; } /* Messages */ .cw-raq-message { margin-top: 1rem; } .cw-raq-message--success { padding: 1rem 1.25rem; border-radius: 8px; background: #e6f7ec; color: #15803d; font-weight: 600; } .cw-raq-message--error { padding: 0.75rem 1rem; border-radius: 8px; background: #fdecea; color: #b91c1c; } .cw-raq-checkbox { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; } .cw-raq-checkbox input { width: auto; } /* ---- Quote modal (cart-style) ---- */ /* * NOTE: We intentionally do NOT set `overflow:hidden` on while the modal * is open. Optimisation plugins (e.g. FlyingPress "lazy render") wrap below-the- * fold sections in `content-visibility:auto`; changing the body scroll root can * make those sections collapse to their blank placeholders, i.e. the page looks * like it "disappears". A tiny bit of background scroll is a fair trade-off. */ .cw-raq-modal[hidden] { display: none; } .cw-raq-modal { position: fixed; inset: 0; z-index: 100000; display: flex; justify-content: flex-end; } .cw-raq-modal__overlay { position: absolute; inset: 0; background: var( --cw-modal-overlay, rgba( 15, 23, 42, 0.3 ) ); animation: cw-raq-fade-in 0.22s ease; } @keyframes cw-raq-fade-in { from { opacity: 0; } to { opacity: 1; } } .cw-raq-modal__dialog { position: relative; width: 420px; max-width: 100%; height: 100%; background: #fff; box-shadow: -8px 0 30px rgba( 0, 0, 0, 0.15 ); display: flex; flex-direction: column; animation: cw-raq-slide-in 0.22s ease; } @keyframes cw-raq-slide-in { from { transform: translateX( 100% ); } to { transform: translateX( 0 ); } } .cw-raq-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #e5e7eb; } .cw-raq-modal__title { margin: 0; font-size: 1.15rem; } .cw-raq-modal__close { background: none; border: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: #6b7280; padding: 0; } .cw-raq-modal__close:hover { color: #111827; } .cw-raq-modal__body { flex: 1; overflow-y: auto; padding: 12px 22px; } .cw-raq-modal__empty { padding: 2rem 0; color: #6b7280; text-align: center; } .cw-raq-modal__list { list-style: none; margin: 0; padding: 0; } .cw-raq-modal__item { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid #eef0f2; } .cw-raq-modal__thumb img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; display: block; } .cw-raq-modal__meta { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cw-raq-modal__name { font-weight: 600; text-decoration: none; color: #111827; } .cw-raq-modal__qty { font-size: 0.85rem; color: #6b7280; } .cw-raq-modal__price { font-weight: 700; white-space: nowrap; } .cw-raq-modal__remove { background: none; border: none; cursor: pointer; font-size: 1.3rem; line-height: 1; color: #9ca3af; padding: 0 2px; } .cw-raq-modal__remove:hover { color: #dc2626; } .cw-raq-modal__total { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 8px; font-size: 1.05rem; } .cw-raq-modal__actions { display: flex; flex-direction: column; gap: 10px; padding: 16px 0 8px; } .cw-raq-modal__actions .button { width: 100%; text-align: center; } .cw-raq-modal-open { cursor: pointer; } @media ( max-width: 640px ) { .cw-raq-col--full, .cw-raq-col--two-thirds, .cw-raq-col--half, .cw-raq-col--third { flex-basis: 100%; } .cw-raq-modal__dialog { width: 100%; } .cw-raq-table thead { display: none; } .cw-raq-table, .cw-raq-table tbody, .cw-raq-table tr, .cw-raq-table td { display: block; width: 100%; } .cw-raq-table tr { border-bottom: 1px solid #e5e7eb; padding: 8px 0; } .cw-raq-table td { border: none; padding: 4px 0; } } /* ===================================================================== * Theme-agnostic button styling. * The plugin's buttons often carry the theme "button" class or are plain *