/* Vyanjan Rasa feedback page.
   Colours, type, spacing and radii are the brand page's, copied from the main website's single theme file
   (frontend/src/styles/tokens.css), so the card's QR code opens a page of the same brand. Light only on purpose.
   Contrast: charcoal on cream 15.65:1, terracotta on cream 5.62:1, cream on terracotta-deep 8.6:1, cream on leaf
   5.88:1, chilli on cream 9.4:1; the brass outline of an empty star or chip is 5.4:1 against cream. */

@font-face { font-family: "Vyanjan Body"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/noto-sans-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2212, U+20B9; }
@font-face { font-family: "Vyanjan Body"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/noto-sans-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2212, U+20B9; }
@font-face { font-family: "Vyanjan Display"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/noto-serif-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2212, U+20B9; }

:root {
  --c-turmeric: #e3a008;
  --c-terracotta: #a8431c;
  --c-chilli: #8e1114;
  --c-cream: #fdf6ec;
  --c-charcoal: #231c18;
  --c-turmeric-soft: #f6dfa4;
  --c-turmeric-deep: #8a5e05;
  --c-terracotta-deep: #7d2f12;
  --c-cream-deep: #f6e9d5;
  --c-cream-edge: #ead9be;
  --c-charcoal-muted: #5c4e45;
  --c-leaf: #1a6e36;
  --c-leaf-deep: #125128;
  --c-field: #fffcf7;          /* a form field, a shade lighter than the page */
  --c-error-soft: #f9e3df;

  --c-bg: var(--c-cream);
  --c-bg-raised: var(--c-cream-deep);
  --c-text: var(--c-charcoal);
  --c-text-muted: var(--c-charcoal-muted);
  --c-text-on-dark: var(--c-cream);
  --c-border: var(--c-cream-edge);
  --c-border-strong: var(--c-turmeric-deep);
  --c-brass: var(--c-turmeric-deep);
  --c-wa: var(--c-leaf);
  --c-focus: var(--c-charcoal);
  --c-focus-halo: var(--c-cream);

  --fs-100: 0.75rem;
  --fs-200: 0.875rem;
  --fs-300: 1rem;
  --fs-400: 1.125rem;
  --fs-500: clamp(1.25rem, 1.13rem + 0.52vw, 1.5rem);
  --fs-600: clamp(1.5rem, 1.28rem + 0.96vw, 1.95rem);
  --fs-700: clamp(1.8rem, 1.4rem + 1.74vw, 2.6rem);
  --fs-800: clamp(2.15rem, 1.5rem + 2.83vw, 3.45rem);
  --ff-display: "Vyanjan Display", Georgia, "Times New Roman", serif;
  --ff-body: "Vyanjan Body", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-regular: 400;
  --fw-display: 600;
  --fw-bold: 700;
  --lh-tight: 1.18;
  --lh-heading: 1.3;
  --lh-body: 1.65;
  --ls-wide: 0.06em;

  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem;
  --sp-7: 2rem; --sp-8: 2.5rem; --sp-9: 3rem; --sp-10: 4rem; --sp-11: 5rem;
  --r-sm: 0.25rem; --r-md: 0.625rem; --r-lg: 1.25rem; --r-pill: 62.4375rem; --r-circle: 50%;
  --bw-hairline: 1px; --bw-thick: 2px; --bw-motif: 3px;
  --ring-w: 3px; --ring-offset: 2px; --ring-halo-w: 5px;
  --shadow-raised: 0 1px 2px rgb(35 28 24 / 6%), 0 2px 8px rgb(35 28 24 / 8%);

  --w-column: 45rem;
  --gutter: var(--sp-5);
  --tap-min: 2.75rem;          /* 44 px touch target */
  --star: 3.25rem;
  --motif-border-h: 1rem;
  --motif-wheel-lg: 4rem;

  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-entrance: 360ms;
  --dur-hero-wheel: 60s;
  --dur-pulse: 4.5s;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --z-skip-link: 100;

  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text);
  font-family: var(--ff-body); font-size: var(--fs-300); line-height: var(--lh-body); overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, p, ul, fieldset { margin: 0; }
