/* Shared component styles for World Cup 2026 pages (header, prize/insurance
   section, footer, text highlights). Loaded alongside wc-shared.js so any
   page can mount these components without copying markup/CSS. */

/* ===== Highlights ===== */
.lh { color: #66FF92; font-weight: 900; }
.lhb { color: #9CEBFF; font-weight: 900; }

/* ===== Header / nav ===== */
.wc-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.86); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid var(--border-default); }
.wc-nav { max-width: 1320px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wc-nav .wc-logo { display: flex; align-items: center; gap: 9px; }
.wc-nav .wc-logo img { height: 38px; width: auto; display: block; }
.wc-nav .wc-right { display: flex; align-items: center; gap: 16px; }
.wc-nav .wc-navlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; color: #1B1D20; white-space: nowrap; text-decoration: none; }
.wc-nav .wc-pill { display: inline-flex; align-items: center; white-space: nowrap; font-size: 13px; font-weight: 800; color: #00873E; background: var(--primary-95); border: 1px solid var(--primary-90); border-radius: 9999px; padding: 7px 12px; }
@media (max-width: 640px) { .wc-nav .wc-pill { display: none; } }

/* ===== Prize / insurance + lookup section ===== */
.prize-sec { position: relative; overflow: hidden; padding: 58px 24px 72px; background: radial-gradient(circle at 82% 12%,rgba(20,197,96,.22),rgba(20,197,96,0) 34%),radial-gradient(circle at 12% 78%,rgba(33,183,255,.18),rgba(33,183,255,0) 32%),linear-gradient(145deg,#061637 0%,#071022 48%,#0B2A1D 100%); }
.prize-inner { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, .9fr); gap: 32px; align-items: start; }
.prize-content { display: flex; flex-direction: column; gap: 22px; min-width: 0; color: #fff; }
.prize-pill { display: inline-flex; align-items: center; align-self: flex-start; background: rgba(102,255,146,.12); color: #66FF92; border: 1px solid rgba(102,255,146,.28); border-radius: 9999px; padding: 7px 12px; font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.prize-title { font-family: var(--font-display); font-size: 42px; line-height: 1.08; font-weight: 900; margin: 14px 0 0; color: #fff; text-shadow: 0 18px 45px rgba(0,0,0,.32); max-width: 760px; overflow-wrap: break-word; }
.t-muted { color: rgba(255,255,255,.92); }
.t-fun { color: #66FF92; text-shadow: 0 0 24px rgba(102,255,146,.3); }
.t-shield { color: #9CEBFF; text-shadow: 0 0 24px rgba(156,235,255,.26); }
.t-real { color: #fff; background: linear-gradient(90deg,#fff 0%,#DFFFE9 52%,#66FF92 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.prize-desc { max-width: 690px; margin: 14px 0 0; font-size: 16px; line-height: 1.58; color: rgba(255,255,255,.76); }
.tip-card { position: relative; margin-top: 16px; max-width: 760px; min-height: 76px; color: rgba(255,255,255,.84); padding: 4px 0 0; }
.tip-content { min-width: 0; display: flex; flex-direction: column; gap: 7px; padding-top: 1px; }
.tip-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1; }
.brand-dark { color: #66FF92; font-weight: 900; text-decoration: none; white-space: nowrap; border-bottom: 1px solid rgba(102,255,146,.72); }
.tip-label { color: #66FF92; font-weight: 900; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.tip-count { margin-left: auto; color: rgba(255,255,255,.5); font-weight: 900; font-size: 11px; letter-spacing: .04em; }
.tip-text { margin: 0; color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.45; min-height: 19px; }
.tip-text i { color: #fff; font-style: italic; font-weight: 800; }
.tip-text .s { color: #66FF92; font-weight: 900; }
.tip-text .b { color: #9CEBFF; font-weight: 900; }
.tip-track { width: 100%; max-width: 560px; height: 2px; border-radius: 9999px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 3px; }
.tip-bar { display: block; height: 100%; width: 100%; border-radius: 9999px; background: linear-gradient(90deg,#14C560 0%,#66FF92 58%,#9CEBFF 100%); transform-origin: left center; animation: tipProgress 15s linear forwards; }
@keyframes tipProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.steps { position: relative; margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 760px; }
.step { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 11px; background: linear-gradient(145deg,rgba(7,16,34,.94),rgba(10,29,70,.9)); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 12px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 12px 26px rgba(0,0,0,.14); min-height: 72px; }
.step-dot { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; }
.step-dot.start { background: #14C560; box-shadow: 0 0 0 5px rgba(20,197,96,.14),0 0 18px rgba(20,197,96,.5); }
.step-dot.end { background: #21B7FF; box-shadow: 0 0 0 5px rgba(33,183,255,.14),0 0 18px rgba(33,183,255,.5); }
.step-dot.announce { background: rgba(255,255,255,.16); color: #66FF92; border: 1px solid rgba(102,255,146,.35); box-shadow: 0 0 0 5px rgba(255,255,255,.08); }
.step-label { font-size: 11px; color: rgba(255,255,255,.58); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.step-date { margin-top: 4px; color: #fff; font-weight: 900; font-size: 13.5px; line-height: 1.25; }
.reward-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 760px; }
.reward-card { position: relative; overflow: hidden; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; padding: 18px; box-shadow: 0 16px 38px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.08); min-height: 128px; }
.reward-copy { display: flex; flex-direction: column; gap: 7px; }
.pz-kicker { font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #66FF92; }
.pz-number { font-family: var(--font-display); font-size: 32px; line-height: 1.08; font-weight: 900; color: #fff; }
.pz-desc { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.72); }
.prize-note { max-width: 760px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 15px 16px; color: rgba(255,255,255,.76); font-size: 13px; line-height: 1.55; }
.cta-main { align-self: flex-start; min-width: 260px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: #14C560; color: #fff; text-decoration: none; border-radius: 9999px; padding: 15px 20px; font-weight: 900; font-size: 16px; line-height: 1.25; box-shadow: 0 16px 34px rgba(20,197,96,.28); white-space: nowrap; }
.look-card { position: relative; align-self: stretch; background: linear-gradient(155deg,#071022 0%,#0A1D46 58%,#06371F 100%); border: 1px solid rgba(102,255,146,.28); border-radius: 24px; padding: 24px; box-shadow: 0 28px 76px rgba(7,16,34,.26),inset 0 1px 0 rgba(255,255,255,.1); min-width: 0; max-width: 468px; width: 100%; }
.look-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.look-kicker { font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #66FF92; margin-bottom: 6px; }
.look-title { font-family: var(--font-display); font-size: 26px; line-height: 1.08; font-weight: 900; color: #fff; margin: 0; }
.look-icon { width: 48px; height: 48px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#14C560 0%,#00873E 100%); color: #fff; box-shadow: 0 14px 28px rgba(20,197,96,.28); flex: 0 0 auto; }
.look-desc { margin: 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.55; }
.look-label { font-size: 13px; font-weight: 800; color: rgba(255,255,255,.88); display: block; margin: 18px 0 7px; }
.look-form { display: flex; gap: 9px; }
.look-input { flex: 1; min-width: 0; padding: 13px 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; font-size: 15px; outline: none; font-family: var(--font-sans); background: rgba(255,255,255,.9); color: #071022; }
.look-btn { background: #14C560; color: #fff; font-weight: 800; font-size: 15px; border: none; border-radius: 10px; padding: 0 18px; cursor: pointer; white-space: nowrap; box-shadow: 0 10px 24px rgba(20,197,96,.26); }
.look-note { margin-top: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 11px 12px; color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.45; }
.look-sub { margin-top: 18px; border-top: 1px solid rgba(255,255,255,.16); padding-top: 18px; }
.look-sub p { margin: 10px 0 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.55; }
.cta-sub { margin-top: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 220px; background: #14C560; color: #fff; text-decoration: none; border-radius: 12px; padding: 12px 14px; font-weight: 900; font-size: 14px; }
@media (max-width: 1023px) {
  .prize-inner { grid-template-columns: 1fr; }
  .look-card { max-width: none; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .prize-sec { padding: 34px 16px 42px; }
  .prize-title { font-size: 34px; }
  .steps { grid-template-columns: 1fr; }
  .reward-grid { grid-template-columns: 1fr; }
  .look-form { flex-direction: column; }
  .look-btn { padding: 13px 16px; }
}

/* ===== Footer ===== */
.site-footer { background: #0A1530; color: rgba(255,255,255,0.85); border-top: 1px solid rgba(255,255,255,0.18); padding: 34px 0 32px; }
.ft-inner { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.ft-office { margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.ft-office h3 { font-size: 34px; font-weight: 700; color: #fff; margin: 0 0 8px; line-height: 1.1; }
.ft-office p { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.72); margin: 0; }
.ft-grid { display: grid; grid-template-columns: 1.7fr 1fr 1.2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.ft-brand p { font-size: 13px; line-height: 1.55; margin: 14px 0 0; color: rgba(255,255,255,0.65); max-width: 320px; }
.ft-phone { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #14C560; }
.ft-social { display: flex; gap: 8px; margin-top: 18px; }
.ft-social a { width: 34px; height: 34px; border-radius: 6px; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #111; font-size: 18px; }
.ft-col h4 { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; margin: 0 0 14px; }
.ft-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ft-col a { font-size: 13px; color: rgba(255,255,255,0.68); line-height: 1.45; }
.ft-col a:hover { color: #fff; }
.ft-tag { font-size: 10px; font-weight: 700; color: #fff; background: #F79009; border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
.ft-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 16px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12px; color: rgba(255,255,255,0.55); }
.ft-bottom a { color: #66FF92; font-weight: 700; border-bottom: 1px solid rgba(102,255,146,.35); }
@media (max-width: 900px) {
  .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .ft-brand { grid-column: 1 / -1; }
  .ft-office h3 { font-size: 26px; }
}