/* =====================================================================
   PUBLIC survey page styles + THEMES.
   Everything is scoped under ".pub" so the same file can also be used for the live
   preview inside the admin panel.

   HOW THEMES WORK
   - <body class="pub page theme-KEY"> : KEY is chosen per survey in the admin panel.
   - Each theme only changes CSS variables (colours, radius, shadow, background) and a few details.
   - --brand is the accent colour chosen for the survey (any colour works with any theme).

   TO ADD A NEW THEME:  1) add a line in Models/UiHelpers.cs -> Themes.All
                        2) copy one ".pub.theme-xxx" block below and change the values.
   ===================================================================== */

.pub {
  --brand: #4F46E5;
  --bg: #f3f5fb; --card: #ffffff; --text: #1f2937; --muted: #6b7280; --line: #e5e7eb;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 30px rgba(17,24,39,.06);
  --hdr-text: #1f2937;
  --brand-soft: color-mix(in srgb, var(--brand) 10%, var(--card));
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.9; direction: rtl;
}
.pub *, .pub *::before, .pub *::after { box-sizing: border-box; }
.pub.page { min-height: 100vh; }
.pub [hidden] { display: none !important; }
.pub.has-bg { background-size: cover; background-position: center; background-attachment: fixed; }

/* ---------- layout ---------- */
.pub .container-s { max-width: 760px; margin: 0 auto; padding: 16px 14px 40px; }
.pub .site-header { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 16px 6px; color: var(--hdr-text); }
.pub .site-logo { height: 42px; width: auto; border-radius: 10px; }
.pub .site-name { font-weight: 700; }
.pub .site-footer { text-align: center; padding: 24px 14px 40px; color: var(--hdr-text); opacity: .75; font-size: .9rem; }
.pub.has-bg .site-footer { opacity: 1; }
.pub .preview-bar { position: sticky; top: 0; z-index: 20; background: #f59e0b; color: #1f2937; text-align: center; padding: 6px; font-weight: 600; font-size: .9rem; }

/* ---------- cards ---------- */
.pub .card-s { position: relative; background: var(--card); border-radius: var(--radius); padding: 24px; margin-bottom: 16px; box-shadow: var(--shadow); }
.pub .intro { text-align: center; border-top: 6px solid var(--brand); }
.pub .intro h1 { margin: 6px 0 8px; color: var(--brand); line-height: 1.5; font-weight: 800; }
.pub .survey-logo { max-height: 90px; max-width: 100%; margin-bottom: 8px; border-radius: 12px; }
.pub .desc { color: var(--muted); margin: 0; white-space: pre-wrap; }

.pub .progress-s { position: sticky; top: 0; z-index: 5; height: 6px; background: color-mix(in srgb, var(--line) 80%, transparent); border-radius: 99px; margin: 0 0 16px; overflow: hidden; }
.pub .progress-s #bar { height: 100%; width: 0; background: var(--brand); transition: width .35s; border-radius: 99px; }

.pub .q-title { display: flex; gap: 10px; font-weight: 600; margin-bottom: 14px; line-height: 1.7; }
.pub .q-num { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--brand-soft); color: var(--brand);
              display: inline-flex; align-items: center; justify-content: center; font-size: .8em; margin-top: .1em; }
