/* RevivalRO Loki Vote: layout glue for the vote panel's own pieces, on top of the Loki kit (lk/assets/css/loki.css =
   the main site's stylesheet, lk-panel.css = the panel components). Only the main site's tokens (--lk-*) and values:
   no new colours, no copies of components. Prefix lkv-. */

/* ---------- the vote card ---------- */
.lkv-vote .lk-card__head { margin-bottom: 18px; }
.lkv-vote .lk-card__title { flex-wrap: wrap; }

/* ready: the main site's vote badge beside the text and the button */
.lkv-ready { display: flex; align-items: center; gap: 24px; }
.lkv-ready__body { flex: 1 1 260px; min-width: 0; }
.lkv-badge { flex: 0 0 auto; display: block; width: 180px; transition: transform .2s var(--lk-ease); filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .5)); }
.lkv-badge:hover { transform: translateY(-4px) scale(1.03); }
.lkv-badge img { display: block; width: 100%; height: auto; }
/* the account cannot vote now: the badge greyed out and not a link (the old page's greyed vote image) */
.lkv-badge--off { filter: grayscale(1) drop-shadow(0 12px 24px rgba(0, 0, 0, .5)); opacity: .5; }
.lkv-badge--off:hover { transform: none; }
.lkv-ready__actions { align-items: center; }
.lkv-vote-btn .lkv-ext { font-size: .8em; opacity: .85; }
/* the topsite's own banner (config.php's $vote_image_url): small, beside the button; hidden when it does not load */
.lkv-topsite { display: inline-flex; align-items: center; max-width: 100%; border-radius: var(--lk-radius-xs); }
.lkv-topsite img { display: block; max-height: 54px; max-width: 100%; width: auto; height: auto; border-radius: var(--lk-radius-xs); }
.lkv-topsite.is-broken { display: none; }
.lkv-hint { align-items: flex-start; gap: 10px; flex-wrap: nowrap; color: var(--lk-text-2); font-size: var(--lk-fs-sm); line-height: 1.55; }
.lkv-hint > i { margin-top: 3px; color: var(--lk-blue-400); }
.lkv-hint > span { min-width: 0; }

/* waiting: the main site's countdown digits, the next vote and the bar */
.lkv-wait { display: flex; align-items: flex-start; gap: 18px; margin-top: 4px; padding: 18px 20px; border-radius: var(--lk-radius);
  background: rgba(21, 16, 39, .8); border: 1px solid var(--lk-line); }
.lkv-wait__tile { flex: 0 0 auto; }
.lkv-wait__body { flex: 1 1 auto; min-width: 0; }
.lkv-wait__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 4px; }
.lkv-wait__label { color: var(--lk-text-2); font-weight: 600; }
.lkv-wait__next { margin: 0 0 14px; color: var(--lk-text-2); font-size: var(--lk-fs-sm); }
.lkv-wait__next strong { color: var(--lk-text); }
.lkv-wait.is-done .lk-timer { color: var(--lk-success); }

.lkv-refusal { margin-top: 4px; }
.lkv-refusal .lk-alert p { margin-bottom: 6px; }

/* ---------- beside the card: the account's numbers ---------- */
/* one tile per row in the 360 px column (the labels stay on one line); side by side again when the column is the page's width */
.lkv-side .lkv-stats { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1024px) { .lkv-side .lkv-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } }
.lkv-side .lk-stat__value { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lkv-side .lk-stat__label i { flex: 0 0 auto; }
.lkv-stat--points .lk-stat__label i { color: var(--lk-gold-400); }
.lkv-side .lk-kv dd { font-variant-numeric: tabular-nums; }

/* ---------- help cards ---------- */
.lkv-help { margin-top: 40px; align-items: start; }
.lkv-help .lk-card__title { margin-bottom: 16px !important; }
.lkv-steps { margin-bottom: 16px; }
.lkv-spend { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--lk-text-2); }
.lkv-spend > i { margin-top: 4px; color: var(--lk-gold-400); }
.lkv-spend code { padding: 1px 6px; border-radius: var(--lk-radius-xs); background: rgba(11, 8, 23, .75); border: 1px solid var(--lk-line-2); color: var(--lk-purple-200); font-size: .92em; }
.lkv-tips { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.lkv-tips li { display: flex; align-items: flex-start; gap: 12px; color: var(--lk-text-2); }
.lkv-tips li > i { flex: 0 0 18px; margin-top: 4px; color: var(--lk-purple-400); text-align: center; }
.lkv-tips li b { color: #fff; }
.lkv-tips__note { margin: 0; padding-top: 14px; border-top: 1px solid var(--lk-line); color: var(--lk-text-3); font-size: var(--lk-fs-sm); line-height: 1.6; }
.lkv-tips__note a, .lkv-before a { color: var(--lk-purple-200); text-decoration: underline; text-decoration-color: rgba(201, 163, 255, .5); text-underline-offset: 2px; }

/* ---------- the log in card's notes ---------- */
.lkv-before { margin-top: 18px; }

/* the screening refusal's facts (only when config.php switches the screening on) */
.lkv-screen { margin: 8px 0 10px; }

/* ---------- message pages: the reward of "Vote verified", "Taking you to the vote page in 5 seconds" ---------- */
.lkv-gain { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0 0 8px; color: var(--lk-text-2); font-weight: 600; }
.lkv-gain__value { font-family: var(--lk-font-display); font-size: var(--lk-fs-2xl); font-weight: 800; line-height: 1.1; color: var(--lk-gold-300); font-variant-numeric: tabular-nums; }
.lkv-redirect { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin: 0; color: var(--lk-text-3); font-size: var(--lk-fs-sm); }
.lkv-redirect > i { color: var(--lk-purple-400); }
.lkv-redirect__secs { font-variant-numeric: tabular-nums; color: var(--lk-text); font-weight: 700; }
.lkv-linkbtn { padding: 2px 4px; border: 0; background: none; color: var(--lk-purple-200); font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(201, 163, 255, .5); text-underline-offset: 2px; }
.lkv-linkbtn:hover { color: #fff; }
.lkv-redirect[tabindex="-1"]:focus { outline: none; }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .lkv-ready { flex-direction: column; align-items: stretch; gap: 16px; }
  .lkv-badge { width: 132px; align-self: center; }
  .lkv-ready__actions .lkv-vote-btn { flex: 1 1 100%; }
  .lkv-topsite { align-self: center; }
  .lkv-wait { flex-direction: column; gap: 12px; padding: 16px; }
  .lkv-help { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .lkv-badge { transition: none; }
  .lkv-badge:hover { transform: none; }
}