/* ==========================================================================
   cirkle campaigns — brand stylesheet
   Follows the cirkle Brand Guidelines:
   - Primary colours: Main Character Red #DA3839, Polar Storm White #FFFFFF, Flaming Brick Maroon #9A3636
   - Secondary colours: Green Flag Teal #56B490, Deep Space Charcoal #414042, Plot Twist Plum #8B3664
   - Typefaces: English: Syne (headings), Aptos (body copy); Bangla: Anek Bangla (headings), Noto Sans Bengali (body copy)
   - Logo: approved artwork files only, minimum 70 px wide on screen, with clear safe space
   ========================================================================== */

@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("fonts/Syne-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Noto Sans Bengali";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/NotoSansBengali-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Noto Sans Bengali";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("fonts/NotoSansBengali-Bold.ttf") format("truetype");
}
/* Anek Bangla Bold: Bangla headings (brand guidelines). Bengali and Latin parts (Latin for words such as "iPhone"). */
@font-face {
  font-family: "Anek Bangla";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("fonts/AnekBangla-Bold-bengali.woff2") format("woff2");
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}
@font-face {
  font-family: "Anek Bangla";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("fonts/AnekBangla-Bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Brand palette */
  --red: #DA3839;
  --maroon: #9A3636;
  --white: #FFFFFF;
  --teal: #56B490;
  --charcoal: #414042;
  --plum: #8B3664;

  /* Functional tints derived from the palette */
  --red-tint: #FCEEEE;
  --red-line: #F2C4C4;
  --teal-tint: #EAF6F1;
  --teal-ink: #2E7A5E;
  --ink: var(--charcoal);
  --muted: #6F6D70;
  --line: #E7E3E3;
  --canvas: #F7F5F4;
  --surface: var(--white);
  --grey-pill: #E4E1E1;
  --stage: #EFEAE7;         /* section panels (Leaderboard, Winner Gallery): one step deeper than the page */

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(65, 64, 66, .08);
  --shadow: 0 6px 20px rgba(65, 64, 66, .10), 0 1px 3px rgba(65, 64, 66, .08);
  --shadow-lg: 0 18px 48px rgba(65, 64, 66, .18);
  --focus: 0 0 0 3px rgba(218, 56, 57, .32);

  --font-heading: "Syne", "Noto Sans Bengali", "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: Aptos, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Bengali", sans-serif;
  --gutter: 16px;
}

html[lang="bn"] {
  --font-heading: "Anek Bangla", "Noto Sans Bengali", "Syne", sans-serif;
  --font-body: "Noto Sans Bengali", Aptos, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--canvas); }
body > main, body > .home-loader { flex: 1 0 auto; }
/* Header, page, footer: the page grows so the footer sits at the bottom of the window on short pages */
body {
  display: flex; flex-direction: column;
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/1.55 var(--font-body);
  /* Lining numerals (after the font shorthand, which resets them): Syne's default digits are old-style, so the 5 in
     "PS5" or the 3 in "3 easy steps" sat below the capitals. Inherited by every element, in every font. */
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--red); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-heading); font-weight: 700; line-height: 1.15; color: var(--ink); }
p { margin: 0; }
:focus-visible { outline: none; box-shadow: var(--focus); }

.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;
}

/* ---------------------------------------------------------------- app bar */
.app-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 64px;
  padding: 12px max(var(--gutter), calc((100% - 1040px) / 2));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
/* Horizontal logo; 28 px tall renders ~114 px wide (above the 70 px minimum) with safe space around it. */
.brand { display: inline-flex; align-items: center; padding: 6px 0; line-height: 0; }
.brand img { display: block; height: 28px; width: auto; }
/* Fixed size, so the button never moves when its text changes language or the Bangla font finishes loading */
.lang-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: 0 0 auto; width: 6.25rem; height: 36px; min-height: 36px; padding: 0 10px; white-space: nowrap;
  border: 1.5px solid var(--charcoal); border-radius: 999px;
  background: var(--surface); color: var(--charcoal);
  font-weight: 700; font-size: .875rem; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s;
}
.lang-toggle:hover { background: var(--charcoal); color: var(--white); }
.lang-toggle[data-target-lang="bn"] { font-family: "Noto Sans Bengali", var(--font-body); }

/* ---------------------------------------------------------------- site navigation (header) and footer */
.site-footer {
  display: flex; justify-content: center;
  padding: 28px var(--gutter) 32px;
  background: var(--surface); border-top: 1px solid var(--line);
}
.site-footer__logo { display: block; height: 22px; width: auto; }
.app-bar { flex-wrap: wrap; }
.site-nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.site-nav__link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px;
  border-radius: 999px; color: var(--charcoal); font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap;
}
a.site-nav__link:hover { background: var(--canvas); color: var(--red); }
.site-nav__link.is-current { background: var(--red-tint); color: var(--red); cursor: default; }
@media (min-width: 720px) {
  .app-bar .site-nav { margin-left: auto; margin-right: 8px; }
}
@media (max-width: 719px) {
  /* Phones: the menu gets its own row under the logo */
  .app-bar { row-gap: 8px; padding-bottom: 8px; }
  /* All four links fit on one row down to ~360 px wide; narrower screens wrap rather than hide a link */
  .app-bar .site-nav { order: 3; width: 100%; }
  .app-bar .site-nav ul { flex-wrap: wrap; justify-content: center; gap: 2px; }
  .app-bar .site-nav__link { min-height: 32px; padding: 5px 9px; font-size: .8rem; }
}

/* Home page: the Registration, Leaderboard and Winner Gallery sections one below the other */
.home-section { margin-top: 56px; scroll-margin-top: 120px; }
/* Until every section is ready, only the header and one loader show; then the whole page appears at once */
.home-loader { display: none; }
.home-loading .home-loader {
  display: flex; justify-content: center; align-items: center; gap: 12px;
  min-height: calc(100vh - 140px); color: var(--muted);
}
.home-loading .home-loader .spinner { color: var(--red); }
/* The "Loading…" message only appears if loading takes longer than 0.4 s, so a quick load shows no flash */
.home-loading .home-loader > * { opacity: 0; animation: home-loader-in .2s ease-out .4s forwards; }
@keyframes home-loader-in { to { opacity: 1; } }
/* The fade-in above replaces the spinner's own animation; keep both (fade in, and keep turning) */
.home-loading .home-loader > .spinner { animation: home-loader-in .2s ease-out .4s forwards, spin .8s linear infinite; }
.home-loading main, .home-loading .site-footer { display: none; }

