/* Monthly plan cards (inc/member-plans.php), Paul's membership design PDF of 9 Nov 2026.
   Used on the home page (#relax-club), My SpaDrop > Membership and the /membership/ page. */
.sd-mp{--mp-page:#f5f8f7;--mp-ink:#16302b;--mp-muted:#5f6c67;--mp-eyebrow:#417169;--mp-card:#fff;--mp-line:#e3e9e6;--mp-deep:#21433f;--mp-soft:#e6f2a6;--mp-shadow:0 30px 60px -36px rgba(22,48,43,.32);max-width:1100px;margin:0 auto;color:var(--mp-ink);font-family:Kanit,system-ui,sans-serif}
html[data-theme=dark] .sd-mp{--mp-page:var(--sd-bg);--mp-ink:#f7f7f2;--mp-muted:#bacdc6;--mp-eyebrow:#d4f36b;--mp-card:#103b3b;--mp-line:rgba(247,247,242,.16);--mp-deep:#17504c;--mp-shadow:0 30px 60px -36px rgba(0,0,0,.6)}

.sd-club--plans{padding:72px 0 64px;background:var(--mp-page,#f5f8f7)}
html[data-theme=dark] .sd-club--plans{background:var(--sd-bg)}

.sd-mp .sd-mp-head{max-width:760px;margin:0 auto 40px;text-align:center}
.sd-mp .sd-mp-eyebrow{margin:0 0 10px;color:var(--mp-eyebrow);font-size:15px;font-weight:600;letter-spacing:0}
.sd-mp .sd-mp-head :is(h1,h2){margin:0;color:var(--mp-ink);font-size:clamp(36px,6.2vw,66px);font-weight:700;line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
.sd-mp .sd-mp-head :is(h1,h2):lang(th){letter-spacing:0;line-height:1.2}
.sd-mp .sd-mp-phrase{display:inline-block}
.sd-mp .sd-mp-lead{margin:16px auto 0;color:var(--mp-muted);font-size:clamp(17px,1.8vw,20px);line-height:1.55}
.sd-mp .sd-mp-lead span{display:block;text-wrap:balance}

.sd-mp .error-slot:empty{display:none}
.sd-mp .error-slot,.sd-mp .notice{max-width:760px;margin:0 auto 20px}

.sd-mp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:stretch}

.sd-mp-card{position:relative;display:flex;flex-direction:column;min-width:0;text-align:left;padding:36px 32px 28px;border:1px solid var(--mp-line);border-radius:28px;background:var(--mp-card);box-shadow:var(--mp-shadow);color:var(--mp-ink);scroll-margin-top:96px}
.sd-mp-card.is-featured{border-color:var(--mp-deep);background:var(--mp-deep);color:#fff}
.sd-mp-card.is-target{outline:3px solid var(--mp-soft);outline-offset:4px}

.sd-mp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sd-mp .sd-mp-top :is(h2,h3){margin:0;color:var(--mp-ink);font-size:clamp(30px,3.4vw,40px);font-weight:700;line-height:1.1;letter-spacing:-.01em}
.sd-mp-card.is-featured .sd-mp-top :is(h2,h3){color:var(--mp-soft)}
.sd-mp-badge{flex:none;margin-top:2px;padding:7px 16px;border-radius:999px;background:var(--mp-soft);color:#16302b;font-size:14px;font-weight:700;line-height:1.3;white-space:nowrap}

.sd-mp .sd-mp-meta{margin:6px 0 0;color:var(--mp-muted);font-size:16px;line-height:1.45}
.sd-mp-card.is-featured .sd-mp-meta{color:rgba(255,255,255,.72)}

.sd-mp .sd-mp-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:26px 0 0;line-height:1}
.sd-mp-price strong{font-size:clamp(48px,6.4vw,72px);font-weight:800;letter-spacing:-.035em;color:inherit}
.sd-mp-price span{color:var(--mp-muted);font-size:clamp(17px,1.8vw,21px);font-weight:400}
.sd-mp-card.is-featured .sd-mp-price span{color:rgba(255,255,255,.72)}

.sd-mp .sd-mp-per{margin:16px 0 0;color:var(--mp-muted);font-size:15px;line-height:1.4}
.sd-mp-per strong{color:var(--mp-ink);font-weight:700}
.sd-mp-per s{text-decoration-thickness:1.5px}
.sd-mp-card.is-featured .sd-mp-per{color:rgba(255,255,255,.66)}
.sd-mp-card.is-featured .sd-mp-per strong{color:#fff}

.sd-mp .sd-mp-perks{display:grid;gap:14px;margin:22px 0 32px;padding:0;list-style:none}
.sd-mp .sd-mp-perks li{display:flex;align-items:center;gap:14px;margin:0;padding:0;font-size:17px;line-height:1.4;color:inherit}
.sd-mp .sd-mp-perks li::before{content:none}
.sd-mp-check{display:inline-grid;flex:none;place-items:center;width:28px;height:28px;border-radius:50%;background:#e2f0b5;color:#21433f}
.sd-mp-card.is-featured .sd-mp-check{background:var(--mp-soft)}
html[data-theme=dark] .sd-mp-check{background:var(--mp-soft)}
.sd-mp-check svg{width:14px;height:14px}

.sd-mp .sd-mp-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;margin-top:auto;padding:14px 24px;border:0;border-radius:999px;background:var(--mp-deep);color:#fff;font:inherit;font-size:18px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;box-shadow:none;transition:transform .18s ease,filter .18s ease}
.sd-mp-card.is-featured .sd-mp-cta{background:var(--mp-soft);color:#16302b}
html[data-theme=dark] .sd-mp-card:not(.is-featured) .sd-mp-cta{background:#f7f7f2;color:#0b2e2d}
.sd-mp .sd-mp-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
.sd-mp .sd-mp-cta:focus-visible{outline:3px solid var(--mp-eyebrow);outline-offset:3px}
.sd-mp-card.is-featured .sd-mp-cta:focus-visible{outline-color:var(--mp-soft)}
.sd-mp .sd-mp-cta:disabled{cursor:progress;opacity:.7;transform:none}

.sd-mp .sd-mp-note{display:grid;gap:4px;margin:16px 0 0;color:var(--mp-muted);font-size:14px;line-height:1.45;text-align:center}
.sd-mp-card.is-featured .sd-mp-note{color:rgba(255,255,255,.72)}

.sd-mp .sd-mp-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;margin:32px 0 0;padding:0;list-style:none;color:var(--mp-muted);font-size:15px;line-height:1.5}
.sd-mp .sd-mp-trust li{margin:0;padding:0}
.sd-mp .sd-mp-trust li:not(.sd-mp-pay)::before{content:"✓ ";content:"✓ "/"";color:var(--mp-ink)}
.sd-mp .sd-mp-trust a{color:var(--mp-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Phones and tablets (Manu, 9 Nov 2026): the two plans stay side by side so they can be compared at a glance.
   Smaller type, the badge sits on the top edge of the Relax Club card so both plan names line up. */
@media (max-width:859px){
  .sd-club--plans{padding:48px 0 44px}
  .sd-mp .sd-mp-head{margin-bottom:26px}
  .sd-mp-grid{gap:10px}
  .sd-mp-card{padding:22px 12px 14px;border-radius:20px}
  .sd-mp .sd-mp-top :is(h2,h3){font-size:clamp(19px,5.4vw,28px)}
  .sd-mp-badge{position:absolute;top:-11px;right:10px;margin:0;padding:4px 10px;font-size:12px;box-shadow:0 4px 12px -6px rgba(22,48,43,.5)}
  .sd-mp .sd-mp-meta{margin-top:4px;font-size:12.5px;line-height:1.35}
  .sd-mp .sd-mp-price{gap:0 4px;margin-top:14px}
  .sd-mp-price strong{font-size:clamp(25px,8.4vw,44px);letter-spacing:-.03em}
  .sd-mp-price span{font-size:13px}
  .sd-mp .sd-mp-per{margin-top:8px;font-size:12px;line-height:1.35}
  .sd-mp .sd-mp-perks{gap:9px;margin:14px 0 18px}
  .sd-mp .sd-mp-perks li{align-items:flex-start;gap:7px;font-size:13px;line-height:1.35}
  .sd-mp-check{width:18px;height:18px;margin-top:1px}
  .sd-mp-check svg{width:10px;height:10px}
  .sd-mp .sd-mp-cta{min-height:54px;padding:10px 8px;font-size:14px}
  .sd-mp .sd-mp-note{gap:3px;margin-top:10px;font-size:12px;line-height:1.35}
  .sd-mp .sd-mp-trust{gap:6px 18px;margin-top:22px;font-size:13.5px}
}
@media (min-width:600px) and (max-width:859px){
  .sd-mp-grid{gap:16px}
  .sd-mp-card{padding:26px 18px 18px}
  .sd-mp .sd-mp-perks li{font-size:14.5px}
}

/* My SpaDrop > Membership: the same cards, a quieter title inside the tab. */
.sd-my .sd-mp{margin-top:8px}
.sd-my .sd-mp .sd-mp-head{margin-bottom:28px}
.sd-my .sd-mp .sd-mp-head h2{font-size:clamp(30px,4vw,44px)}

/* /membership/ page: the section already sets its own width and spacing. */
.sd-member--plans .sd-mp{padding-top:8px}

@media (prefers-reduced-motion:reduce){.sd-mp .sd-mp-cta{transition:none}.sd-mp .sd-mp-cta:hover{transform:none}}

/* Compare plans (/membership/#compare, Paul 9 Nov 2026): the same two cards, then a pay-as-you-go card across both
   columns with its button on the right (stacked on phones). */
.sd-mp-card--single{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);align-items:center;gap:12px 40px}
.sd-mp .sd-mp-card--single .sd-mp-perks{margin:18px 0 0}
.sd-mp .sd-mp-cta--outline{margin-top:0;background:transparent;color:var(--mp-ink);box-shadow:inset 0 0 0 2px var(--mp-deep)}
html[data-theme=dark] .sd-mp-card:not(.is-featured) .sd-mp-cta--outline{background:transparent;color:#f7f7f2;box-shadow:inset 0 0 0 2px rgba(247,247,242,.7)}
@media (max-width:859px){
  .sd-mp-card--single{grid-template-columns:1fr;gap:0;padding:22px 16px 16px}
  .sd-mp .sd-mp-card--single .sd-mp-perks{margin:14px 0 18px}
  .sd-mp .sd-mp-card--single .sd-mp-perks li{font-size:14px}
}