.pub .req { color: #ef4444; }
.pub .q-img { max-width: 100%; border-radius: 14px; margin: 0 0 14px; display: block; }
.pub .q-card.invalid { outline: 2px solid #ef4444; outline-offset: 2px; }
.pub .q-err { color: #ef4444; font-size: .9rem; margin-top: 10px; }

/* ---------- choice options (radio / checkbox tiles) ---------- */
.pub .opts { display: grid; gap: 10px; }
.pub .opt { display: block; cursor: pointer; position: relative; }
.pub .opt input { position: absolute; opacity: 0; pointer-events: none; }
.pub .opt-body { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 2px solid var(--line); border-radius: calc(var(--radius) * .75); transition: .15s; background: transparent; }
.pub .opt-body::after { content: ''; flex: none; width: 20px; height: 20px; margin-inline-start: auto; border-radius: 50%; border: 2px solid var(--line); transition: .15s; }
.pub .opt.multi .opt-body::after { border-radius: 6px; }
.pub .opt-body img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.pub .opt:hover .opt-body { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); transform: translateY(-1px); }
.pub .opt input:checked + .opt-body { border-color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.pub .opt input:checked + .opt-body::after { background: var(--brand); border-color: var(--brand); box-shadow: inset 0 0 0 3px var(--card); }
.pub .opt input:focus-visible + .opt-body { outline: 3px solid color-mix(in srgb, var(--brand) 40%, transparent); }

/* ---------- rating: numbers ---------- */
.pub .rating { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pub .rating label { cursor: pointer; }
.pub .rating input { position: absolute; opacity: 0; pointer-events: none; }
.pub .rating span { display: flex; width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--line);
                    align-items: center; justify-content: center; font-weight: 700; transition: .15s; }
.pub .rating label:hover span { border-color: var(--brand); }
.pub .rating input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; transform: scale(1.1); }
.pub .rating-hint { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .85rem; margin-top: 8px; }

/* ---------- rating: emoji ---------- */
.pub .rating.emoji span { width: auto; height: auto; padding: 4px 10px; border: 2px solid transparent; border-radius: 18px; font-size: 2.1rem; line-height: 1.4;
                          filter: grayscale(1); opacity: .55; }
.pub .rating.emoji label:hover span { filter: none; opacity: .9; border-color: var(--line); }
.pub .rating.emoji input:checked + span { filter: none; opacity: 1; transform: scale(1.2); background: var(--brand-soft); border-color: var(--brand); color: inherit; }

/* ---------- rating: stars (DOM order is max..min, shown reversed so hover fills the stars before it) ---------- */
.pub .stars { display: flex; flex-direction: row-reverse; justify-content: center; direction: rtl; gap: 2px; }
.pub .stars input { position: absolute; opacity: 0; pointer-events: none; }
.pub .stars label { font-size: 2.6rem; line-height: 1.1; color: var(--line); cursor: pointer; padding: 0 2px; transition: .15s; }
.pub .stars input:checked ~ label, .pub .stars label:hover, .pub .stars label:hover ~ label { color: #f59e0b; }
.pub .stars label:hover { transform: scale(1.15); }

/* ---------- rating: slider (bar) ---------- */
.pub .slider { padding: 6px 4px 0; }
.pub .slider-val { text-align: center; font-size: 2.2rem; font-weight: 800; color: var(--brand); min-height: 1.5em; line-height: 1.5; }
.pub .slider:not(.touched) .slider-val { color: var(--muted); }
.pub .slider input[type=range] { --p: 0%; width: 100%; height: 12px; margin: 10px 0 2px; border-radius: 99px; outline: none; cursor: pointer;
                                 -webkit-appearance: none; appearance: none;
                                 background: linear-gradient(to left, var(--brand) var(--p), var(--line) var(--p)); }
.pub .slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: var(--brand);
                                 border: 4px solid var(--card); box-shadow: 0 2px 10px rgba(0,0,0,.35); cursor: grab; }
.pub .slider input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); border: 4px solid var(--card); box-shadow: 0 2px 10px rgba(0,0,0,.35); cursor: grab; }
.pub .slider:not(.touched) input[type=range]::-webkit-slider-thumb { background: var(--muted); }
.pub .slider:not(.touched) input[type=range]::-moz-range-thumb { background: var(--muted); }

/* ---------- text answers ---------- */
.pub .txt { width: 100%; border: 2px solid var(--line); border-radius: calc(var(--radius) * .75); padding: 12px 14px; font: inherit; background: transparent; color: inherit; resize: vertical; }
.pub .txt:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }

