/* --- Global & Reset --- */ #opal-quote, #opal-quote * { font-family:"Open Sans",sans-serif !important; box-sizing:border-box; } #opal-quote{ color:var(--text); font:14px/1.6 "Open Sans",sans-serif; background:transparent; } #opal-quote .wrap{ max-width:1000px; margin:0 auto; padding:0 16px; } /* --- Print Specific Styles --- */ @media print { header, footer, nav, #wpadminbar, .site-header, .site-footer, .elementor-location-header, .elementor-location-footer, #masthead, #colophon { display:none !important; visibility:hidden !important; } body, html, #opal-quote, #opal-quote .wrap, #opal-quote .card { margin:0 !important; padding:0 !important; width:100% !important; max-width:100% !important; } #oq-btnPrint, #oq-btnAccept, .oq-view-btn, .oq-brochure-btn, .oq-modal, #oq-collapse-toggle { display:none !important; } #oq-collapsible-wrapper { max-height: unset !important; overflow: visible !important; } /* Ensure content prints fully */ } /* --- Theme Chrome Hiding (Screen Only) --- */ body.opal-quote-active header.site-header, body.opal-quote-active .site-header, body.opal-quote-active #masthead, body.opal-quote-active header[role="banner"], body.opal-quote-active .elementor-location-header, body.opal-quote-active .elementor-section-wrap .elementor-location-header, body.opal-quote-active footer.site-footer, body.opal-quote-active .site-footer, body.opal-quote-active #colophon, body.opal-quote-active .elementor-location-footer { display:none !important; } /* --- Toolbar --- */ #opal-quote .toolbar{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin:10px 0; } #opal-quote .toolbar .logo{ height:40px; width:auto; } #opal-quote .toolbar button{ border:1px solid var(--rule-strong); background:#fff; padding:8px 14px; border-radius:8px; cursor:pointer; font-weight:600; color:var(--accent); display:flex; align-items:center; gap:6px; transition: all 0.2s ease; } #opal-quote .toolbar button:hover{ background:#f3f6fb; } /* --- Card Layout --- */ #opal-quote .card{ background:var(--card); border:1px solid var(--rule); border-radius:12px; box-shadow:0 10px 30px rgba(9,30,66,.06); overflow:hidden; } #opal-quote header.doc-head{ padding:18px 20px; border-bottom:1px solid var(--rule); background:#fff; } #opal-quote .doc-top{ display:flex; justify-content:flex-end; padding:14px 20px 0; } /* Meta info pill (Prepared on, Quote ID) */ #opal-quote .meta-pill{ font-size:12px; color:#374151; background:#f9fafb; border:1px solid var(--rule); padding:8px 12px; border-radius:10px; display:inline-flex; gap:16px; align-items: top; /* Vertically align items within the flex container */ } #opal-quote .meta-pill b{ font-weight:700; } /* --- Main Content Area --- */ #opal-quote .inner{ padding:0 20px 20px; } #opal-quote h1.title{ font-size:20px; margin:10px 0 4px; font-weight:700; } #opal-quote p{ margin:10px 0; } #opal-quote .subtitle{ font-size:12px; font-weight:600; color:var(--muted); margin-bottom:14px; } /* --- RSP Image Styling (Floated in signature block) --- */ img.rsp-signature-image { float: left; /* Float to the left */ width: 65px; /* Specific width from screenshot */ max-width: 100%; /* Ensure responsiveness */ height: 75px; /* Maintains aspect ratio */ object-fit: cover; /* Fills the space, may crop */ border-radius: 512px; /* Rounded corners */ box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* Subtle shadow */ margin-right: 15px; /* Space between image and text */ margin-bottom: 8px; /* Small space below the image */ } /* Info grid (Prepared for & Quote Details blocks) */ #opal-quote .meta-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin:18px 0 8px; } #opal-quote .meta-block{ border:1px solid var(--rule); border-radius:10px; padding:12px; } #opal-quote .meta-block .heading{ font-weight:700; margin-bottom:6px; } @media (min-width:720px){ #opal-quote .meta-grid{ grid-template-columns:1fr 1fr; } } /* --- Tables --- */ #opal-quote .table-wrap{ overflow-x:auto; } #opal-quote table{ border-collapse:collapse; width:100%; } #opal-quote table.lineitems{ margin:12px 0 20px; } #opal-quote table.lineitems th, #opal-quote table.lineitems td{ border:1px solid var(--rule-strong); padding:8px 10px; vertical-align:top; text-align: left; } #opal-quote table.lineitems th{ background:#f5f7fb; font-weight:700; font-size:13px; } #opal-quote table.lineitems tbody tr:nth-child(odd){ background:#fbfcff; } #opal-quote .num{ text-align:right; } /* Numeric columns align right */ /* Table column spacing and content within cells */ #opal-quote table.lineitems td {white-space: normal;} /* Allow description text to wrap */ #opal-quote table.lineitems td.col-desc {line-height: normal; } /* Adjust line height for multiline desc if needed */ /* Ensured buttons stay inline with text using a wrapper */ #opal-quote table.lineitems td span.buttons-wrapper {display: inline-flex; flex-wrap: nowrap; gap: 8px; margin-left: 8px; vertical-align: middle;} /* Ensures buttons stay on one line or wrap together */ #opal-quote table.lineitems td span.buttons-wrapper .oq-view-btn, #opal-quote table.lineitems td span.buttons-wrapper .oq-brochure-btn {flex-shrink: 0;} /* Prevent buttons from shrinking */ #opal-quote .section-title{ font-size:16px; font-weight:700; margin:18px 0 8px; } /* Hidden ID column, universal for all lineitems tables. */ /* This hides the internal ID for standard items and the empty placeholder for trade-in items. */ #opal-quote table.lineitems th:first-child, #opal-quote table.lineitems td:first-child { display:none; } /* Column widths for tables with discounts (5 visible columns) */ #opal-quote table.lineitems.with-discount .col-partno{ width:18%; } #opal-quote table.lineitems.with-discount .col-desc{ width:45%; } #opal-quote table.lineitems.with-discount .col-price-before{ width:12%; } #opal-quote table.lineitems.with-discount .col-disc{ width:10%; } #opal-quote table.lineitems.with-discount .col-price{ width:15%; } /* Column widths for tables without discounts (3 visible columns) */ #opal-quote table.lineitems.no-discount .col-partno{ width:22%; } #opal-quote table.lineitems.no-discount .col-desc{ width:60%; } #opal-quote table.lineitems.no-discount .col-price{ width:18%; } /* Explicitly hide the columns when no-discount class is present */ #opal-quote table.lineitems.no-discount .col-price-before, #opal-quote table.lineitems.no-discount .col-disc { display: none; } /* Specific column widths for the Trade-in table (4 visible columns) */ /* These classes apply to the *visible* headers/cells after the first hidden placeholder */ #opal-quote table.lineitems.trade-in th.col-make, #opal-quote table.lineitems.trade-in td.col-make { width: 25%; } #opal-quote table.lineitems.trade-in th.col-model, #opal-quote table.lineitems.trade-in td.col-model { width: 30%; } #opal-quote table.lineitems.trade-in th.col-year, #opal-quote table.lineitems.trade-in td.col-year { width: 15%; } #opal-quote table.lineitems.trade-in th.col-price, #opal-quote table.lineitems.trade-in td.col-price { width: 30%; text-align: right;} /* Hide specific columns that are not needed for the trade-in table */ #opal-quote table.lineitems.trade-in .col-partno, #opal-quote table.lineitems.trade-in .col-desc, #opal-quote table.lineitems.trade-in .col-price-before, #opal-quote table.lineitems.trade-in .col-disc { display: none; } /* "View" and "Brochure" buttons for item details and download */ .oq-view-btn, .oq-brochure-btn { /* Combined styling for similar buttons */ display:inline-block; /* ensures they sit next to text */ font-size:12px; line-height:1; padding:4px 8px; border:1px solid var(--rule-strong); border-radius:8px; background:#fff; text-decoration:none; cursor:pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; color:var(--accent); /* Both View and Brochure buttons share the same color */ } .oq-view-btn:hover, .oq-brochure-btn:hover{ background:#f3f6fb; } /* Upgrade checkbox styling */ .upgrade-checkbox-label { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--accent); margin-left: 12px; vertical-align: middle; } .upgrade-checkbox { margin: 0; transform: scale(1.2); } /* Totals table styling */ #opal-quote table.totals{ margin-top:10px; } #opal-quote table.totals td{ padding:8px 10px; } #opal-quote table.totals .label{ text-align:right; padding-right:20px; width:calc(100% - 220px); } #opal-quote table.totals .value{ text-align:right; width:220px; } #opal-quote table.totals tr.grand td{ font-weight:800; border-top:2px solid var(--rule-strong); font-size:15px; } /* Quote Terms and Conditions */ #opal-quote .quote-terms, #opal-quote .quote-notes { /* Combined styling for similar blocks */ font-size: 13px; color: var(--muted); margin: 20px 0; padding: 15px; border: 1px solid var(--rule); border-radius: 10px; background-color: #f9fafb; } #opal-quote .quote-terms p, #opal-quote .quote-notes p { margin: 5px 0; } #opal-quote .quote-terms h4, #opal-quote .quote-notes h4 { margin-top: 0; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--text); } /* --- Call to Action (Accept Button) --- */ #opal-quote .oq-cta{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; margin:8px 0 14px; } #opal-quote .foot-legal{ font-size:12px; color:#374151; text-align:right; max-width:520px; line-height:1.45; } #oq-btnAccept{ padding:10px 16px; border-radius:10px; border:none; background:#10b981; color:#fff; font-weight:700; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,0.1); transition: all 0.2s ease; } #oq-btnAccept:hover{ box-shadow:0 6px 15px rgba(0,0,0,0.15); transform: translateY(-1px); } #oq-btnAccept[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none; transform: none; background-color:#d1d5db; color:#9ca3af; } /* Styling for the new Apply Here button */ .oq-apply-button { display: inline-block; /* Make it behave like a block for padding/sizing, but allow text flow */ padding:10px 16px; border-radius:10px; border:none; background:#dc2626; /* Changed to red */ color:#fff !important; /* Force white text, overriding default link color */ font-weight:700; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,0.1); transition: all 0.2s ease; text-decoration: none; /* Remove underline for links */ text-align: center; /* Center text if button becomes wider */ line-height: 1; /* Adjust line height for better vertical centering of text */ } .oq-apply-button:hover{ box-shadow:0 6px 15px rgba(0,0,0,0.15); transform: translateY(-1px); } /* --- Collapsible Quote Details Section --- */ #oq-collapse-toggle { display: block; width: 100%; text-align: center; padding: 10px 15px; margin-top: 15px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--bg); color: var(--accent); font-weight: 600; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: background 0.2s ease; } #oq-collapse-toggle:hover { background: #f3f6fb; } #oq-collapsible-wrapper { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; } #oq-collapsible-wrapper.expanded { max-height: 2000px; overflow: visible; } #oq-collapsible-wrapper.expanded + #oq-collapse-toggle .oq-toggle-icon { transform: rotate(180deg); } .oq-toggle-icon { display: inline-block; margin-left: 8px; transition: transform 0.2s ease; } /* --- Footer --- */ #opal-quote footer.doc-foot{ border-top:1px solid var(--rule); padding:12px 20px 16px; font-size:12px; color:#374151; background:#fff; } #opal-quote footer.doc-foot a{ color:var(--accent); text-decoration:none; } .foot-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px; } .foot-left{ font-weight:700; font-size:16px; } /* --- Debug Message --- */ #oq-debug{ color:#b91c1c; background:#fee2e2; border:1px solid #fecaca; padding:8px 10px; border-radius:8px; margin:12px 20px; display:none; } /* --- Item Details Modal --- */ .oq-modal{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:99999; } .oq-modal__dialog{ background:#fff; border-radius:12px; max-width:840px; width:min(92vw,840px); box-shadow:0 30px 60px rgba(0,0,0,.25); } .oq-modal__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--rule); } .oq-modal__title{ font-size:16px; font-weight:700; margin:0; } /* Modal Close button styling (matched to view button) */ .oq-modal__close{ border:1px solid var(--rule-strong); background:#fff; border-radius:8px; padding:4px 8px; cursor:pointer; font-size:12px; line-height:1; color:var(--accent); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .oq-modal__close:hover{ background:#f3f6fb; } .oq-modal__body{ padding:16px; } #opal-quote .oq-modal__img{ width:100%; height:auto; border:1px solid var(--rule); border-radius:10px; display:block; max-height:70vh; object-fit:contain; background:#f7f7f7; } #opal-quote .oq-modal__meta{ margin-top:12px; font-size:13px; color:#374151; } /* Smaller modal overrides */ #opal-quote .oq-modal__dialog{ max-width:640px; width:min(92vw,640px); } #opal-quote .oq-modal__head{ padding:10px 14px; } #opal-quote .oq-modal__title{ font-size:15px; line-height:1.3; } #opal-quote .oq-modal__body{ padding:10px 12px; } #opal-quote .oq-modal__img{ max-height:35vh; border-radius:8px; } #opal-quote .oq-modal__meta{ font-size:12.5px; } /* --- Signature Section --- */ #opal-quote .signature-section { display: block; /* Visible on all devices */ padding: 20px; margin: 20px auto; border-top: 1px solid var(--rule); max-width: 500px; /* Limit the width */ } #opal-quote .signature-label { font-weight: 600; font-size: 13px; margin-bottom: 8px; color: var(--text); } #opal-quote .signature-canvas-wrapper { border: 1px solid var(--rule-strong); border-radius: 6px; background: #fafbfc; margin-bottom: 8px; overflow: hidden; touch-action: none; max-width: 400px; /* Smaller canvas */ } #opal-quote #oq-signature-canvas { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; } #opal-quote .signature-clear-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--rule-strong); background: #fff; color: var(--accent); font-weight: 600; font-size: 12px; cursor: pointer; transition: all 0.2s ease; } #opal-quote .signature-clear-btn:hover { background: #f3f6fb; } /* Show signature section on all devices */ #opal-quote .signature-section { display: block !important; } /* Hide accept button initially - will be shown via JS when signed */ #opal-quote #oq-btnAccept { display: none; } #opal-quote #oq-btnAccept.signature-completed { display: inline-block; } /* --- Mobile Responsive Adjustments --- */ @media (max-width: 768px){ #opal-quote .oq-modal__dialog{ max-width: 92vw; } #opal-quote .oq-modal__img{ max-height: 50vh; } #opal-quote .oq-modal__title{ font-size: 14px; } /* Fix overflow clipping on mobile */ #opal-quote .card { overflow: visible; } /* Add extra bottom padding to prevent cropping and footer overlap */ #opal-quote .inner { padding-bottom: 20px !important; } /* Fix iPhone button layout - center align and full width */ #opal-quote .oq-cta { align-items: stretch !important; padding: 0 12px; margin-bottom: 10px !important; } #opal-quote .foot-legal { text-align: center; max-width: 100%; font-size: 11px; } #oq-btnAccept { width: 100%; padding: 14px 16px; font-size: 16px; } /* Adjust signature section for mobile */ #opal-quote .signature-section { padding: 15px 12px; margin: 15px 0; } #opal-quote .signature-canvas-wrapper { max-width: 100%; } /* Ensure footer has breathing room and clear spacing from content above */ #opal-quote footer.doc-foot { margin-top: 20px; padding-top: 20px !important; padding-bottom: 24px !important; clear: both; } }