ul { padding: 0; list-style: none; }
fieldset { min-width: 0; padding: 0; border: 0; }
legend { padding: 0; }
a { color: var(--c-terracotta); }
:focus-visible {
  outline: var(--ring-w) solid var(--c-focus); outline-offset: var(--ring-offset);
  box-shadow: 0 0 0 var(--ring-halo-w) var(--c-focus-halo);
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html:not(.js) .js-only { display: none; }
.skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: var(--z-skip-link);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill);
  background: var(--c-charcoal); color: var(--c-text-on-dark); font-weight: var(--fw-bold);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.icon {
  flex: none; width: 1.25em; height: 1.25em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- motifs ---------- */
.motif-border {
  height: var(--motif-border-h); background-color: var(--c-brass);
  -webkit-mask: url("../assets/motifs/pattachitra-border.svg") left center / 3rem 100% repeat-x;
  mask: url("../assets/motifs/pattachitra-border.svg") left center / 3rem 100% repeat-x;
}
.wheel-divider { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6); color: var(--c-brass); }
.wheel-divider::before, .wheel-divider::after { content: ""; flex: 1; border-top: var(--bw-hairline) solid var(--c-border-strong); opacity: 0.5; }
.wheel-divider span, .top__wheel {
  background-color: currentColor;
  -webkit-mask: url("../assets/motifs/konark-wheel.svg") center / contain no-repeat;
  mask: url("../assets/motifs/konark-wheel.svg") center / contain no-repeat;
}
.wheel-divider span { width: var(--motif-wheel-lg); height: var(--motif-wheel-lg); }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap-min); padding: var(--sp-3) var(--sp-6);
  border: var(--bw-thick) solid transparent; border-radius: var(--r-pill);
  font: inherit; font-weight: var(--fw-bold); line-height: var(--lh-tight); text-align: center;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-instant) var(--ease-out), background-color var(--dur-fast), color var(--dur-fast);
}
.btn:active { transform: scale(0.97); }
.btn--lg { min-height: 3.5rem; font-size: var(--fs-400); }
.btn--xl { min-height: 4rem; font-size: var(--fs-500); }
.btn--block { display: flex; width: 100%; }
.btn--primary { background: var(--c-terracotta); color: var(--c-text-on-dark); }
.btn--primary:hover { background: var(--c-terracotta-deep); }
.btn--primary[aria-disabled="true"] { background: var(--c-terracotta-deep); cursor: progress; }
.btn--primary[aria-disabled="true"]:active { transform: none; }
.btn--wa { background: var(--c-wa); color: var(--c-text-on-dark); }
.btn--wa:hover { background: var(--c-leaf-deep); }
.btn--outline { border-color: var(--c-terracotta); background: var(--c-bg); color: var(--c-terracotta-deep); }
.btn--outline:hover { background: var(--c-bg-raised); }

