.club-page { max-width: 1240px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 48px) 70px; }
.club-hero { display: grid; gap: 24px; align-items: end; padding: 38px 0 30px; border-bottom: 1px solid var(--line); }
.club-hero h1 { max-width: 780px; margin: 6px 0 12px; font-size: clamp(36px, 6vw, 68px); line-height: 1; }
.club-hero p { max-width: 720px; color: var(--muted); }
.club-identity { min-width: 250px; padding: 18px; color: white; background: #0a2f4f; border-left: 5px solid var(--yellow); }
.club-identity span, .club-identity strong, .club-identity small { display: block; }
.club-identity strong { margin: 3px 0; font-size: 22px; }
.club-status { display: grid; gap: 12px; padding: 24px 0; }
.club-status article { min-height: 142px; padding: 20px; background: white; border: 1px solid var(--line); border-top: 4px solid var(--green); }
.club-status span, .club-status strong, .club-status small { display: block; }
.club-status span { color: var(--muted); font-weight: 700; }
.club-status strong { margin: 8px 0; font-size: 28px; }
.club-status strong b { font: inherit; }
.checkin-panel { background: #fff8dc !important; border-top-color: #e9ad17 !important; }
.club-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 0; padding: 0 18px; color: white; background: var(--green); font: inherit; font-weight: 800; cursor: pointer; }
.club-button:disabled { cursor: not-allowed; opacity: .5; }
.club-message { min-height: 24px; margin: 0 0 12px; font-weight: 700; color: var(--green); }
.club-access { display: grid; gap: 22px; padding: 26px 0 34px; border-top: 1px solid var(--line); }
.club-access h2 { margin: 5px 0 9px; font-size: clamp(25px, 3vw, 36px); }
.club-access > div > p:not(.eyebrow) { color: var(--muted); }
.access-code-panel, .restore-form { padding: 20px; border: 1px solid var(--line); background: #fff; }
.access-code-panel label, .restore-form label, .restore-form span { display: block; font-weight: 800; }
.access-code-panel > div { display: grid; grid-template-columns: 1fr auto; margin: 8px 0; }
.access-code-panel input, .restore-form input { min-width: 0; height: 46px; padding: 0 12px; border: 1px solid #bfcac5; font: inherit; }
.access-code-panel button { border: 0; padding: 0 18px; color: #fff; background: #0a2f4f; font-weight: 800; }
.access-code-panel .access-code-create { width: 100%; margin: 10px 0; background: var(--green); }
.access-code-panel small, .restore-message { color: var(--muted); }
.restore-form { display: grid; gap: 13px; }
.restore-form h3, .restore-form p { margin: 0; }
.club-recovery-link { color: #0a2f4f; font-weight: 800; }
.restore-form label span { margin-bottom: 6px; }
.club-section { padding: 34px 0; border-top: 1px solid var(--line); }
.club-section h2, .club-terms h2 { margin: 5px 0 10px; font-size: clamp(27px, 4vw, 42px); }
.referral-section { display: grid; gap: 28px; }
.referral-section > div > p:not(.eyebrow), .club-heading > p { color: var(--muted); }
.referral-tool { padding: 20px; background: white; border: 1px solid var(--line); }
.referral-tool label { display: block; margin-bottom: 8px; font-weight: 800; }
.referral-tool > div { display: grid; grid-template-columns: 1fr auto; }
.referral-tool input { min-width: 0; height: 46px; padding: 0 12px; border: 1px solid #bfcac5; font: inherit; }
.referral-tool button { border: 0; padding: 0 18px; color: white; background: #0a2f4f; font-weight: 800; }
.whatsapp-share { margin-top: 12px; width: 100%; }
.club-heading { display: grid; gap: 12px; margin-bottom: 20px; }
.reward-order-fields { display: grid; gap: 12px; padding: 18px; margin-bottom: 16px; border: 1px solid var(--line); background: #fff; }
.reward-order-fields label, .reward-order-fields span { display: block; font-weight: 800; }
.reward-order-fields span { margin-bottom: 6px; }
.reward-order-fields input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid #bfcac5; font: inherit; }
.reward-grid, .earn-grid { display: grid; gap: 14px; }
.reward-card, .earn-grid article { padding: 20px; background: white; border: 1px solid var(--line); }
.reward-card h3 { margin: 7px 0; font-size: 21px; }
.reward-card p { min-height: 48px; color: var(--muted); }
.reward-card small { display: block; min-height: 34px; color: #52635c; }
.reward-card .cost { color: #0a2f4f; font-size: 25px; font-weight: 900; }
.reward-card button { width: 100%; margin-top: 14px; }
.reward-history { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.reward-history h3 { margin: 0 0 12px; }
.reward-history-item { display: grid; gap: 5px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.reward-history-item strong, .reward-history-item span, .reward-history-item small { display: block; }
.reward-history-item span { color: var(--muted); }
.reward-status { justify-self: start; padding: 3px 7px; background: #edf2f4; color: #17374a; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.reward-status.approved { background: #dff3e7; color: #11653e; }
.reward-status.rejected { background: #f8e2e2; color: #982828; }
.earn-grid article strong, .earn-grid article span, .earn-grid article small { display: block; }
.earn-grid article strong { color: var(--green); font-size: 28px; }
.earn-grid article span { margin: 5px 0; font-weight: 800; }
.earn-grid article small { color: var(--muted); }
.club-terms { padding: 26px; background: #eef3ef; border-left: 5px solid var(--green); }
.club-terms p { margin-bottom: 0; color: var(--muted); }
@media (min-width: 720px) { .club-hero { grid-template-columns: 1fr auto; } .club-status { grid-template-columns: repeat(2, 1fr); } .club-access { grid-template-columns: 1fr 1fr; align-items: start; } .referral-section { grid-template-columns: 1.1fr .9fr; } .reward-order-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reward-grid { grid-template-columns: repeat(3, 1fr); } .earn-grid { grid-template-columns: repeat(3, 1fr); } .club-heading { grid-template-columns: 1fr 1fr; align-items: end; } }
@media (min-width: 1050px) { .club-status { grid-template-columns: repeat(4, 1fr); } .earn-grid { grid-template-columns: repeat(5, 1fr); } }