/* Membership, payments and shared table styling. */
.membership-page{padding-bottom:60px}
.membership-summary{position:relative;overflow:hidden;padding:clamp(28px,5vw,56px);border-radius:34px;border:1px solid var(--line-strong);background:radial-gradient(80% 140% at 0% 0%,color-mix(in srgb,var(--mint) 26%,transparent),transparent 60%),radial-gradient(70% 140% at 100% 100%,color-mix(in srgb,var(--violet) 26%,transparent),transparent 60%),var(--surface)}
.membership-summary h2{margin-top:10px;font-size:clamp(28px,4vw,52px);max-width:20ch}
.membership-summary p{color:var(--muted);max-width:62ch;font-size:17px}
.membership-summary .button{margin-top:10px}
.membership-section{margin-top:clamp(36px,5vw,64px)}
.membership-section h2{font-size:clamp(26px,3vw,38px)}
.membership-notice{padding:16px 20px;border-radius:18px;background:color-mix(in srgb,var(--sun) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--sun) 35%,transparent);color:var(--muted);font-size:14px}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}
.plan-card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:clamp(24px,3vw,34px);border:1px solid var(--line);border-radius:28px;background:linear-gradient(170deg,var(--surface-2),var(--surface));transition:transform .5s var(--ease),border-color .3s,box-shadow .4s}
.plan-card::before{content:"";position:absolute;width:220px;height:220px;right:-80px;top:-90px;border-radius:50%;background:var(--aurora-1);filter:blur(40px);transition:transform .6s var(--ease)}
.plan-card:hover{transform:translateY(-8px);border-color:var(--accent);box-shadow:var(--shadow)}
.plan-card:hover::before{transform:scale(1.5)}
.plan-card>*{position:relative}
.plan-card h3{margin:8px 0 0;font-size:24px;overflow-wrap:anywhere}
.plan-price{font:800 clamp(30px,3.4vw,42px)/1.1 var(--font-display);letter-spacing:-.04em;background:linear-gradient(110deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;overflow-wrap:anywhere;margin:6px 0}
.plan-card .button,.plan-card .availability{margin-top:auto}
.membership-table-wrap{overflow:auto;border:1px solid var(--line);margin-top:16px}
.membership-table{width:100%;min-width:700px;border-collapse:collapse;text-align:left;font-size:14px}
.membership-table th,.membership-table td{padding:18px 20px;border-bottom:1px solid var(--line);overflow-wrap:anywhere;max-width:280px}
.membership-table tbody tr:last-child>*{border-bottom:0}
.membership-table thead th{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.membership-table a{color:var(--accent);font-weight:700}
.membership-state{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:800;background:var(--surface-2);border:1px solid var(--line-strong);color:var(--muted)}
.membership-state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.state-active,.state-success{color:var(--accent);background:color-mix(in srgb,var(--mint) 12%,transparent)}
.state-scheduled,.state-pending{color:var(--sky);background:color-mix(in srgb,var(--sky) 12%,transparent)}
[data-theme="light"] .state-scheduled,[data-theme="light"] .state-pending{color:#527a00}
.state-cancelled,.state-revoked,.state-failed,.state-unverified{color:var(--coral);background:color-mix(in srgb,var(--coral) 12%,transparent)}
.confirm-check input{width:20px;height:20px;flex-shrink:0}
.staff-table button{cursor:pointer}
.membership-account-link{margin-bottom:0}
.membership-page .page-heading{margin-bottom:28px}
@media(max-width:550px){.membership-summary{padding:24px}}
