/* The customer pages — rating, review sites, thank-you, unsubscribe and every dead end.

   Layout: legacy's (RT - SendReceive-Updated: reviews/review-feedback.css, review-destinations.css, review-complete.css,
   review-state.css and NFC/nfc-flow.css, July 2026) — the card with the business's logo under a small label, "Tap the option
   that best matches your experience", choose-then-Continue, the review sites as cards with their icons. The owner asked for it
   back on 2026-09-23. Class names are legacy's, so the two can be compared line by line.

   Colours and type: a neutral look in the Manrope font (decision S2, 2026-09-24) — ink and slate, flat buttons, no brand's
   red and no gradient — so the business's logo or name is the only brand on the page. The status colours (green for done,
   amber for "not right now", red for an error) are the client portal's. */

@font-face {
    font-family: Manrope;
    src: url("../fonts/manrope-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
}

:root {
    --ink: #252e4b;
    --copy: #697080;
    --muted: #868c9b;
    --accent: #3b4a6b;
    --accent-soft: #eef1f7;
    --accent-line: #cfd6e4;
    --line: #e8e9ee;
    --field: #d9dce5;
    --panel: #f9fafc;
    --warm: #f6f8fb;
    --good: #2f8a5b;
    --good-soft: #e8f5ee;
    --good-line: #cfe9dc;
    --fair: #c58a1a;
    --fair-soft: #fdf5e4;
    --fair-line: #f1d9a6;
    --poor: #c2413b;
    --poor-soft: #fbeceb;
    --poor-line: #f1cfcc;
    --gold: #f5b83d;
    --button: #252e4b;
    --button-shadow: 0 8px 22px rgba(37, 46, 75, .14);
    --focus: 0 0 0 4px rgba(59, 74, 107, .18);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    background: var(--warm);
    color: var(--ink);
    font-family: Manrope, "Segoe UI", system-ui, -apple-system, sans-serif;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- the page and its card ------------------------------------------------------------------------------------- */

.rt-feedback-page { min-height: 100vh; padding: 28px 16px 48px; }
.rt-feedback-shell { width: 100%; max-width: 620px; margin: 0 auto; }

.rt-feedback-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(37, 46, 75, .08);
}

.rt-feedback-brand {
    padding: 26px 30px 18px;
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.rt-feedback-kicker {
    margin: 0 0 14px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.rt-company-name {
    margin: 0;
    color: var(--ink);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.rt-company-logo {
    display: block;
    width: auto;
    max-width: min(230px, 100%);
    height: auto;
    max-height: 92px;
    margin: 0 auto;
    border: 0;
    object-fit: contain;
}

.rt-feedback-content { padding: 28px 30px 32px; }

/* The staff preview (/t-…): says plainly that nothing counts. */
.rt-preview-banner {
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid var(--fair-line);
    border-radius: 12px;
    background: #fff6e0;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
}

/* Something the customer needs to fix or retry. */
.rt-alert {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--poor-line);
    border-left: 3px solid var(--poor);
    border-radius: 10px;
    background: var(--poor-soft);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

/* ---- the rating --------------------------------------------------------------------------------------------------- */

.rt-feedback-question {
    max-width: 480px;
    margin: 0 auto 24px;
    color: var(--ink);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.4;
    text-align: center;
}

.rt-rating-selector { margin: 0; text-align: center; }

.rt-rating-instruction { margin: -10px 0 18px; color: var(--copy); font-size: 13px; line-height: 1.55; }

.rt-rating-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

.rt-star-options,
.rt-face-options {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin: 0 auto;
}

.rt-face-options { flex-wrap: wrap; max-width: 510px; }

/* The real control: a radio button, kept for keyboards and screen readers, drawn by the card beside it. */
.rt-rating-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }

.rt-rating-option {
    -webkit-tap-highlight-color: transparent;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    touch-action: manipulation;
    user-select: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease;
}

.rt-rating-input:focus-visible + .rt-rating-option { border-color: var(--accent); box-shadow: var(--focus); }

.rt-rating-option:active { transform: scale(.97); }

.rt-face-option {
    display: flex;
    flex: 1 1 82px;
    max-width: 94px;
    min-height: 104px;
    padding: 11px 7px 9px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.rt-face-option .face { display: block; width: 52px; height: 52px; margin-bottom: 7px; }

.rt-face-label { color: var(--copy); font-size: 11px; font-weight: 700; line-height: 1.25; }

.rt-rating-input:checked + .rt-face-option {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 8px 20px rgba(59, 74, 107, .13);
}

.rt-rating-input:checked + .rt-face-option .rt-face-label { color: var(--accent); }

.rt-star-option {
    display: grid;
    flex: 1 1 0;
    min-width: 0;
    max-width: 82px;
    min-height: 68px;
    padding: 7px 3px 6px;
    place-items: center;
    color: var(--field);                   /* the star, until it is filled */
}

.rt-star-option .star { display: block; width: 38px; height: 38px; transition: color .15s ease, transform .15s ease; }

.rt-star-number { color: var(--copy); font-size: 11px; font-weight: 700; line-height: 1; }

/* Filled up to the one chosen (rating.js); the chosen one is gold even without scripts. */
.rt-star-option.is-filled,
.rt-rating-input:checked + .rt-star-option { color: var(--gold); }
.rt-star-option.is-filled .star { transform: translateY(-1px); }

.rt-rating-input:checked + .rt-star-option {
    border-color: #ebc15f;
    background: #fff8e6;
    box-shadow: 0 8px 20px rgba(214, 160, 40, .14);
}

.rt-rating-input:checked + .rt-star-option .rt-star-number { color: #8a6517; }

.rt-selection-safety { margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.rt-confirm-panel {
    margin-top: 20px;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--warm);
}

/* With scripts, the panel waits for a choice — then says what was chosen. Without, Continue is simply there. */
.is-enhanced .rt-confirm-panel { display: none; }
.is-enhanced .rt-confirm-panel.is-open { display: block; animation: rtConfirmIn .18s ease-out; }

.rt-confirm-summary { margin: 0 0 4px; color: var(--ink); font-size: 15px; line-height: 1.45; }
.rt-confirm-help { margin: 0 0 13px; color: var(--muted); font-size: 12px; line-height: 1.45; }

.rt-continue-button,
.rt-feedback-submit {
    display: flex;
    width: 100%;
    min-height: 54px;
    padding: 14px 20px;
    border: 0;
    border-radius: 12px;
    background: var(--button);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--button-shadow);
    touch-action: manipulation;
    transition: transform .2s, box-shadow .2s;
}

.rt-continue-button:focus-visible,
.rt-feedback-submit:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.rt-continue-button[disabled] { cursor: wait; opacity: .72; }

/* Facebook's own blue on the "Open Facebook" hand-off, so it reads as Facebook at a glance. */
.rt-feedback-submit.is-facebook { background: #1877f2; box-shadow: 0 8px 22px rgba(24, 119, 242, .2); }

/* ---- private feedback after a low rating -------------------------------------------------------------------------- */

.rt-private-feedback { margin-top: 2px; }

.rt-feedback-prompt {
    display: block;
    margin: 0 0 14px;
    color: var(--ink);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.5;
}

.rt-feedback-textarea {
    display: block;
    width: 100%;
    min-height: 164px;
    padding: 14px 15px;
    border: 1px solid var(--field);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    line-height: 1.55;
    resize: vertical;
}

.rt-feedback-textarea:focus { outline: 0; border-color: var(--accent); box-shadow: var(--focus); }

.rt-feedback-privacy { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.rt-feedback-actions { margin-top: 18px; }

/* ---- where to leave the review --------------------------------------------------------------------------------- */

.rt-destination-content { padding-top: 26px; }

.rt-destination-question { max-width: 490px; margin: 0 auto 22px; font-size: 20px; }

.rt-destination-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.rt-destination-option {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 92px;
    margin: 0;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    align-items: center;
    text-align: left;
    box-shadow: 0 8px 20px rgba(37, 46, 75, .05);
    touch-action: manipulation;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.rt-destination-option:focus-visible { outline: 0; border-color: var(--accent); box-shadow: var(--focus); }
.rt-destination-option:active { transform: scale(.985); }

.rt-destination-icon-wrap {
    display: grid;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    place-items: center;
    box-shadow: 0 4px 12px rgba(37, 46, 75, .05);
}

.rt-destination-icon { display: block; width: 42px; height: 42px; border: 0; border-radius: 9px; object-fit: contain; }

/* A platform without a picture: its first letter, flat. */
.rt-destination-initial {
    display: grid;
    width: 42px;
    height: 42px;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 19px;
    font-weight: 800;
    place-items: center;
}

.rt-destination-copy { display: block; min-width: 0; margin-left: 12px; }
.rt-destination-name, .rt-destination-note { display: block; }

.rt-destination-name {
    overflow: hidden;
    color: var(--ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
}

.rt-destination-note { margin-top: 4px; color: var(--copy); font-size: 11px; font-weight: 600; line-height: 1.35; }

.rt-destination-arrow {
    display: grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    place-items: center;
}

.rt-destination-arrow .icon { width: 15px; height: 15px; }

.rt-destination-disclosure { margin: 20px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; text-align: center; }

/* The one-site hand-off: the site's picture, a word, and a button for when scripts are off. */
.rt-handoff { text-align: center; }
.rt-handoff .rt-destination-icon-wrap { margin: 4px auto 18px; }
.rt-handoff .rt-feedback-submit { margin-top: 22px; }

/* ---- thank you ------------------------------------------------------------------------------------------------------ */

.rt-complete-content { padding-top: 34px; text-align: center; }

.rt-complete-icon,
.rt-state-icon {
    display: grid;
    width: 76px;
    height: 76px;
    margin: 0 auto 22px;
    border: 1px solid var(--good-line);
    border-radius: 22px;
    background: var(--good-soft);
    color: var(--good);
    place-items: center;
    box-shadow: 0 12px 28px rgba(47, 138, 91, .12);
}

.rt-complete-icon .icon,
.rt-state-icon .icon { width: 36px; height: 36px; }

.rt-complete-heading,
.rt-state-heading {
    max-width: 500px;
    margin: 0 auto;
    color: var(--ink);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.2;
}

.rt-complete-message { max-width: 480px; margin: 14px auto 0; color: var(--copy); font-size: 16px; line-height: 1.7; }

.rt-complete-confirmation,
.rt-state-guidance {
    display: flex;
    max-width: 470px;
    margin: 28px auto 0;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    align-items: center;
    text-align: left;
}

.rt-complete-confirmation-icon,
.rt-state-guidance-icon {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-right: 13px;
    border-radius: 50%;
    background: var(--good-soft);
    color: var(--good);
    place-items: center;
}

.rt-complete-confirmation-icon .icon,
.rt-state-guidance-icon .icon { width: 17px; height: 17px; }

.rt-complete-confirmation strong, .rt-complete-confirmation small,
.rt-state-guidance strong, .rt-state-guidance small { display: block; }

.rt-complete-confirmation strong,
.rt-state-guidance strong { color: var(--ink); font-size: 14px; font-weight: 800; }

.rt-complete-confirmation small,
.rt-state-guidance small { margin-top: 3px; color: var(--copy); font-size: 12px; line-height: 1.5; }

.rt-complete-close,
.rt-state-close { margin: 18px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* After a low rating: a way to talk to the business, and the optional public review (owner's decision 6). */
.rt-complete-recovery {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    color: var(--copy);
    font-size: 14px;
    line-height: 1.65;
}

.rt-complete-recovery p { margin: 0 0 12px; }
.rt-complete-recovery a,
.rt-state-message a,
.rt-state-guidance a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ---- a page with news: a dead link, an unsubscribe, a card that needs attention -------------------------------------- */

.rt-state-content { padding-top: 34px; text-align: center; }

.rt-state-icon {
    margin-bottom: 18px;
    border-color: var(--line);
    background: #f3f4f7;
    color: var(--copy);
    box-shadow: 0 12px 28px rgba(37, 46, 75, .08);
}

.rt-state-kicker {
    margin: 0 0 9px;
    color: var(--copy);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.rt-state-message { max-width: 490px; margin: 14px auto 0; color: var(--copy); font-size: 15px; line-height: 1.7; }
.rt-state-message strong { color: var(--ink); font-weight: 800; overflow-wrap: anywhere; }

.rt-state-guidance-icon { background: #eef0f4; color: var(--copy); }

.rt-state-action-wrap { max-width: 470px; margin: 26px auto 0; padding-top: 22px; border-top: 1px solid var(--line); }
.rt-state-action-intro { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* The new site's outline button. */
.rt-state-action {
    display: inline-flex;
    min-height: 46px;
    padding: 12px 18px;
    border: 1px solid #cfd2dc;
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    touch-action: manipulation;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.rt-state-action:hover,
.rt-state-action:focus { border-color: var(--ink); color: var(--ink); }
.rt-state-action:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.rt-state-action:active { transform: scale(.98); }

.rt-state-form { max-width: 470px; margin: 26px auto 0; }

/* Tones: slate for an email preference, green for done, amber for "not right now", grey for a dead link. */
.rt-tone-accent .rt-state-icon { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); box-shadow: 0 12px 28px rgba(59, 74, 107, .1); }
.rt-tone-accent .rt-state-kicker { color: var(--accent); }
.rt-tone-accent .rt-state-guidance-icon { background: var(--accent-soft); color: var(--accent); }

.rt-tone-green .rt-state-icon { border-color: var(--good-line); background: var(--good-soft); color: var(--good); box-shadow: 0 12px 28px rgba(47, 138, 91, .12); }
.rt-tone-green .rt-state-kicker { color: var(--good); }
.rt-tone-green .rt-state-guidance-icon { background: var(--good-soft); color: var(--good); }

.rt-tone-amber .rt-state-icon { border-color: var(--fair-line); background: var(--fair-soft); color: var(--fair); box-shadow: 0 12px 28px rgba(197, 138, 26, .12); }
.rt-tone-amber .rt-state-kicker { color: var(--fair); }
.rt-tone-amber .rt-state-guidance-icon { background: var(--fair-soft); color: var(--fair); }

/* ---- motion, hover and small screens --------------------------------------------------------------------------------- */

@keyframes rtConfirmIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (hover: hover) {
    .rt-rating-option:hover { border-color: var(--accent); background: var(--warm); transform: translateY(-1px); }
    .rt-destination-option:hover { border-color: var(--accent); background: var(--warm); box-shadow: 0 12px 26px rgba(37, 46, 75, .08); transform: translateY(-2px); }
    .rt-continue-button:hover,
    .rt-feedback-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(37, 46, 75, .2); }
}

@media (max-width: 600px) {
    .rt-feedback-page { padding: 0; }
    .rt-feedback-shell { max-width: none; }
    .rt-preview-banner { margin: 0; border-width: 0 0 1px; border-radius: 0; }

    .rt-feedback-card { min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }

    .rt-feedback-brand { padding: 22px 20px 17px; }
    .rt-feedback-content { padding: 25px 20px 32px; }

    .rt-feedback-question { margin-bottom: 22px; font-size: 20px; }

    .rt-star-options { gap: 6px; }
    .rt-star-option { min-height: 64px; border-radius: 12px; }
    .rt-star-option .star { width: clamp(29px, 10vw, 38px); height: clamp(29px, 10vw, 38px); }

    .rt-destination-content { padding-top: 24px; }
    .rt-destination-question { margin-bottom: 20px; font-size: 19px; }
    .rt-destination-grid { grid-template-columns: 1fr; gap: 11px; }
    .rt-destination-option { min-height: 86px; padding: 12px 14px; }

    .rt-complete-heading, .rt-state-heading { font-size: 26px; }
    .rt-complete-message { font-size: 15px; }
    .rt-complete-confirmation { margin-top: 26px; }
    .rt-state-content { padding-top: 36px; }
    .rt-state-message { font-size: 14px; }
    .rt-state-action { width: 100%; }
}

@media (max-width: 350px) {
    .rt-feedback-content { padding-right: 16px; padding-left: 16px; }

    .rt-star-options { gap: 4px; }
    .rt-star-option { min-height: 60px; padding-right: 1px; padding-left: 1px; }

    .rt-face-options { gap: 7px; }
    .rt-face-option { flex-basis: 78px; min-height: 100px; }

    .rt-destination-option { padding-right: 11px; padding-left: 11px; }
    .rt-destination-icon-wrap { flex-basis: 54px; width: 54px; height: 54px; }
    .rt-destination-icon, .rt-destination-initial { width: 39px; height: 39px; }
    .rt-destination-copy { margin-left: 10px; }

    .rt-complete-icon, .rt-state-icon { width: 70px; height: 70px; }
    .rt-complete-heading, .rt-state-heading { font-size: 24px; }
    .rt-complete-confirmation, .rt-state-guidance { padding-right: 14px; padding-left: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .rt-rating-option, .rt-star-option .star, .rt-destination-option, .rt-state-action,
    .rt-continue-button, .rt-feedback-submit { transition: none; }
    .is-enhanced .rt-confirm-panel.is-open { animation: none; }
}