/* ---------- header ---------- */
.top { position: relative; overflow: hidden; padding-top: calc(var(--sp-7) + env(safe-area-inset-top, 0px)); }
.top__wheel {
  position: absolute; top: calc(var(--sp-11) * -1); left: 50%;
  width: min(30rem, 120vw); aspect-ratio: 1; margin-left: calc(min(30rem, 120vw) / -2);
  color: var(--c-turmeric); opacity: 0.14; pointer-events: none;
  animation: spin var(--dur-hero-wheel) linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
.top__inner {
  position: relative; max-width: var(--w-column); margin: 0 auto;
  padding: 0 calc(var(--gutter) + var(--safe-r)) var(--sp-7) calc(var(--gutter) + var(--safe-l)); text-align: center;
}
.top__logo { width: 5rem; height: 5rem; margin: 0 auto; filter: drop-shadow(0 4px 10px rgb(35 28 24 / 18%)); }
.top__brand {
  margin-top: var(--sp-3); color: var(--c-terracotta); font-size: var(--fs-200); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.top__title {
  margin-top: var(--sp-2); font-family: var(--ff-display); font-size: var(--fs-800); font-weight: var(--fw-display);
  line-height: var(--lh-tight); text-wrap: balance;
}
.top__sub { margin-top: var(--sp-3); color: var(--c-text-muted); font-size: var(--fs-400); text-wrap: balance; }
.js .top__logo, .js .top__brand, .js .top__title, .js .top__sub { animation: rise var(--dur-entrance) var(--ease-out) both; }
.js .top__brand, .js .top__title { animation-delay: 120ms; }
.js .top__sub { animation-delay: 180ms; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* ---------- the form ---------- */
.section {
  max-width: var(--w-column); margin: 0 auto;
  padding: var(--sp-8) calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l));
}
.form__note { color: var(--c-text-muted); }
.field { margin-top: var(--sp-7); }
.field__label { display: block; font-family: var(--ff-display); font-size: var(--fs-500); font-weight: var(--fw-display); line-height: var(--lh-heading); }
.opt { font-family: var(--ff-body); font-size: var(--fs-200); font-weight: var(--fw-regular); color: var(--c-text-muted); }
.field__sub { display: block; margin-top: var(--sp-4); font-weight: var(--fw-bold); }
.field__hint { margin-top: var(--sp-2); color: var(--c-text-muted); font-size: var(--fs-200); }
.field__error { margin-top: var(--sp-2); color: var(--c-chilli); font-weight: var(--fw-bold); }
.input {
  display: block; width: 100%; min-height: var(--tap-min); margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border: var(--bw-thick) solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-field); color: var(--c-text); font: inherit;
}
.field__sub + .input { margin-top: var(--sp-2); }
.input--area { min-height: 7rem; resize: vertical; }
.input[aria-invalid="true"] { border-color: var(--c-chilli); background: var(--c-error-soft); }

/* Stars: a radio group; the chosen star and the ones before it are filled. */
.stars { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.star {
  display: grid; place-items: center; width: var(--star); height: var(--star); border-radius: var(--r-md);
  color: var(--c-brass); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-instant) var(--ease-out);
}
.star:active { transform: scale(0.92); }
.star__icon { width: 2.5rem; height: 2.5rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.star.is-on { color: var(--c-terracotta-deep); }
.star.is-on .star__icon { fill: var(--c-turmeric); }
.stars input:focus-visible + .star { outline: var(--ring-w) solid var(--c-focus); outline-offset: var(--ring-offset); box-shadow: 0 0 0 var(--ring-halo-w) var(--c-focus-halo); }
.stars--invalid .star { color: var(--c-chilli); }
.stars__word { min-height: 1.65em; margin-top: var(--sp-2); color: var(--c-text-muted); font-weight: var(--fw-bold); }

/* Chips: checkboxes and radios drawn as pills; a chosen one is filled and shows a tick. */
.choices { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap-min); padding: var(--sp-2) var(--sp-5);
  border: var(--bw-thick) solid var(--c-border-strong); border-radius: var(--r-pill);
  background: var(--c-field); color: var(--c-text); font-weight: var(--fw-bold); line-height: var(--lh-tight);
  cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
}
.chip__check { display: none; width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
input:checked + .chip { border-color: var(--c-terracotta-deep); background: var(--c-terracotta-deep); color: var(--c-text-on-dark); }
input:checked + .chip .chip__check { display: block; }
input:focus-visible + .chip { outline: var(--ring-w) solid var(--c-focus); outline-offset: var(--ring-offset); box-shadow: 0 0 0 var(--ring-halo-w) var(--c-focus-halo); }
.marker {
  display: grid; place-items: center; width: 1rem; height: 1rem; padding: 0;
  border: var(--bw-thick) solid currentColor; border-radius: var(--r-sm); background: var(--c-field);
}
.marker::after { content: ""; width: 0.4rem; height: 0.4rem; border-radius: var(--r-circle); background: currentColor; }
.marker--veg { color: var(--c-leaf); }
.marker--nonveg { color: var(--c-chilli); }

.check { display: flex; gap: var(--sp-3); align-items: flex-start; }
.check__box { flex: none; width: 1.5rem; height: 1.5rem; margin: 0.6rem 0 0; accent-color: var(--c-terracotta-deep); }
.check__label { min-height: var(--tap-min); padding-block: var(--sp-2); cursor: pointer; }

.turnstile { margin-top: var(--sp-6); }
.turnstile:empty { margin-top: 0; }
.form__status {
  margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-5);
  border-left: var(--bw-motif) solid var(--c-chilli); border-radius: var(--r-md); background: var(--c-error-soft);
}
.form__status p + p { margin-top: var(--sp-2); }
#send { margin-top: var(--sp-6); }