/* ---------------------------------------------------------------- layout */
.page { width: min(1040px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 24px 0 40px; }
.page--narrow { width: min(720px, 100% - 2 * var(--gutter)); }
/* Pages that open with the banner: less space above it */
body[data-page="home"] .page, body[data-page="register"] .page { padding-top: 12px; }

.page-head { margin: 8px 0 24px; text-align: center; }
.page-title {
  font-size: clamp(1.75rem, 6vw, 2.6rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--charcoal);
}
html[lang="bn"] .page-title { text-transform: none; letter-spacing: 0; }
.page-subtitle { margin-top: 8px; color: var(--muted); font-size: 1rem; }

/* Guideline-style section headline: red Syne capitals over a red rule */
.section-title {
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--red);
  color: var(--red);
  font-size: clamp(1.05rem, 3.6vw, 1.3rem);
  letter-spacing: .02em;
  text-transform: uppercase;
}
html[lang="bn"] .section-title { text-transform: none; letter-spacing: 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  border: 0; border-radius: 999px;
  background: var(--red); color: var(--white);
  font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
}
.btn:hover { background: var(--maroon); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .65; cursor: progress; }
.btn--block { width: 100%; }
/* Secondary action: white with a red outline (same family as the red primary button) */
.btn--ghost { background: var(--surface); color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); }
.btn--ghost:hover { background: var(--red-tint); color: var(--maroon); box-shadow: inset 0 0 0 1.5px var(--maroon); }
.btn--sm { min-height: 36px; padding: 8px 16px; font-size: .875rem; }
.btn .spinner { width: 18px; height: 18px; border-width: 2.5px; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--charcoal); cursor: pointer;
}
.icon-btn:hover { border-color: var(--red); color: var(--red); }
/* Icons are injected into a <span data-icon>; make that span a centred box so the glyph sits exactly in the middle. */
[data-icon] { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
[data-icon] svg { display: block; flex: none; }
.icon-btn > [data-icon], .terms-plus > [data-icon] { width: 100%; height: 100%; }
.icon-btn svg { width: 20px; height: 20px; }

.spinner {
  display: inline-block; width: 22px; height: 22px;
  border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- forms */
.field { display: grid; gap: 6px; }
.field-label { font-weight: 700; font-size: .9rem; color: var(--ink); }
.req { color: var(--red); margin-left: 2px; }
.input, .textarea, .select {
  width: 100%; min-width: 0;
  min-height: 48px; padding: 12px 14px;
  border: 1.5px solid #D9D4D4; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font-size: 1rem; line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
.textarea { resize: vertical; min-height: 96px; }
.input::placeholder, .textarea::placeholder { color: #A3A0A1; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--red); box-shadow: var(--focus); }
.input[readonly] { background: var(--canvas); }
/* File pickers: the "Choose file" part looks like the secondary button */
.input[type="file"] { padding: 6px 8px; cursor: pointer; color: var(--muted); font-size: .9rem; }
.input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 7px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red);
  font: inherit; font-weight: 700; font-size: .85rem; transition: background .15s;
}
.input[type="file"]:hover::file-selector-button { background: var(--red-tint); }
.field.has-error .input, .field.has-error .textarea, .field.has-error .select { border-color: var(--red); background: #FFFBFB; }
.field-error { min-height: 0; color: var(--maroon); font-size: .85rem; font-weight: 600; }
.field-error:empty { display: none; }
.field-hint { color: var(--muted); font-size: .85rem; }

.grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

.alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radius-sm);
  font-size: .95rem; line-height: 1.45;
}
.alert:empty { display: none; }
.alert--error { background: var(--red-tint); color: var(--maroon); border: 1px solid var(--red-line); }
.alert--success { background: var(--teal-tint); color: var(--teal-ink); border: 1px solid #BFE3D4; }
.alert--info { background: #F3F1F1; color: var(--charcoal); border: 1px solid var(--line); }

/* Checkbox in the brand style (black check as in the reference design) */
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.check input {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 22px; width: 22px; height: 22px; margin: 0;
  border: 2px solid var(--charcoal); border-radius: 5px; background: var(--surface);
  display: grid; place-items: center; cursor: pointer;
}
.check input::after {
  content: ""; width: 6px; height: 11px; margin-top: -2px;
  border: solid var(--white); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0); transition: transform .12s;
}
.check input:checked { background: var(--charcoal); }
.check input:checked::after { transform: rotate(45deg) scale(1); }

/* ==========================================================================
   Registration page
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  /* Height follows the text; .hero__content keeps a fixed band above it for the banner artwork */
  border-radius: var(--radius-lg);
  background-color: var(--red);
  box-shadow: var(--shadow);
}
/* Anchored to the top: the artwork's upper part stays visible above the text on every screen shape */
.hero__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* Dark scrim keeps overlaid copy legible on any banner artwork */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20, 8, 8, 0) 25%, rgba(20, 8, 8, .55) 58%, rgba(20, 8, 8, .86) 100%);
}
/* Fallback when no banner image exists: brand red with the three-dot symbol motif */
.hero--fallback .hero__media { display: none; }
.hero--fallback::before {
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.16) 0 42px, transparent 43px),
    radial-gradient(circle at 92% 32%, rgba(255,255,255,.16) 0 42px, transparent 43px),
    radial-gradient(circle at 82% 46%, rgba(255,255,255,.16) 0 42px, transparent 43px),
    linear-gradient(160deg, var(--red) 0%, var(--maroon) 100%);
}
.hero__content { width: 100%; padding: clamp(18px, 5vw, 56px) clamp(20px, 5vw, 44px) clamp(20px, 5vw, 44px); color: var(--white); }
/* Title at most 2 lines (3 on wider screens), text 1 line; "Show more" (register.js) shows everything */
.hero__title, .hero__text { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.hero__title { -webkit-line-clamp: 2; padding-bottom: .06em; }
.hero__text { -webkit-line-clamp: 1; }
@media (min-width: 680px) { .hero__title { -webkit-line-clamp: 3; } }
.hero.is-expanded .hero__title, .hero.is-expanded .hero__text { display: block; -webkit-line-clamp: unset; }
.hero__more {
  margin-top: 2px; padding: 4px 0; border: 0; background: none;
  color: var(--white); font: inherit; font-size: .9rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.hero__title {
  margin: 0 0 10px; max-width: 18ch;
  color: var(--white);
  font-size: clamp(1.9rem, 7vw, 3.1rem); line-height: 1.08;
}
.hero__text { max-width: 56ch; color: rgba(255,255,255,.92); font-size: clamp(.98rem, 2.6vw, 1.08rem); }
.hero__form { display: grid; gap: 10px; margin-top: 22px; max-width: 520px; }
.hero__form-row { display: flex; gap: 10px; }
.hero__form .input { border-color: transparent; min-height: 52px; font-size: 1.05rem; letter-spacing: .02em; }
.hero__form .input:focus { border-color: var(--white); box-shadow: 0 0 0 3px rgba(255,255,255,.45); }
.hero__form .btn { min-height: 52px; flex: 0 0 auto; }
.hero__form .field-error { color: var(--white); background: rgba(154, 54, 54, .92); padding: 6px 10px; border-radius: 8px; width: fit-content; }
.hero__label { font-weight: 700; font-size: .9rem; color: var(--white); }
.hero__label .req { color: var(--white); }
.hero__closed {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 22px; max-width: 560px; padding: 14px 16px;
  border-radius: var(--radius); background: rgba(255,255,255,.96); color: var(--charcoal);
}
.hero__closed svg { flex: 0 0 24px; width: 24px; height: 24px; color: var(--red); }
.hero__closed strong { display: block; font-family: var(--font-heading); color: var(--red); margin-bottom: 2px; }
.hero__closed-date { font-weight: 700; color: var(--charcoal); }
.hero__closed-date:empty, #closed-message:empty { display: none; }
/* Number and Register side by side (keeps the banner short on phones); stacked only on very narrow screens */
.hero__form .input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) {
  .hero__form .btn { padding-inline: 18px; }
}
@media (max-width: 339px) {
  .hero__form-row { flex-direction: column; }
  .hero__form .btn { width: 100%; }
}

.reg-card { padding: clamp(18px, 4.5vw, 36px); }
.reg-card__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 8px; }
.reg-card__title { font-size: clamp(1.35rem, 4.6vw, 1.8rem); }
.reg-card__sub { margin-top: 4px; color: var(--muted); font-size: .92rem; }
.msisdn-pill {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin: 16px 0 4px; padding: 10px 14px;
  border-radius: var(--radius-sm); background: var(--red-tint); color: var(--maroon);
  font-size: .92rem;
}
.msisdn-pill strong { color: var(--charcoal); letter-spacing: .03em; }
.link-btn { padding: 0; border: 0; background: none; color: var(--red); font-weight: 700; text-decoration: underline; cursor: pointer; }

