/* ==========================================================================
   Ottawa's Best Jollof — Voting Ballot Stylesheet (index.php ONLY)
   Mobile-first, 390px canonical viewport. Kept deliberately separate from
   assets/css/style.css (used by verify.php, submit.php, resend.php, the
   admin dashboard, and the info pages) so this redesign cannot leak into
   pages outside its scope. See implementation spec §28.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --ojf-orange: #F4510B;
  --ojf-orange-dark: #D94308;
  --ojf-black: #171717;
  --ojf-muted: #666666;
  --ojf-border: #E7E3E0;
  --ojf-orange-soft: #FFF4EA;
  --ojf-selected: #FFF7F1;
  --ojf-white: #FFFFFF;
  --ojf-error: #B42318;
  --ojf-whatsapp: #25D366;
  --ojf-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* --------------------------------------------------------------------- */
/* Reset & base                                                          */
/* --------------------------------------------------------------------- */

.vote-page, .vote-page *, .vote-page *::before, .vote-page *::after {
  box-sizing: border-box;
}

.vote-page {
  margin: 0;
  background: var(--ojf-white);
  color: var(--ojf-black);
  font-family: var(--ojf-font);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

.vote-page img { max-width: 100%; display: block; }
.vote-page a { color: inherit; }
.vote-page button { font-family: inherit; }

.vote-page :focus-visible {
  outline: 3px solid rgba(244, 81, 11, .35);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .vote-page * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.vote-page a.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ojf-black);
  color: var(--ojf-white);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 8px 0;
  z-index: 100;
  font-weight: 600;
  text-decoration: none;
}
.vote-page a.skip-link:focus { left: 0; }

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

/* --------------------------------------------------------------------- */
/* Container / responsive widths (spec §4, §23)                          */
/* --------------------------------------------------------------------- */

.vote-shell {
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

@media (max-width: 350px) {
  .vote-shell { padding-left: 12px; padding-right: 12px; }
}

@media (min-width: 768px) {
  .vote-shell { max-width: 720px; }
}

@media (min-width: 1024px) {
  .vote-shell { max-width: 820px; }
}

/* Header brand sits full-bleed with no side padding of its own — the
   centered flex content never approaches the viewport edge at 320px. */
.vote-shell--flush {
  padding-left: 0;
  padding-right: 0;
}

/* Narrower reading column used for hero copy, the email/checkbox/button
   stack, verification note, share section and footer, so those elements
   don't stretch edge-to-edge inside the wider 820px ballot shell. */
.vote-narrow {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------- */
/* Header (spec §7)                                                      */
/* --------------------------------------------------------------------- */

.vote-header {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #EEEEEE;
}

.vote-header__brand {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 8px 0;
  text-decoration: none;
}

.vote-header__logo {
  max-width: 150px;
  max-height: 55px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------- */
/* Hero (spec §5, §8)                                                    */
/* --------------------------------------------------------------------- */

.vote-hero {
  padding-top: 20px;
  text-align: center;
}

.vote-title {
  font-size: 27px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 0;
}

.vote-title__highlight { color: var(--ojf-orange); }

.vote-subtitle {
  font-size: 15px;
  font-weight: 500;
  color: #333333;
  text-align: center;
  margin: 8px 0 0;
}

@media (min-width: 1024px) {
  .vote-title { font-size: 38px; }
}

/* --------------------------------------------------------------------- */
/* Countdown strip (spec §9)                                             */
/* --------------------------------------------------------------------- */

.vote-countdown {
  height: 52px;
  margin-top: 18px;
  border-radius: 10px;
  background: var(--ojf-orange-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
}

.vote-countdown__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--ojf-orange);
}

.vote-countdown__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ojf-black);
  white-space: nowrap;
}

.vote-countdown__digits {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.vote-countdown__unit {
  font-size: 16px;
  font-weight: 700;
  color: var(--ojf-orange);
  white-space: nowrap;
}

@media (max-width: 350px) {
  .vote-countdown { gap: 5px; padding: 0 6px; }
  .vote-countdown__digits { gap: 3px; }
}

.vote-closed {
  margin-top: 18px;
  border-radius: 10px;
  background: var(--ojf-black);
  color: var(--ojf-white);
  padding: 16px;
  text-align: center;
}

.vote-closed h2 {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 4px;
}

.vote-closed p {
  margin: 0;
  font-size: 14px;
  color: #D8D8D8;
}

/* --------------------------------------------------------------------- */
/* Section heading (spec §10)                                            */
/* --------------------------------------------------------------------- */

.vote-section-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
  margin: 24px 0 10px;
}

.vote-section-title span {
  font-weight: 400;
  text-transform: none;
  color: var(--ojf-muted);
  font-size: 13px;
}