/* ---------- buttons / navigation ---------- */
.pub .nav-s { display: flex; gap: 10px; }
.pub .nav-s .btn-s { flex: 1; }
.pub .btn-s { width: 100%; border: 0; border-radius: calc(var(--radius) * .75); padding: 15px; background: var(--brand); color: #fff; font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer;
              box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 35%, transparent); transition: .15s; }
.pub .btn-s:hover { filter: brightness(1.07); transform: translateY(-1px); }
.pub .btn-s:disabled { opacity: .6; cursor: wait; }
.pub .btn-ghost { border: 2px solid var(--line); background: transparent; color: var(--text); border-radius: calc(var(--radius) * .75); padding: 13px 22px; font: inherit; cursor: pointer; }
.pub .btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.pub .step-text { text-align: center; color: var(--muted); font-size: .9rem; margin-top: 12px; }
.pub .wizard .q-card { animation: pubFadeUp .35s ease; }
@keyframes pubFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.pub .alert-s { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 14px; padding: 12px 18px; margin-bottom: 16px; }
.pub .alert-s ul { margin: 0; padding-right: 18px; }
.pub .msg { text-align: center; padding: 44px 22px; }
.pub .msg-icon { font-size: 3.2rem; }
.pub .msg h1 { color: var(--brand); }
.pub .preview-wrap { padding: 18px; border-radius: 14px; }
.pub .preview-wrap .card-s { margin-bottom: 12px; }
@media (max-width: 480px) { .pub .card-s { padding: 16px; } .pub .rating span { width: 44px; height: 44px; } .pub .stars label { font-size: 2.2rem; } }

/* =====================================================================
   THEMES
   ===================================================================== */

/* modern = default values above */