.form-section { display: grid; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }
fieldset.form-section { min-width: 0; margin: 0; border-width: 0 0 1px; border-style: solid; border-color: var(--line); }
.form-section:last-of-type { border-bottom: 0; }
.section-title .req { color: inherit; }

/* Photo picker */
.photo-picker { display: flex; align-items: center; gap: 16px; }
.photo-picker__preview {
  flex: 0 0 88px; width: 88px; height: 88px;
  display: grid; place-items: center; overflow: hidden;
  border: 2px dashed #D3CDCD; border-radius: 50%; background: var(--canvas); color: #B3ADAE;
}
.photo-picker__preview svg { width: 36px; height: 36px; }
.photo-picker__preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-picker.has-photo .photo-picker__preview { border: 3px solid var(--red); }
.photo-picker__body { display: grid; gap: 6px; justify-items: start; }
.field.has-error .photo-picker__preview { border-color: var(--red); background: #FFFBFB; }

/* Quiz */
.quiz-list { display: grid; gap: 14px; }
.quiz-card { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); }
.quiz-card__count { color: var(--red); font-family: var(--font-heading); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
html[lang="bn"] .quiz-card__count { letter-spacing: 0; font-size: .85rem; }
.quiz-card__q { margin: 6px 0 12px; font-weight: 700; font-size: 1.02rem; line-height: 1.4; }
.quiz-options { display: grid; gap: 8px; }
.quiz-option {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 48px; padding: 10px 14px;
  border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); text-align: left; line-height: 1.35; cursor: pointer;
  transition: border-color .15s, background .15s;
}
@media (hover: hover) { .quiz-option:hover { border-color: var(--charcoal); } }
.quiz-option__key {
  flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: var(--grey-pill); color: var(--charcoal); font-weight: 700; font-size: .85rem;
}
/* The chosen answer (can be changed any time; right or wrong is never shown). Neutral brand charcoal, not red
   (reads as "wrong") or teal (reads as "right"): it only shows what was chosen. */
.quiz-option.is-selected { border-color: var(--charcoal); box-shadow: inset 0 0 0 1px var(--charcoal); background: var(--surface); font-weight: 700; }
.quiz-option.is-selected .quiz-option__key { background: var(--charcoal); color: var(--white); }
.quiz-card.has-error { border-color: var(--red); }

/* Terms acceptance row: [x] I have read and agree to the Campaign Terms & Conditions. + */
.terms-row { display: grid; grid-template-columns: 22px 1fr; align-items: center; column-gap: 10px; font-size: .98rem; }
.terms-end { white-space: nowrap; }
.terms-text { margin: 0; line-height: 1.45; text-wrap: pretty; }
.terms-text label { cursor: pointer; }
.terms-link { color: var(--red); font-weight: 700; text-decoration: none; cursor: pointer; }
.terms-link:hover { text-decoration: underline; }
.terms-plus {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0;
  /* Sits in the text line, centred on the letters, without making the line taller; still a comfortable tap target.
     Red like the link it belongs to (both open the terms). */
  margin: -8px 0 -8px 1px; vertical-align: -0.15em;
  border: 0; border-radius: 6px; background: none; color: var(--red); cursor: pointer;
}
.terms-plus svg { width: 18px; height: 18px; }
@media (hover: hover) { .terms-plus:hover { background: var(--red-tint); } }

/* Registration result: registered / already registered, with the purchase button */
.reg-result { display: grid; justify-items: center; gap: 10px; max-width: 460px; margin: 8px auto 4px; padding: 8px 0 4px; text-align: center; }
.reg-result__title { font-size: clamp(1.3rem, 4.6vw, 1.6rem); }
.reg-result__text { color: var(--muted); }
.reg-result__number { margin: 4px 0 10px; padding: 8px 14px; border-radius: var(--radius-sm); background: var(--canvas); font-size: .92rem; }
.reg-result__number strong { letter-spacing: .03em; }
.reg-result .btn { margin-top: 4px; }

.form-actions { padding-top: 8px; display: grid; gap: 12px; }

