/* ===================================================================
   PREMIUM UI — shared premium modal ("All-in-One Wellness Platform"),
   badges, CTAs and lock styling. Used across the Holistic Loader
   family (index.html, instruments.html, nutriloader.html, yoga-loader.html).
   =================================================================== */

/* ===== Premium modal (matches index.html) ===== */
#premiumModal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(5,3,9,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .3s ease}
#premiumModal.show{opacity:1;pointer-events:auto}
#premiumModalCard{position:relative;width:min(400px,100%);max-height:86vh;display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,rgba(24,17,32,.94),rgba(14,10,20,.96));border:1px solid var(--line);border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,217,138,.08) inset;
  transform:translateY(14px) scale(.97);transition:transform .35s cubic-bezier(.22,1,.36,1),width .2s ease;text-align:center;
  -webkit-user-select:text;user-select:text}
#premiumModal.show #premiumModalCard{transform:translateY(0) scale(1)}
@media(min-width:861px){
  #premiumModalCard{width:min(760px,92vw)}
  #premiumModalCard .premSub{max-width:520px;margin-left:auto;margin-right:auto}
  #premiumModalSections{display:grid;grid-template-columns:repeat(3,1fr);
    grid-template-areas:"yoga breathing sound" "nutrition breathing sound";
    column-gap:28px;row-gap:0;align-items:start;text-align:left}
  .premSection{margin-bottom:0}
  .premSection:last-child{margin-bottom:0}
  .premSection[data-sec="yoga"]{grid-area:yoga}
  .premSection[data-sec="nutrition"]{grid-area:nutrition}
  .premSection[data-sec="breathing"]{grid-area:breathing}
  .premSection[data-sec="sound"]{grid-area:sound}
}
#premiumModalScroll{position:relative;overflow-y:auto;scrollbar-width:thin;padding:36px 28px 8px;min-height:0}
#premiumModalScroll::-webkit-scrollbar{width:7px}#premiumModalScroll::-webkit-scrollbar-thumb{background:rgba(244,241,234,.2);border-radius:7px}
#premiumModalFooter{flex:0 0 auto;padding:14px 28px 28px;background:linear-gradient(180deg,rgba(14,10,20,0),rgba(14,10,20,.96) 22%);box-shadow:0 -14px 20px -14px rgba(0,0,0,.4)}
#premiumScrollHint{display:none;position:absolute;bottom:6px;right:14px;pointer-events:none;
  align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:rgba(255,217,138,.14);border:1px solid rgba(255,217,138,.35);
  opacity:1;transition:opacity .25s ease;animation:premScrollBounce 1.6s ease-in-out infinite}
#premiumScrollHint svg{width:13px;height:13px;stroke:var(--gold);fill:none;stroke-width:2.4}
#premiumScrollHint.hide{opacity:0}
@media(max-width:560px){ #premiumScrollHint{display:flex} }
@keyframes premScrollBounce{0%,100%{transform:translate(0,0)}50%{transform:translate(0,4px)}}
#premiumModalClose{position:absolute;top:16px;right:16px;z-index:2;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--soft);background:rgba(244,241,234,.06);border:none;cursor:pointer;transition:background .2s ease,color .2s ease}
#premiumModalClose:hover{background:rgba(244,241,234,.14);color:var(--ink)}
#premiumModalClose svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.premBadge{display:inline-flex;align-items:center;gap:5px;font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#2a1c05;background:linear-gradient(135deg,#ffe3a3,#d9a441);padding:6px 12px;border-radius:999px;white-space:nowrap;
  animation:premGlow 2.4s ease-in-out infinite;transition:transform .15s ease}
.premBadge svg{width:10px;height:10px;display:block;flex:0 0 auto}
#premiumModalCard .premBadge{margin-bottom:20px}
#premiumModalCard h2{font-family:Georgia,serif;font-weight:700;font-size:clamp(24px,6vw,32px);letter-spacing:.03em;text-transform:uppercase;margin-bottom:38px;
  background:linear-gradient(90deg,var(--gold),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
#premiumModalCard .premSub{font-family:var(--ui);font-size:12.5px;color:var(--soft);letter-spacing:.02em;line-height:1.55;margin-bottom:28px;padding:0 4px}
#premiumModalSections{margin-bottom:8px}
.premSection{margin-bottom:26px}
.premSection:last-child{margin-bottom:22px}
.premCompactSection{margin-bottom:18px;text-align:left}
.premCompactSection:last-child{margin-bottom:6px}
.premCompactTitle{font-family:var(--ui);font-size:13.5px;font-weight:700;letter-spacing:.03em;color:var(--ink);margin-bottom:5px}
.premCompactItems{font-family:var(--ui);font-size:12px;color:var(--soft);line-height:1.6;letter-spacing:.01em}
.premTagline{font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--gold);
  text-align:center;margin:6px 0 6px;padding:0 4px}
