/*
 * Prodigy Subscribe - styles for the [prodigy_subscribe] page.
 *
 * Palette and control treatment match the practitioner portal and the
 * training page: every color is a Prodigy theme token with the old literal as
 * the fallback. Every button sets text-transform:none explicitly because the
 * previous theme force-uppercased clickable classes.
 */

.ps-app {margin:0;}
.ps-app .ps-panel {color:var(--fg,inherit);border:1px solid var(--line,#ececec);border-radius:8px;background:var(--surface,#fff);padding:22px;box-sizing:border-box;margin:0 0 18px;}
.ps-app h3 {color:var(--heading,#4c255f);margin:0 0 10px;}
.ps-app .ps-sub {color:var(--fg-2,#66706f);font-size:.96em;line-height:1.55;margin:0 0 14px;}
.ps-app .ps-lede {margin:0 0 18px;}
.ps-app .ps-small {font-size:.92em;color:var(--fg-2,#555);}
.ps-app .ps-trial {color:var(--label,#00806f);font-weight:700;font-size:.94em;margin:0 0 12px;}
.ps-app .ps-msg {display:none;border-left:4px solid var(--accent,#00a38d);background:var(--surface-2,#e5f3f3);padding:12px 14px;margin:0 0 18px;}
.ps-app .ps-msg.ps-show {display:block;}
.ps-app .ps-msg.ps-error {border-left-color:#b3443e;background:var(--surface-2,#fbeeed);}
.ps-app .ps-panel .ps-msg.ps-show {margin:0;}
.ps-app .ps-button {display:inline-flex;font-family:var(--f-body,inherit);align-items:center;justify-content:center;height:auto;min-height:48px;background:var(--accent,#00a38d);color:var(--accent-ink,#fff);border:0;border-radius:var(--radius-btn,4px);padding:0 24px;font-weight:var(--w-body-strong,700);font-size:1rem;line-height:1;cursor:pointer;text-decoration:none;text-transform:none;letter-spacing:normal;box-sizing:border-box;}
.ps-app .ps-button:hover,
.ps-app .ps-button:focus {background:var(--accent,#008976);color:var(--accent-ink,#ffffff);text-decoration:none;}
.ps-app .ps-button-secondary {background:var(--glass,#fff);color:var(--heading,#00a38d);border:1px solid var(--line-2,#00a38d);}
.ps-app .ps-button-secondary:hover,
.ps-app .ps-button-secondary:focus {background:var(--surface-2,#f2faf9);color:var(--heading,#008976);border-color:var(--accent-2,#008976);}
.ps-app button[disabled] {opacity:.6;cursor:default;}
.ps-app .ps-actions {display:flex;gap:10px;flex-wrap:wrap;margin:0;}
.ps-app .ps-link-button {background:transparent;border:0;padding:0;color:var(--link,#00a38d);font-weight:700;cursor:pointer;text-transform:none;letter-spacing:normal;}
.ps-app .ps-link-button:hover,
.ps-app .ps-link-button:focus {color:var(--link-hover,#008976);text-decoration:underline;}
.ps-app .ps-links {display:flex;gap:18px;flex-wrap:wrap;margin:0;}

/* App Store link (1.3.3): a plain text link at the end of each panel's
   app line, the .ps-link-button treatment on a real anchor. It never wraps
   mid-phrase, and it sets text-transform:none because the theme would
   otherwise uppercase it. */
.ps-app .ps-store-link {color:var(--link,#00a38d);font-weight:700;text-decoration:none;text-transform:none;letter-spacing:normal;white-space:nowrap;}
.ps-app .ps-store-link:hover,
.ps-app .ps-store-link:focus {color:var(--link-hover,#008976);text-decoration:underline;}

/* Price tiles (the training buy screen's anatomy: the PRICE is the purple
   heading, one gray line under it, then the button). Every tile is the same
   three elements; the flex column with margin-top:auto pins each button to
   the tile's foot, so the buttons stay aligned even when a note wraps. */
.ps-app .ps-price-row {display:flex;gap:14px;flex-wrap:wrap;margin:0;align-items:stretch;}
.ps-app .ps-price-card {flex:1 1 220px;border:1px solid var(--line,#d9eee9);background:var(--surface-2,#f7fcfb);border-radius:8px;padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;}
.ps-app .ps-price-card strong {display:block;color:var(--heading,#4c255f);font-size:1.1em;margin:0 0 4px;}
.ps-app .ps-price-note {margin:0 0 12px;color:var(--fg-2,#66706f);font-size:.88em;}
.ps-app .ps-price-card .ps-button {margin-top:auto;align-self:flex-start;}
.ps-app .ps-not-on-sale {margin:12px 0 0;}

/* Manage Billing (1.2.0): under the active-until line of a web-billed panel,
   the outlined button (the buy button stays the one filled control on the
   page) with its benefit line beneath. text-transform:none rides in on
   .ps-button; the theme would otherwise uppercase it. */
.ps-app .ps-manage {margin:14px 0 0;}
.ps-app .ps-manage-note {margin:8px 0 0;color:var(--fg-2,#66706f);font-size:.88em;}

/* Official store badges (2026-10-13), the same as the app pages: 48px tall,
   vector art from the media library, drawn as link backgrounds. */
.ps-app .ps-store-badges {display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:4px 0 16px;}
.ps-app .ps-store-badge {display:inline-block;height:48px;background-position:center;background-size:contain;background-repeat:no-repeat;line-height:0;text-decoration:none;border:0;}
.ps-app .ps-store-badge--apple {width:144px;background-image:url(https://prodigyhealing.com/wp-content/uploads/2026/10/download-on-the-app-store-badge-black-en-us.svg);}
.ps-app .ps-store-badge--play {width:162px;background-image:url(https://prodigyhealing.com/wp-content/uploads/2026/10/get-it-on-google-play-badge-en-us.svg);}
.ps-app .ps-store-badge:focus-visible {outline:2px solid var(--accent,#00a38d);outline-offset:3px;}