/* ---------------------------------------------------------------- dialogs */
.dialog {
  width: min(560px, calc(100% - 2 * var(--gutter)));
  max-height: min(86vh, 760px);
  padding: 0; border: 0; border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.dialog::backdrop { background: rgba(30, 20, 20, .55); backdrop-filter: blur(2px); }
.dialog[open] { display: flex; flex-direction: column; animation: dialog-in .2s ease-out; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.dialog__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.dialog__title { font-size: 1.15rem; }
.dialog__body { padding: 20px; overflow-y: auto; }
/* Terms (pop-up and About page): layout of the Cirkle Fest terms document, in the brand colours */
.terms-text p { margin-bottom: 14px; color: var(--ink); line-height: 1.6; }
.terms-text p:last-child { margin-bottom: 0; }
.terms-text strong { display: block; margin-bottom: 2px; font-family: var(--font-heading); color: var(--charcoal); }
.terms-text .terms-cover { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1.5px solid var(--red); }
.terms-text .terms-cover p { margin: 0; }
.terms-text .terms-cover__label { color: var(--red); font-family: var(--font-heading); font-weight: 700; font-size: .8rem; letter-spacing: .08em; }
.terms-text .terms-cover__title { margin-top: 4px; color: var(--ink); font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 5vw, 1.75rem); line-height: 1.2; }
.terms-text .terms-cover .terms-cover__subtitle { margin-top: 6px; color: var(--muted); font-size: 1rem; }
.terms-text .terms-heading { margin: 20px 0 8px; color: var(--red); font-size: 1.08rem; }
.terms-text .terms-cover + .terms-heading { margin-top: 0; }
/* Terms popup: the terms text's own title (CIRKLE FEST / Terms & Conditions) is the heading, so the popup's header
   keeps only the close button (its title stays for screen readers); the button stays put while the text scrolls. */
#terms-dialog .dialog__head { justify-content: flex-end; padding: 10px 12px 0; border-bottom: 0; }
#terms-dialog .dialog__body { padding-top: 0; }
.terms-text .terms-list { display: grid; gap: 8px; margin: 0 0 14px; padding-left: 20px; color: var(--ink); line-height: 1.6; }
.terms-text .terms-list:last-child { margin-bottom: 0; }
.terms-text .terms-list li { color: var(--ink); }

/* Result icon: teal circle + check for success, plum circle + "i" for already registered */
.status-icon { width: 76px; height: 76px; margin-bottom: 4px; }
.status-icon circle.track { stroke: #EFECEC; }
.status-icon circle.arc { stroke-dasharray: 0 240; transform: rotate(-90deg); transform-origin: 50% 50%; }
.status-icon path { stroke-dasharray: 60; stroke-dashoffset: 60; }
.status-icon.is-done circle.arc { stroke: var(--teal); animation: ring .45s ease-out forwards; }
.status-icon.is-done path.check { stroke: var(--teal); animation: draw .35s .4s ease-out forwards; }
.status-icon.is-info circle.arc { stroke: var(--plum); animation: ring .45s ease-out forwards; }
.status-icon.is-info path.info { stroke: var(--plum); animation: draw .35s .4s ease-out forwards; }
@keyframes ring { to { stroke-dasharray: 240 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .status-icon circle.arc, .status-icon path { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* ==========================================================================
   Leaderboard
   ========================================================================== */
.lb-stage {
  position: relative; overflow: hidden;
  padding: clamp(18px, 4vw, 32px) clamp(10px, 3vw, 28px) clamp(24px, 5vw, 40px);
  /* Same section look as the Winner Gallery. Previous confetti look: design-backups/leaderboard-stage-confetti.css */
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--stage);
}
.week-tabs {
  display: flex; gap: 10px; justify-content: center;
  overflow-x: auto; scrollbar-width: none;
  /* The row scrolls sideways on phones, which clips anything outside it: the padding leaves room for the selected
     tab's glow and shadow on every side (margins pull the row back to its usual spacing). */
  margin: -8px auto 12px; padding: 12px 14px 20px;
}
.week-tabs::-webkit-scrollbar { display: none; }
.week-tab {
  flex: 0 0 auto; min-width: 96px; min-height: 40px; padding: 8px 18px;
  border: 0; border-radius: 999px;
  background: var(--grey-pill); color: var(--charcoal);
  font-weight: 700; font-size: .92rem; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.week-tab:hover { background: #D6D2D2; }
.week-tab[aria-selected="true"] {
  background: linear-gradient(180deg, var(--red) 0%, var(--maroon) 100%); color: var(--white);
  box-shadow: 0 0 0 3px rgba(218,56,57,.18), 0 4px 10px rgba(154,54,54,.30);
}
@media (max-width: 560px) { .week-tabs { justify-content: flex-start; } }

.podium {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 2.4vw, 22px); align-items: end;
  max-width: 760px; margin: 0 auto; padding-top: 14px;
}
.winner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  padding: 26px clamp(6px, 2vw, 16px) clamp(14px, 3vw, 20px);
  border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  text-align: center;
}
.winner--1 { grid-column: 2; grid-row: 1; padding-top: 32px; padding-bottom: clamp(20px, 4vw, 30px); border-color: var(--red-line); box-shadow: 0 14px 34px rgba(154, 54, 54, .22); transform: translateY(-14px); }
.winner--2 { grid-column: 1; grid-row: 1; }
.winner--3 { grid-column: 3; grid-row: 1; }
.winner__rank {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  padding: 5px 14px; border-radius: 999px;
  background: var(--red); color: var(--white);
  font-family: var(--font-heading); font-size: clamp(.68rem, 2.2vw, .85rem); white-space: nowrap;
  box-shadow: 0 4px 10px rgba(154,54,54,.3);
}
.winner--1 .winner__rank { background: linear-gradient(180deg, var(--red), var(--maroon)); font-size: clamp(.75rem, 2.6vw, .95rem); padding: 6px 16px; }
.winner__photo { position: relative; width: clamp(68px, 20vw, 112px); aspect-ratio: 1; margin: 6px 0 14px; }
.winner--1 .winner__photo { width: clamp(84px, 25vw, 140px); }
.winner__img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; border: 3px solid var(--red); background: var(--canvas);
}
/* Neutral avatar for numbers that are not registered */
.avatar-blank { display: grid; place-items: center; background: var(--canvas); color: #B3ADAE; }
.avatar-blank svg { width: 56%; height: 56%; }
/* Prize between the place badge and the photo */
.winner__prize {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  margin-top: 2px; padding: 3px 9px; border-radius: 999px;
  background: var(--red-tint); color: var(--maroon);
  font-weight: 700; font-size: clamp(.64rem, 2.1vw, .82rem); line-height: 1.25;
}
.winner__prize svg { flex: 0 0 auto; width: 1.15em; height: 1.15em; }
@media (max-width: 560px) {
  /* Narrow podium cards: icon above the prize name, which wraps only between words */
  .winner__prize { flex-direction: column; gap: 2px; padding: 4px 7px; border-radius: 10px; text-align: center; font-size: .66rem; }
  .winner__prize svg { width: 14px; height: 14px; }
}

/* Places 4 and below: a table that scrolls on its own, so the podium above stays in view.
   --lb-rows = rows visible before scrolling (Home page shows 2). */
.lb-table-wrap {
  --lb-rows: 4;
  max-height: calc(41px + var(--lb-rows) * 61px); overflow-y: auto;
  margin: 28px auto 0; max-width: 760px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm);
}
#home-leaderboard .lb-table-wrap { --lb-rows: 2; }
.lb-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; }
.lb-table th {
  position: sticky; top: 0; z-index: 1; height: 41px; padding: 8px 12px;
  background: var(--canvas); border-bottom: 1px solid var(--line);
  color: var(--muted); text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
html[lang="bn"] .lb-table th { text-transform: none; letter-spacing: 0; font-size: .8rem; }
.lb-table td { height: 61px; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink); }
.lb-table tbody tr:last-child td { border-bottom: 0; }
.lb-rank {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: 999px; background: var(--grey-pill); color: var(--charcoal); font-weight: 700; font-size: .8rem;
}
.lb-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-person__img { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--red-line); }
.lb-person strong { display: block; color: var(--charcoal); font-size: .88rem; line-height: 1.2; overflow-wrap: anywhere; }
.lb-person span { color: var(--muted); font-size: .75rem; letter-spacing: .03em; }
.lb-duration, .lb-prize { display: inline-flex; align-items: center; gap: 6px; line-height: 1.25; }
.lb-duration svg, .lb-prize svg { flex: 0 0 auto; width: 16px; height: 16px; }
.lb-duration svg { color: var(--muted); }
.lb-prize { color: var(--charcoal); font-weight: 600; }
.lb-prize svg { color: var(--red); }
@media (max-width: 560px) {
  .lb-table { font-size: .76rem; }
  .lb-table th, .lb-table td { padding: 8px 6px; }
  .lb-person { gap: 6px; }
  .lb-person__img { flex-basis: 30px; width: 30px; height: 30px; }
  .lb-person strong { font-size: .76rem; }
  .lb-person span { font-size: .68rem; }
  .lb-duration svg { display: none; }
  .lb-prize svg { width: 14px; height: 14px; }
}
.winner__ribbon {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  padding: 2px 14px; min-width: 76%;
  background: var(--red); color: var(--white);
  font-weight: 700; font-size: clamp(.62rem, 2vw, .8rem); line-height: 1.5; white-space: nowrap;
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(154,54,54,.35);
}
.winner__ribbon::before, .winner__ribbon::after {
  content: ""; position: absolute; top: 4px; z-index: -1;
  border: 9px solid var(--maroon);
}
.winner__ribbon::before { left: -10px; border-left-color: transparent; }
.winner__ribbon::after { right: -10px; border-right-color: transparent; }
.winner__name {
  max-width: 100%; color: var(--charcoal);
  font-weight: 700; font-size: clamp(.78rem, 2.8vw, 1.02rem); line-height: 1.25; overflow-wrap: anywhere;
}
.winner--1 .winner__name { font-size: clamp(.86rem, 3.2vw, 1.15rem); }
.winner__msisdn { color: var(--muted); font-size: clamp(.7rem, 2.4vw, .88rem); letter-spacing: .03em; }
/* Podium: time taken to consume the pack, a small clock line under the number */
.winner__duration { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 9px; border-radius: 999px; background: var(--canvas); color: var(--charcoal); font-size: clamp(.68rem, 2.3vw, .82rem); font-weight: 600; }
.winner__duration svg { width: 1.1em; height: 1.1em; color: var(--muted); flex: 0 0 auto; }
.winner__duration span { white-space: nowrap; }
@media (max-width: 560px) {
  /* Narrow podium cards: the same one-line pill, a little smaller, so the clock sits beside the time */
  .winner__duration { gap: 3px; padding: 2px 7px; font-size: .62rem; letter-spacing: -.01em; }
  .winner__duration svg { width: 10px; height: 10px; }
}
.lb-missing { color: var(--muted); }

.empty-state { display: grid; justify-items: center; gap: 12px; padding: 40px 16px; text-align: center; color: var(--muted); }
.empty-state svg { width: 56px; height: 56px; color: var(--red); opacity: .85; }
.loading-state { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 40px 16px; color: var(--muted); }
.loading-state .spinner { color: var(--red); }

/* ==========================================================================
   Winner gallery
   ========================================================================== */
.gallery { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gallery > .loading-state, .gallery > .empty-state, .gallery > .alert { grid-column: 1 / -1; }
.gallery-card { overflow: hidden; display: flex; flex-direction: column; margin: 0; }
.gallery-card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--canvas); display: block; }
.gallery-card__body { display: grid; gap: 6px; padding: 14px 16px 16px; }
.gallery-card__caption { color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; }