.premSectionTitle{display:flex;align-items:center;gap:10px;font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:15px;text-align:left}
.premSectionTitle::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(255,217,138,.5),transparent)}
.premList{display:flex;flex-direction:column;gap:16px;text-align:left}
.premList li{display:flex;align-items:flex-start;gap:12px}
.premList .premCheck{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-top:1px;
  background:rgba(255,217,138,.14);border:1px solid rgba(255,217,138,.4)}
.premList .premCheck svg{width:11px;height:11px;stroke:var(--gold);fill:none;stroke-width:2.6}
.premTxt{display:flex;flex-direction:column;gap:4px;min-width:0;font-family:var(--ui)}
.premHead{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);line-height:1.3}
.premDetail{font-size:12px;color:var(--soft);line-height:1.5;letter-spacing:.01em}
.premCta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;padding:12px 14px 11px;border-radius:20px;border:none;cursor:pointer;text-decoration:none;box-sizing:border-box;
  background:linear-gradient(180deg,var(--gold),#d9a441);color:#241c12;font-family:var(--ui);font-weight:600;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 10px 30px rgba(255,217,138,.28);transition:transform .12s ease,filter .2s ease}
.premCta:hover{filter:brightness(1.05)}
.premCta:active{transform:scale(.97)}
.premCancelNote{font-weight:500;font-size:9.5px;letter-spacing:.03em;text-transform:none;opacity:.7;color:#241c12}
.premCtaPrimary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;padding:14px 14px 12px;border-radius:20px;border:none;cursor:pointer;box-sizing:border-box;
  background:linear-gradient(135deg,#5EA8FF,#7C6BFF);color:#fff;font-family:var(--ui);font-weight:700;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 12px 34px rgba(124,107,255,.4),0 0 0 1px rgba(255,255,255,.08) inset;
  animation:premGlowBlue 2.6s ease-in-out infinite;transition:transform .12s ease,filter .2s ease}
.premCtaPrimary:hover{filter:brightness(1.08)}
.premCtaPrimary:active{transform:scale(.97)}
.premCtaSubnote{font-weight:500;font-size:9.5px;letter-spacing:.03em;text-transform:none;opacity:.85;color:rgba(255,255,255,.9)}
.premCtaSecondary{margin-top:10px;box-shadow:0 6px 16px rgba(255,217,138,.16);font-size:11.5px}
@keyframes premGlowBlue{
  0%,100%{box-shadow:0 12px 34px rgba(124,107,255,.35),0 0 0 1px rgba(255,255,255,.08) inset}
  50%{box-shadow:0 12px 42px rgba(94,168,255,.55),0 0 0 1px rgba(255,255,255,.14) inset}
}
.premCtaGhost{width:100%;margin-top:12px;padding:12px;border-radius:999px;background:transparent;border:1px solid rgba(244,241,234,.25);color:var(--soft);
  font-family:var(--ui);font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.premCtaGhost:hover{background:rgba(244,241,234,.08);color:var(--ink);border-color:rgba(244,241,234,.4)}
@keyframes premGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(255,217,138,0)}
  50%{box-shadow:0 0 14px 1px rgba(255,217,138,.45)}
}
/* ---- lock badge (reused on locked program cards) ---- */
.lockBadge{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--ui);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#2a1c05;background:linear-gradient(135deg,#ffe3a3,var(--gold-soft));
  border-radius:999px;white-space:nowrap;
  animation:premGlow 2.4s ease-in-out infinite;
}
.lockBadge svg{display:block;flex:0 0 auto}
.miniLockBadge{display:inline-flex;align-items:center;gap:4px;margin-left:7px;
  font-family:var(--ui);font-weight:700;font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#2a1c05;background:linear-gradient(135deg,#ffe3a3,var(--gold-soft));
  padding:3px 8px;border-radius:999px;white-space:nowrap;vertical-align:middle;
  animation:premGlow 2.4s ease-in-out infinite}
.miniLockBadge svg{width:9px;height:9px;display:block;flex:0 0 auto;stroke:currentColor}