/* ---------------------------------------------------------------------------
   Customer-facing review pages.
   Layout, type and colour follow the existing GatherUp pages in the project
   folder: dark grey rule across the top, centred gold logo, bold grey
   headings, dark pill buttons, small centred business footer.
   --------------------------------------------------------------------------- */

:root {
    --ink:        #4a4a4a;
    --ink-soft:   #5a5a5a;
    --body:       #555555;
    --muted:      #767676;
    --rule:       #4d4d4d;
    --hairline:   #dfe6ec;
    --field-bg:   #f4f4f4;
    --field-line: #d8d8d8;
    --button:     #5c5c5c;
    --button-ink: #ffffff;
    --gold:       #d4af5f;
    --gold-deep:  #b8912f;
    --page:       #ffffff;
    --shell:      #ffffff;
    --error:      #b3261e;
    --success:    #2e6b3f;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    background: var(--page);
    color: var(--body);
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.topbar {
    height: 10px;
    background: var(--rule);
}

.shell {
    max-width: 620px;
    margin: 0 auto;
    padding: 34px 22px 60px;
    background: var(--shell);
    text-align: center;
}

.logo {
    display: block;
    margin: 8px auto 26px;
    width: 120px;
    height: auto;
}

h1 {
    font-size: 19px;
    line-height: 1.35;
    font-weight: bold;
    color: var(--ink);
    margin: 0 0 22px;
}

.lede {
    font-size: 16px;
    line-height: 1.6;
    color: var(--body);
    margin: 0 auto 20px;
    max-width: 520px;
}

.section-label {
    font-size: 16px;
    color: var(--body);
    margin: 0 0 16px;
}

/* The status line above the quote on the 1-3 star page. Left-aligned with the
   quote it introduces, and in the body weight - it reassures, it does not
   announce. Distinct from .field-label, which stays bold for the short
   one-line caption the four-star page uses. */
.review-status {
    text-align: left;
    font-size: 15px;
    line-height: 1.6;
    color: var(--body);
    margin: 0 0 12px;
}

.field-label {
    display: block;
    font-weight: bold;
    color: var(--ink);
    text-align: left;
    margin: 0 0 10px;
}

/* Visible to screen readers, invisible on screen. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Star rating --------------------------------------------------------- */

.stars {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 18px 0 26px;
    direction: rtl;              /* lets :hover ~ style the stars to the left */
}

.stars input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.stars label {
    cursor: pointer;
    line-height: 1;
    color: var(--gold);
    transition: transform .12s ease;
}

.stars label svg { display: block; width: 46px; height: 46px; }
.stars label:hover,
.stars label:hover ~ label,
.stars input:focus-visible + label,
.stars input:checked + label,
.stars input:checked ~ label { color: var(--gold-deep); }
.stars label:hover .star-fill,
.stars label:hover ~ label .star-fill,
.stars input:checked + label .star-fill,
.stars input:checked ~ label .star-fill { fill: currentColor; }
.stars label:hover { transform: scale(1.06); }
.stars input:focus-visible + label { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 4px; }

.star-hint {
    font-size: 13px;
    color: var(--muted);
    min-height: 20px;
    margin: -12px 0 20px;
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
    display: inline-block;
    border: 0;
    border-radius: 999px;
    padding: 15px 34px;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    background: var(--button);
    color: var(--button-ink);
    transition: background .15s ease;
}

.btn:hover  { background: #4a4a4a; }
.btn:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.btn-outline {
    background: #ffffff;
    color: var(--ink);
    border: 2px solid var(--ink);
    padding: 13px 30px;
}

.btn-outline:hover { background: #f6f6f6; }

.btn-block { display: block; width: 100%; max-width: 320px; margin: 0 auto; }

/* --- Review quote + copy ------------------------------------------------- */

.review-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    text-align: left;
    margin: 14px 0 30px;
}

.review-quote {
    flex: 1 1 260px;
    font-style: italic;
    color: var(--body);
    padding-left: 18px;
    margin: 0;
    word-break: break-word;
}


/* --- Google review card -------------------------------------------------- */

.review-site {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 6px 0 34px;
}

/* A quiet line under the client's own words on the five-star page, reassuring
   them that a short note on Google is enough - they have already written once
   and should not feel they owe Google an essay. */
.review-note {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}

/* The two steps above the quote card. Numbered, tight, and left-aligned so
   they read as instructions rather than prose. */
.steps {
    max-width: 420px;
    margin: 18px auto 0;
    padding: 0 0 0 22px;
    text-align: left;
    font-size: 15px;
    line-height: 1.7;
    color: var(--body);
}

.steps li { margin: 0 0 4px; }

/* The client's own words, presented as a card rather than a labelled field. */
.review-block.quote-card {
    display: block;
    max-width: 460px;
    margin: 20px auto 0;
    padding: 18px 20px;
    background: #faf8f4;
    border: 1px solid #ece7dd;
    border-left: 3px solid var(--gold);
    border-radius: 6px;
    text-align: left;
}

.review-block.quote-card .review-quote {
    margin: 0;
    padding: 0;
    flex: 0 1 auto;
}

/* The "Feedback copied!" confirmation under the button. */
.copy-status {
    margin: 10px 0 0;
    min-height: 20px;
    font-size: 13.5px;
    color: var(--muted);
}

.copy-status.is-copied { color: var(--success, #2e6b3f); font-weight: 600; }

/* The question under the heading carries the ask, so it leads. */
.lede-question { font-weight: 600; color: var(--ink); margin-bottom: 8px; }

/* The five-star page's Google mark.

   It replaced a panel that showed a full Google wordmark under a green
   "You're Logged In" badge. The page cannot know whether anyone is signed in,
   so that badge was a claim we had no basis for, and the whole panel imitated
   Google's own interface. A plain G that links straight through says the same
   thing honestly. */
/* Royal blue: the one action on this page, unmistakably primary, without
   borrowing Google's own button colour.

   Chosen on three numbers rather than by eye:
     - white label text measures 8.29:1, comfortably past AAA (7:1), so it has
       margin rather than scraping the line;
     - CIELAB L* 33.3, against 18.5 for the #0F2C59 it replaces - close to
       twice the perceptual lightness, which is the "too dark" complaint;
     - dE 35 from Google Blue #1a73e8, far enough that nobody reads the button
       as an official Google control.
   Hue sits at 278deg, near the complement of the gold logo (85deg), which is
   why navy-and-gold reads as deliberate here rather than accidental. */
.btn.btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #1B4F8A;
    color: #ffffff;
    border: 2px solid #1B4F8A;
    padding-left: 14px;      /* the tile brings its own optical padding */
}

.btn.btn-google:hover,
.btn.btn-google:focus-visible { background: #164272; border-color: #164272; color: #ffffff; }

/* The G sits on a white tile, and on this blue the tile is load-bearing again.
   Placed straight on #1B4F8A the mark's arcs measure blue 2.33:1, red 2.11:1
   and green 2.71:1 - all under the 3:1 a graphic needs to read at all. On
   white the same arcs measure 3.56, 3.92 and 3.06:1.

   The rule to preserve is the general one, not this palette: every arc of the
   G must clear 3:1 against whatever it is placed on. A test recomputes that
   from the stylesheet, so changing either colour has to face it again. */
.g-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
}

/* letter-spacing is set on the button for the label; it would otherwise add a
   phantom gap after the tile as well. */
.btn.btn-google .btn-label { letter-spacing: .04em; }

/* Quieter treatment for anything below five stars. The Google card is still
   there and still works - it is simply not the loudest thing on the page, so
   only a five-star client is actively pointed at it.
   The button stays at least 40px tall so it remains comfortable to tap. */

.review-site.is-quiet {
    gap: 9px;
    /* Room to breathe between the client's own words and the Google card, now
       that the "Click a review site below" label no longer separates them. */
    margin: 34px 0 28px;
}

    width: 150px;
    padding: 22px 12px 13px;
}


.review-site.is-quiet .btn {
    /* White with an outline, the same treatment the sample pages give their
       secondary button, so Write a Review reads as an option rather than an
       instruction. ~41px tall: a little under the 44px ideal for a phone tap
       target, but comfortably usable, and deliberately quieter than the
       full-size version. */
    background: #ffffff;
    color: var(--ink);
    border: 2px solid var(--ink);
    padding: 10px 20px;
    font-size: 12.5px;
    letter-spacing: .03em;
}

.review-site.is-quiet .btn:hover { background: #f6f6f6; color: var(--ink); }

@media (max-width: 480px) {
    /* The full-width button rule below would undo the smaller size. */
    .review-site.is-quiet .btn { width: auto; }
}

/* --- Feedback form ------------------------------------------------------- */

.feedback-row {
    display: flex;
    gap: 16px;
    align-items: stretch;
    margin: 8px 0 8px;
}

.strength {
    flex: 0 0 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 2px;
}

.strength-track {
    position: relative;
    flex: 1 1 auto;
    width: 8px;
    border-radius: 4px;
    background: #d5d5d5;
    min-height: 150px;
}

.strength-knob {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 50%);
    bottom: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e03b2f;
    transition: bottom .25s ease, background .25s ease;
}

.strength-caption {
    font-size: 11px;
    font-weight: bold;
    color: #9a9a9a;
    line-height: 1.2;
    margin-top: 8px;
}

.textarea-wrap { position: relative; flex: 1 1 auto; }

textarea {
    width: 100%;
    min-height: 190px;
    resize: vertical;
    padding: 16px 16px 34px;
    border: 1px solid var(--field-line);
    border-radius: 3px;
    background: var(--field-bg);
    color: var(--ink);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
}

textarea:focus { outline: 2px solid var(--gold-deep); outline-offset: 1px; }

.char-count {
    position: absolute;
    right: 14px;
    bottom: 10px;
    font-size: 13px;
    color: #9a9a9a;
    pointer-events: none;
}

.rating-line {
    font-size: 17px;
    font-weight: bold;
    color: var(--ink);
    margin: 0 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.rating-line select {
    font-family: inherit;
    font-size: 16px;
    font-weight: bold;
    color: var(--ink);
    padding: 7px 10px;
    border: 1px solid var(--field-line);
    border-radius: 3px;
    background: #ffffff;
}

.divider {
    border: 0;
    border-top: 1px solid #e6eef4;
    margin: 26px 0 22px;
}

.consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    text-align: left;
    max-width: 520px;
    margin: 26px auto 14px;
    font-size: 15px;
    line-height: 1.55;
}

.consent input { margin-top: 4px; flex: 0 0 auto; width: 16px; height: 16px; }

.policy-note {
    font-size: 13px;
    color: var(--muted);
    margin: 6px 0 0;
}

.policy-note a { color: var(--muted); }

.direct-feedback-action { margin: 0 0 34px; }

/* --- Compact shell ------------------------------------------------------- */
/* The 1-3 star page has the most to say. Everything below trims surrounding
   space rather than content, so the whole page still fits one screen. */

.shell.is-compact { padding-top: 26px; padding-bottom: 22px; }
.shell.is-compact .logo { width: 88px; margin-bottom: 18px; }
.shell.is-compact h1 { margin-bottom: 16px; }
.shell.is-compact .lede { margin-bottom: 15px; }
.shell.is-compact .review-block { margin: 12px 0 0; }
.shell.is-compact .review-site.is-quiet { margin: 36px 0 18px; }
.shell.is-compact .direct-feedback-action { margin-bottom: 24px; }
.shell.is-compact .venue { margin-top: 20px; }

/* The colophon repeats the business name printed directly above it in the
   venue block, so on the one page that needs the room it is dropped rather
   than shrunk. Nothing is lost - the name is still right there. */
.shell.is-compact .colophon { display: none; }

/* --- Share shell (five stars) -------------------------------------------- */
/* The five-star page asks for one thing and then hands the visitor off to
   Google. Everything it needs - the ask, the two steps, their own words and
   the button - has to be visible at once, or the sequence breaks halfway.
   These rules only tighten space; the wording and every element stay put. */

.shell.is-share { padding-top: 26px; padding-bottom: 30px; }
.shell.is-share .logo { width: 96px; margin: 4px auto 18px; }
.shell.is-share h1 { margin-bottom: 16px; }
.shell.is-share .steps { margin-top: 14px; }
.shell.is-share .review-block.quote-card { margin-top: 16px; }
/* The G used to float between the quote and the button and did the job of
   separating them. With it inside the button, that space has to be declared. */
.shell.is-share .review-site { margin: 26px 0 16px; }
.shell.is-share .venue { margin-top: 24px; }

/* Same reasoning as the compact shell: the colophon repeats the business name
   printed directly above it, so it is the first thing to go. */
.shell.is-share .colophon { display: none; }

/* --- Footer -------------------------------------------------------------- */

.venue {
    margin: 34px 0 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--body);
}

.venue strong { color: var(--ink); }
.venue a { color: var(--body); text-decoration: none; }

/* "Contact Us" - the same grey (#767676) the email footer uses, so the two
   channels look like one system. Deliberately quiet: on the five-star page it
   sits below a bold blue call to action and must not compete with it, and on
   the rating page it is the alternative for someone who would rather talk to a
   person than leave a rating. */
.contact-line {
    margin: 18px 0 0;
    font-size: 13px;
    line-height: 1.6;
}

.contact-line a {
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.contact-line a:hover,
.contact-line a:focus-visible { color: var(--ink); }

/* The compact and share shells drop the colophon for room; the contact link
   stays, because it is the only way off these pages to a human. */
.shell.is-compact .contact-line,
.shell.is-share .contact-line { margin-top: 16px; }

.colophon {
    margin: 22px 0 0;
    font-size: 13px;
    color: var(--muted);
}

/* The Google invitation on the 1-4 star pages.

   It is deliberately the quietest thing on the page: available to anyone who
   wants it, invisible to anyone who does not. White, a hairline border, small
   title-case text rather than the shouty uppercase used by the real buttons,
   and a wide gap above it so it reads as a separate afterthought rather than
   as the next step after the shop's phone number.

   The text is #767676 - the lightest grey that still meets the contrast
   minimum against white. Lighter looks better here but stops being readable
   for anyone with less than perfect eyesight, which is not a trade worth
   making on a page a client is already unhappy with. */
.google-cta { margin: 54px 0 0; }

.btn.btn-faint {
    background: #ffffff;
    color: #767676;
    border: 1px solid #dcdcdc;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.btn.btn-faint:hover,
.btn.btn-faint:focus-visible {
    background: #fafafa;
    border-color: #c4c4c4;
    color: #5f5f5f;
}

.shell.is-compact .google-cta { margin-top: 46px; }

/* Smaller again on a phone, where the page is tighter and the button should
   take up as little of it as possible. */
@media (max-width: 480px) {
    /* The note under the quote added a line on the five-star page and tipped it
       just past one phone screen. Tightening the space around the Google mark
       brings it back without touching any wording. */
    .review-note { margin-top: 8px; }
    .review-site { margin: 2px 0 22px; gap: 10px; }

    .google-cta { margin-top: 44px; }
    /* width:auto beats the full-width .btn rule further down the file, which
       would otherwise stretch this across the whole screen - the opposite of
       inconspicuous. Two class names outrank one, so order does not matter. */
    .btn.btn-faint { width: auto; padding: 6px 13px; font-size: 10.5px; }
    .shell.is-compact .google-cta { margin-top: 38px; }
}

/* --- Messages ------------------------------------------------------------ */

.notice {
    max-width: 520px;
    margin: 0 auto 22px;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 15px;
    text-align: left;
}

.notice-error   { background: #fdecea; color: var(--error); }
.notice-success { background: #eaf5ee; color: var(--success); }

@media (max-width: 480px) {
    .shell { padding: 26px 16px 48px; }
    h1 { font-size: 18px; }
    .stars label svg { width: 40px; height: 40px; }
    .review-block { flex-direction: column; align-items: stretch; }
    /* flex-basis is the main-axis size, so the 260px basis that sets a minimum
       WIDTH in a row becomes a 260px minimum HEIGHT once the block stacks -
       leaving a large empty gap under the quote. Reset it here. */
    .review-quote { flex: 0 1 auto; padding-left: 0; }
    .btn { width: 100%; }
}

@media print {
    .btn, .stars { display: none; }
}