/* Public gallery: a self-contained section in a warm neutral one step deeper than the page background.
   Cards have a fixed height, so the section shows --gal-rows rows; the rest scroll inside it.
   Gallery page: 3 rows (capped to the screen height on phones). Home page: at least 2 photos. */
.gallery-stage {
  --gal-rows: 3; --gal-card: 330px; --gal-gap: 24px;
  --gal-height: calc(var(--gal-rows) * var(--gal-card) + (var(--gal-rows) - 1) * var(--gal-gap));
  padding: clamp(16px, 3.5vw, 32px);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--stage);
}
@media (max-width: 679px) {
  .gallery-stage { --gal-height: min(calc(3 * var(--gal-card) + 2 * var(--gal-gap)), calc(100svh - 140px)); }
}
#home-gallery .gallery-stage { --gal-rows: 2; --gal-height: calc(2 * var(--gal-card) + var(--gal-gap)); }
@media (min-width: 680px) {
  /* Two or more columns: one row already shows at least 2 photos */
  #home-gallery .gallery-stage { --gal-height: var(--gal-card); }
}
.gallery-stage .gallery {
  gap: var(--gal-gap); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* Room for card shadows and the scrollbar */
  max-height: calc(var(--gal-height) + 8px); padding: 4px 10px 4px 4px; margin: -4px -10px -4px -4px;
  overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #C9C2BE transparent;
}
.gallery-stage .gallery-card {
  height: var(--gal-card); border: 0; border-radius: 14px; box-shadow: var(--shadow);
}
.gallery-stage .gallery-card__img { aspect-ratio: auto; height: 220px; flex: 0 0 220px; }
.gallery-stage .gallery-card__body { flex: 1; align-content: start; gap: 8px; padding: 16px 18px 18px; }
.gallery-stage .gallery-card__caption {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-weight: 600;
}
.gallery-card__date { color: var(--muted); font-size: .82rem; }
/* Back to top (Home, Winner Gallery, Campaign modality): a quiet text link with a small red arrow badge */
/* Nearer the footer than the content above: 40px above, ~16px below (pulls into the page's 40px bottom padding) */
.back-to-top { display: flex; justify-content: center; margin: 40px 0 -24px; }
.to-top {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px; border: 0; border-radius: 999px; background: transparent;
  color: var(--muted); font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.to-top [data-icon] {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--red-tint); color: var(--red); transition: background-color .15s ease, color .15s ease;
}
.to-top svg { width: 15px; height: 15px; }
/* Hover look only with a real mouse: on touch screens a tapped button would otherwise stay red until the next tap
   elsewhere ("sticky hover"). A tap shows the same look briefly while pressed. */
@media (hover: hover) {
  .to-top:hover { color: var(--red); background: var(--surface); }
  .to-top:hover [data-icon] { background: var(--red); color: var(--white); }
}
.to-top:active { color: var(--red); background: var(--surface); }
.to-top:active [data-icon] { background: var(--red); color: var(--white); }

/* ==========================================================================
   Campaign modality
   ========================================================================== */
.intro-band {
  position: relative; overflow: hidden;
  padding: clamp(22px, 5vw, 40px);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--red) 0%, var(--maroon) 100%);
  color: var(--white);
}
/* With a background image (Campaign settings → About the Campaign page): the photo under a brand-red tint, so the
   white text stays readable */
.has-intro-image .intro-band {
  background:
    linear-gradient(150deg, rgba(218, 56, 57, .74) 0%, rgba(154, 54, 54, .84) 100%),
    var(--intro-image) center / cover no-repeat;
}
.intro-band::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 160px; height: 160px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.18) 0 22px, transparent 23px),
    radial-gradient(circle at 62% 42%, rgba(255,255,255,.18) 0 22px, transparent 23px),
    radial-gradient(circle at 30% 62%, rgba(255,255,255,.18) 0 22px, transparent 23px);
}
.intro-band h2 { color: var(--white); font-size: clamp(1.35rem, 5vw, 2rem); max-width: 22ch; }
.intro-band p { margin-top: 10px; max-width: 60ch; color: rgba(255,255,255,.92); }

