.cpqd { --cpqd-accent: #01a3cb; --cpqd-ink: #444; box-sizing: border-box; width: 100%; margin: 18px 0; padding: 20px; border: 1px solid var(--cpqd-accent); border-radius: 10px; background: #e6f6fa; color: var(--cpqd-ink); font: inherit; line-height: 1.5; clear: both; }
.cpqd *, .cpqd *::before, .cpqd *::after { box-sizing: border-box; }
.cpqd .cpqd-title { margin: 0 0 10px; color: var(--cpqd-accent); font-size: 16px; font-weight: 700; }
.cpqd .cpqd-tiers { display: grid; gap: 7px; list-style: none; margin: 0; padding: 0; }
.cpqd .cpqd-tier { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 7px 10px; border: 1px solid transparent; border-radius: 5px; background: #fff; font-size: 16px; font-weight: 600; transition: border-color .15s, background-color .15s; }
.cpqd .cpqd-tier strong { font-weight: 600; padding: 2px 8px; border-radius: 4px; background: #e6f6fa; color: #008daf; }
.cpqd .cpqd-tier.is-active { border-color: var(--cpqd-accent); background: #e6f7fb; }
.cpqd .cpqd-tier.is-active strong { color: #007f9f; }
.cpqd .cpqd-quote { margin-top: 13px; padding-top: 12px; border-top: 1px solid #dae4e7; font-size: 14px; }
.cpqd .cpqd-price-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; min-height: 2.75em; margin: 0; }
.cpqd .cpqd-price-line > strong { text-align: right; }
.cpqd .cpqd-total { font-size: 16px; }
.cpqd .cpqd-total strong { color: #007f9f; }
.cpqd .cpqd-saving { height: 3em; line-height: 1.5; overflow: auto; margin: 0; color: #007f9f; font-weight: 600; }
.cpqd .cpqd-context { height: 3em; line-height: 1.5; overflow: auto; margin: 0; font-size: 12px; color: #5c686b; }
.cpqd .cpqd-status { height: 3em; line-height: 1.5; overflow: auto; margin: 4px 0 0; font-size: 12px; color: #5c686b; }
.cpqd .cpqd-results.is-unavailable { visibility: hidden; }
.cpqd .cpqd-quote[aria-busy="true"] .cpqd-results { opacity: .55; }
.cpqd .cpqd-price-line .amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cpqd .woocommerce-price-suffix { font-size: 11px; font-weight: 400; }
.cpqd[hidden] { display: none !important; }
@media (max-width: 480px) { .cpqd { padding: 12px; } }
@media (prefers-reduced-motion: reduce) { .cpqd .cpqd-tier { transition: none; } }