.vote-section-title__underline {
  width: 32px;
  height: 3px;
  border-radius: 3px;
  background: var(--ojf-orange);
  margin-top: 8px;
}

/* --------------------------------------------------------------------- */
/* Restaurant ballot (spec §11–§14, §30)                                 */
/* --------------------------------------------------------------------- */

.restaurant-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.restaurant-list .restaurant-option {
  width: 100%;
}

@media (min-width: 768px) {
  .restaurant-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .restaurant-list .restaurant-option {
    width: calc(50% - 4px);
  }
}

.restaurant-option {
  position: relative;
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--ojf-border);
  border-radius: 8px;
  background: var(--ojf-white);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

@media (hover: hover) {
  .restaurant-option:hover {
    border-color: var(--ojf-orange);
    background: #FFF9F5;
  }
}

.restaurant-option__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.restaurant-option__radio {
  width: 20px;
  height: 20px;
  border: 2px solid #B9B2AC;
  border-radius: 50%;
  flex: 0 0 20px;
  position: relative;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.restaurant-option__logo {
  width: 78px;
  height: 44px;
  flex: 0 0 78px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.restaurant-option__logo img {
  max-width: 72px;
  max-height: 38px;
  object-fit: contain;
}

.restaurant-option__monogram {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--ojf-orange), var(--ojf-orange-dark));
}

.restaurant-option__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ojf-black);
  overflow-wrap: break-word;
}

.restaurant-option--long .restaurant-option__name {
  font-size: 15px;
}

/* Selected state — the plain class is applied server-side (PHP) and
   kept in sync client-side by assets/js/app.js on change. The :has()
   version is a progressive enhancement for instant same-tick styling
   and is deliberately kept in SEPARATE rules from the class selector:
   combining them in one comma list would make the whole rule invalid
   in any engine that doesn't parse :has(), silently losing the class
   fallback too. */
.restaurant-option--selected {
  border: 2px solid var(--ojf-orange);
  background: var(--ojf-selected);
  padding: 5px 9px;
  box-shadow: 0 2px 8px rgba(244, 81, 11, .08);
}

.restaurant-option:has(.restaurant-option__input:checked) {
  border: 2px solid var(--ojf-orange);
  background: var(--ojf-selected);
  padding: 5px 9px;
  box-shadow: 0 2px 8px rgba(244, 81, 11, .08);
}

.restaurant-option--selected .restaurant-option__radio {
  border-color: var(--ojf-orange);
  background: var(--ojf-orange);
}

.restaurant-option:has(.restaurant-option__input:checked) .restaurant-option__radio {
  border-color: var(--ojf-orange);
  background: var(--ojf-orange);
}

.restaurant-option--selected .restaurant-option__radio::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -60%) rotate(-45deg);
}

.restaurant-option:has(.restaurant-option__input:checked) .restaurant-option__radio::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -60%) rotate(-45deg);
}

.restaurant-option:has(.restaurant-option__input:focus-visible) {
  outline: 3px solid rgba(244, 81, 11, .35);
  outline-offset: 2px;
}

.restaurant-option__error-note {
  color: var(--ojf-error);
  font-size: 13px;
  font-weight: 600;
  margin: -4px 0 12px;
}

/* --------------------------------------------------------------------- */
/* Honeypot                                                              */
/* --------------------------------------------------------------------- */

.vote-page .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------- */
/* Email field (spec §15)                                                */
/* --------------------------------------------------------------------- */

.vote-field {
  margin-top: 24px;
}

.vote-field__label {
  display: block;
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.vote-field__label-hint {
  font-weight: 400;
  text-transform: none;
  color: var(--ojf-muted);
  font-size: 13px;
}

.vote-input-wrap {
  position: relative;
}

.vote-input-wrap__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #999999;
  pointer-events: none;
}

.vote-input {
  width: 100%;
  height: 52px;
  border: 1px solid #CCC4BF;
  border-radius: 7px;
  padding: 0 14px 0 42px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ojf-black);
  background: var(--ojf-white);
  transition: border-color 0.12s ease;
}

.vote-input:focus {
  outline: none;
  border-color: var(--ojf-orange);
}

.vote-field--invalid .vote-input {
  border-color: var(--ojf-error);
}

.vote-field__error {
  display: block;
  color: var(--ojf-error);
  font-size: 13px;
  font-weight: 600;
  margin-top: 6px;
}

/* --------------------------------------------------------------------- */
/* Taster draw + marketing checkboxes (spec §16, §17)                    */
/* --------------------------------------------------------------------- */

.vote-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  cursor: pointer;
  min-height: 44px;
}

.vote-checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--ojf-orange);
}

.vote-checkbox__text {
  font-size: 15px;
  font-weight: 600;
  color: var(--ojf-black);
}

.vote-checkbox__text small {
  display: block;
  font-weight: 400;
  color: var(--ojf-muted);
  font-size: 13px;
  margin-top: 2px;
}