/* Home: About the Campaign in the same panel as the Leaderboard and Winner Gallery, shown in full (no inner scroll) */
.about-stage {
  padding: clamp(16px, 3.5vw, 32px);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--stage);
}
@media (max-width: 679px) {
  .about-stage { padding: 14px; }
  /* Banner: little space above the title */
  .hero__content { padding-top: 18px; }
  .home-section { margin-top: 28px; }
  .home-section .page-head { margin: 0 0 14px; }
  .home-section .page-title { font-size: clamp(1.3rem, 6vw, 1.75rem); }
}
.about-stage .mod-section--plain { margin-bottom: 4px; }
.mod-section { margin-top: 28px; padding: clamp(18px, 4vw, 28px); }
.mod-section--plain { padding-inline: 0; }
.mod-section > p, .mod-section li { color: var(--ink); }
.mod-section > .section-title { margin-bottom: 16px; }
.mod-section > p + p { margin-top: 10px; }
.steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
/* The number badge is positioned on its own, so a step can hold any text (easy to edit on the page) */
.steps li { position: relative; min-height: 40px; padding-left: 54px; counter-increment: step; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--red); color: var(--white); font-family: "Syne", var(--font-body); font-weight: 700;
}
html[lang="bn"] .steps li::before { content: counter(step, bengali); font-family: "Noto Sans Bengali"; }
.steps strong { display: block; margin-bottom: 2px; color: var(--charcoal); }
.bullet-list { display: grid; gap: 8px; margin: 0; padding-left: 20px; }
.bullet-list li::marker { color: var(--red); }
.mod-section > * + * { margin-top: 14px; }
.mod-section > .section-title + * { margin-top: 0; }
.mod-section h3 { margin-top: 22px; font-family: var(--font-heading); font-size: 1rem; color: var(--charcoal); }
.mod-section h3 + * { margin-top: 8px; }
/* Tables (prizes, weekly targets, example): scroll sideways on narrow phones rather than squeezing */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.mod-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.mod-table th, .mod-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
/* Tables as in the modality document, in the brand colours: brand-red header row with white text, highlighted row in the light brand-red tint */
.mod-table th { background: var(--red); color: var(--white); font-weight: 700; white-space: nowrap; }
.mod-table tr.is-highlight td { background: var(--red-tint); }
/* "You can win on any day of the week": highlighted box (light brand-red tint) with a brand-red bold heading, as in the document */
.mod-section .mod-callout { padding: 16px 18px; border-radius: var(--radius-sm); background: var(--red-tint); }
.mod-section .mod-callout h3 { margin: 0 0 6px; color: var(--red); font-size: 1.05rem; }
.mod-section .mod-callout p { color: var(--ink); line-height: 1.6; }
.mod-section .mod-note { color: var(--muted); }
.mod-table tbody tr:last-child td { border-bottom: 0; }
.mod-table td:first-child { font-weight: 700; color: var(--charcoal); }
@media (max-width: 520px) {
  .mod-table { font-size: .86rem; }
  .mod-table th, .mod-table td { padding: 9px 10px; }
  .mod-table th { white-space: normal; }
}

/* Expandable terms bar, modelled on the reference: "Terms & conditions  +" */
.accordion { margin-top: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; list-style: none; cursor: pointer;
  font-weight: 700; color: var(--charcoal);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:focus-visible { border-radius: var(--radius); }
.accordion__icon { position: relative; flex: 0 0 22px; width: 22px; height: 22px; }
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px;
  background: var(--charcoal); border-radius: 2px; transform: translate(-50%, -50%);
  transition: transform .2s;
}
.accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion[open] .accordion__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.accordion__body { padding: 4px 18px 18px; border-top: 1px solid var(--line); }
.accordion__body .terms-text { padding-top: 14px; }

/* ==========================================================================
   Admin console (English only)
   ========================================================================== */
.admin-bar { gap: 16px; }
.admin-bar__left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.admin-tag {
  padding: 4px 10px; border-radius: 999px; background: var(--charcoal); color: var(--white);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.admin-nav { display: flex; gap: 4px; margin-left: auto; }
.admin-nav a {
  padding: 8px 14px; border-radius: 999px; color: var(--charcoal); text-decoration: none; font-weight: 700; font-size: .9rem;
}
.admin-nav a:hover { background: var(--canvas); }
.admin-nav a[aria-current="page"] { background: var(--red-tint); color: var(--red); }
.admin-nav { align-items: center; }
.admin-nav a { white-space: nowrap; }
/* Public pages in the admin header: lighter, after a divider */
.admin-nav__sep { flex: 0 0 1px; align-self: stretch; margin: 6px 6px; background: var(--line); }
.admin-nav a.admin-nav__site { padding: 8px 10px; color: var(--muted); font-weight: 600; font-size: .84rem; }
.admin-nav a.admin-nav__site:hover { color: var(--red); }
/* The page links have their own row under the logo and Sign out (scrolls sideways on phones) */
.admin-bar { flex-wrap: wrap; row-gap: 6px; }
.admin-bar #sign-out { margin-left: auto; }
.admin-nav { order: 3; width: 100%; margin: 0 0 0 -10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }

.admin-head { margin: 8px 0 22px; }
.admin-head h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
.admin-head p { margin-top: 6px; color: var(--muted); }
.panel { padding: clamp(18px, 3.5vw, 28px); margin-bottom: 20px; }
.panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.panel__title { font-size: 1.15rem; }
.panel__desc { color: var(--muted); font-size: .92rem; margin-top: 4px; }
.panel .form-grid { display: grid; gap: 16px; }
.panel .divider { height: 1px; background: var(--line); margin: 22px 0; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.muted { color: var(--muted); }
code { padding: 1px 6px; border-radius: 6px; background: var(--canvas); font-size: .88em; }
.sticky-actions {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 calc(-1 * clamp(18px, 3.5vw, 28px)) calc(-1 * clamp(18px, 3.5vw, 28px));
  padding: 14px clamp(18px, 3.5vw, 28px);
  border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius);
  background: rgba(255,255,255,.96);
}
.sticky-actions .alert { flex: 1 1 260px; }

.banner-preview {
  display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 16 / 7; border-radius: var(--radius); background: var(--canvas); border: 1px dashed #D3CDCD; color: var(--muted);
}
.banner-preview img { width: 100%; height: 100%; object-fit: cover; }
/* Campaign settings: the About intro box image (preview shows it as on the page, with the red tint) */
.about-image-settings { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.panel__subtitle { margin-bottom: 4px; font-size: 1rem; color: var(--charcoal); }
.about-image-preview .about-image-sample { display: flex; align-items: flex-end; width: 100%; height: 100%; padding: 14px 16px; border-radius: 0; }
.about-image-preview .about-image-sample strong { position: relative; z-index: 1; color: var(--white); font-size: .85rem; overflow-wrap: anywhere; }
.file-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .88rem; }
.file-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 8px; background: var(--canvas); }
.file-list .is-active { background: var(--teal-tint); color: var(--teal-ink); font-weight: 700; }
.banner-files { margin-top: 10px; }
/* The active banner row under the preview/upload (same green row as in the Banner files list) */
.banner-active { margin-top: 18px; }
/* Collapsible "Banner files (N)" heading */
.banner-files-toggle { margin-top: 12px; }
.banner-files-toggle > summary {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 0;
  font-weight: 700; font-size: .92rem; color: var(--charcoal); cursor: pointer; list-style: none;
}
.banner-files-toggle > summary::-webkit-details-marker { display: none; }
.banner-files-toggle > summary::before {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease;
}
.banner-files-toggle[open] > summary::before { transform: rotate(45deg); }
.banner-files-toggle > summary:hover { color: var(--red); }
.banner-files-toggle > .panel__desc { margin-top: 4px; }
.banner-delete { flex: 0 0 34px; width: 34px; height: 34px; }
.banner-delete svg { width: 17px; height: 17px; }
.banner-delete:disabled { opacity: .5; cursor: progress; }
.banner-files li { align-items: center; justify-content: flex-start; }
.banner-thumb { flex: 0 0 96px; width: 96px; height: 42px; object-fit: cover; border-radius: 6px; background: var(--line); }
.banner-file-text { display: grid; gap: 2px; min-width: 0; margin-right: auto; }
.banner-file-text strong { overflow-wrap: anywhere; color: var(--charcoal); }
.banner-file-text span { font-weight: 400; color: var(--muted); font-size: .8rem; }
.banner-files .is-active .banner-file-text span { color: var(--teal-ink); font-weight: 700; }