.notice {
  display: grid; gap: var(--sp-4); padding: var(--sp-5);
  border-left: var(--bw-motif) solid var(--c-turmeric); border-radius: var(--r-md); background: var(--c-turmeric-soft);
}
.noscript { margin-bottom: var(--sp-6); padding: var(--sp-4); border-radius: var(--r-md); background: var(--c-turmeric-soft); }

/* ---------- after sending ---------- */
.thanks { text-align: center; outline: none; }
.thanks__title { font-family: var(--ff-display); font-size: var(--fs-700); font-weight: var(--fw-display); line-height: var(--lh-heading); }
.thanks__text { margin-top: var(--sp-3); color: var(--c-text-muted); font-size: var(--fs-400); text-wrap: balance; }
.links { display: grid; gap: var(--sp-3); margin-top: var(--sp-7); }
.links .btn--wa::after {
  content: ""; position: absolute; inset: calc(var(--bw-thick) * -1);
  border: var(--bw-thick) solid var(--c-wa); border-radius: inherit; opacity: 0; pointer-events: none;
  animation: pulse var(--dur-pulse) var(--ease-out) 2s infinite;
}
@keyframes pulse { 0% { opacity: 0.6; transform: scale(1); } 35%, 100% { opacity: 0; transform: scale(1.1, 1.3); } }

/* ---------- privacy ---------- */
.privacy__title { font-family: var(--ff-display); font-size: var(--fs-500); font-weight: var(--fw-display); line-height: var(--lh-heading); }
.privacy__list {
  display: grid; gap: var(--sp-2); margin-top: var(--sp-4); padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-8);
  border-radius: var(--r-md); background: var(--c-bg-raised); color: var(--c-text-muted); font-size: var(--fs-200); list-style: disc;
}
.privacy__list a { font-weight: var(--fw-bold); overflow-wrap: anywhere; }

/* ---------- footer ---------- */
.footer { margin-top: var(--sp-11); background: var(--c-charcoal); color: var(--c-text-on-dark); text-align: center; }
.footer .motif-border { background-color: var(--c-turmeric); }
.footer__inner {
  display: grid; justify-items: center; gap: var(--sp-2); max-width: var(--w-column); margin: 0 auto;
  padding: var(--sp-8) calc(var(--gutter) + var(--safe-r)) calc(var(--sp-8) + var(--safe-b)) calc(var(--gutter) + var(--safe-l));
  font-size: var(--fs-200);
}
.footer__logo { width: 3.5rem; height: 3.5rem; }
.footer__tagline { font-family: var(--ff-display); font-size: var(--fs-500); font-weight: var(--fw-display); }
.footer__copy { margin-top: var(--sp-2); opacity: 0.85; }

/* Reduced motion: no movement anywhere. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}