/* Mini-program membership hierarchy, composed with responsive Web primitives. */
.myopal-membership { width: 100%; max-width: 48rem; margin-inline: auto; padding: 1.5rem var(--myopal-container-gutter) 3rem; background: #f8f4ec; }
.myopal-main.myopal-membership--card-page { padding-block-start: var(--myopal-space-2); }
.myopal-membership-card { padding: 1.25rem 1.125rem; border: 1px solid #d8b46a6b; border-radius: 1.0625rem; color: #f6e6c0; background: radial-gradient(circle at 12% 8%, #d8b46a33, transparent 30%), linear-gradient(135deg,#080808,#17130d 48%,#070707); box-shadow: 0 .5625rem 1.4375rem #0003; }
.myopal-membership-card a { color: inherit; text-decoration: none; }
.myopal-membership-card h1,.myopal-membership-card h2 { color: inherit; font-family: var(--myopal-font-body); font-size: clamp(1.45rem,5vw,1.85rem); font-weight: 600; line-height: 1.2; }
.myopal-membership-card .myopal-icon:not(.myopal-chevron) { width: 1rem; height: 1rem; }
.myopal-membership-card-top,.myopal-member-level-row,.myopal-member-growth,.myopal-member-progress-label,.myopal-member-compact-links { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.myopal-membership-card-top { align-items: flex-start; flex-wrap: wrap; }
.myopal-membership-card-top > div { flex: 1; min-width: 0; }
.myopal-membership-card-top > a { flex-shrink: 0; }
.myopal-member-eyebrow { font-size: .65rem; letter-spacing: .12em; color: #f1d28ab3; }
.myopal-member-greeting { margin-top: .375rem; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myopal-member-outline { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.25rem; border: 1px solid #d8b46a7a; border-radius: 999px; padding: .35rem .65rem; font-size: .7rem; }
.myopal-member-level-row { margin-top: 1.5rem; }
.myopal-member-level-badge { display: inline-grid; place-items: center; flex-shrink: 0; min-width: 3.5rem; padding: .5rem .65rem; border-radius: 999px; background: linear-gradient(135deg,#f1d28a,#b8842d); color: #111; font-size: .9375rem; font-weight: 700; }
.myopal-member-growth { margin-top: 1.375rem; align-items: flex-end; }
.myopal-member-growth span { display: block; font-size: .6875rem; color: #ffffffb8; }
.myopal-member-growth strong { display: block; font-size: 1.6875rem; line-height: 1.2; color: #f1d28a; margin-top: .3rem; }
.myopal-member-growth > :last-child { text-align: right; max-width: 50%; }
.myopal-member-growth > :last-child strong { font-size: .9375rem; }
.myopal-member-progress { appearance: none; display: block; border: 0; width: 100%; height: .4375rem; border-radius: 999px; overflow: hidden; margin-top: 1rem; background: #ffffff24; }
.myopal-member-progress::-webkit-progress-bar { background: #ffffff24; border-radius: 999px; }
.myopal-member-progress::-webkit-progress-value { background: linear-gradient(90deg,#f7d99a,#d8b46a,#b8842d); border-radius: 999px; }
.myopal-member-progress::-moz-progress-bar { background: #d8b46a; }
.myopal-member-progress-label { font-size: .6875rem; color: #ffffffa3; margin-top: .45rem; }
.myopal-member-compact-links { margin-top: 1rem; font-size: .75rem; }
.myopal-membership-card--points { background: radial-gradient(circle at 82% 18%,#f1d28a47,transparent 32%),linear-gradient(135deg,#2c2118,#765733); color: white; }
.myopal-membership-card--points .myopal-member-level-row { margin-block: 1.15rem .8rem; }
.myopal-membership-card--points h1 { font-size: 1.1rem; }
.myopal-member-points { display: block; font-size: clamp(2.75rem,12vw,3.6875rem); line-height: 1.15; overflow-wrap: anywhere; }
.myopal-member-expiry { color: #ffffffb8; font-size: .72rem; margin-top: .75rem; }
.myopal-member-section { margin-top: 1.75rem; }
.myopal-member-section > h2,.myopal-benefit-title { font-family: var(--myopal-font-body); font-size: 1.1rem; font-weight: 600; }
.myopal-member-section > p { font-size: .75rem; color: var(--myopal-color-muted); margin-top: .375rem; }
.myopal-levels { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .4rem; margin-top: 1rem; }
.myopal-levels a { display: flex; flex-direction: column; justify-content: space-between; gap: .45rem; min-width: 0; padding: .75rem .2rem; text-align: center; border: 1px solid #e5dccb; border-radius: .7rem; background: #fffdf8; text-decoration: none; color: #77664b; }
.myopal-levels strong { font-size: .8rem; color: #33281a; }
.myopal-levels span { font-size: .58rem; overflow-wrap: anywhere; line-height: 1.35; }
.myopal-levels small { font-size: .56rem; }
.myopal-levels [aria-current] { background: linear-gradient(#fff9e9,#f3e4bf); border-color: #c8a65a; box-shadow: 0 .125rem .625rem #b9903820; }
.myopal-benefit-scroll { margin-block: 1rem; overflow-x: auto; border: 1px solid #e5dccb; border-radius: .875rem; background: white; scroll-behavior: smooth; }
.myopal-benefit-table { width: max-content; border-collapse: separate; border-spacing: 0; font-size: .72rem; text-align: center; }
.myopal-benefit-table th,.myopal-benefit-table td { width: 7rem; max-width: 7rem; min-width: 7rem; padding: 1rem .625rem; vertical-align: middle; border-bottom: 1px solid #ede6d9; }
.myopal-benefit-table small { display: block; font-weight: 400; font-size: .625rem; }
.myopal-benefit-table th:first-child { position: sticky; left: 0; z-index: 1; min-width: 8rem; width: 8rem; max-width: 8rem; background: #faf6ed; text-align: left; }
.myopal-benefit-table .is-selected { background: #fbefd5; color: #78541d; }
.myopal-member-paper { padding: 1.125rem; background: #fffdf8; border: 1px solid #e9e0cf; border-radius: .875rem; margin-top: 1rem; box-shadow: 0 .2rem 1rem #33200905; }
.myopal-member-paper h2,.myopal-member-paper h3 { font-family: var(--myopal-font-body); font-size: 1rem; font-weight: 600; }
.myopal-member-paper p { margin-top: .75rem; color: #6d6253; font-size: .8125rem; line-height: 1.85; }
.myopal-member-paper > strong { display: block; color: #987638; margin-top: .5rem; font-size: .875rem; }
.myopal-member-link-card { padding: 1.125rem; margin-top: 1rem; border: 1px solid #e5d7bb; border-radius: .875rem; color: #463520; background: linear-gradient(135deg,#fffdf8,#f3e8d1); }
.myopal-member-link-card span { flex: 1; }
.myopal-member-link-card small { display: block; margin-top: .3rem; color: #8c7b61; font-size: .7rem; }
.myopal-member-gift > .myopal-icon:first-child { width: 1.875rem; height: 1.875rem; color: #bd9447; }
.myopal-member-rule-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(5rem,1fr)); gap: .625rem; margin-top: 1rem; }
.myopal-member-rule-grid a { display: flex; flex-direction: column; gap: 1rem; padding: .875rem .625rem; border: 1px solid #e5dccb; border-radius: .75rem; background: #fffdf8; text-decoration: none; font-size: .7rem; }
.myopal-member-rule-grid span { color: #927237; }

.myopal-member-earn { display: flex; align-items: center; gap: .875rem; }
.myopal-member-earn > .myopal-icon { color: #bd9447; width: 1.75rem; height: 1.75rem; flex-shrink: 0; }
.myopal-member-earn > div { flex: 1; min-width: 0; }
.myopal-member-earn-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.myopal-member-earn-heading h3 { margin: 0; }
.myopal-member-earn-heading a { display: grid; place-items: center; flex: 0 0 2.75rem; min-height: 2.75rem; color: #927237; text-decoration: none; }

.myopal-member-record { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid #eee6d9; }
.myopal-member-record:last-child { border: 0; }
.myopal-member-record h2 { font-size: .85rem; }
.myopal-member-record time,.myopal-member-record small { display: block; font-size: .65rem; color: #8a7d6c; margin-top: .35rem; }
.myopal-member-record > strong { color: #a78037; white-space: nowrap; font-size: 1rem; }
.myopal-member-empty { padding: 2.5rem .5rem; text-align: center; color: #8a7d6c; font-size: .875rem; }
[data-member-benefits] { margin-top:var(--myopal-space-6); }
.myopal-member-benefit-panel[hidden] { display: none; }
.myopal-membership-card--compact { margin-top: 1.25rem; }
@media (min-width: 48rem) { .myopal-levels span { font-size: .75rem; } .myopal-levels small { font-size: .6875rem; } .myopal-membership-card { padding: 1.75rem; } }
@media (prefers-reduced-motion: reduce) { .myopal-benefit-scroll { scroll-behavior: auto; } }