.admin-gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); max-height: 760px; overflow-y: auto; padding: 2px; }
.admin-gallery .gallery-card__body { gap: 10px; }
.admin-gallery .file-name { font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.caption-pair { display: grid; gap: 2px; font-size: .9rem; }
.caption-pair span { color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

/* Admin sign-in */
.login-dialog { width: min(400px, calc(100% - 2 * var(--gutter))); }
.login-dialog::backdrop { background: rgba(247, 245, 244, .97); backdrop-filter: blur(6px); }
.login-dialog .dialog__body { display: grid; gap: 16px; padding: 28px; }
.login-dialog .brand img { height: 32px; }
.login-dialog h2 { font-size: 1.3rem; }
.admin-locked main { visibility: hidden; }

/* ==========================================================================
   Campaign modality: in-place editor (admin, ?edit)
   ========================================================================== */
.mod-content--loading { visibility: hidden; }
.modality-editing { padding-bottom: 200px; }
.modality-editing #mod-content {
  outline: 2px dashed var(--red-line); outline-offset: 10px; border-radius: 4px; cursor: text; caret-color: var(--red);
}
.modality-editing #mod-content:focus { outline-color: var(--red); }
.modality-editing #mod-content a { pointer-events: none; }
.modality-editing .mod-section--plain { opacity: .55; position: relative; }
.modality-editing .mod-section--plain::before {
  content: "Edited in Campaign settings (not here)"; display: block; margin-bottom: 8px;
  font-size: .78rem; font-weight: 700; color: var(--muted);
}
.me-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; gap: 8px; padding: 10px var(--gutter) 12px;
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(65, 64, 66, .12);
  font-size: .85rem;
}
.me-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: min(1040px, 100%); margin: 0 auto; }
.me-title { font-family: var(--font-heading); color: var(--charcoal); }
.me-langs { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--canvas); }
.me-lang {
  position: relative; border: 0; border-radius: 999px; padding: 5px 14px; background: transparent;
  color: var(--muted); font-weight: 700; cursor: pointer;
}
.me-lang[lang="bn"] { font-family: "Noto Sans Bengali", var(--font-body); }
.me-lang[aria-pressed="true"] { background: var(--surface); color: var(--red); box-shadow: var(--shadow-sm); }
.me-lang.is-dirty::after { content: ""; position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.me-source { padding: 2px 10px; border-radius: 999px; background: var(--teal-tint); color: var(--teal-ink); font-weight: 700; font-size: .75rem; }
.me-unsaved { color: var(--muted); font-size: .8rem; }
.me-tools { gap: 4px; }
.me-tool {
  display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--charcoal); cursor: pointer;
}
.me-tool:hover { border-color: var(--red); color: var(--red); }
.me-tool svg { width: 17px; height: 17px; }
.me-text { font-weight: 700; font-size: .82rem; white-space: nowrap; }
.me-status { flex: 1 1 240px; color: var(--muted); }
.me-status[data-type="error"] { color: var(--red); font-weight: 700; }
.me-status[data-type="success"] { color: var(--teal-ink); font-weight: 700; }
.me-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.modality-editing #mod-content:focus-visible { box-shadow: none; }
@media (max-width: 600px) {
  /* Phones: one scrolling row of tools, compact actions, no hint text */
  .modality-editing { padding-bottom: 190px; }
  .me-bar { gap: 6px; padding: 8px 12px 10px; }
  .me-title, .me-status:not([data-type="error"]):not([data-type="success"]) { display: none; }
  .me-row { gap: 6px 8px; }
  .me-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .me-tool { flex: 0 0 auto; min-width: 32px; height: 32px; }
  .me-actions { width: 100%; flex-wrap: nowrap; }
  .me-actions .btn { flex: 1 1 auto; min-height: 34px; padding: 6px 8px; font-size: .78rem; }
}

