/* Pro Pipes Plumbing: the review page (/review/) only. Apex Solved, 7 Oct 2026.
   Loaded after site.css and leans on its tokens, with fallbacks so this page still holds if a token is renamed.
   Alex's spec (7 Oct): a dark page (palette C steel blue), one white card that opens on "How would you rate us?" (no logo in the card,
   Alex 7 Oct) and a vertical list of five rating rows, 5 stars at the top down to 1 star. The 5 and 4 star rows are links straight to
   Google and the rest are buttons, styled the same. Calm on purpose: no popups, nothing that flashes, works with one thumb on a phone,
   a keyboard or a screen reader. */

.no-js .js-only{display:none!important}

/* the steel blue page behind the card; the footer is one shade deeper, and a hairline marks where it starts */
.rv{background:var(--pipe,#1E3A5F);padding:clamp(24px,6vw,64px) 0 clamp(36px,7vw,72px)}
.review-page .site-footer{border-top:1px solid rgba(255,255,255,.12)}

/* the one white card */
.rv-card{max-width:520px;margin:0 auto;background:#fff;color:var(--ink,#16273D);border-radius:16px;padding:clamp(22px,5vw,36px) clamp(18px,5vw,36px) clamp(24px,5vw,36px);box-shadow:0 18px 48px rgba(0,0,0,.35);text-align:center}

/* screen 1: the title, "Rate Us" and the list */
.rv-h1{font-size:clamp(1.7rem,5.6vw,2.2rem);line-height:1.1;margin:0 0 18px;max-width:none}
.rv-label{display:block;text-align:left;font-weight:700;font-size:1.02rem;margin:0 0 10px}
.rv-options{display:grid;gap:10px}
.rv-opt{display:grid;grid-template-columns:132px auto;justify-content:center;align-items:center;column-gap:12px;width:100%;min-height:56px;padding:10px 14px;margin:0;border:1.5px solid #8593A5;border-radius:var(--radius,6px);background:#fff;color:var(--ink,#16273D);font:inherit;font-size:1rem;font-weight:600;line-height:1.2;text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .15s ease,background .15s ease,transform .15s var(--ease,ease)}
.rv-opt:hover{border-color:var(--pipe,#1E3A5F);background:var(--mist,#EEF2F6)}
.rv-opt:active{transform:scale(.99)}
.rv-opt:focus-visible{outline:3px solid var(--pipe,#1E3A5F);outline-offset:2px}
.rv-opt.is-picked{border-color:var(--pipe,#1E3A5F);box-shadow:inset 0 0 0 1px var(--pipe,#1E3A5F)}
.rv-opt-stars{display:inline-flex;gap:3px;color:var(--brass,#C8742B)}
.rv-opt-stars svg{width:24px;height:24px;display:block;fill:currentColor}
.rv-opt-label{color:var(--slate,#5B6B80);font-weight:600;white-space:nowrap}
@media (max-width:359px){.rv-opt{grid-template-columns:112px auto;padding:10px 10px}.rv-opt-stars{gap:2px}.rv-opt-stars svg{width:20px;height:20px}}
@media (prefers-reduced-motion:reduce){.rv-opt{transition:none}.rv-opt:active{transform:none}}

/* once a 1 to 3 star rating is picked, the list steps aside and the feedback form takes the same frame */
.rv-card.is-rated .rv-rate,.rv-card.is-done .rv-rate{display:none}

/* the panels that answer the rating: with JavaScript only the open one shows (a class, not the hidden attribute,
   because site.css makes [hidden] !important and the no JavaScript fallback below needs the panels visible) */
.js .rv-panel{display:none}
.js .rv-panel.is-open{display:block}
.rv-panel{text-align:center;animation:rv-in .25s ease both}
@keyframes rv-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rv-panel{animation:none}}
.rv-h2{font-size:clamp(1.4rem,4.6vw,1.75rem);line-height:1.15;margin:0 0 .4em}
.rv-h2:focus{outline:none}
.rv-panel>p{max-width:40ch;margin:0 auto 14px;text-wrap:pretty}
.rv-lead{color:var(--slate,#5B6B80);font-size:1.02rem}
.rv-lead a{font-weight:700;white-space:nowrap}

/* the feedback form (1 to 3 stars) */
.rv-form{text-align:left;margin-top:4px}
.rv-form .field-msg{margin:0 0 2px}
.rv-form .submit-row{margin-top:4px}
.rv-form .submit-row .btn{width:100%;min-height:54px;font-size:1.06rem}
.rv-form button[disabled]{opacity:.7;cursor:progress}

/* a mis-tap on a phone should not be final */
.rv-again{margin:14px auto 0}
.rv-link-btn{background:none;border:0;padding:10px 6px;margin:0;font:inherit;font-size:.95rem;color:var(--slate,#5B6B80);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rv-link-btn:hover{color:var(--ink,#16273D)}
.rv-link-btn:focus-visible{outline:3px solid var(--pipe,#1E3A5F);outline-offset:2px;border-radius:4px}

/* no JavaScript: the rating list is hidden, so the feedback form shows (no Google line on this path, Alex 7 Oct);
   after a plain post the browser lands on /review/?sent=1#sent and the thank you shows on its own */
.rv-noscript{max-width:40ch;margin:0 auto 6px;color:var(--slate,#5B6B80)}
.no-js #sent:not(:target){display:none}
.no-js .rv-card:has(#sent:target) .rv-rate,.no-js .rv-card:has(#sent:target) .rv-panel:not(#sent){display:none}
.no-js .rv-panel[data-panel="feedback"]{margin-top:26px;padding-top:26px;border-top:1px solid var(--line,rgba(91,107,128,.24))}

/* the line under the card, on the steel blue */
.rv-call{text-align:center;color:rgba(255,255,255,.78);margin:22px 0 0;font-size:.98rem}
.rv-call a{color:#fff;font-weight:700;white-space:nowrap}

@media print{.rv{background:#fff}.rv-card{box-shadow:none;border:1px solid #ccc}.rv-options,.rv-form,.rv-again{display:none!important}.rv-call,.rv-call a{color:#000}}