/* aurora: colourful gradient + glass cards */
.pub.theme-aurora { --bg: linear-gradient(135deg, #1e1b4b 0%, color-mix(in srgb, var(--brand) 85%, #1e1b4b) 50%, color-mix(in srgb, var(--brand) 40%, #06b6d4) 100%);
  --card: rgba(255,255,255,.93); --radius: 24px; --shadow: 0 24px 50px rgba(0,0,0,.28); --hdr-text: #fff; background-attachment: fixed; }
.pub.theme-aurora .card-s { backdrop-filter: blur(14px); }
.pub.theme-aurora .intro { border-top: 0; }

/* ocean: calm blue with colourful header card */
.pub.theme-ocean { --bg: linear-gradient(180deg, color-mix(in srgb, var(--brand) 20%, #eaf6ff) 0%, #ffffff 75%); --radius: 22px; --line: #d7e6f3; --shadow: 0 10px 30px rgba(2,132,199,.12); }
.pub.theme-ocean .intro { border-top: 0; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #06b6d4)); color: #fff; }
.pub.theme-ocean .intro h1 { color: #fff; } .pub.theme-ocean .desc { color: rgba(255,255,255,.88); }

/* sunset: warm and friendly */
.pub.theme-sunset { --bg: linear-gradient(160deg, #fff7ed 0%, #ffe4e6 55%, #f3e8ff 100%); --radius: 26px; --line: #f3dcdc; --shadow: 0 12px 34px rgba(244,63,94,.12); }
.pub.theme-sunset .intro { border-top: 0; }
.pub.theme-sunset .intro h1 { background: linear-gradient(90deg, var(--brand), #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* forest: natural green */
.pub.theme-forest { --bg: #eaf3ec; --line: #d3e4d8; --radius: 14px; --shadow: 0 6px 20px rgba(22,101,52,.1); --text: #1c2b21; }
.pub.theme-forest .intro { background: color-mix(in srgb, var(--brand) 9%, #fff); border: 1px solid var(--line); border-top: 6px solid var(--brand); }

/* midnight: dark and elegant */
.pub.theme-midnight { --bg: radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--brand) 30%, #0a0f1f), #0a0f1f 60%);
  --card: #121a33; --text: #e6eaf7; --muted: #97a1c4; --line: #27325c; --hdr-text: #e6eaf7; --radius: 18px;
  --shadow: 0 0 0 1px #27325c, 0 18px 40px rgba(0,0,0,.45); background-attachment: fixed; }
.pub.theme-midnight .intro h1 { color: color-mix(in srgb, var(--brand) 70%, #fff); }
.pub.theme-midnight .btn-s { box-shadow: 0 0 26px color-mix(in srgb, var(--brand) 55%, transparent); }
.pub.theme-midnight .txt { background: #0d1428; }
.pub.theme-midnight .rating input:checked + span, .pub.theme-midnight .q-num { color: #fff; }
.pub.theme-midnight .q-num { background: color-mix(in srgb, var(--brand) 45%, #121a33); }
.pub.theme-midnight .alert-s { background: #3b1219; color: #fecaca; border-color: #7f1d1d; }

/* elegant: paper-like classic */
.pub.theme-elegant { --bg: #f6efe2; --card: #fffdf8; --line: #e6dcc8; --radius: 10px; --text: #3a2f1f; --muted: #7a6c55;
  --shadow: 0 2px 0 rgba(120,90,40,.06), 0 14px 30px rgba(120,90,40,.12); }
.pub.theme-elegant .intro { border-top: 0; border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: -9px; padding: 34px 28px; }
.pub.theme-elegant .q-num { border-radius: 8px; }

/* minimal: white and flat */
.pub.theme-minimal { --bg: #ffffff; --card: #ffffff; --line: #e5e7eb; --radius: 8px; --shadow: none; }
.pub.theme-minimal .card-s { border: 1px solid var(--line); }
.pub.theme-minimal .intro { border-top: 0; text-align: right; padding-inline: 4px; border: 0; }
.pub.theme-minimal .btn-s { box-shadow: none; }
.pub.theme-minimal .rating span { border-radius: 8px; }

/* candy: playful */
.pub.theme-candy { --bg: linear-gradient(135deg, #ffe3f1, #e0f2ff 60%, #fff6d6); --radius: 30px; --line: #f3d3e6; --shadow: 0 10px 0 rgba(236,72,153,.12);
  background-attachment: fixed; }
.pub.theme-candy .opt-body { border-width: 3px; border-radius: 999px; }
.pub.theme-candy .intro { border-top: 0; border: 3px dashed color-mix(in srgb, var(--brand) 50%, #fff); }
.pub.theme-candy .btn-s { border-radius: 999px; }

/* corporate: serious header */
.pub.theme-corporate { --bg: #e9edf3; --radius: 6px; --shadow: 0 1px 3px rgba(15,23,42,.14); --line: #d5dbe5; }
.pub.theme-corporate .intro { border-top: 0; background: var(--brand); color: #fff; text-align: right; }
.pub.theme-corporate .intro h1 { color: #fff; } .pub.theme-corporate .desc { color: rgba(255,255,255,.85); }
.pub.theme-corporate .q-num { border-radius: 4px; }

/* anti-spam trap field: invisible for people, bots fill it */
/* Anti-spam trap. It must NOT be moved far off-screen (left:-9999px): in a right-to-left page that creates a huge
   horizontal scroll area and mobile browsers zoom the page out until it looks empty. Clip it in place instead. */
.pub .hp { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
           overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }
.pub.page { overflow-x: hidden; }                       /* safety net: never allow sideways scrolling */
.pub .q-title, .pub .opt-body, .pub .intro h1, .pub .desc, .pub .msg { overflow-wrap: break-word; word-break: normal; }
.pub .opt-body > span, .pub .q-title > span { min-width: 0; }
.pub select.txt { appearance: auto; cursor: pointer; }
.pub .q-card[hidden] { display: none !important; }


/* live results after submit */
.pub .res-row { margin-bottom: 10px; }
.pub .res-top { display: flex; justify-content: space-between; gap: 10px; font-size: .95rem; margin-bottom: 4px; }
.pub .res-bar { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.pub .res-bar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; transition: width .6s; }
.pub .draft-note { background: var(--brand-soft); color: var(--text); border-radius: 14px; padding: 10px 16px; margin-bottom: 14px; font-size: .92rem; }