.vote-checkbox__rules-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #B9B2AC;
  color: var(--ojf-muted);
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
  text-decoration: none;
  vertical-align: middle;
}

.vote-checkbox--marketing {
  opacity: 0.85;
}

.vote-checkbox--marketing .vote-checkbox__text {
  font-size: 14px;
  font-weight: 500;
}

/* --------------------------------------------------------------------- */
/* Cast My Vote button (spec §18)                                        */
/* --------------------------------------------------------------------- */

.vote-submit {
  width: 100%;
  min-height: 56px;
  margin-top: 18px;
  border: 0;
  border-radius: 7px;
  background: var(--ojf-orange);
  color: var(--ojf-white);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.05s ease;
}

.vote-submit:hover { background: var(--ojf-orange-dark); }
.vote-submit:active { transform: translateY(1px); }

.vote-submit[disabled] {
  opacity: 0.65;
  cursor: wait;
}

/* --------------------------------------------------------------------- */
/* Form-level errors                                                     */
/* --------------------------------------------------------------------- */

.vote-form-errors {
  background: #FCEBEB;
  border: 1px solid #F0B4B4;
  color: var(--ojf-error);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
}

.vote-form-errors ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-weight: 400;
}

.vote-campaign-banner {
  background: var(--ojf-orange-soft);
  color: var(--ojf-orange-dark);
  border: 1px solid var(--ojf-orange);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 16px;
}

/* --------------------------------------------------------------------- */
/* Verification trust note (spec §20)                                    */
/* --------------------------------------------------------------------- */

.vote-trust {
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  color: #555555;
  margin-top: 14px;
}

.vote-trust strong { color: var(--ojf-black); }

.vote-trust__line1 {
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.vote-trust__line1 svg { width: 14px; height: 14px; flex: 0 0 auto; }

.vote-trust__line2 { margin-top: 2px; color: #666666; }

/* --------------------------------------------------------------------- */
/* Check-your-email / already-voted states                               */
/* --------------------------------------------------------------------- */

.vote-status {
  margin-top: 20px;
  text-align: center;
}

.vote-status__icon {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 10px;
}

.vote-status__heading {
  font-size: 21px;
  font-weight: 800;
  margin: 0 0 8px;
}

.vote-status__body {
  font-size: 15px;
  color: var(--ojf-muted);
  margin: 0 0 4px;
}

.vote-status__email {
  display: inline-block;
  font-weight: 700;
  font-size: 16px;
  background: var(--ojf-orange-soft);
  border-radius: 7px;
  padding: 8px 16px;
  margin: 10px 0;
}

.vote-status__resend {
  margin-top: 14px;
}

.vote-link-button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ojf-orange);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* --------------------------------------------------------------------- */
/* Share & Support (spec §21)                                            */
/* --------------------------------------------------------------------- */

.vote-share {
  margin-top: 28px;
  text-align: center;
}

.vote-share__heading {
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 14px;
}

.vote-share__grid {
  display: flex;
  gap: 6px;
}

.vote-share__grid .vote-share__item {
  flex: 1 1 0;
  min-width: 0;
}

.vote-share__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 4px;
  min-height: 48px;
  text-decoration: none;
  color: var(--ojf-black);
}

.vote-share__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.vote-share__icon svg { width: 20px; height: 20px; }

.vote-share__item--whatsapp .vote-share__icon { background: var(--ojf-whatsapp); color: #fff; }
.vote-share__item--instagram .vote-share__icon { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF, #515BD4); color: #fff; }
.vote-share__item--x .vote-share__icon { background: var(--ojf-black); color: #fff; }
.vote-share__item--copy .vote-share__icon {
  background: var(--ojf-white);
  border: 1.5px solid var(--ojf-border);
  color: var(--ojf-black);
}
.vote-share__item--copy.vote-share__item--copied .vote-share__icon {
  border-color: var(--ojf-orange);
  color: var(--ojf-orange);
}

.vote-share__label {
  font-size: 11px;
  font-weight: 600;
}

.vote-share--prominent .vote-share__heading {
  color: var(--ojf-orange-dark);
}

/* Visually hidden but still focusable/selectable input backing the
   Copy Link button — reuses assets/js/share.js unchanged. */
.vote-copy-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------- */
/* Footer (spec §22)                                                     */
/* --------------------------------------------------------------------- */

.vote-footer {
  margin-top: 32px;
  padding: 18px 0 28px;
  border-top: 1px solid #EEEEEE;
  text-align: center;
}

.vote-footer__url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ojf-muted);
}

.vote-footer__url svg { width: 13px; height: 13px; }

.vote-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  font-size: 12px;
  margin-top: 10px;
  color: var(--ojf-muted);
}

.vote-footer__links a { text-decoration: underline; }