/* assets/css/line_raffle.css */
/* 抽獎系統（前台 + 後台）— 風格對齊全站 style.css 變數（支援深色模式） */

:root {
  --raffle-accent: #fbbf24;      /* 全站 header 底線色 */
  --raffle-accent-2: #38bdf8;    /* 亮藍 */
  --raffle-success: #22c55e;
  --raffle-warning: #f97316;
  --raffle-danger:  #ef4444;
}

/* ===== 基礎區塊 ===== */
.raffle-hero {
  border-radius: 16px;
  padding: 18px 18px 16px;
  background:
    radial-gradient(800px 260px at 10% 0%, rgba(56, 189, 248, 0.18), transparent 60%),
    radial-gradient(800px 260px at 90% 0%, rgba(251, 191, 36, 0.18), transparent 60%),
    var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
}

.raffle-hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.raffle-title {
  margin: 0;
  font-size: 1.55rem;
  letter-spacing: .2px;
}

.raffle-sub {
  margin: 8px 0 0;
  color: var(--text-sub);
  line-height: 1.5;
}

.raffle-topbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.raffle-layout {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 980px) {
  .raffle-layout { grid-template-columns: 1fr; }
}

/* ===== Tabs ===== */
.raffle-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.raffle-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  text-decoration: none;
  background: rgba(0,0,0,.06);
  color: var(--text-main);
  font-weight: 900;
  border: 1px solid rgba(0,0,0,.06);
}
body.dark-mode .raffle-tab { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); }
.raffle-tab.active {
  background: rgba(251, 191, 36, .18);
  border-color: rgba(251, 191, 36, .35);
}

/* ===== Buttons (僅作用於本頁引入 line_raffle.css 的頁面) ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  cursor: pointer;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(251,191,36,.95), rgba(245,158,11,.95));
  color: #111827;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(245, 158, 11, .18);
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
}
.btn:hover { filter: brightness(1.02); }
.btn:active { transform: translateY(1px); }

.btn.secondary {
  background: rgba(0,0,0,.06);
  color: var(--text-main);
  border-color: rgba(0,0,0,.10);
  box-shadow: none;
}
body.dark-mode .btn.secondary {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
.btn.danger {
  background: linear-gradient(180deg, rgba(239,68,68,.95), rgba(220,38,38,.95));
  color: #fff;
  border-color: rgba(239,68,68,.35);
  box-shadow: 0 10px 22px rgba(239, 68, 68, .16);
}
.btn:disabled { opacity: .55; cursor: not-allowed; }

.raffle-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ===== Alerts / Help ===== */
.raffle-alert {
  background: rgba(2, 132, 199, .10);
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(2, 132, 199, .16);
}
.raffle-alert.warn {
  background: rgba(249, 115, 22, .10);
  border-color: rgba(249, 115, 22, .18);
}
.raffle-alert.danger {
  background: rgba(239, 68, 68, .10);
  border-color: rgba(239, 68, 68, .18);
}

.raffle-help {
  color: var(--text-sub);
  font-size: 13px;
  line-height: 1.45;
}

/* ===== Chips / Badges ===== */
.raffle-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}

.raffle-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12.5px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.05);
  color: var(--text-main);
}
body.dark-mode .raffle-chip { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.06); }

.raffle-chip.pinned { border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.16); }
.raffle-chip.open { border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.12); }
.raffle-chip.closed { border-color: rgba(249,115,22,.25); background: rgba(249,115,22,.12); }
.raffle-chip.drawn { border-color: rgba(56,189,248,.25); background: rgba(56,189,248,.12); }
.raffle-chip.canceled { border-color: rgba(148,163,184,.25); background: rgba(148,163,184,.12); }

/* ===== 分享區 ===== */
.raffle-share {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.raffle-share code {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.10);
  color: var(--text-main);
  max-width: min(520px, 90vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.dark-mode .raffle-share code { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }

/* ===== 活動列表：卡片版 ===== */
.raffle-event-list {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 980px) {
  .raffle-event-list { grid-template-columns: 1fr; }
}

.raffle-event-card {
  position: relative;
  overflow: hidden;
}

.raffle-event-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(520px 180px at 15% 0%, rgba(56,189,248,.14), transparent 60%);
  pointer-events: none;
}
body.dark-mode .raffle-event-card::before {
  background: radial-gradient(520px 180px at 15% 0%, rgba(56,189,248,.10), transparent 60%);
}

.raffle-event-head {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.raffle-event-title {
  position: relative;
  display: block;
  margin-top: 10px;
  font-weight: 1000;
  font-size: 1.08rem;
  color: var(--text-main);
}

.raffle-event-desc {
  position: relative;
  margin-top: 8px;
  color: var(--text-sub);
  line-height: 1.5;
}

.raffle-event-meta {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
@media (max-width: 520px) {
  .raffle-event-meta { grid-template-columns: 1fr; }
}

.raffle-meta-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.06);
  color: var(--text-main);
  font-weight: 800;
}
body.dark-mode .raffle-meta-item { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); }

.raffle-event-actions {
  position: relative;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
}

