/* =========================================================================
   ชวนเพื่อน (shared/referral.js) — แถบในหน้า WALLET + หน้าย่อย WALLET › ชวนเพื่อน · 2026-10-20
   โทนเดียวกับ WalletCard / WalletFaq ใน hub.css (ม่วงเข้ม + ขอบทอง) · มือถือแนวตั้งก่อน
   ========================================================================= */

/* แถบ "ชวนเพื่อน" ใต้การ์ดแต้มรางวัล เหนือ FAQ */
.RefBanner {
  display: flex; align-items: center; gap: 12px;
  width: calc(100% - 2 * var(--gutter));
  margin: 0 var(--gutter) 9px;
  padding: 12px 14px;
  min-height: 64px;
  border-radius: 16px;
  border: 1px solid #f3c96a66;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(255, 201, 60, .18), transparent 60%),
    linear-gradient(115deg, #3a2a52, #1d1832);
  box-shadow: inset 0 1px 0 #ffffff12, 0 4px 12px #05031633;
  color: #f5edff; text-align: left; cursor: pointer;
  transition: transform .18s ease, border-color .18s ease;
}
.RefBanner:active { transform: scale(.985); }
.RefBanner:focus-visible { outline: 2px solid #ffe3a2; outline-offset: 3px; }
.RefBanner-Ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid #ffd77a66; background: linear-gradient(145deg, #a0702a, #4a3020); font-size: 1.9rem; line-height: 1; }
.RefBanner-Text { flex: 1; min-width: 0; display: flex; flex-flow: column; gap: 2px; }
.RefBanner-Text b { font-size: 1.45rem; font-weight: 700; color: #ffe6a5; }
.RefBanner-Text small { font-size: 1.1rem; font-weight: 500; color: #d2c2e6; line-height: 1.35; }
.RefBanner-Chev { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #c2a0ef0d; color: #d7b773; font-size: 2.2rem; line-height: 1; }
@media (hover: hover) { .RefBanner:hover { border-color: #ffd77aaa; } }

/* หน้าย่อย */
.RefPage { padding-bottom: var(--section); }
.RefCard {
  position: relative;
  margin: 0 var(--gutter) var(--gap);
  padding: 18px 16px 16px;
  border-radius: 20px;
  text-align: center; color: #fff;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(162, 104, 255, .3), transparent 65%),
    linear-gradient(155deg, #30214e, #1b1533 75%);
  border: 1px solid rgba(235, 200, 132, .38);
  box-shadow: 0 12px 28px rgba(8, 4, 27, .4), inset 0 1px 0 rgba(255, 241, 199, .15);
}
.RefCard-Kicker { font-size: 1.3rem; font-weight: 500; color: #d7c9ef; }
.RefCard-Code { display: flex; justify-content: center; gap: 6px; margin: 10px 0 4px; user-select: all; -webkit-user-select: all; }
.RefCard-Code span {
  display: grid; place-items: center;
  width: clamp(36px, 11vw, 46px); height: clamp(46px, 13vw, 56px);
  border-radius: 10px;
  background: #130f25; border: 1px solid #e8c37a66;
  color: #ffe6a5; font-size: clamp(2.4rem, 7.5vw, 3rem); font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  text-shadow: 0 2px 0 #75441d;
}
.RefCard-Btns { display: grid; grid-template-columns: calc(50% - 4px); justify-content: center; gap: 8px; margin-top: 12px; }
.RefBtn {
  min-height: 46px; padding: .5em .6em;
  border-radius: 14px; border: 1px solid #9d86c266;
  background: linear-gradient(180deg, #514065, #352944);
  color: #f1e8ff; font-size: 1.4rem; font-weight: 700; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
.RefBtn--go { color: #fff; border-color: #8af3b3; background: linear-gradient(180deg, #40dd80, #1eb85c 48%, #138641); text-shadow: 0 1px 2px #075c34; box-shadow: 0 4px 0 #09552d, inset 0 1px 0 #c2ffdb99; }
.RefBtn:active { transform: scale(.97); }
.RefCard-Gift { margin-top: 12px; font-size: 1.15rem; line-height: 1.55; color: #d2c2e6; }
.RefCard-Gift b { color: #ffe6a5; }

.RefEnter-Title { font-size: 1.5rem; font-weight: 700; }
.RefEnter-Row { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.RefEnter-Input {
  flex: 1; min-width: 0;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: #0b0f20; color: #fff;
  font: inherit; font-size: 1.8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.RefEnter-Input::placeholder { font-size: 1.25rem; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--mut); }
.RefEnter-Input:focus { outline: 2px solid #8b5cf6aa; outline-offset: 1px; }
.RefEnter-Row .GreenButton { flex: none; padding: .55em 1.2em; }
.RefEnter-Tries { margin-top: 6px; font-size: 1.1rem; color: var(--mut); }
.RefMsg { margin-top: 8px; font-size: 1.2rem; line-height: 1.45; color: #b6f34e; }
.RefMsg.is-bad { color: #ff9c8a; }

.RefJoined-Top { font-size: 1.3rem; line-height: 1.5; }
.RefJoined-Top b { color: #ffe6a5; }

.RefHead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 18px var(--gutter) 8px; flex-wrap: wrap; }
.RefHead-Title { font-size: 1.6rem; font-weight: 800; }
.RefHead-Sub { font-size: 1.1rem; color: var(--mut); }
.RefList { display: flex; flex-flow: column; gap: 6px; margin: 0 var(--gutter); }
.RefRow { padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.RefRow.is-qualified { border-color: rgba(34, 197, 94, .45); }
.RefRow.is-review { border-color: rgba(255, 201, 60, .45); }
.RefRow-Top { display: flex; align-items: center; gap: 8px; }
.RefRow-Name { flex: 1; min-width: 0; font-size: 1.35rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.RefRow-Date { flex: none; font-size: 1.05rem; color: var(--mut); }
.RefRow-Note { margin-top: 4px; font-size: 1.05rem; color: var(--mut); }
.RefChip { flex: none; padding: 2px 9px; border-radius: 100px; font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.RefChip.is-ok { background: rgba(34, 197, 94, .18); color: #86efac; }
.RefChip.is-wait { background: rgba(139, 92, 246, .2); color: #c4b5fd; }
.RefChip.is-review { background: rgba(255, 201, 60, .18); color: var(--gold); }
.RefChip.is-off { background: rgba(139, 147, 184, .16); color: var(--mut); }
.RefProg { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px 10px; align-items: center; margin-top: 8px; }
.RefProg-Item { display: flex; flex-flow: column; gap: 4px; font-size: 1.05rem; color: #d2c2e6; min-width: 0; }
.RefProg-Item i { display: block; height: 5px; border-radius: 100px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.RefProg-Item b { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, #8b5cf6, #c084fc); }
.RefProg-G { justify-self: end; padding: 2px 8px; border-radius: 100px; background: rgba(244, 80, 62, .14); color: #ffb3a6; white-space: nowrap; }
.RefProg-G.is-ok { background: rgba(34, 197, 94, .14); color: #86efac; }
.RefJoined .RefProg { margin-top: 10px; }
.RefEmpty { margin-top: 0; }
.RefTotal { margin: 10px var(--gutter) 0; font-size: 1.15rem; color: #d7b773; text-align: center; }

.RefRules { margin: 16px var(--gutter) 0; padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.RefRules summary { cursor: pointer; font-size: 1.35rem; font-weight: 700; color: #f5edff; }
.RefRules ol { margin: 10px 0 0; padding-left: 1.4em; display: grid; gap: 6px; font-size: 1.15rem; line-height: 1.55; color: var(--mut); }

@media (max-width: 360px) {
  .RefProg { grid-template-columns: 1fr 1fr; }
  .RefProg-G { grid-column: 1 / -1; justify-self: start; }
  .RefEnter-Input { font-size: 1.5rem; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) { .RefBanner, .RefBtn { transition: none; } }
.RefJoined-Link { margin-top: 6px; text-align: right; }

/* 20 ต.ค. user: รายการเพื่อนที่ชวนโชว์แค่ชื่อ */
.RefRow--name { padding: 11px 14px; }

/* SPOTLIGHT: ปฏิทินรางวัล + ชวนเพื่อน คู่กันครึ่ง-ครึ่ง (hub.js spotSlotHtml · 29 ต.ค.) */
.SpotPair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 0 var(--gutter) var(--section);
}
.SpotPair .CalBanner { width: auto; margin: 0; }
.CalBanner.is-compact {
  gap: 9px; min-height: 72px;
  padding: 10px 10px 10px 9px;
  border-radius: 16px;
}
.CalBanner.is-compact .CalBanner-Icon { width: 38px; height: 38px; border-radius: 11px; font-size: 2.05rem; }
.CalBanner.is-compact .CalBanner-Title { font-size: 1.3rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
.CalBanner.is-compact .CalBanner-Line { font-size: 1.1rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; margin-top: 2px; }
.CalBanner.is-compact .CalBanner-Chip { position: absolute; top: -8px; right: 8px; padding: 1px 7px; font-size: 1.05rem; background: #3b2a8f; border: 1px solid rgba(255, 214, 102, .55); }
/* ชวนเพื่อน: โทนเขียวมิ้นต์ ให้แยกจากปฏิทิน (ทอง) */
.SpotInvite {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(74, 222, 128, .28), transparent 60%),
    linear-gradient(135deg, #1f6b5a, #173a52 75%);
  border-color: rgba(110, 231, 183, .5);
}
.SpotInvite-Icon { background: linear-gradient(180deg, #d1fae5, #4ade80); }
.SpotInvite .CalBanner-Line { color: #bbf7d0; font-weight: 700; }
@media (max-width: 360px) {
  .SpotPair { gap: 8px; }
  .CalBanner.is-compact { gap: 7px; padding: 9px 8px 9px 7px; }
  .CalBanner.is-compact .CalBanner-Icon { width: 32px; height: 32px; font-size: 1.75rem; }
  .CalBanner.is-compact .CalBanner-Title { font-size: 1.2rem; }
  .CalBanner.is-compact .CalBanner-Line { font-size: 1.02rem; }
}

/* ป๊อปอัปแนะนำชวนเพื่อนตอนเปิดฮับ (referral.js showPopup · ใช้โครง .Welcome.Award.Announce ของฮับ) */
.RefPop .Welcome-Panel { max-height: 92dvh; overflow-y: auto; }
.RefPop .Announce-List { max-height: none; }
.RefPop-Code {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  margin: 0 0 12px; padding: 8px 10px;
  border-radius: 12px; background: rgba(255, 201, 60, .1); border: 1px dashed rgba(255, 214, 102, .55);
}
.RefPop-Code span { font-size: 1.1rem; color: var(--mut); }
.RefPop-Code b { font-size: 1.9rem; letter-spacing: .14em; color: var(--gold); font-weight: 800; }
.RefPop-Copy { padding: 4px 10px; border-radius: 100px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.RefPop-Never { margin-top: 2px; font-size: 1.05rem; opacity: .7; }
.RefPop .GoldButton { display: block; width: 100%; margin: 0 0 4px; }
.RefPop .LinkButton { display: inline-block; margin: 6px 10px 0; }