/** * Metanoia public quote form — light branded theme. * Scoped under #metanoia-quote-root so it never disturbs the host theme. */ #metanoia-quote-root { --q-or: #E8721C; --q-or2: #FF6B00; --q-or3: #ff8124; --q-or-soft: #fff3e9; --q-or-tint: #fef8f2; --q-nv: #2a2320; --q-bg: #fbf7f2; --q-card:#ffffff; --q-line:#f0e7db; --q-line2:#e7dccb; --q-txt: #2a2320; --q-mut: #9b8a76; --q-gn: #1FB574; --q-rd: #E24B4A; background: transparent; color: var(--q-txt); font-family: -apple-system, "Segoe UI", Roboto, sans-serif; padding: 0; max-width: 960px; margin: 32px auto; animation: qFadeUp .5s cubic-bezier(.22,1,.36,1); } @media (max-width: 1010px) { #metanoia-quote-root { margin: 20px 16px; } } @keyframes qFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } #metanoia-quote-root * { box-sizing: border-box; } /* The whole form sits in one soft card with generous breathing room. */ #metanoia-quote-root { background: var(--q-card); border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(42,35,32,.04), 0 12px 40px rgba(232,114,28,.08); border: 1px solid var(--q-line); } .metanoia-quote-loading { padding: 60px; text-align: center; color: var(--q-mut); font-family: "JetBrains Mono", monospace; } .q-header { padding: 26px 32px 22px; background: radial-gradient(120% 140% at 100% 0%, var(--q-or-soft) 0%, transparent 55%), linear-gradient(180deg, #ffffff 0%, var(--q-or-tint) 100%); border-bottom: 1px solid var(--q-line); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; position: relative; } .q-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--q-or), var(--q-or3), transparent); } .q-header-left { display: flex; align-items: center; gap: 16px; } .q-brand { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } #metanoia-quote-root .q-logo { height: 32px !important; width: auto !important; max-width: 180px !important; max-height: 32px !important; display: block; object-fit: contain; animation: qLogoIn .6s cubic-bezier(.22,1,.36,1); } @keyframes qLogoIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } .q-header h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--q-nv); } .q-header .dot { color: var(--q-or); } .q-header-sub { font-size: 11px; color: var(--q-mut); font-weight: 600; letter-spacing: .3px; text-transform: uppercase; } .q-body { padding: 30px 32px 34px; animation: qBodyIn .35s ease; } @keyframes qBodyIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .q-section-title { font-size: 12px; font-weight: 700; color: var(--q-or); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 12px; } /* dropzone */ .q-dropzone { border: 2.5px dashed var(--q-line2); border-radius: 16px; padding: 44px 24px; text-align: center; cursor: pointer; background: linear-gradient(160deg, #fffefb, var(--q-or-tint)); transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; } .q-dropzone:hover, .q-dropzone.drag { border-color: var(--q-or); background: var(--q-or-soft); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(232,114,28,.1); } .q-dropzone.drag .q-dz-icon { animation: qBounce .6s ease infinite; } @keyframes qBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .q-dz-icon { font-size: 38px; } .q-dz-title { font-size: 16px; font-weight: 700; margin-top: 10px; color: var(--q-nv); } .q-dz-sub { font-size: 12.5px; color: var(--q-mut); margin-top: 5px; } .q-dz-btn { margin-top: 14px; background: linear-gradient(135deg, var(--q-or), var(--q-or3)); color: #fff; padding: 9px 24px; border-radius: 22px; display: inline-block; font-size: 12.5px; font-weight: 700; } .q-error { background: rgba(226,75,74,.1); border: 1.5px solid rgba(226,75,74,.35); color: var(--q-rd); border-radius: 11px; padding: 11px 15px; font-size: 12.5px; margin-bottom: 12px; } .q-warning { background: rgba(240,160,40,.12); border: 1.5px solid rgba(240,160,40,.4); color: #92620a; border-radius: 11px; padding: 10px 14px; font-size: 12px; margin: 8px 0; line-height: 1.5; } /* fields */ .q-field { margin-bottom: 14px; } .q-field label { display: block; font-size: 11px; color: var(--q-mut); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; } .q-field input, .q-field select, .q-field textarea { width: 100%; background: #fff; border: 1.5px solid var(--q-line); color: var(--q-txt); padding: 10px 12px; border-radius: 9px; font-size: 14px; } .q-field input:focus, .q-field select:focus, .q-field textarea:focus { outline: none; border-color: var(--q-or); } .q-row { display: flex; gap: 14px; flex-wrap: wrap; } .q-row > * { flex: 1; min-width: 160px; } .q-btn { background: linear-gradient(135deg, var(--q-or), var(--q-or3)); color: #fff; border: none; padding: 14px 24px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; width: 100%; transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, opacity .15s; box-shadow: 0 4px 14px rgba(232,114,28,.28); } .q-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,114,28,.38); } .q-btn:active { transform: translateY(0); } .q-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } .q-btn.secondary { background: #fff; color: var(--q-txt); border: 1.5px solid var(--q-line2); box-shadow: none; } .q-btn.secondary:hover { border-color: var(--q-or); background: var(--q-or-tint); } .q-tabs { display: flex; gap: 8px; margin-bottom: 18px; } .q-tab { flex: 1; text-align: center; padding: 10px; border-radius: 9px; border: 1.5px solid var(--q-line); background: #fff; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--q-mut); } .q-tab.active { background: var(--q-or); border-color: var(--q-or); color: #fff; } .q-summary { background: #fff; border: 1px solid var(--q-line); border-radius: 12px; padding: 16px 18px; margin-top: 18px; } .q-summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; gap: 12px; } .q-summary-breakdown { font-size: 11.5px; color: var(--q-mut, #8a8a8a); margin-top: 2px; } .q-summary-total { border-top: 1px dashed var(--q-line); margin-top: 8px; padding-top: 12px; font-weight: 800; } .q-summary-total b { color: var(--q-or); font-family: "JetBrains Mono", monospace; } .q-success { text-align: center; padding: 40px 28px; } .q-success-icon { font-size: 50px; } .q-success h3 { font-size: 22px; margin: 14px 0 6px; color: var(--q-nv); } .q-success-code { font-family: "JetBrains Mono", monospace; color: var(--q-or); font-size: 14px; margin-bottom: 14px; } .q-processing { text-align: center; padding: 30px; } .q-spin { font-size: 34px; animation: qspin 1.2s linear infinite; display: inline-block; } @keyframes qspin { to { transform: rotate(360deg); } } .q-file-chip { display: inline-flex; align-items: center; gap: 8px; background: #fef3e8; border: 1px solid var(--q-line); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; margin-top: 10px; } .q-preview-box { border-radius: 12px; overflow: hidden; background: #0f1f3d; min-height: 200px; display: flex; align-items: center; justify-content: center; margin-top: 12px; } .q-preview-box svg { max-width: 100%; max-height: 320px; } /* ════════════════════════════════════════════════════════════ FULL PCB CONFIG PANEL — ported verbatim from the prototype. Variable aliases so the prototype's var names resolve here. ════════════════════════════════════════════════════════════ */ #metanoia-quote-root { --or: #E8721C; --or2: #FF6B00; --or3: #ff8124; --nv: #2a2320; --nv1: #3a2f1e; --nv3: #4a3a1e; --gn: #1FB574; --rd: #E24B4A; --am: #F0A028; --tx: #fff3e9; --mt: #b89a72; --mono: "JetBrains Mono", ui-monospace, monospace; --head: -apple-system, "Segoe UI", Roboto, sans-serif; --body: -apple-system, "Segoe UI", Roboto, sans-serif; --display: -apple-system, "Segoe UI", Roboto, sans-serif; } #metanoia-quote-root input[type=text], #metanoia-quote-root input[type=number], #metanoia-quote-root input[type=email], #metanoia-quote-root input[type=password], #metanoia-quote-root input[type=tel], #metanoia-quote-root textarea, #metanoia-quote-root select { padding:9px 11px; border:1.5px solid #ddd0b4; border-radius:9px; font-size:13.5px; font-family:var(--mono); background:#fff; outline:none; width:100%; transition:border-color .2s, box-shadow .2s; box-sizing:border-box; } #metanoia-quote-root select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239a8466'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:30px; } #metanoia-quote-root textarea { font-family:var(--body); resize:vertical; min-height:60px; } #metanoia-quote-root input:focus, #metanoia-quote-root textarea:focus, #metanoia-quote-root select:focus { border-color:var(--or); box-shadow:0 0 0 3px rgba(232,114,28,.12); } #metanoia-quote-root input.err { border-color:var(--rd) !important; box-shadow:0 0 0 3px rgba(226,75,74,.1) !important; } #metanoia-quote-root .config-stack { display:flex; flex-direction:column; gap:18px; } /* Board preview — full width on top */ #metanoia-quote-root .viewer-col { width:100%; } #metanoia-quote-root .fields-col { display:flex; flex-direction:column; gap:16px; } #metanoia-quote-root .viewer-label { font-size:11px; font-weight:700; color:#8a7a5e; margin-bottom:10px; letter-spacing:.4px; display:flex; justify-content:space-between; align-items:center; } #metanoia-quote-root .viewer-box { position:relative; border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(15,31,61,.14); background:#0f1f3d; } #metanoia-quote-root .viewer-box svg { display:block; width:100%; } #metanoia-quote-root .viewer-box.single { max-width:560px; margin:0 auto; } #metanoia-quote-root .viewer-box.zoomable { cursor:zoom-in; transition:box-shadow .25s, transform .25s; } #metanoia-quote-root .viewer-box.zoomable:hover { box-shadow:0 16px 44px rgba(15,31,61,.24); } #metanoia-quote-root .zoom-hint { position:absolute; bottom:10px; right:10px; background:rgba(15,31,61,.82); color:#fff; font-size:10.5px; font-weight:600; padding:5px 11px; border-radius:20px; letter-spacing:.3px; opacity:0; transform:translateY(4px); transition:opacity .22s, transform .22s; pointer-events:none; } #metanoia-quote-root .viewer-box.zoomable:hover .zoom-hint { opacity:1; transform:translateY(0); } #metanoia-quote-root .viewer-flag.warn { color:var(--q-or2); font-weight:700; background:#fff1e2; padding:3px 10px; border-radius:20px; font-size:10.5px; } #metanoia-quote-root .viewer-box.noprev { background:#faf6ee; border:1.5px dashed #d8c7a4; min-height:200px; box-shadow:none; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px 24px; gap:12px; } #metanoia-quote-root .noprev-ico { color:#bba87f; } #metanoia-quote-root .noprev-text { font-size:13px; color:#7a6a4e; line-height:1.7; max-width:340px; } #metanoia-quote-root .viewer-fname { font-size:11.5px; color:#8a7a5e; margin-top:10px; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; } #metanoia-quote-root .fname-text { font-weight:600; } #metanoia-quote-root .live-badge { color:var(--q-gn); font-weight:700; display:flex; align-items:center; gap:6px; } #metanoia-quote-root .live-dot { width:7px; height:7px; border-radius:50%; background:var(--q-gn); box-shadow:0 0 0 0 rgba(34,196,122,.5); animation:livePulse 1.6s ease-out infinite; } @keyframes livePulse { 0%{box-shadow:0 0 0 0 rgba(34,196,122,.5);} 70%{box-shadow:0 0 0 7px rgba(34,196,122,0);} 100%{box-shadow:0 0 0 0 rgba(34,196,122,0);} } /* Spec blocks — staggered fade-in */ #metanoia-quote-root .spec-block { animation:specIn .45s ease both; } #metanoia-quote-root .spec-block:nth-child(2){animation-delay:.04s} #metanoia-quote-root .spec-block:nth-child(3){animation-delay:.08s} #metanoia-quote-root .spec-block:nth-child(4){animation-delay:.12s} #metanoia-quote-root .spec-block:nth-child(5){animation-delay:.16s} #metanoia-quote-root .spec-block:nth-child(6){animation-delay:.20s} #metanoia-quote-root .spec-block:nth-child(7){animation-delay:.24s} #metanoia-quote-root .spec-block:nth-child(8){animation-delay:.28s} #metanoia-quote-root .spec-block:nth-child(9){animation-delay:.32s} @keyframes specIn { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} } #metanoia-quote-root .spec-split { display:flex; gap:16px; flex-wrap:wrap; } #metanoia-quote-root .spec-half { flex:1 1 220px; } #metanoia-quote-root .section-title { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700; color:var(--q-nv); letter-spacing:.2px; margin-bottom:12px; } #metanoia-quote-root .sec-num { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; flex-shrink:0; background:var(--q-nv); color:#fff; border-radius:7px; font-size:11px; font-weight:700; } #metanoia-quote-root .field-note { font-weight:500; font-size:11px; margin-left:2px; color:#9a8466; } #metanoia-quote-root .field-note.ok { color:var(--q-gn); } #metanoia-quote-root .field-note.warn { color:var(--q-or2); } #metanoia-quote-root .field-note.locked { color:var(--q-rd); } /* Errors & warnings — clear, iconic, accessible */ #metanoia-quote-root .err-msg { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:#b3261e; margin-top:9px; background:#fdecea; border:1px solid #f5c2bd; border-radius:9px; padding:9px 12px; line-height:1.5; animation:errIn .3s ease both; } #metanoia-quote-root .err-msg::before { content:'!'; flex-shrink:0; width:16px; height:16px; border-radius:50%; background:#d3382f; color:#fff; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; } @keyframes errIn { from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);} } #metanoia-quote-root input.err { border-color:var(--q-rd) !important; box-shadow:0 0 0 3px rgba(226,75,74,.12) !important; } #metanoia-quote-root .dim-row { display:flex; gap:8px; align-items:center; } #metanoia-quote-root .dim-row input { flex:1; } #metanoia-quote-root .dim-sep { color:#9a8466; font-weight:700; flex-shrink:0; } #metanoia-quote-root .dim-unit { font-size:12px; color:#9a8466; flex-shrink:0; } #metanoia-quote-root .dim-range { font-size:11px; color:#b5a484; margin-top:6px; } #metanoia-quote-root .dim-hint { font-size:11.5px; color:var(--q-or3); margin-top:6px; font-weight:600; } #metanoia-quote-root .type-toggle { display:flex; gap:8px; } #metanoia-quote-root .type-opt { flex:1; border:1.5px solid #e0d4ba; border-radius:11px; padding:12px 8px; text-align:center; cursor:pointer; transition:border-color .2s, background .2s, transform .12s, box-shadow .2s; position:relative; } #metanoia-quote-root .type-opt:hover { border-color:#caa86e; transform:translateY(-1px); } #metanoia-quote-root .type-opt.sel { border-color:var(--q-or); background:#fff5ec; box-shadow:0 0 0 3px rgba(232,114,28,.12); } #metanoia-quote-root .type-opt-icon { font-size:18px; margin-bottom:4px; color:var(--q-nv); letter-spacing:2px; } #metanoia-quote-root .type-opt-label { font-size:12.5px; font-weight:700; color:var(--q-nv); } #metanoia-quote-root .lead-toggle { display:flex; gap:10px; flex-wrap:wrap; } #metanoia-quote-root .lead-opt { flex:1; min-width:180px; border:1.5px solid #e0d4ba; border-radius:12px; padding:14px 16px; cursor:pointer; transition:border-color .2s, background .2s, transform .12s, box-shadow .2s; background:#fff; } #metanoia-quote-root .lead-opt:hover { border-color:#caa86e; transform:translateY(-1px); } #metanoia-quote-root .lead-opt.sel { border-color:var(--q-or); background:#fff5ec; box-shadow:0 0 0 3px rgba(232,114,28,.12); } #metanoia-quote-root .lead-opt-top { display:flex; align-items:center; gap:9px; margin-bottom:5px; } #metanoia-quote-root .lead-opt-label { font-weight:700; font-size:15px; color:var(--q-nv); display:flex; align-items:center; gap:8px; } #metanoia-quote-root .lead-opt-sub { font-size:12px; color:#9a8466; line-height:1.5; } #metanoia-quote-root .lead-fast-tag { background:var(--q-rd); color:#fff; font-size:9px; padding:2px 7px; border-radius:5px; font-weight:700; letter-spacing:.5px; } #metanoia-quote-root .lead-fee-tag { margin-left:auto; background:#fde0c0; color:var(--q-or3); font-size:11px; padding:3px 9px; border-radius:6px; font-weight:700; } #metanoia-quote-root .fast-info { display:flex; gap:9px; align-items:flex-start; background:#fdeceb; border:1px solid #f3c9c5; border-radius:10px; padding:11px 14px; margin-top:11px; } #metanoia-quote-root .fast-info::before { content:'!'; flex-shrink:0; width:16px; height:16px; border-radius:50%; background:var(--q-rd); color:#fff; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; } #metanoia-quote-root .fast-info-text { font-size:12px; color:#a83a30; line-height:1.65; } #metanoia-quote-root .fast-info-text b { color:var(--q-rd); } #metanoia-quote-root .color-grid { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:9px; } #metanoia-quote-root .color-swatch { width:40px; height:40px; border-radius:10px; cursor:pointer; position:relative; border:3px solid transparent; transition:transform .18s, border-color .2s, box-shadow .2s; box-shadow: inset 0 2px 4px rgba(255,255,255,.3), inset 0 -3px 6px rgba(0,0,0,.2), 0 3px 8px rgba(0,0,0,.18); } #metanoia-quote-root .color-swatch::after { content:''; position:absolute; top:3px; left:5px; width:60%; height:30%; background:linear-gradient(160deg,rgba(255,255,255,.55),transparent); border-radius:8px 8px 50% 50%; pointer-events:none; } #metanoia-quote-root .color-swatch:hover { transform:translateY(-3px) scale(1.05); } #metanoia-quote-root .color-swatch.sel { border-color:var(--q-nv); box-shadow: inset 0 2px 4px rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.25), 0 0 0 4px rgba(232,114,28,.3), 0 4px 14px rgba(0,0,0,.25); transform:translateY(-2px); } #metanoia-quote-root .color-swatch.sel::before { content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; font-weight:900; text-shadow:0 1px 3px rgba(0,0,0,.5); } #metanoia-quote-root .color-name { font-size:10px; text-align:center; margin-top:5px; color:#7a6a4e; font-weight:600; } #metanoia-quote-root .color-cell { display:flex; flex-direction:column; align-items:center; } #metanoia-quote-root .price-warn { background:#fff6ea; border:1px solid #f3cf9e; border-radius:10px; padding:10px 13px; font-size:12.5px; color:#9a5a12; display:flex; align-items:center; gap:9px; } #metanoia-quote-root .price-warn .warn-ico { flex-shrink:0; width:17px; height:17px; border-radius:50%; background:var(--q-or2); color:#fff; font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; } #metanoia-quote-root .price-warn b { color:var(--q-or3); } #metanoia-quote-root .price-ok { display:flex; align-items:center; gap:7px; font-size:12px; color:#1a9355; } #metanoia-quote-root .price-ok::before { content:'✓'; flex-shrink:0; width:16px; height:16px; border-radius:50%; background:#d8f3e3; color:#1a9355; font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; } #metanoia-quote-root .design-footer { background:#f6f0e6; border:1px solid #ece0cb; border-radius:11px; padding:13px 16px; font-size:13px; color:#6a5a40; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; } #metanoia-quote-root .design-footer b { color:var(--q-nv); } #metanoia-quote-root .design-footer-total { color:var(--q-or3); font-weight:800; font-size:15px; } #metanoia-quote-root .silk-row { display:flex; align-items:center; gap:11px; background:#f6f0e6; border-radius:10px; padding:10px 13px; } #metanoia-quote-root .silk-swatch { width:34px; height:34px; border-radius:9px; background:linear-gradient(160deg,#222,#000); border:3px solid var(--q-nv); box-shadow: inset 0 2px 4px rgba(255,255,255,.12), inset 0 -3px 6px rgba(0,0,0,.4); position:relative; flex-shrink:0; } #metanoia-quote-root .silk-swatch::before { content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--q-or2); font-size:14px; font-weight:900; } #metanoia-quote-root .silk-swatch.na { background:#ddd; border-color:#bbb; } #metanoia-quote-root .silk-swatch.na::before { content:'✕'; color:#888; } #metanoia-quote-root .silk-note { font-size:11.5px; color:#7a6a4e; } #metanoia-quote-root .silk-note b { color:var(--nv); } #metanoia-quote-root .qty-ctrl { display:flex; align-items:center; border:1.5px solid #ddd0b4; border-radius:10px; overflow:hidden; width:fit-content; background:#fff; } #metanoia-quote-root .qty-btn { padding:8px 14px; background:#f3ecdc; border:none; cursor:pointer; font-size:18px; color:var(--nv); transition:background .15s; } #metanoia-quote-root .qty-btn:hover { background:#eaddc0; } #metanoia-quote-root .qty-input { width:64px; text-align:center; border:none !important; box-shadow:none !important; font-weight:700; font-size:16px; padding:8px 4px !important; } #metanoia-quote-root .qty-note { font-size:10.5px; margin-top:6px; font-family:var(--mono); display:flex; align-items:center; gap:6px; color:#9a8466; } #metanoia-quote-root .qty-note.floor { color:var(--am); } #metanoia-quote-root .qty-note.bulk { color:var(--gn); } #metanoia-quote-root .addon-row { display:flex; align-items:center; gap:11px; border:1.5px solid #ddd0b4; border-radius:10px; padding:11px 13px; cursor:pointer; transition:all .2s; margin-bottom:9px; } #metanoia-quote-root .addon-row:last-child { margin-bottom:0; } #metanoia-quote-root .addon-row.checked { border-color:var(--or); background:#fef3e8; } #metanoia-quote-root .addon-check { width:21px; height:21px; border-radius:6px; border:2px solid #ccc; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .2s; } #metanoia-quote-root .addon-check.on { background:var(--nv); border-color:var(--nv); } #metanoia-quote-root .addon-check.on::after { content:'✓'; color:var(--or2); font-weight:900; font-size:12px; } #metanoia-quote-root .addon-icon { font-size:20px; flex-shrink:0; } #metanoia-quote-root .addon-title { font-weight:700; font-size:13.5px; color:var(--nv); font-family:var(--head); } #metanoia-quote-root .addon-sub { font-size:11px; color:#9a8466; margin-top:1px; } #metanoia-quote-root .addon-fee { margin-left:auto; font-family:var(--mono); font-size:12px; font-weight:700; color:var(--or3); flex-shrink:0; white-space:nowrap; } /* ════════════════════════════════════════════════════════════ MULTI-DESIGN PANELS — design cards, add button, order summary. ════════════════════════════════════════════════════════════ */ #metanoia-quote-root { --nv1:#2a2320; --nv3:#4a3a1e; --tx:#fff3e9; --mt:#b89a72; --display:-apple-system,"Segoe UI",Roboto,sans-serif; } #metanoia-quote-root .designs-stack { display:flex; flex-direction:column; gap:18px; } #metanoia-quote-root .design-panel { background:#fffdfb; border:1px solid var(--q-line); border-radius:16px; overflow:hidden; box-shadow:0 4px 18px rgba(232,114,28,.06); margin-bottom:18px; transition:box-shadow .25s, transform .25s; animation:qPanelIn .45s cubic-bezier(.22,1,.36,1); } #metanoia-quote-root .design-panel:hover { box-shadow:0 10px 30px rgba(232,114,28,.12); } @keyframes qPanelIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } #metanoia-quote-root .panel-hdr { background:linear-gradient(135deg,#2a2320,#3d3226); color:#fff; padding:15px 20px; font-size:12px; font-weight:700; letter-spacing:.5px; display:flex; align-items:center; gap:10px; text-transform:uppercase; } #metanoia-quote-root .panel-hdr-num { background:linear-gradient(135deg,var(--q-or),var(--q-or3)); color:#fff; width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; box-shadow:0 2px 8px rgba(232,114,28,.4); } #metanoia-quote-root .panel-remove { margin-left:auto; background:rgba(226,75,74,.15); color:var(--rd); border:1px solid rgba(226,75,74,.3); width:26px; height:26px; border-radius:8px; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:all .2s; } #metanoia-quote-root .panel-remove:hover { background:rgba(226,75,74,.28); } #metanoia-quote-root .panel-body { padding:22px; } #metanoia-quote-root .add-design-btn { border:2px dashed var(--or2); border-radius:14px; padding:18px; text-align:center; cursor:pointer; background:rgba(232,114,28,.06); transition:all .25s; color:var(--or2); font-family:var(--head); font-weight:700; font-size:14.5px; display:flex; align-items:center; justify-content:center; gap:9px; margin-top:18px; } #metanoia-quote-root .add-design-btn:hover { background:rgba(232,114,28,.12); border-color:var(--or); transform:translateY(-2px); } #metanoia-quote-root .add-design-plus { width:24px; height:24px; border-radius:50%; background:var(--or); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:900; } #metanoia-quote-root .design-limit-note { text-align:center; font-size:11px; color:var(--mt); font-family:var(--mono); margin-top:4px; } #metanoia-quote-root .order-summary { background:linear-gradient(135deg,var(--nv1),var(--nv3)); border-radius:16px; padding:22px; margin-top:22px; position:relative; overflow:hidden; } #metanoia-quote-root .os-title { font-family:var(--mono); font-size:11px; color:var(--mt); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; position:relative; } #metanoia-quote-root .os-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:13px; position:relative; } #metanoia-quote-root .os-row:last-of-type { border-bottom:none; } #metanoia-quote-root .os-row-name { color:var(--tx); font-family:var(--head); font-weight:600; } #metanoia-quote-root .os-row-spec { color:var(--mt); font-size:11px; font-family:var(--mono); } #metanoia-quote-root .os-row-price { color:var(--or2); font-family:var(--mono); font-weight:700; } #metanoia-quote-root .os-total-row { display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:14px; border-top:2px solid rgba(232,114,28,.3); position:relative; } #metanoia-quote-root .os-total-label { font-family:var(--mono); font-size:12px; color:var(--mt); } #metanoia-quote-root .os-total-val { font-family:var(--display); font-size:34px; color:var(--or2); letter-spacing:.5px; font-weight:800; } /* ════════════════════════════════════════════════════════════ SHIPPING PAGE — 3 methods, governorate, location link + iframe. ════════════════════════════════════════════════════════════ */ #metanoia-quote-root .ship-panel { background:#FAF8F5; border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.12); } #metanoia-quote-root .ship-body { padding:22px; } #metanoia-quote-root .ship-recap { display:flex; justify-content:space-between; align-items:center; background:#f5efe2; border-radius:11px; padding:13px 17px; margin-bottom:18px; } #metanoia-quote-root .ship-recap-label { font-size:10.5px; font-family:var(--mono); color:#9a8466; letter-spacing:.5px; } #metanoia-quote-root .ship-recap-val { font-family:var(--mono); font-weight:700; font-size:17px; color:var(--or3); } #metanoia-quote-root .ship-opts { display:flex; flex-direction:column; gap:11px; } #metanoia-quote-root .ship-opt { display:flex; align-items:center; gap:14px; border:2px solid #ddd0b4; border-radius:13px; padding:15px 17px; cursor:pointer; transition:all .2s; background:#fff; } #metanoia-quote-root .ship-opt:hover { border-color:var(--or2); } #metanoia-quote-root .ship-opt.sel { border-color:var(--or); background:#fef3e8; box-shadow:0 0 0 3px rgba(232,114,28,.1); } #metanoia-quote-root .ship-opt-icon { font-size:26px; flex-shrink:0; } #metanoia-quote-root .ship-opt-title { font-weight:700; font-size:15px; color:var(--nv); font-family:var(--head); } #metanoia-quote-root .ship-opt-desc { font-size:11.5px; color:#9a8466; margin-top:2px; } #metanoia-quote-root .ship-opt-price { text-align:right; flex-shrink:0; } #metanoia-quote-root .ship-opt-price-val { font-family:var(--mono); font-weight:700; font-size:13px; color:var(--or3); } #metanoia-quote-root .ship-opt-price-note { font-size:9.5px; color:#b5a484; font-family:var(--mono); } #metanoia-quote-root .ship-radio { width:22px; height:22px; border-radius:50%; border:2px solid #ccc; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .2s; } #metanoia-quote-root .ship-radio.sel { border-color:var(--or); } #metanoia-quote-root .ship-radio-dot { width:11px; height:11px; border-radius:50%; background:var(--or); } #metanoia-quote-root .ship-detail { margin-top:18px; border-top:2px solid #ecdfc8; padding-top:18px; } #metanoia-quote-root .ship-detail-hdr { font-size:11px; font-weight:700; font-family:var(--mono); color:#9a8466; letter-spacing:1px; text-transform:uppercase; margin-bottom:13px; } #metanoia-quote-root .pickup-info { background:#f5efe2; border-radius:12px; padding:17px; } #metanoia-quote-root .pickup-addr { color:#6a5a40; font-size:13px; line-height:1.7; margin-top:6px; } #metanoia-quote-root .pickup-hours { color:var(--or3); font-size:12px; font-family:var(--mono); margin-top:9px; } #metanoia-quote-root .saved-addr-picker { display:flex; flex-direction:column; gap:9px; } #metanoia-quote-root .saved-addr-title { font-size:12px; color:#6a5a40; font-weight:600; margin-bottom:3px; } #metanoia-quote-root .saved-addr-opt { border:1.5px solid #ddd0b4; border-radius:10px; padding:12px 15px; cursor:pointer; transition:all .2s; display:flex; flex-direction:column; gap:3px; background:#fff; } #metanoia-quote-root .saved-addr-opt:hover { border-color:var(--or); background:#fef3e8; } #metanoia-quote-root .saved-addr-opt.new { color:var(--or3); font-weight:700; font-size:13px; text-align:center; border-style:dashed; } #metanoia-quote-root .saved-addr-opt-label { font-weight:700; font-size:13.5px; color:var(--nv); font-family:var(--head); } #metanoia-quote-root .saved-addr-opt-text { font-size:11.5px; color:#9a8466; } #metanoia-quote-root .saved-addr-selected { display:flex; justify-content:space-between; align-items:center; background:#fef3e8; border:1.5px solid var(--or); border-radius:11px; padding:13px 16px; } #metanoia-quote-root .saved-addr-change { color:var(--or3); font-size:12px; font-weight:700; cursor:pointer; font-family:var(--mono); } #metanoia-quote-root .saved-addr-change:hover { text-decoration:underline; } #metanoia-quote-root .addr-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; } #metanoia-quote-root .addr-grid > div.full { grid-column:1 / -1; } #metanoia-quote-root .addr-grid label { display:block; font-size:11px; font-weight:600; color:#7a6a4e; margin-bottom:5px; font-family:var(--mono); } #metanoia-quote-root .gov-price-box { display:flex; justify-content:space-between; align-items:center; background:linear-gradient(135deg,#fff3e0,#fde0c0); border:1px solid var(--or2); border-radius:11px; padding:13px 17px; margin-top:14px; } #metanoia-quote-root .gov-price-label { font-size:10px; font-family:var(--mono); color:#9a8466; letter-spacing:.5px; } #metanoia-quote-root .gov-price-note { font-size:10px; color:#b5a484; font-family:var(--mono); } #metanoia-quote-root .gov-price-val { font-family:var(--mono); font-weight:700; font-size:19px; color:var(--or3); } #metanoia-quote-root .eta-tag { font-size:11.5px; color:var(--gn); font-family:var(--mono); margin-top:11px; } #metanoia-quote-root .loc-link-box { background:#f5efe2; border-radius:12px; padding:16px; } #metanoia-quote-root .loc-link-box label { display:block; font-size:11.5px; font-weight:600; color:#7a6a4e; margin-bottom:7px; } #metanoia-quote-root .loc-link-row { display:flex; gap:9px; flex-wrap:wrap; } #metanoia-quote-root .loc-link-row input { flex:1; min-width:180px; } #metanoia-quote-root .loc-getbtn { background:var(--nv); color:#fff; border:none; border-radius:9px; padding:9px 15px; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; transition:background .2s; font-family:var(--head); } #metanoia-quote-root .loc-getbtn:hover { background:var(--nv3); } #metanoia-quote-root .loc-getbtn:disabled { opacity:.6; cursor:default; } #metanoia-quote-root .loc-preview { margin-top:13px; border-radius:11px; overflow:hidden; border:1.5px solid #ddd0b4; height:200px; } #metanoia-quote-root .loc-preview iframe { width:100%; height:100%; border:0; display:block; } #metanoia-quote-root .loc-open-btn { display:inline-block; margin-top:11px; background:#fff; border:1.5px solid var(--or); color:var(--or3); border-radius:9px; padding:9px 16px; font-size:12.5px; font-weight:700; text-decoration:none; font-family:var(--head); transition:all .2s; } #metanoia-quote-root .loc-open-btn:hover { background:var(--or); color:#fff; } #metanoia-quote-root .indriver-note { display:flex; gap:10px; align-items:flex-start; background:rgba(34,196,122,.08); border:1px solid rgba(34,196,122,.25); border-radius:11px; padding:13px 15px; margin-top:14px; } #metanoia-quote-root .indriver-note-text { font-size:11.5px; color:#1d7a4d; line-height:1.7; } #metanoia-quote-root .indriver-note-text b { color:#14633b; } @media (max-width:560px) { #metanoia-quote-root .addr-grid { grid-template-columns:1fr; } } /* saved-address edit button + short-link note */ #metanoia-quote-root .saved-addr-opt-wrap { display:flex; align-items:stretch; gap:8px; } #metanoia-quote-root .saved-addr-opt-wrap .saved-addr-opt { flex:1; } #metanoia-quote-root .saved-addr-edit { flex-shrink:0; background:#fff; border:1.5px solid #ddd0b4; border-radius:10px; padding:0 15px; cursor:pointer; font-size:12px; font-weight:700; color:var(--or3); font-family:var(--mono); transition:all .2s; } #metanoia-quote-root .saved-addr-edit:hover { border-color:var(--or); background:#fef3e8; } #metanoia-quote-root .loc-shortnote { margin-top:13px; background:#fff; border:1px solid #ddd0b4; border-radius:10px; padding:12px 15px; font-size:12px; color:#6a5a40; line-height:1.7; } /* ════════════════════════════════════════════════════════════ PAYMENT PAGE — deposit box, methods, copy rows, proof upload. ════════════════════════════════════════════════════════════ */ #metanoia-quote-root .deposit-box { background:linear-gradient(135deg,var(--nv1),var(--nv3)); border-radius:16px; padding:22px; margin-bottom:22px; position:relative; overflow:hidden; } #metanoia-quote-root .deposit-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:13px; color:var(--tx); } #metanoia-quote-root .deposit-row:last-of-type { border-bottom:none; } #metanoia-quote-root .deposit-highlight { background:rgba(232,114,28,.15); border:1px solid rgba(232,114,28,.35); border-radius:11px; padding:14px 16px; margin-top:12px; display:flex; justify-content:space-between; align-items:center; } #metanoia-quote-root .deposit-highlight-label { font-size:10.5px; color:var(--or2); font-family:var(--mono); letter-spacing:.5px; } #metanoia-quote-root .deposit-highlight-val { font-family:var(--display); font-size:30px; color:var(--or2); font-weight:800; } #metanoia-quote-root .deposit-note { font-size:11px; color:var(--mt); font-family:var(--mono); margin-top:10px; line-height:1.7; } #metanoia-quote-root .pay-opts { display:flex; flex-direction:column; gap:10px; margin-bottom:6px; } #metanoia-quote-root .pay-opt { display:flex; align-items:center; gap:13px; border:2px solid #ddd0b4; border-radius:12px; padding:14px 16px; cursor:pointer; transition:all .2s; background:#fff; } #metanoia-quote-root .pay-opt:hover { border-color:var(--or2); } #metanoia-quote-root .pay-opt.sel { border-color:var(--or); background:#fef3e8; box-shadow:0 0 0 3px rgba(232,114,28,.1); } #metanoia-quote-root .pay-opt-icon { font-size:24px; flex-shrink:0; } #metanoia-quote-root .pay-opt-title { font-weight:700; font-size:14.5px; color:var(--nv); font-family:var(--head); } #metanoia-quote-root .pay-opt-desc { font-size:11.5px; color:#9a8466; margin-top:2px; } #metanoia-quote-root .pay-amount-box { background:linear-gradient(135deg,#fff3e0,#fde0c0); border:1px solid var(--or2); border-radius:11px; padding:13px 16px; font-size:14px; color:#6a5a40; margin-bottom:14px; text-align:center; } #metanoia-quote-root .pay-amount-box b { color:var(--or3); font-size:18px; font-family:var(--mono); } #metanoia-quote-root .pay-copy-row { display:flex; justify-content:space-between; align-items:center; background:#f5efe2; border-radius:10px; padding:12px 15px; margin-bottom:9px; } #metanoia-quote-root .pay-copy-label { font-size:10px; font-family:var(--mono); color:#9a8466; letter-spacing:.5px; text-transform:uppercase; } #metanoia-quote-root .pay-copy-val { font-size:15px; font-weight:700; color:var(--nv); font-family:var(--mono); margin-top:3px; letter-spacing:.5px; } #metanoia-quote-root .pay-copy-btn { background:var(--nv); color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:12px; font-weight:700; cursor:pointer; flex-shrink:0; font-family:var(--head); transition:background .2s; } #metanoia-quote-root .pay-copy-btn:hover { background:var(--nv3); } #metanoia-quote-root .pay-copy-btn.copied { background:var(--gn); } #metanoia-quote-root .pay-proof { background:#f5efe2; border-radius:12px; padding:16px; margin-top:16px; } #metanoia-quote-root .pay-proof-hdr { font-weight:700; font-size:13.5px; color:var(--nv); font-family:var(--head); } #metanoia-quote-root .pay-proof-sub { font-size:11.5px; color:#9a8466; margin:4px 0 13px; line-height:1.6; } #metanoia-quote-root .pay-proof-actions { display:flex; gap:10px; flex-wrap:wrap; } #metanoia-quote-root .pay-proof-btn { flex:1; min-width:150px; background:var(--nv); color:#fff; border-radius:9px; padding:11px 14px; font-size:12.5px; font-weight:700; cursor:pointer; text-align:center; font-family:var(--head); transition:background .2s; } #metanoia-quote-root .pay-proof-btn:hover { background:var(--nv3); } #metanoia-quote-root .pay-proof-wa { flex:1; min-width:150px; background:#25D366; color:#fff; border-radius:9px; padding:11px 14px; font-size:12.5px; font-weight:700; text-align:center; text-decoration:none; font-family:var(--head); transition:filter .2s; } #metanoia-quote-root .pay-proof-wa:hover { filter:brightness(.95); } #metanoia-quote-root .pay-proof-file { background:#fff; border:1.5px solid var(--gn); border-radius:10px; padding:11px 15px; font-size:13px; color:#14633b; font-weight:600; } #metanoia-quote-root .pay-proof-remove { color:var(--rd); cursor:pointer; font-size:11.5px; margin-left:8px; font-weight:700; } #metanoia-quote-root .pay-proof-remove:hover { text-decoration:underline; } #metanoia-quote-root .defer-box { display:flex; gap:13px; align-items:flex-start; background:rgba(240,160,40,.1); border:1px solid rgba(240,160,40,.35); border-radius:12px; padding:15px 17px; } #metanoia-quote-root .defer-text { font-size:12.5px; color:#8a5a10; line-height:1.7; } #metanoia-quote-root .defer-text b { color:#6a4408; } /* Remove & replace file button */ #metanoia-quote-root .file-replace-btn { background:none; border:none; color:var(--rd); font-size:11px; font-weight:700; cursor:pointer; font-family:var(--mono); padding:2px 6px; margin-left:6px; border-radius:5px; transition:background .2s; } #metanoia-quote-root .file-replace-btn:hover { background:rgba(226,75,74,.1); text-decoration:underline; } /* ════════════════════════════════════════════════════════════ ORDER PROGRESS BAR — customer-facing stage tracker. ════════════════════════════════════════════════════════════ */ #metanoia-quote-root .prog-track { display:flex; align-items:flex-start; justify-content:center; margin:22px auto 8px; max-width:520px; } #metanoia-quote-root .prog-node { display:flex; flex-direction:column; align-items:center; gap:8px; flex-shrink:0; width:74px; } #metanoia-quote-root .prog-dot { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; font-family:var(--mono); background:#1a2b47; color:#5b6f8e; border:2px solid #283452; transition:all .3s; } #metanoia-quote-root .prog-node.active .prog-dot { background:var(--or); color:#fff; border-color:var(--or); box-shadow:0 0 0 5px rgba(232,114,28,.18); transform:scale(1.08); } #metanoia-quote-root .prog-node.done .prog-dot { background:#1f7a44; color:#fff; border-color:#1f7a44; } #metanoia-quote-root .prog-label { font-size:10px; color:#6a7a92; text-align:center; line-height:1.3; font-family:var(--mono); } #metanoia-quote-root .prog-node.active .prog-label { color:var(--or2); font-weight:700; } #metanoia-quote-root .prog-node.done .prog-label { color:#3a8a5a; } #metanoia-quote-root .prog-line { flex:1; height:2px; background:#28344d; margin-top:17px; min-width:14px; transition:background .3s; } #metanoia-quote-root .prog-line.done { background:#1f7a44; } #metanoia-quote-root .prog-failed { background:rgba(226,75,74,.12); border:1px solid rgba(226,75,74,.4); color:#e24b4a; border-radius:11px; padding:13px; text-align:center; font-weight:700; font-family:var(--mono); margin:22px auto; max-width:360px; } @media (max-width:520px) { #metanoia-quote-root .prog-node { width:58px; } #metanoia-quote-root .prog-dot { width:28px; height:28px; font-size:12px; } #metanoia-quote-root .prog-label { font-size:8.5px; } } /* ════════════════════════════════════════════════════════════ TRACK ORDER PAGE ════════════════════════════════════════════════════════════ */ #metanoia-quote-root .track-search { display:flex; gap:10px; flex-wrap:wrap; } #metanoia-quote-root .track-search input { flex:1; min-width:200px; padding:12px 14px; border:1.5px solid #ddd0b4; border-radius:10px; font-size:15px; font-family:var(--mono, monospace); letter-spacing:1px; } #metanoia-quote-root .track-result { margin-top:24px; background:#FAF8F5; border-radius:16px; padding:24px; box-shadow:0 8px 26px rgba(0,0,0,.08); } #metanoia-quote-root .track-code { text-align:center; font-family:var(--mono, monospace); font-size:20px; font-weight:800; color:var(--or, #E8721C); letter-spacing:1px; margin-bottom:6px; } #metanoia-quote-root .track-status-label { text-align:center; font-size:14px; color:#6a5a40; font-weight:600; margin-top:6px; } #metanoia-quote-root .track-designs { margin-top:18px; border-top:1px solid #ecdfc8; padding-top:14px; } #metanoia-quote-root .track-design-row { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; font-size:13px; color:#6a5a40; padding:7px 0; border-bottom:1px solid #f1e8d8; } #metanoia-quote-root .track-design-row:last-child { border-bottom:none; } #metanoia-quote-root .track-design-row > b { color:var(--or3, #ff8124); font-family:var(--mono, monospace); white-space:nowrap; } #metanoia-quote-root .track-design-breakdown { font-size:11px; color:#a0916f; margin-top:3px; } #metanoia-quote-root .track-price { display:flex; justify-content:space-between; align-items:center; margin-top:14px; border-top:1px solid #ecdfc8; padding-top:14px; } #metanoia-quote-root .track-price b { color:var(--or3, #ff8124); font-size:18px; font-family:var(--mono, monospace); } /* ════════════════════════════════════════════════════════════ STEP INDICATOR — top-right wizard progress dots. ════════════════════════════════════════════════════════════ */ #metanoia-quote-root .q-header { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; } #metanoia-quote-root .q-steps { display:flex; align-items:center; flex-shrink:0; } #metanoia-quote-root .q-step-dot { position:relative; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; background:#fff; color:var(--q-mut); border:1.5px solid var(--q-line2); flex-shrink:0; transition:all .35s cubic-bezier(.22,1,.36,1); } #metanoia-quote-root .q-step-dot.active { background:linear-gradient(135deg,var(--q-or),var(--q-or3)); color:#fff; border-color:var(--q-or); box-shadow:0 0 0 4px rgba(232,114,28,.16); transform:scale(1.08); } #metanoia-quote-root .q-step-dot.done { background:var(--q-gn); color:#fff; border-color:var(--q-gn); } #metanoia-quote-root .q-step-label { position:absolute; top:34px; left:50%; transform:translateX(-50%); font-size:9px; font-weight:700; color:var(--q-mut); white-space:nowrap; letter-spacing:.3px; text-transform:uppercase; } #metanoia-quote-root .q-step-dot.active .q-step-label { color:var(--q-or); } #metanoia-quote-root .q-step-dot.done .q-step-label { color:var(--q-gn); } #metanoia-quote-root .q-step-line { width:26px; height:2px; background:var(--q-line2); flex-shrink:0; transition:background .35s; } #metanoia-quote-root .q-step-line.done { background:var(--or); } @media (max-width:680px) { #metanoia-quote-root .q-steps { width:100%; justify-content:center; margin-top:14px; } #metanoia-quote-root .q-step-dot { width:26px; height:26px; font-size:11px; } #metanoia-quote-root .q-step-label { font-size:8px; } #metanoia-quote-root .q-step-line { width:16px; } } /* Terms agreement box */ #metanoia-quote-root .terms-box { border:2px solid #ddd0b4; border-radius:13px; padding:16px 18px; margin-top:18px; display:flex; gap:12px; align-items:flex-start; cursor:pointer; transition:all .2s; } #metanoia-quote-root .terms-box.checked { border-color:var(--or); background:#fef3e8; } #metanoia-quote-root .terms-checkbox { width:22px; height:22px; border-radius:6px; border:2px solid #ccc; flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; transition:all .2s; } #metanoia-quote-root .terms-checkbox.on { background:var(--nv); border-color:var(--nv); } #metanoia-quote-root .terms-checkbox.on::after { content:'✓'; color:var(--or2); font-weight:900; font-size:13px; } #metanoia-quote-root .terms-text { font-size:13px; color:var(--nv); font-family:var(--head); font-weight:600; line-height:1.6; } #metanoia-quote-root .terms-link { color:var(--or3); text-decoration:underline; } #metanoia-quote-root .submit-hint { text-align:center; font-size:11px; color:var(--rd); font-family:var(--mono); margin-top:8px; } /* Header back arrow */ #metanoia-quote-root .q-header-back { display:flex; align-items:center; gap:6px; height:40px; padding:0 16px; border-radius:11px; background:#fff; border:1.5px solid var(--q-line2); color:var(--q-txt); font-size:14px; font-weight:700; font-family:var(--head); cursor:pointer; flex-shrink:0; transition:all .2s; } #metanoia-quote-root .q-header-back span { font-size:18px; line-height:1; } #metanoia-quote-root .q-header-back:hover { background:var(--q-or); border-color:var(--q-or); color:#fff; transform:translateX(-2px); box-shadow:0 4px 14px rgba(232,114,28,.28); } /* Success page order summary card */ #metanoia-quote-root .success-wa-note { background:rgba(34,196,122,.08); border:1px solid rgba(34,196,122,.3); border-radius:12px; padding:14px 16px; font-size:12.5px; color:#1d7a4d; font-family:var(--mono); line-height:1.7; margin:18px auto; max-width:560px; text-align:left; } #metanoia-quote-root .success-wa-note b { color:#14633b; } #metanoia-quote-root .success-card { background:#FAF8F5; border:1px solid #e6dcc8; border-radius:16px; padding:22px; margin:18px auto 0; max-width:560px; text-align:left; box-shadow:0 8px 24px rgba(0,0,0,.06); } #metanoia-quote-root .success-card-title { font-size:11px; font-weight:700; font-family:var(--mono); color:#9a8466; letter-spacing:1px; text-transform:uppercase; margin-bottom:12px; } #metanoia-quote-root .success-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #ecdfc8; font-size:13.5px; color:var(--nv); gap:12px; } #metanoia-quote-root .success-row:last-child { border-bottom:none; } #metanoia-quote-root .success-row-spec { color:#9a8466; font-size:11.5px; } #metanoia-quote-root .success-row b { font-family:var(--mono); white-space:nowrap; } #metanoia-quote-root .success-row-total { border-top:2px solid #ddd0b4; border-bottom:none; margin-top:4px; padding-top:13px; font-weight:700; } #metanoia-quote-root .success-row-total b { color:var(--or3); font-size:16px; } #metanoia-quote-root .success-pay-status { background:#fef3e8; border:1px solid var(--or2); color:var(--or3); border-radius:8px; padding:5px 11px; font-size:11.5px; font-family:var(--mono); font-weight:700; white-space:nowrap; } /* ════════════════════════════════════════════════════════════ CUSTOMER ACCOUNT DASHBOARD — [metanoia_account] ════════════════════════════════════════════════════════════ */ #metanoia-account-root { --or:#E8721C; --or2:#FF6B00; --or3:#ff8124; --nv:#0f1f3d; --nv1:#0f1f3d; --nv3:#16294d; --gn:#22C47A; --rd:#E24B4A; --am:#F0A028; --tx:#e8eef7; --mt:#8aa0c0; --mono:"JetBrains Mono",ui-monospace,monospace; --head:-apple-system,"Segoe UI",Roboto,sans-serif; font-family:var(--head); } #metanoia-account-root .q-loading { text-align:center; padding:50px; color:var(--mt); font-family:var(--mono); } #metanoia-account-root .acct-wrap { max-width:980px; margin:0 auto; } #metanoia-account-root .acct-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:14px; } #metanoia-account-root .acct-welcome { font-size:24px; font-weight:800; color:#fff; } #metanoia-account-root .acct-sub { font-size:11px; color:var(--mt); font-family:var(--mono); letter-spacing:1px; margin-top:3px; } #metanoia-account-root .acct-logout { background:var(--nv3); color:#fff; border:1px solid rgba(255,255,255,.15); border-radius:10px; padding:11px 22px; font-size:13px; font-weight:700; text-decoration:none; transition:all .2s; } #metanoia-account-root .acct-logout:hover { background:var(--rd); border-color:var(--rd); } #metanoia-account-root .acct-tabs { display:flex; gap:0; background:rgba(255,255,255,.04); border-radius:13px; padding:5px; margin-bottom:18px; } #metanoia-account-root .acct-tab { flex:1; text-align:center; padding:13px; border-radius:9px; cursor:pointer; font-weight:700; font-size:14px; color:var(--mt); transition:all .2s; } #metanoia-account-root .acct-tab.sel { background:#FAF8F5; color:var(--nv); } #metanoia-account-root .acct-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:14px; } #metanoia-account-root .acct-filter { background:none; border:none; color:var(--mt); font-size:13px; font-weight:600; cursor:pointer; padding:6px 4px; font-family:var(--head); display:flex; align-items:center; gap:6px; transition:color .2s; } #metanoia-account-root .acct-filter.sel { color:var(--or2); border-bottom:2px solid var(--or); } #metanoia-account-root .acct-filter-badge { background:var(--or); color:#fff; border-radius:20px; padding:1px 8px; font-size:11px; font-family:var(--mono); } #metanoia-account-root .acct-search { width:100%; padding:14px 18px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.04); color:var(--tx); font-size:14px; font-family:var(--mono); outline:none; margin-bottom:18px; box-sizing:border-box; } #metanoia-account-root .acct-search::placeholder { color:#5b6f8e; } #metanoia-account-root .acct-search:focus { border-color:var(--or); } #metanoia-account-root .acct-order-card { background:#FAF8F5; border-radius:16px; overflow:hidden; margin-bottom:18px; box-shadow:0 8px 24px rgba(0,0,0,.1); } #metanoia-account-root .acct-order-meta { background:#f0e9dd; padding:12px 20px; font-size:12px; color:#6a5a40; font-family:var(--mono); display:flex; gap:10px; align-items:center; flex-wrap:wrap; } #metanoia-account-root .acct-order-body { padding:20px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; } #metanoia-account-root .acct-order-thumb { width:108px; height:88px; border-radius:10px; overflow:hidden; background:#0a1f2e; flex-shrink:0; display:flex; align-items:center; justify-content:center; } #metanoia-account-root .acct-order-thumb svg, #metanoia-account-root .acct-order-thumb img { width:100%; height:100%; object-fit:contain; } #metanoia-account-root .acct-no-thumb { color:#5b6f8e; font-size:30px; } #metanoia-account-root .acct-price-row { display:flex; justify-content:space-between; gap:14px; padding:5px 0; font-size:13.5px; color:var(--nv); } #metanoia-account-root .acct-price-col { flex:1; min-width:180px; } #metanoia-account-root .acct-price-row.total { border-top:2px solid #ddd0b4; margin-top:5px; padding-top:9px; font-weight:800; } #metanoia-account-root .acct-price-row.total span:last-child { color:var(--or3); } #metanoia-account-root .acct-order-status { text-align:center; flex-shrink:0; } #metanoia-account-root .acct-status-label { font-size:13px; font-weight:700; color:var(--nv); margin-top:6px; } #metanoia-account-root .acct-ship-method { font-size:11px; color:#9a8466; font-family:var(--mono); } #metanoia-account-root .acct-order-actions { display:flex; flex-direction:column; gap:9px; align-items:flex-end; flex-shrink:0; } #metanoia-account-root .acct-reorder-btn { background:var(--or); color:#fff; border:none; border-radius:9px; padding:11px 20px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; transition:filter .2s; } #metanoia-account-root .acct-reorder-btn:hover { filter:brightness(1.06); } #metanoia-account-root .acct-action-link { color:var(--or3); font-size:12.5px; font-weight:700; cursor:pointer; font-family:var(--mono); } #metanoia-account-root .acct-action-link:hover { text-decoration:underline; } #metanoia-account-root .acct-empty { text-align:center; padding:50px; color:var(--mt); font-family:var(--mono); } #metanoia-account-root .acct-login-note { text-align:center; padding:50px; color:var(--tx); } #metanoia-account-root .acct-login-note a { color:var(--or2); } /* Addresses */ #metanoia-account-root .acct-addr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; } #metanoia-account-root .acct-addr-card { background:#FAF8F5; border-radius:13px; padding:17px; } #metanoia-account-root .acct-addr-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; } #metanoia-account-root .acct-addr-label { font-weight:800; color:var(--nv); font-size:14px; } #metanoia-account-root .acct-addr-text { font-size:12.5px; color:#6a5a40; line-height:1.6; } #metanoia-account-root .acct-addr-actions { display:flex; gap:10px; margin-top:11px; } #metanoia-account-root .acct-addr-action { font-size:12px; font-weight:700; color:var(--or3); cursor:pointer; font-family:var(--mono); } #metanoia-account-root .acct-addr-action.danger { color:var(--rd); } #metanoia-account-root .acct-add-btn { background:rgba(232,114,28,.1); border:2px dashed var(--or2); color:var(--or3); border-radius:13px; padding:17px; font-weight:700; cursor:pointer; text-align:center; font-size:14px; } /* Detail view */ #metanoia-account-root .acct-detail { background:#FAF8F5; border-radius:16px; padding:24px; } #metanoia-account-root .acct-detail-hdr { font-size:18px; font-weight:800; color:var(--nv); margin-bottom:16px; } #metanoia-account-root .acct-detail-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #ecdfc8; font-size:13.5px; color:var(--nv); } #metanoia-account-root .acct-detail-sub { font-size:11px; color:#9a8466; font-family:var(--mono); } @media (max-width:600px) { #metanoia-account-root .acct-order-body { flex-direction:column; align-items:stretch; } #metanoia-account-root .acct-order-actions { align-items:stretch; } } /* ---- Reorder banner ---- */ #metanoia-quote-root .reorder-banner { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(135deg, #fff4ea, #ffe9d6); border: 1px solid #ffcfa3; border-left: 5px solid #FF6B00; border-radius: 14px; padding: 16px 18px; margin: 0 0 22px; color: #5a3a1c; } #metanoia-quote-root .reorder-banner-icon { font-size: 24px; line-height: 1; } #metanoia-quote-root .reorder-banner strong { color: #c2520a; font-size: 15px; } #metanoia-quote-root .reorder-banner-sub { font-size: 13px; color: #7a5a3c; margin-top: 4px; line-height: 1.5; } /* ---- Promo code box ---- */ #metanoia-quote-root .promo-box { margin: 14px 0 4px; } #metanoia-quote-root .promo-input-row { display: flex; gap: 8px; } #metanoia-quote-root .promo-input-row input { flex: 1; padding: 11px 14px; border: 1.5px solid #d9d3c8; border-radius: 10px; font-size: 14px; font-family: inherit; } #metanoia-quote-root .promo-input-row input:focus { border-color: var(--or); outline: none; box-shadow: 0 0 0 3px rgba(232,114,28,.12); } #metanoia-quote-root .promo-apply { padding: 0 22px; border: none; border-radius: 10px; cursor: pointer; background: var(--or2, #FF6B00); color: #fff; font-weight: 700; font-size: 14px; font-family: inherit; } #metanoia-quote-root .promo-apply:disabled { opacity: .6; cursor: default; } #metanoia-quote-root .promo-error { color: #c0392b; font-size: 13px; margin-top: 8px; } #metanoia-quote-root .promo-applied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #eafaf0; border: 1px solid #b6e6c8; color: #1a7f37; border-radius: 10px; padding: 11px 14px; font-size: 14px; } #metanoia-quote-root .promo-tick { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #1a7f37; color: #fff; font-size: 12px; } #metanoia-quote-root .promo-remove { margin-left: auto; background: none; border: none; color: #7a8a7e; cursor: pointer; font-size: 13px; text-decoration: underline; font-family: inherit; } /* ---- Full-screen loading overlay (blocks interaction) ---- */ .mq-overlay { position: fixed; inset: 0; z-index: 999999; background: rgba(15,22,38,.6); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 24px; } .mq-overlay.show { display: flex; } .mq-overlay-card { background: #fff; border-radius: 18px; padding: 32px 38px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.35); max-width: 360px; } .mq-spinner { width: 48px; height: 48px; margin: 0 auto 18px; border: 4px solid #ffe3cc; border-top-color: #FF6B00; border-radius: 50%; animation: mq-spin .8s linear infinite; } @keyframes mq-spin { to { transform: rotate(360deg); } } .mq-overlay-title { font-size: 17px; font-weight: 800; color: #16233c; margin-bottom: 6px; } .mq-overlay-sub { font-size: 13.5px; color: #6b7993; line-height: 1.5; } /* ---- Register field hints / errors ---- */ #metanoia-quote-root .q-field-hint { font-size: 12px; color: #6b7993; margin-top: 6px; line-height: 1.5; } #metanoia-quote-root .q-field-hint b { color: #1a7f37; } #metanoia-quote-root .q-field-error { font-size: 12.5px; color: #c0392b; margin-top: 6px; font-weight: 600; } /* ---- Two-up board preview (top + bottom) ---- */ #metanoia-quote-root .viewer-twoup { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #metanoia-quote-root .viewer-side { display: flex; flex-direction: column; gap: 6px; margin: 0; } #metanoia-quote-root .viewer-side-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #8896ab; text-align: center; } #metanoia-quote-root .viewer-twoup .viewer-box { margin: 0; } @media (max-width: 560px) { #metanoia-quote-root .viewer-twoup { grid-template-columns: 1fr; } } /* ---- Board preview lightbox ---- */ .mq-zoom { position:fixed; inset:0; z-index:999999; display:flex; align-items:center; justify-content:center; background:rgba(15,31,61,.0); backdrop-filter:blur(0px); padding:24px; transition:background .22s ease, backdrop-filter .22s ease; } .mq-zoom.show { background:rgba(15,31,61,.78); backdrop-filter:blur(4px); } .mq-zoom-inner { position:relative; max-width:92vw; max-height:92vh; transform:scale(.94); opacity:0; transition:transform .24s cubic-bezier(.2,.7,.3,1), opacity .24s; } .mq-zoom.show .mq-zoom-inner { transform:scale(1); opacity:1; } .mq-zoom-stage { background:#0f1f3d; border-radius:16px; padding:18px; overflow:auto; max-width:92vw; max-height:82vh; box-shadow:0 24px 80px rgba(0,0,0,.55); } .mq-zoom-stage svg { display:block; width:min(82vw,820px); height:auto; } .mq-zoom-label { color:#fff; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; text-align:center; opacity:.85; } .mq-zoom-close { position:absolute; top:-16px; right:-16px; width:40px; height:40px; border-radius:50%; border:none; background:var(--q-or2); color:#fff; font-size:24px; line-height:1; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.4); transition:transform .15s, background .15s; } .mq-zoom-close:hover { background:var(--q-or3); transform:rotate(90deg); } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { #metanoia-quote-root .spec-block, #metanoia-quote-root .err-msg, .mq-zoom, .mq-zoom-inner, .mq-zoom-close, #metanoia-quote-root .live-dot { animation:none !important; transition:none !important; } } /* ---- J&T shipping partner notice ---- */ .jt-notice { background: #fff7f0; border: 1px solid #f3d9c2; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; } .jt-notice-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .jt-notice-label { font-size: 11px; font-family: var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--or); } .jt-notice-link { font-weight: 800; font-size: 15px; color: var(--or); text-decoration: none; } .jt-notice-link:hover { text-decoration: underline; } .jt-notice-text { font-size: 12.5px; color: #7a6655; margin-top: 6px; line-height: 1.5; } /* ---- Arabic-only address fields ---- */ .addr-arabic-note { background: #eef6ff; border: 1px solid #cfe3fb; border-radius: 8px; padding: 9px 12px; font-size: 13px; color: #1a56c4; font-weight: 600; text-align: right; direction: rtl; } .addr-ar-invalid { border-color: var(--rd) !important; background: #fdeaea !important; } .addr-ar-warn { color: var(--rd); font-size: 12px; font-weight: 700; margin-top: 5px; text-align: right; direction: rtl; } input[dir="rtl"] { text-align: right; } /* Respect users who prefer reduced motion. */ @media (prefers-reduced-motion: reduce) { #metanoia-quote-root, #metanoia-quote-root *, #metanoia-quote-root .design-panel, #metanoia-quote-root .q-logo, #metanoia-quote-root .q-body { animation: none !important; transition: none !important; } } /* ═══════════ 3D Printing UI ═══════════ */ #metanoia-quote-root .p3d-viewer-wrap { margin-bottom: 18px; } #metanoia-quote-root .p3d-viewer { border-radius: 14px; overflow: hidden; height: 280px; background: linear-gradient(160deg, #23201d, #14110e); cursor: grab; position: relative; box-shadow: inset 0 2px 14px rgba(0,0,0,.4); } #metanoia-quote-root .p3d-viewer:active { cursor: grabbing; } #metanoia-quote-root .p3d-viewer canvas { width: 100%; height: 100%; display: block; touch-action: none; } #metanoia-quote-root .p3d-viewer-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9a8466; font-size: 13px; } #metanoia-quote-root .p3d-dims { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: 11.5px; color: var(--q-mut); margin-top: 10px; font-weight: 600; } #metanoia-quote-root .p3d-file-row { text-align: center; font-size: 11.5px; color: var(--q-mut); margin-top: 6px; } #metanoia-quote-root .q-remove-link { color: var(--q-or); cursor: pointer; font-weight: 700; } #metanoia-quote-root .q-remove-link:hover { text-decoration: underline; } #metanoia-quote-root .print-material-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } @media (max-width: 560px) { #metanoia-quote-root .print-material-grid { grid-template-columns: repeat(2, 1fr); } } #metanoia-quote-root .print-material-opt { border: 2px solid var(--q-line2); border-radius: 11px; padding: 11px 12px; cursor: pointer; transition: all .18s; background: #fff; } #metanoia-quote-root .print-material-opt:hover { border-color: var(--q-or3); transform: translateY(-1px); } #metanoia-quote-root .print-material-opt.sel { border-color: var(--q-or); background: var(--q-or-soft); box-shadow: 0 0 0 3px rgba(232,114,28,.12); } #metanoia-quote-root .print-material-label { font-weight: 700; color: var(--q-txt); font-size: 13.5px; } #metanoia-quote-root .print-material-rate { font-size: 11px; color: var(--q-mut); margin-top: 2px; font-weight: 600; } #metanoia-quote-root .print-color-grid { display: flex; flex-wrap: wrap; gap: 9px; } #metanoia-quote-root .print-color-opt { display: flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border: 2px solid var(--q-line2); border-radius: 22px; cursor: pointer; transition: all .18s; background: #fff; } #metanoia-quote-root .print-color-opt:hover { border-color: var(--q-or3); } #metanoia-quote-root .print-color-opt.sel { border-color: var(--q-or); box-shadow: 0 0 0 3px rgba(232,114,28,.12); } #metanoia-quote-root .print-color-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; } #metanoia-quote-root .print-color-name { font-size: 12.5px; font-weight: 600; color: var(--q-txt); } #metanoia-quote-root .infill-grid { display: flex; flex-wrap: wrap; gap: 7px; } #metanoia-quote-root .infill-opt { flex: 1; min-width: 48px; text-align: center; border: 2px solid var(--q-line2); border-radius: 10px; padding: 10px 4px; cursor: pointer; font-weight: 700; font-size: 13px; color: var(--q-txt); background: #fff; transition: all .18s; } #metanoia-quote-root .infill-opt:hover { border-color: var(--q-or3); } #metanoia-quote-root .infill-opt.sel { border-color: var(--q-or); background: var(--q-or-soft); box-shadow: 0 0 0 3px rgba(232,114,28,.12); } #metanoia-quote-root .p3d-price { margin-top: 20px; background: var(--q-or-tint); border: 1px solid var(--q-line); border-radius: 14px; padding: 16px 18px; } #metanoia-quote-root .p3d-price-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13.5px; color: var(--q-txt); } #metanoia-quote-root .p3d-price-row b { font-weight: 800; color: var(--q-or); } #metanoia-quote-root .p3d-price-note { font-size: 11.5px; color: var(--q-mut); margin-top: 6px; } /* ── 3D upload: link + divider ── */ #metanoia-quote-root .q-or-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--q-mut); font-size: 12px; } #metanoia-quote-root .q-or-divider::before, #metanoia-quote-root .q-or-divider::after { content: ''; flex: 1; height: 1px; background: var(--q-line2); } #metanoia-quote-root .q-link-row { display: flex; gap: 8px; } #metanoia-quote-root .q-link-input { flex: 1; border: 1.5px solid var(--q-line2); border-radius: 10px; padding: 11px 14px; font-size: 13px; font-family: inherit; background: #fff; } #metanoia-quote-root .q-link-input:focus { border-color: var(--q-or); outline: none; box-shadow: 0 0 0 3px rgba(232,114,28,.12); } #metanoia-quote-root .q-link-btn { border: none; border-radius: 10px; padding: 0 18px; font-weight: 700; font-size: 13px; background: linear-gradient(135deg, var(--q-or), var(--q-or3)); color: #fff; cursor: pointer; transition: transform .15s, box-shadow .15s; } #metanoia-quote-root .q-link-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(232,114,28,.3); } #metanoia-quote-root .q-link-hint { font-size: 11.5px; color: var(--q-mut); margin-top: 8px; text-align: center; } /* ── linked model notice ── */ #metanoia-quote-root .p3d-linked { border: 1.5px dashed var(--q-line2); border-radius: 14px; padding: 26px 20px; text-align: center; background: var(--q-or-tint); margin-bottom: 18px; } #metanoia-quote-root .p3d-linked-icon { font-size: 34px; } #metanoia-quote-root .p3d-linked-title { font-weight: 800; font-size: 15px; margin-top: 8px; color: var(--q-txt); } #metanoia-quote-root .p3d-linked-url { font-size: 12px; color: var(--q-or); margin-top: 6px; word-break: break-all; } #metanoia-quote-root .p3d-linked-note { font-size: 12px; color: var(--q-mut); margin-top: 12px; line-height: 1.6; max-width: 460px; margin-left: auto; margin-right: auto; } /* Bulk-order notice inside the pricing summary (light text on dark card) */ #metanoia-quote-root .os-bulk { margin: 16px 0; padding: 16px 18px; border: 1.5px solid rgba(232,114,28,.55); border-radius: 12px; background: rgba(232,114,28,.12); } #metanoia-quote-root .os-bulk-head { font-family: var(--head); font-weight: 800; color: var(--or2); margin-bottom: 8px; font-size: 15px; letter-spacing: .2px; } #metanoia-quote-root .os-bulk-body { font-family: var(--head); font-size: 13.5px; line-height: 1.7; color: var(--tx); } #metanoia-quote-root .os-bulk-body b { color: var(--or2); font-weight: 700; } #metanoia-quote-root .os-bulk-cta { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(232,114,28,.3); color: var(--tx); font-weight: 700; } /* Per-piece unit price under each summary row — must be clearly readable */ #metanoia-quote-root .os-row-unit { text-align: right; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--tx); opacity: .95; margin-top: 3px; white-space: nowrap; } #metanoia-quote-root .os-row-unit.quote { color: var(--or3); } /* Emphasised unit price in the design footer (light cream background, so it must beat the generic `.design-footer b` rule that comes earlier). */ #metanoia-quote-root .design-footer b.dp-unit { white-space: nowrap; font-size: 15px; font-weight: 800; color: var(--q-or3, #ff8124); }