/*
 * Klubblodd — Public brand CSS
 * Used by: buy.html, play.html, index.html og andre spillersider
 * Samme design-tokens som admin, men spillerfokusert layout
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;0,900;1,400&family=Inter:wght@400;500;600&display=swap');

:root {
  --kl-primary:  #1b577a;
  --kl-accent:   #1174ad;
  --kl-light:    #e8f4fc;
  --kl-bg:       #f2f5f8;
  --kl-white:    #ffffff;
  --kl-text:     #2c3e50;
  --kl-muted:    #7f8c8d;
  --kl-border:   #e8ecef;
  --kl-shadow:   0 2px 14px rgba(0,0,0,.09);
  --kl-radius:   12px;
  --kl-campaign: #1174ad;   /* overrides per-page via <style> */
}

* { box-sizing: border-box; -webkit-appearance: none; margin: 0; padding: 0; }

html, body {
  font-family: 'Inter', 'Roboto Condensed', Helvetica, sans-serif;
  font-size: 14px;
  background: var(--kl-bg);
  color: var(--kl-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--kl-accent); text-decoration: none; }

/* ── Top bar ─────────────────────────────────────────────── */

#kl_topbar {
  background: var(--kl-campaign);
  padding: 0 20px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

#kl_topbar .kl_logo {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 19px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.3px;
  line-height: 1;
}

#kl_topbar .kl_logo span {
  color: rgba(255,255,255,.45);
  font-weight: 300;
  font-size: 11px;
  display: block;
  letter-spacing: .5px;
  margin-top: 1px;
}

/* ── Hero (campaign color) ───────────────────────────────── */

#kl_hero {
  background: linear-gradient(135deg, var(--kl-campaign) 0%, color-mix(in srgb, var(--kl-campaign) 65%, #000) 100%);
  color: #fff;
  padding: 28px 20px 36px;
  position: relative;
  overflow: hidden;
}

#kl_hero::after {
  content: '';
  position: absolute;
  bottom: -30px; right: -30px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}

#kl_hero .kl_org_logo {
  height: 64px;
  border-radius: 8px;
  margin-bottom: 14px;
  display: block;
  background: rgba(255,255,255,.15);
}

#kl_hero .kl_org_name {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
}

#kl_hero .kl_org_purpose {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,.75);
  margin-top: 5px;
}

#kl_hero .kl_price_tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 30px;
  padding: 8px 22px;
  margin-top: 18px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 21px;
  font-weight: 700;
}

/* ── Stats strip ─────────────────────────────────────────── */

#kl_stats {
  display: flex;
  background: var(--kl-white);
  border-bottom: 1px solid var(--kl-border);
}

.kl_stat_item {
  flex: 1;
  text-align: center;
  padding: 14px 8px;
  border-right: 1px solid var(--kl-border);
}

.kl_stat_item:last-child { border-right: none; }

.kl_stat_item .val {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--kl-campaign);
  line-height: 1;
}

.kl_stat_item .lbl {
  font-size: 10px;
  color: var(--kl-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-top: 3px;
}

/* ── Page wrapper ────────────────────────────────────────── */

#kl_page {
  max-width: 520px;
  margin: 0 auto;
  padding-bottom: 60px;
}

/* ── Cards ───────────────────────────────────────────────── */

.kl_card {
  background: var(--kl-white);
  margin: 16px 16px 0;
  border-radius: var(--kl-radius);
  box-shadow: var(--kl-shadow);
  overflow: hidden;
}

.kl_card_head {
  padding: 11px 16px;
  background: #fafbfc;
  border-bottom: 1px solid var(--kl-border);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--kl-muted);
}

.kl_card_body { padding: 16px; }

/* ── Prize list ──────────────────────────────────────────── */

.kl_prize_item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #f3f3f3;
}

.kl_prize_item:last-child { border-bottom: none; }

.kl_prize_qty {
  min-width: 38px;
  height: 38px;
  background: var(--kl-light);
  color: var(--kl-campaign);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

.kl_prize_title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.kl_prize_value {
  font-size: 12px;
  color: var(--kl-muted);
  white-space: nowrap;
}

/* ── Buy form ────────────────────────────────────────────── */

.kl_label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--kl-muted);
  margin-bottom: 8px;
}

.kl_input_phone {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--kl-border);
  border-radius: 8px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--kl-text);
  letter-spacing: 2px;
  margin-bottom: 14px;
  transition: border-color .2s;
  background: #fff;
}

.kl_input_phone:focus {
  outline: none;
  border-color: var(--kl-campaign);
}

.kl_input_phone_subtle {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--kl-text);
}

.kl_btn_buy {
  width: 100%;
  padding: 17px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--kl-campaign), color-mix(in srgb, var(--kl-campaign) 60%, #000));
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .3px;
  transition: opacity .15s, transform .1s;
}

.kl_btn_buy:hover  { opacity: .92; }
.kl_btn_buy:active { transform: scale(.99); }
.kl_btn_buy:disabled { opacity: .5; cursor: not-allowed; }

.kl_error_msg {
  background: #fdf2f2;
  border: 1px solid #f5c6cb;
  border-radius: 6px;
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 13px;
  color: #721c24;
  display: none;
}

/* ── Sold out ────────────────────────────────────────────── */

.kl_sold_out {
  text-align: center;
  padding: 40px 20px;
  font-size: 20px;
  font-weight: 700;
  color: var(--kl-muted);
}

/* ── Footer ──────────────────────────────────────────────── */

.kl_footer {
  text-align: center;
  padding: 24px 20px 0;
  font-size: 11px;
  color: #aaa;
  line-height: 1.7;
}

.kl_footer a { color: #aaa; text-decoration: underline; }

/* -- Segmented choice (two or three options that read as buttons) --
   Used for the delivery choice a winner makes. The radio inputs are
   kept and only made invisible, so the form still submits without
   JavaScript, the arrow keys still move between the options, and a
   screen reader still announces a radio group. Hiding them with
   display:none would take all three of those away.                  */
.kl_choice {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.kl_choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.kl_choice label {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;          /* comfortable thumb target */
  padding: 12px 14px;
  border: 2px solid var(--kl-border);
  border-radius: 10px;
  background: var(--kl-white);
  color: var(--kl-text);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.kl_choice label:hover { border-color: var(--kl-campaign); }

.kl_choice input[type="radio"]:checked + label {
  border-color: var(--kl-campaign);
  background: var(--kl-campaign);
  color: var(--kl-white);
}

/* The outline normally sits on the input, which is invisible here, so
   it is moved onto the label the input controls. Without this the
   choice cannot be seen while tabbing through the form. */
.kl_choice input[type="radio"]:focus-visible + label {
  outline: 3px solid var(--kl-accent);
  outline-offset: 2px;
}

/* Side by side is the point of a segmented control, so they only stack
   where two of them genuinely stop fitting. 375px is the commonest
   phone width and must stay a row. */
@media (max-width: 340px) {
  .kl_choice { flex-direction: column; }
}