/* Admin: leaderboard entry table (same column order as the Leaderboard page) */
.lb-editor-wrap { max-height: 520px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.lb-editor { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; font-size: .88rem; }
.lb-editor th {
  position: sticky; top: 0; z-index: 1; padding: 8px 6px; background: var(--canvas); border-bottom: 1px solid var(--line);
  color: var(--muted); text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.lb-editor td { padding: 4px 6px; border-bottom: 1px solid var(--line); }
.lb-editor tbody tr:last-child td { border-bottom: 0; }
.lb-editor th:first-child, .lb-editor td:first-child { width: 86px; }
.lb-editor th:last-child, .lb-editor td:last-child { width: 40px; text-align: center; }
.lb-editor__input { min-height: 36px; padding: 6px 10px; font-size: .88rem; }
.lb-editor__remove {
  width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent;
  color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.lb-editor__remove:hover { background: var(--red-tint); color: var(--red); }
.lb-editor-actions { align-items: center; }
/* Prize icon picker inside the "Prize won" cell: an icon button with a small arrow; the (invisible) list covers it */
.lb-prize-field { display: flex; align-items: center; gap: 6px; }
.lb-prize-field .lb-editor__input { flex: 1; min-width: 0; }
.lb-icon-picker {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 6px 0 7px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--red-tint); color: var(--red);
}
.lb-icon-picker::after { content: ""; width: 5px; height: 5px; margin: -3px 0 0 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.lb-icon-picker:hover, .lb-icon-picker:focus-within { border-color: var(--red); }
.lb-icon-picker:focus-within { box-shadow: var(--focus); }
.lb-icon-picker__preview { display: inline-grid; place-items: center; width: 20px; height: 20px; }
.lb-icon-picker__preview svg { width: 18px; height: 18px; }
.lb-icon-picker__select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: .85rem; }

/* Error / not-found page (error-page.html, served by AppErrorController) */
.error-page { display: grid; justify-items: center; gap: 12px; padding-top: 56px; text-align: center; align-content: start; }
.error-page__code { font-family: var(--font-heading); font-weight: 700; font-size: clamp(4rem, 18vw, 7rem); line-height: 1; color: var(--red-line); }
.error-page__text { color: var(--muted); max-width: 46ch; }
.error-page__bn { font-family: "Noto Sans Bengali", var(--font-body); color: var(--muted); max-width: 46ch; }
.error-page__bn strong { color: var(--charcoal); }
.error-page__actions { justify-content: center; margin-top: 12px; }
/* Header buttons (language toggle, Sign out) share the quiet charcoal outline */
.app-bar .btn--ghost { color: var(--charcoal); box-shadow: inset 0 0 0 1.5px var(--charcoal); }
.app-bar .btn--ghost:hover { background: var(--charcoal); color: var(--white); box-shadow: inset 0 0 0 1.5px var(--charcoal); }
.lang-toggle:hover { background: var(--charcoal); color: var(--white); }
/* A field with its button on the same line (wraps under it on narrow screens) */
.field-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.field-row__grow { flex: 1 1 240px; max-width: 360px; }

/* Home page: while the registration form or a result is shown, only the registration section is on the page */
body.is-registering #home-about, body.is-registering #home-leaderboard, body.is-registering #home-gallery { display: none; }

/* Podium on phones: compact cards (desktop unchanged) */
@media (max-width: 560px) {
  .podium { padding-top: 10px; }
  .winner { gap: 3px; padding: 20px 6px 10px; }
  .winner--1 { padding-top: 24px; padding-bottom: 12px; transform: translateY(-8px); }
  .winner__prize { flex-direction: row; gap: 3px; padding: 2px 7px; border-radius: 10px; font-size: .62rem; line-height: 1.2; }
  .winner__prize svg { width: 11px; height: 11px; }
  .winner__photo { width: 58px; margin: 4px 0 14px; }
  .winner--1 .winner__photo { width: 74px; }
  .winner__img { border-width: 2px; }
  .winner__name, .winner--1 .winner__name { font-size: .78rem; line-height: 1.2; }
  .winner__msisdn { font-size: .66rem; }
  .winner__duration { margin-top: 2px; }
}


/* A Bangla page stays hidden for a moment until its texts are applied (see the script in each page head) */
html.i18n-pending .app-bar > *, html.i18n-pending main, html.i18n-pending .site-footer { visibility: hidden; }

/* Week tabs: the previous week stays visible (faded) while the next one loads */
#winners { transition: opacity .15s; }
#winners.is-updating { opacity: .5; pointer-events: none; }

/* Admin pop-ups (confirmations and the link prompt; replaces the browser's own boxes) */
.admin-dialog { width: min(440px, calc(100% - 32px)); }
.admin-dialog__body { display: grid; gap: 10px; padding: 24px 24px 20px; }
.admin-dialog__title { font-size: 1.15rem; color: var(--charcoal); }
.admin-dialog__text { color: var(--muted); font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
.admin-dialog__field { margin-top: 4px; }
.admin-dialog__error:empty { display: none; }
.admin-dialog__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
/* The action button of a destructive pop-up (delete, remove, discard): deeper red */
.btn--danger { background: var(--maroon); }
.btn--danger:hover { background: #7A2828; }

/* Admin: shown while the server cannot be reached (e.g. restarting); the sign-in is kept and retried */
.admin-waiting {
  position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 60;
  display: flex; align-items: center; gap: 10px; padding: 14px 20px;
  border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-lg); color: var(--charcoal); font-weight: 600;
}
.admin-waiting .spinner { color: var(--red); }

/* Headings split their lines evenly (no single word left alone on a phone) */
.page-title, .section-title, .hero__title, .admin-dialog__title { text-wrap: balance; }

/* Phones: admin tabs on one row; the public pages on a quieter row below (wrapping, never hidden off-screen) */
@media (max-width: 720px) {
  .admin-nav { flex-wrap: wrap; overflow: visible; row-gap: 2px; padding-bottom: 2px; }
  .admin-nav__sep { flex: 0 0 100%; height: 1px; margin: 4px 0 2px 10px; background: var(--line); }
  .admin-nav a.admin-nav__site { padding: 4px 8px; font-size: .78rem; }
}

/* ---------------------------------------------------------------- admin: registration quiz editor */
.quiz-editor { display: grid; gap: 16px; margin-bottom: 12px; }
.quiz-edit { display: grid; gap: 12px; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); }
.quiz-edit__head { display: flex; align-items: center; gap: 8px; }
.quiz-edit__head h3 { margin: 0 auto 0 0; font-family: var(--font-heading); font-size: 1rem; color: var(--red); }
.quiz-edit__head .icon-btn { width: 34px; height: 34px; }
.quiz-edit__head .icon-btn svg { width: 18px; height: 18px; }
.quiz-edit__head .icon-btn:disabled { opacity: .35; cursor: default; border-color: var(--line); color: var(--charcoal); }
.quiz-edit__options { display: grid; gap: 8px; }
.quiz-edit__row { display: grid; grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.quiz-edit__row.is-head { color: var(--muted); font-size: .8rem; font-weight: 700; }
.quiz-edit__correct { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; white-space: nowrap; }
.quiz-edit__correct input { width: 18px; height: 18px; accent-color: var(--red); }
.quiz-edit__row.is-correct .input { border-color: var(--teal); background: var(--teal-tint); }
@media (max-width: 560px) {
  .quiz-edit__row { grid-template-columns: 1fr 1fr; }
  .quiz-edit__row .quiz-edit__correct { grid-column: 1 / -1; }
  .quiz-edit__row.is-head { display: none; }
}

/* ---------------------------------------------------------------- admin: collapsible sections (admin-common.js) */
.panel[data-section] { padding: 0; margin-bottom: 14px; overflow: hidden; }
.panel[data-section] > .panel__head { display: block; margin: 0; }
.panel__toggle {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 18px clamp(18px, 3.5vw, 28px); border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.panel__toggle-text { display: grid; gap: 3px; min-width: 0; flex: 1; }
.panel__toggle-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.12rem; color: var(--ink); }
.panel__status { color: var(--muted); font-family: var(--font-body, inherit); font-weight: 400; font-size: .88rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel__status:empty { display: none; }
.panel__chevron { flex: 0 0 22px; width: 22px; height: 22px; color: var(--charcoal); transition: transform .2s; }
.panel.is-open .panel__chevron { transform: rotate(180deg); }
@media (hover: hover) { .panel__toggle:hover .panel__toggle-title { color: var(--red); } }
.panel.is-open > .panel__head { border-bottom: 1px solid var(--line); }
.panel__body { padding: 18px clamp(18px, 3.5vw, 28px) clamp(18px, 3.5vw, 28px); }
.panel__body > .panel__desc:first-child { margin: 0 0 16px; }