.cpsq {
--cpsq-accent: #ed8f0c;
--cpsq-accent-deep: #c96a00;
--cpsq-navy: #051742;
--cpsq-ink: #1f2933;
--cpsq-muted: #5b6875;
--cpsq-line: #dfe3e8;
--cpsq-soft: #f6f7f9;
--cpsq-radius: 14px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
gap: 24px;
align-items: start;
max-width: 1120px;
margin: 0 auto;
font-family: Montserrat, system-ui, sans-serif;
color: var(--cpsq-ink);
font-size: 15px;
line-height: 1.5;
text-align: left;
}
.cpsq *, .cpsq *::before, .cpsq *::after { box-sizing: border-box; }
.cpsq-form {
background: #fff;
border: 1px solid var(--cpsq-line);
border-radius: var(--cpsq-radius);
padding: 28px;
}
.cpsq-head { margin-bottom: 20px; }
.cpsq-eyebrow {
margin: 0 0 4px;
font-size: 13px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cpsq-accent-deep);
}
.cpsq-title {
margin: 0;
font-family: Oswald, Impact, sans-serif;
font-weight: 600;
font-size: clamp(26px, 3vw, 34px);
line-height: 1.1;
text-transform: uppercase;
color: var(--cpsq-navy);
}
.cpsq fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cpsq legend {
padding: 0;
margin-bottom: 10px;
font-family: Oswald, Impact, sans-serif;
font-size: 17px;
font-weight: 500;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--cpsq-navy);
}
.cpsq label { display: block; font-size: 13px; font-weight: 600; color: var(--cpsq-muted); margin: 0 0 4px; }
.cpsq select,
.cpsq input[type="text"],
.cpsq input[type="number"] {
width: 100%;
height: 46px;
padding: 0 12px;
border: 1px solid var(--cpsq-line);
border-radius: 10px;
background: #fff;
font: inherit;
color: var(--cpsq-ink);
margin: 0 0 12px;
transition: border-color .15s, box-shadow .15s;
}
.cpsq select:focus,
.cpsq input:focus-visible,
.cpsq button:focus-visible,
.cpsq summary:focus-visible,
.cpsq a:focus-visible {
outline: none;
border-color: var(--cpsq-accent);
box-shadow: 0 0 0 3px rgba(237, 143, 12, .28);
} .cpsq-route {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 12px;
align-items: end;
}
.cpsq-place { min-width: 0; }
.cpsq-place .cpsq-place-label {
margin-bottom: 8px;
font-family: Oswald, Impact, sans-serif;
font-size: 17px;
font-weight: 500;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--cpsq-navy);
}
.cpsq-place input { margin: 0 !important; }
.cpsq-route .cpsq-swap { margin-bottom: 2px; }
.cpsq-combo { position: relative; }
.cpsq-options {
position: absolute;
z-index: 20;
top: calc(100% + 4px);
left: 0;
right: 0;
max-height: 280px;
overflow-y: auto;
margin: 0;
padding: 6px;
list-style: none;
background: #fff;
border: 1px solid var(--cpsq-line);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(5, 23, 66, .14);
}
.cpsq-options[hidden] { display: none; }
.cpsq-option,
.cpsq-option-empty {
margin: 0;
padding: 10px 12px;
border-radius: 8px;
font-size: 14px;
line-height: 1.35;
}
.cpsq-option { cursor: pointer; }
.cpsq-option[aria-selected="true"] { background: #fff6ea; color: var(--cpsq-accent-deep); }
.cpsq-option-empty { color: var(--cpsq-muted); }
.cpsq-coverage {
margin: 10px 0 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--cpsq-line);
font-size: 13px;
color: var(--cpsq-muted);
}
.cpsq-swap {
display: grid;
place-items: center;
width: 42px;
height: 42px;
padding: 0;
border: 1px solid var(--cpsq-line);
border-radius: 50%;
background: #fff;
color: var(--cpsq-navy);
cursor: pointer;
transition: transform .2s, color .15s, border-color .15s;
}
.cpsq-swap:hover { color: var(--cpsq-accent-deep); border-color: var(--cpsq-accent); transform: rotate(180deg); } .cpsq-service { padding-bottom: 20px !important; margin-bottom: 20px !important; border-bottom: 1px solid var(--cpsq-line) !important; }
.cpsq-services { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cpsq-svc {
position: relative;
display: flex !important;
flex-direction: column;
gap: 2px;
margin: 0 !important;
padding: 14px 14px 14px 44px;
border: 1.5px solid var(--cpsq-line);
border-radius: 12px;
cursor: pointer;
color: var(--cpsq-ink) !important;
font-weight: 400 !important;
transition: border-color .15s, background .15s;
}
.cpsq-svc:hover { border-color: var(--cpsq-accent); }
.cpsq-svc:has(input:checked) { border-color: var(--cpsq-accent); background: #fff6ea; }
.cpsq-svc input { position: absolute; left: 14px; top: 16px; width: 18px; height: 18px; margin: 0; accent-color: var(--cpsq-accent); }
.cpsq-svc-n { font-weight: 700; font-size: 15px; }
.cpsq-svc-d { font-size: 13px; color: var(--cpsq-muted); }
.cpsq-svc-p { margin-top: 6px; font-family: Oswald, Impact, sans-serif; font-size: 22px; font-weight: 600; color: var(--cpsq-navy); font-variant-numeric: tabular-nums; } .cpsq-pkg { padding-bottom: 20px !important; margin-bottom: 20px !important; border-bottom: 1px solid var(--cpsq-line) !important; }
.cpsq-sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.cpsq-size {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px;
border: 1.5px solid var(--cpsq-line);
border-radius: 12px;
background: #fff;
color: var(--cpsq-ink);
text-align: left;
font: inherit;
cursor: pointer;
transition: border-color .15s, background .15s;
}
.cpsq-size:hover { border-color: var(--cpsq-accent); }
.cpsq-size[aria-pressed="true"] { border-color: var(--cpsq-accent); background: #fff6ea; }
.cpsq-size-n { font-weight: 700; font-size: 15px; }
.cpsq-size-d { font-size: 12px; color: var(--cpsq-muted); line-height: 1.35; }
.cpsq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cpsq-row-3 { grid-template-columns: repeat(3, 1fr); }
.cpsq-stepper { display: flex; }
.cpsq-stepper input { text-align: center; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; -moz-appearance: textfield; }
.cpsq-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.cpsq-stepper button {
flex: 0 0 46px;
height: 46px;
border: 1px solid var(--cpsq-line);
background: var(--cpsq-soft);
color: var(--cpsq-navy);
font-size: 20px;
cursor: pointer;
padding: 0;
}
.cpsq-stepper button:first-child { border-radius: 10px 0 0 10px; }
.cpsq-stepper button:last-child { border-radius: 0 10px 10px 0; }
.cpsq-stepper button:hover { background: #fff6ea; color: var(--cpsq-accent-deep); }
.cpsq-dims summary { cursor: pointer; font-weight: 600; color: var(--cpsq-accent-deep); font-size: 14px; }
.cpsq-hint { margin: 6px 0 10px; font-size: 13px; color: var(--cpsq-muted); } .cpsq-check {
display: flex !important;
gap: 12px;
align-items: flex-start;
padding: 12px 0;
margin: 0 !important;
cursor: pointer;
font-size: 15px !important;
color: var(--cpsq-ink) !important;
font-weight: 400 !important;
}
.cpsq-check + .cpsq-check { border-top: 1px solid var(--cpsq-line); }
.cpsq-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cpsq-accent); flex: none; }
.cpsq-check strong { display: block; font-weight: 600; }
.cpsq-check small { display: block; color: var(--cpsq-muted); font-size: 13px; }
.cpsq-sub { padding-left: 32px; }
.cpsq-sub[hidden] { display: none; }
.cpsq-error {
margin: 16px 0 0;
padding: 12px 14px;
border-radius: 10px;
background: #fdecea;
color: #9b1c1c;
font-size: 14px;
}
.cpsq-error[hidden] { display: none; } .cpsq-result {
position: sticky;
top: 100px;
background: var(--cpsq-navy);
color: #fff;
border-radius: var(--cpsq-radius);
padding: 28px;
}
.cpsq-empty p { margin: 0; color: rgba(255, 255, 255, .8); font-size: 16px; }
.cpsq-quote[hidden], .cpsq-empty[hidden] { display: none; }
.cpsq-zone { margin: 0 0 16px; }
.cpsq-zone span {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
background: rgba(237, 143, 12, .18);
color: #ffb54d;
font-size: 13px;
font-weight: 600;
}
.cpsq-total-label { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .7); }
.cpsq-total {
margin: 0;
font-family: Oswald, Impact, sans-serif;
font-weight: 600;
font-size: 48px;
line-height: 1.1;
color: #fff;
font-variant-numeric: tabular-nums;
}
.cpsq-eta { margin: 4px 0 20px; color: rgba(255, 255, 255, .85); font-size: 14px; }
.cpsq-lines {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px 16px;
margin: 0 0 24px;
padding: 16px 0 0;
border-top: 1px solid rgba(255, 255, 255, .15);
font-size: 14px;
}
.cpsq-lines dt { color: rgba(255, 255, 255, .8); }
.cpsq-lines dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cpsq-ctas { display: grid; gap: 10px; }
.cpsq-btn {
display: block;
padding: 14px 20px;
border-radius: 40px;
text-align: center;
text-decoration: none !important;
font-family: Oswald, Impact, sans-serif;
font-size: 16px;
font-weight: 500;
letter-spacing: .04em;
text-transform: uppercase;
transition: background .15s, color .15s;
}
.cpsq-btn[hidden] { display: none; }
.cpsq-btn-primary { background: var(--cpsq-accent); color: #fff !important; }
.cpsq-btn-primary:hover { background: var(--cpsq-accent-deep); }
.cpsq-btn-ghost { border: 1.5px solid rgba(255, 255, 255, .4); color: #fff !important; }
.cpsq-btn-ghost:hover { border-color: #fff; }
.cpsq-note { margin: 20px 0 0; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
@media (max-width: 900px) {
.cpsq { grid-template-columns: 1fr; }
.cpsq-result { position: static; }
.cpsq-sizes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.cpsq-form, .cpsq-result { padding: 20px 16px; }
.cpsq-route { grid-template-columns: 1fr; }
.cpsq-services { grid-template-columns: 1fr; }
.cpsq-swap { justify-self: center; transform: rotate(90deg); }
.cpsq-swap:hover { transform: rotate(270deg); }
.cpsq-row-3 { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.cpsq-total { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
.cpsq * { transition: none !important; }
}