.feedback-page { --fb-ease: cubic-bezier(.22,1,.36,1); min-height: 100vh; background: #fbfaf7; color: #201915; }
.feedback-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1rem clamp(1rem,4vw,2rem); border-block-end: 1px solid #e9e1d8; gap: 1rem; }
.feedback-logo { width: 96px; height: auto; }
.feedback-lang,.feedback-home { display: inline-flex; align-items: center; gap: .4rem; color: #8b1e2d; min-height: 44px; font-weight: 700; text-decoration: none; }
.feedback-home { justify-self: end; min-width: 44px; justify-content: center; }
.feedback-lang,.feedback-home { width:44px; height:44px; justify-content:center; border:1px solid #e9d4d8; border-radius:50%; }
.feedback-lang span,.feedback-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.feedback-shell { width: min(100%,680px); margin: 0 auto; padding: clamp(1.25rem,5vw,3rem) 1.2rem 4rem; }
/* Three steps: the reaction, the optional details, the thank-you. */
.feedback-steps { display: flex; gap: .35rem; margin-block-end: .9rem; }
.feedback-steps span { position: relative; flex: 1; height: 4px; border-radius: 4px; background: #e9e1d8; overflow: hidden; }
.feedback-steps span::after { content: ""; position: absolute; inset: 0; background: #972a3b; transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--fb-ease); }
[dir=rtl] .feedback-steps span::after { transform-origin: right; }
.feedback-steps[data-step="1"] span:first-child::after,.feedback-steps[data-step="2"] span:nth-child(-n+2)::after,.feedback-steps[data-step="3"] span::after { transform: none; }
/* The start of the bar holds the eyebrow, or the back button on screens that have a way back. */
.feedback-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 44px; margin-block-end: 1rem; }
.feedback-eyebrow { color: #8b1e2d; font-weight: 800; letter-spacing: .06em; font-size: .9rem; margin: 0; }
.feedback-back { display: inline-flex; align-items: center; gap: .2rem; min-height: 44px; margin-inline-start: -.35rem; padding-inline: .55rem 1rem; border: 1px solid #e9d4d8; border-radius: 999px; background: #fffdf9; color: #8b1e2d; font: inherit; font-weight: 800; cursor: pointer; transition: background-color 150ms, transform 120ms var(--fb-ease); }
.feedback-back svg,.feedback-icon { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.feedback-icon { width: 1.15rem; height: 1.15rem; }
[dir=rtl] .feedback-back svg,[dir=rtl] .feedback-icon.is-flip { transform: scaleX(-1); }
.feedback-back:active:not(:disabled) { transform: scale(.96); }
.feedback-shell h1 { font-size: clamp(1.9rem,6vw,3.2rem); font-weight: 900; line-height: 1.2; margin: 0 0 1.25rem; max-width: 20ch; overflow-wrap: anywhere; }
.feedback-shell h2 { font-size: 1.25rem; line-height: 1.5; margin: 0 0 .8rem; }
.feedback-shell p { line-height: 1.65; }
.feedback-live { color: #33613f; font-weight: 700; font-size: .92rem; margin-inline-start: auto; text-align: end; }
.feedback-error { background: #fbe6e7; color: #852233; border-radius: 8px; padding: .8rem 1rem; margin-block: .5rem 1rem; }
.feedback-reactions { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .5rem; direction: ltr; margin-block: 2rem; }
.feedback-reactions button { font: inherit; padding: .8rem .25rem; min-height: 92px; color: #38251c; border: 1px solid #d7cabc; border-radius: 16px; background: #fffdf9; cursor: pointer; transition: transform 160ms var(--fb-ease), background-color 160ms, border-color 160ms; }
.feedback-reactions span { display: block; font-size: clamp(1.8rem,6vw,2.7rem); line-height: 1.3; }
.feedback-reactions small { display: block; font-size: .85rem; margin-block-start: .7rem; line-height: 1.2; }
.feedback-reactions [aria-pressed=true] { background: #f9e6cf; border-color: #8b1e2d; outline: 2px solid #8b1e2d; }
.feedback-reactions [aria-pressed=true] span { animation: feedback-pop 340ms var(--fb-ease) both; }
.feedback-reactions button:active:not(:disabled) { transform: scale(.94); }
.feedback-soft { color: #665447; }
.feedback-actions { display: flex; flex-direction: column; gap: .7rem; margin-block: 0 1.5rem; }
.feedback-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; border: 1px solid #b9a998; background: #fffdf9; padding: .8rem 1rem; border-radius: 12px; font: inherit; font-weight: 700; text-decoration: none; color: #522e23; cursor: pointer; margin: .25rem .15rem; overflow-wrap: anywhere; transition: background-color 150ms, border-color 150ms, transform 120ms var(--fb-ease); }
.feedback-actions .feedback-button,.feedback-tiles .feedback-button,.feedback-signal .feedback-button { margin: 0; }
.feedback-button.is-primary { background: #972a3b; border-color: #972a3b; color: #fff9ee; }
.feedback-button:active:not(:disabled),.feedback-product:active:not(:disabled),.feedback-edit:active:not(:disabled) { transform: scale(.98); }
/* A row that opens another screen: the label at the start, a chevron at the end. */
.feedback-button.is-option { justify-content: space-between; min-height: 56px; padding-inline: 1.1rem .9rem; text-align: start; }
.feedback-button.is-option .feedback-icon,.feedback-product > .feedback-icon { color: #a38f7c; }
.feedback-finish { display: flex; width: 100%; min-height: 56px; margin: 0; font-size: 1.05rem; font-weight: 800; box-shadow: 0 8px 18px rgba(151,42,59,.2); }
.feedback-tiles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; margin-block: 0 1.5rem; }
.feedback-tiles .feedback-button { min-height: 56px; }
.feedback-tick { color: #2f6b3f; }
.feedback-section-title { color: #665447; font-size: .95rem; font-weight: 800; margin: 0 0 .7rem; }
/* What has been rated so far; the line under it separates it from what can still be added. */
.feedback-rated { margin-block-end: 1.25rem; padding-block-end: 1.25rem; border-block-end: 1px solid #e3d8cb; }
.feedback-rated-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 .75rem; margin-block-end: .35rem; }
.feedback-rated-head h2 { color: #665447; font-size: .95rem; font-weight: 800; margin: 0; }
.feedback-rated ul { list-style: none; margin: 0; padding: 0; border: 1px solid #e3d8cb; border-radius: 14px; background: #fffdf9; }
.feedback-rated-item { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; }
.feedback-rated-item + .feedback-rated-item { border-block-start: 1px solid #efe6db; }
.feedback-rated-item:first-child { border-start-start-radius: 14px; border-start-end-radius: 14px; }
.feedback-rated-item:last-child { border-end-start-radius: 14px; border-end-end-radius: 14px; }
.feedback-rated-emoji { width: 2rem; font-size: 1.75rem; line-height: 1; text-align: center; flex-shrink: 0; }
.feedback-rated-mark { width: 2rem; height: 2rem; padding: .45rem; border-radius: 50%; background: #e4f0e5; color: #2f6b3f; }
.feedback-rated-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.feedback-rated-text strong { font-weight: 800; }
.feedback-rated-text span,.feedback-rated-text q { color: #665447; font-size: .92rem; }
.feedback-rated-text q { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.feedback-edit { min-height: 44px; padding-inline: 1rem; border: 1px solid #dcc0c5; border-radius: 999px; background: transparent; color: #8b1e2d; font: inherit; font-weight: 800; font-size: .92rem; cursor: pointer; flex-shrink: 0; transition: background-color 150ms, transform 120ms var(--fb-ease); }
/* The overall-rating row is one button back to the first step; its "Edit" is a label, not a second control. */
.feedback-rated-item.is-overall { padding: 0; }
.feedback-rated-overall { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .7rem .85rem; border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.feedback-rated-overall .feedback-edit { display: inline-flex; align-items: center; }
.feedback-rated-overall:active:not(:disabled) .feedback-edit { transform: scale(.98); }
.feedback-products { display: flex; flex-direction: column; gap: .7rem; margin-block: 0 1.5rem; }
.feedback-product { display: flex; align-items: center; gap: .75rem; text-align: start; border: 1px solid #c9bcae; border-radius: 12px; background: #fffdf9; font: inherit; padding: .9rem 1rem; min-height: 64px; cursor: pointer; color: inherit; overflow-wrap: anywhere; transition: background-color 150ms, transform 120ms var(--fb-ease); }
.feedback-product-text { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; gap: .3rem; }
.feedback-product small { color: #665447; }
.feedback-badge { padding: .1rem .6rem; border-radius: 999px; background: #e4f0e5; color: #2f6b3f; font-size: .82rem; font-weight: 800; }
.feedback-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: 1rem; }
.feedback-chip { display: inline-flex; align-items: center; gap: .65rem; min-height: 48px; border: 1px solid #b9a998; border-radius: 10px; padding: .6rem .85rem; background: #fffdf9; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; transition: background-color 150ms, border-color 150ms, transform 120ms var(--fb-ease); }
.feedback-chip:active { transform: scale(.97); }
.feedback-chip input { width: 1.2rem; height: 1.2rem; flex-shrink: 0; accent-color: #972a3b; }
.feedback-chip:has(:checked) { border-color: #972a3b; background: #f9e5dc; font-weight: 700; }
.feedback-detail { margin-block: .25rem 1rem; margin-inline-start: 1rem; }
.feedback-detail.is-new { animation: feedback-rise 240ms var(--fb-ease) both; }
.feedback-detail-title { display: block; color: #665447; font-size: .9rem; font-weight: 800; }
.feedback-detail .feedback-chips { margin-block: .5rem 0; }
.feedback-field { display: flex; flex-direction: column; gap: .5rem; font-weight: 700; margin-block: 1.5rem; }
.feedback-field input,.feedback-field textarea { border: 1px solid #b9a998; border-radius: 10px; padding: .85rem; background: #fffdf9; color: #201915; font: inherit; font-weight: 400; width: 100%; min-height: 48px; transition: border-color 150ms, box-shadow 150ms; }
.feedback-field textarea { resize: vertical; }
.feedback-field textarea:focus { border-color: #972a3b; box-shadow: 0 0 0 3px rgba(151,42,59,.14); }
.feedback-field-help { color: #852233; font-size: .9rem; font-weight: 400; }
.feedback-phone-row { direction: ltr; }
.feedback-phone-row .iti { width: 100%; }
.feedback-phone-row .iti__search-input { min-height: 44px; border: 0; border-radius: 0; }
.feedback-otp-phone { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin-block: 0 1.25rem; }
.feedback-otp-digits { display: flex; justify-content: center; gap: .75rem; direction: ltr; margin-block-end: 1.25rem; }
.feedback-otp-box { width: 3rem; height: 3.5rem; border: 2px solid #d7cabc; border-radius: 8px; text-align: center; font: inherit; font-size: 1.5rem; font-weight: 700; color: #201915; background: #fffdf9; caret-color: #972a3b; }
.feedback-otp-box:focus { border-color: #972a3b; box-shadow: 0 0 0 3px rgba(151,42,59,.14); }
.feedback-otp-debug { font-size: .8rem; color: #8a5a00; background: #fff7df; border: 1px solid #f1dc9c; border-radius: 8px; padding: .4rem .75rem; margin-block-end: .75rem; }
.feedback-resend { display: flex; justify-content: center; margin-block-end: .5rem; }
.feedback-link-button:disabled { color: #665447; text-decoration: none; }
.feedback-optional { border-block-start: 1px solid #d9cbbd; padding-block-start: 1.5rem; margin-block-start: 1.5rem; }
.feedback-google { border-block-start: 1px solid #d9cbbd; padding-block-start: 1rem; margin-block-start: 2rem; }
.feedback-received { font-size: 1.25rem; }
/* The thank-you tick. It draws itself once, on arrival ([data-fresh]); the sparks are for a happy rating. */
.feedback-done { position: relative; width: 72px; height: 72px; margin-block-end: 1.25rem; }
.feedback-done svg { display: block; width: 100%; height: 100%; }
.feedback-done circle { fill: #972a3b; }
.feedback-done path { fill: none; stroke: #fff9ee; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; }
.feedback-done i { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; opacity: 0; }
.feedback-done i:nth-of-type(1) { --fb-turn: 0deg; background: #c12239; }
.feedback-done i:nth-of-type(2) { --fb-turn: 60deg; background: #fde1a8; }
.feedback-done i:nth-of-type(3) { --fb-turn: 120deg; background: #ff5220; }
.feedback-done i:nth-of-type(4) { --fb-turn: 180deg; background: #ffbbf8; }
.feedback-done i:nth-of-type(5) { --fb-turn: 240deg; background: #29428c; }
.feedback-done i:nth-of-type(6) { --fb-turn: 300deg; background: #fde1a8; }
[data-fresh] .feedback-done svg { animation: feedback-pop 420ms var(--fb-ease) both; }
[data-fresh] .feedback-done path { animation: feedback-draw 380ms ease-out 200ms both; }
[data-fresh] .feedback-done.is-happy i { animation: feedback-spark 720ms var(--fb-ease) 240ms both; }
.feedback-signal { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; padding: .3rem; border-radius: 14px; background: #f1e9df; margin-block-end: 1rem; }
.feedback-signal .feedback-button { border-color: transparent; background: transparent; border-radius: 10px; }
.feedback-signal [aria-pressed=true] { border-color: #d7cabc; background: #fffdf9; color: #8b1e2d; box-shadow: 0 1px 3px rgba(60,30,20,.1); }
.feedback-link-button { display: inline-flex; align-items: center; gap: .35rem; border: 0; background: transparent; color: #8b1e2d; text-decoration: underline; min-height: 44px; padding: .5rem; font: inherit; cursor: pointer; }
.feedback-rated-head .feedback-link-button { margin-inline-end: -.5rem; font-size: .92rem; font-weight: 700; }
.feedback-rated-head .feedback-icon { width: 1rem; height: 1rem; }
/* style.css sets a pale yellow ring with !important, which disappears on this cream page. */
.feedback-shell :focus-visible,.feedback-nav :focus-visible { outline: 3px solid #8b1e2d !important; outline-offset: 3px !important; }
/* The heading only takes focus to announce a new screen; the note and code boxes show focus with their border. */
.feedback-shell h1:focus-visible,.feedback-field textarea:focus-visible,.feedback-otp-box:focus-visible { outline: 0 !important; }
/* Hover is for pointers only: on a phone it would stay stuck on the last thing tapped. */
@media (hover:hover) {
    .feedback-button:hover:not(:disabled),.feedback-product:hover:not(:disabled),.feedback-back:hover:not(:disabled) { background: #f4e8da; }
    .feedback-button.is-primary:hover:not(:disabled) { background: #7b2030; }
    .feedback-signal .feedback-button:hover:not(:disabled):not([aria-pressed=true]) { background: #e9dfd2; }
    .feedback-edit:hover:not(:disabled),.feedback-rated-overall:hover:not(:disabled) .feedback-edit { background: #f9ecee; }
    .feedback-reactions button:hover:not(:disabled) { transform: translateY(-3px); background: #fff6e8; }
}
/* A control stays at full strength through a quick save and only fades when the wait becomes noticeable. */
.feedback-shell button:disabled,.feedback-shell input:disabled,.feedback-shell textarea:disabled { cursor: wait; animation: feedback-wait 180ms 400ms both; }
#feedbackCard { animation: feedback-in 150ms ease-out; }
/* Each screen slides in from the side it lies on: forward from the end, back from the start. */
.feedback-screen[data-nav=forward] { --fb-from: 12px; animation: feedback-slide 260ms var(--fb-ease) both; }
.feedback-screen[data-nav=back] { --fb-from: -12px; animation: feedback-slide 260ms var(--fb-ease) both; }
[dir=rtl] .feedback-screen[data-nav=forward] { --fb-from: -12px; }
[dir=rtl] .feedback-screen[data-nav=back] { --fb-from: 12px; }
[data-fresh] .feedback-rated-item.is-fresh { animation: feedback-flash 1200ms ease-out 260ms both; }
@keyframes feedback-in { from { opacity: .6; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes feedback-slide { from { opacity: 0; transform: translateX(var(--fb-from)); } }
@keyframes feedback-rise { from { opacity: 0; transform: translateY(-6px); } }
@keyframes feedback-pop { from { opacity: .4; transform: scale(.6); } }
@keyframes feedback-draw { from { stroke-dashoffset: 36; } }
@keyframes feedback-spark { 0% { opacity: 0; transform: rotate(var(--fb-turn)) translateY(-30px) scale(.4); } 35% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--fb-turn)) translateY(-56px) scale(1); } }
@keyframes feedback-flash { from { background-color: #fbe6bd; } }
@keyframes feedback-wait { from { opacity: 1; } to { opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
    .feedback-page *,.feedback-page *::before,.feedback-page *::after { animation: none !important; transition: none !important; }
    .feedback-shell button:disabled,.feedback-shell input:disabled,.feedback-shell textarea:disabled { opacity: .65; }
}
@media (max-width:380px) { .feedback-otp-box { width: 2.625rem; height: 3.25rem; font-size: 1.375rem; } .feedback-reactions { gap: .3rem; } .feedback-reactions small { font-size: .75rem; } .feedback-shell { padding-inline: .85rem; } }
[hidden] { display: none !important; }

/* The automatic discount code on the thank-you screen. */
.feedback-code-value { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-block: .75rem; }
.feedback-code-value > span { font-size: 1.5rem; font-weight: 700; letter-spacing: .08em; padding: .5rem 1rem; border: 2px dashed #d9cbbd; border-radius: .75rem; user-select: all; }