/* ===== 表單 ===== */
.raffle-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.raffle-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 240px;
}
.raffle-form label {
  font-weight: 900;
  font-size: 13px;
  color: var(--text-main);
}
.raffle-form input[type="text"],
.raffle-form input[type="password"],
.raffle-form input[type="datetime-local"],
.raffle-form select,
.raffle-form textarea {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  outline: none;
  width: 100%;
  background: rgba(255,255,255,.75);
  color: var(--text-main);
}
body.dark-mode .raffle-form input[type="text"],
body.dark-mode .raffle-form input[type="password"],
body.dark-mode .raffle-form input[type="datetime-local"],
body.dark-mode .raffle-form select,
body.dark-mode .raffle-form textarea {
  background: rgba(0,0,0,.18);
}
.raffle-form textarea { min-height: 100px; resize: vertical; }

/* ===== KPI / 側欄 ===== */
.raffle-kpis {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.raffle-kpi {
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.06);
}
body.dark-mode .raffle-kpi { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); }
.raffle-kpi .k { font-weight: 900; font-size: 12px; color: var(--text-sub); }
.raffle-kpi .v { margin-top: 6px; font-weight: 1000; }

/* ===== 名單：清爽列（取代表格的觀感） ===== */
.raffle-entry-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.raffle-entry {
  display: grid;
  grid-template-columns: 90px 1fr 170px 110px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
}
body.dark-mode .raffle-entry { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); }
@media (max-width: 860px) {
  .raffle-entry { grid-template-columns: 90px 1fr; }
  .raffle-entry .t, .raffle-entry .s { justify-self: start; }
}

.raffle-entry .n { font-weight: 1000; }
.raffle-entry .name { font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raffle-entry.canceled { opacity: .75; }
.raffle-entry.canceled .name { text-decoration: line-through; }

/* ===== 社群卡 ===== */
.raffle-community-card {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
}

.raffle-community-card > img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--border-color);
}


.raffle-community-card .raffle-community-avatar.placeholder {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  background: rgba(0,0,0,.04);
}
body.dark-mode .raffle-community-card .raffle-community-avatar.placeholder {
  background: rgba(255,255,255,.06);
}
.raffle-community-card img.qr {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  object-fit: contain;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--border-color);
}
body.dark-mode .raffle-community-card img.qr { background: rgba(255,255,255,.08); }

/* ===== 輪盤（後台/結果頁） ===== */
.raffle-wheel-wrap {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
}
@media (max-width: 900px) { .raffle-wheel-wrap { grid-template-columns: 1fr; } }

.wheel-box {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
  padding: 14px;
}
.wheel-title { font-weight: 1000; margin-bottom: 10px; }

.wheel-marquee {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: rgba(0,0,0,.04);
  height: 64px;
}
body.dark-mode .wheel-marquee { background: rgba(255,255,255,.06); }

.wheel-marquee .track {
  display: flex;
  align-items: center;
  height: 100%;
  transform: translateX(0px);
  will-change: transform;
}

.wheel-marquee .item {
  width: 180px;
  padding: 0 10px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 1000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px dashed rgba(0,0,0,.12);
}
body.dark-mode .wheel-marquee .item { border-right-color: rgba(255,255,255,.14); }

.wheel-pointer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  left: 50%;
  margin-left: -2px;
  background: rgba(239, 68, 68, .82);
  box-shadow: 0 0 0 2px rgba(255,255,255,.8);
}
body.dark-mode .wheel-pointer { box-shadow: 0 0 0 2px rgba(15,23,42,.85); }

.winner-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.winner-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.06);
  font-weight: 1000;
}
body.dark-mode .winner-item { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); }

/* ===== 分頁 ===== */
.raffle-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  gap: 12px;
  flex-wrap: wrap;
}

.raffle-pagination .pages { display:flex; gap: 8px; flex-wrap: wrap; }

.raffle-pagination a {
  padding: 8px 10px;
  border-radius: 12px;
  text-decoration: none;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.10);
  color: var(--text-main);
  font-weight: 1000;
}
body.dark-mode .raffle-pagination a { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }
.raffle-pagination a.active { background: rgba(251,191,36,.20); border-color: rgba(251,191,36,.35); }


/* ===== 宣傳社群 / 社團卡 ===== */
.raffle-promo-card{
  margin-top:14px;
  border-radius: 16px;
  padding: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.18);
}
.raffle-promo-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.raffle-promo-title{
  font-weight:800;
  letter-spacing:.2px;
}
.raffle-promo-body{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.raffle-promo-avatar{
  width:56px;height:56px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(148,163,184,.22);
  flex:0 0 auto;
}
.raffle-promo-main{
  flex:1 1 auto;
  min-width:0;
}
.raffle-promo-name{
  font-weight:800;
  font-size: 1.05rem;
  margin-bottom:4px;
}
.raffle-promo-text{
  opacity:.92;
  line-height:1.55;
  font-size:.96rem;
}
.raffle-promo-qr{
  width:120px;
  flex:0 0 auto;
  text-align:center;
}
.raffle-promo-qr img{
  width:120px;height:120px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(148,163,184,.22);
}
@media (max-width: 720px){
  .raffle-promo-body{ flex-direction:column; }
  .raffle-promo-qr{ width:100%; text-align:left; display:flex; gap:10px; align-items:center; }
  .raffle-promo-qr img{ width:90px;height:90px; }
}