/* =====================================================================
   ShotGram v109 — new-generation profile buttons, one loading ring for the
   whole app, splash bar, friendly error card.
   ===================================================================== */

/* ---- profile action row: Follow · Message · gift · Share ---------------- */
.profile-actions.pa-v2 { display: flex; gap: 8px; align-items: stretch; margin: 16px 0 6px; }
.pa-btn {
  height: 42px; min-width: 42px; padding: 0 14px; border-radius: 13px; border: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 14.5px; font-weight: 700; letter-spacing: .01em; color: #fff; cursor: pointer;
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.pa-btn.grow { flex: 1; min-width: 0; }
.pa-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-btn svg { width: 18px; height: 18px; flex: none; stroke: #fff; color: #fff; }
.pa-btn:active { transform: scale(.95); }
.pa-btn:disabled { opacity: .6; }
.pa-primary {
  background: linear-gradient(135deg, #22d3ee 0%, var(--violet, #8b5cff) 55%, #ec4899 100%);
  box-shadow: 0 6px 18px rgba(var(--violet-rgb, 139, 92, 255), .32), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.pa-glass {
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pa-glass:hover { background: rgba(255, 255, 255, .11); }
.pa-icon { width: 42px; padding: 0; flex: none; }
.pa-icon svg { width: 21px; height: 21px; }
/* white line gift; lights up once you're subscribed */
.pa-gift.on {
  background: linear-gradient(135deg, rgba(var(--violet-rgb, 139, 92, 255), .35), rgba(236, 72, 153, .35));
  box-shadow: inset 0 0 0 1px rgba(236, 72, 153, .6), 0 0 16px rgba(236, 72, 153, .35);
}
.pa-gift.on svg { stroke: #ffd6f0; }
.pa-gift:not(.on) svg { animation: paGiftNudge 3.2s ease-in-out 1.2s 2; transform-origin: 50% 70%; }
@keyframes paGiftNudge { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-12deg); } 93% { transform: rotate(10deg); } 97% { transform: rotate(-5deg); } }
body.light .pa-glass { background: rgba(0, 0, 0, .05); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); color: #111; }
body.light .pa-glass svg { stroke: #111; color: #111; }
.btn.sub-cta { display: none !important; }   /* the old full-width bar */

/* ---- ONE loading ring everywhere (gradient comet ring) ------------------- */
.spinner, .ptr-spin, .dm-ptr-spin, .sg-swipe-veil .sg-swipe-spin {
  border: 0 !important; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(34, 211, 238, 0) 0deg, #22d3ee 80deg, var(--violet, #8b5cff) 200deg, #ec4899 320deg, #ff9ad8 356deg, rgba(236, 72, 153, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
}
.spinner { width: 30px; height: 30px; animation: sgring .8s cubic-bezier(.5, .15, .5, .85) infinite; filter: drop-shadow(0 0 6px rgba(var(--violet-rgb, 139, 92, 255), .45)); }
.spinner.sm, .dm-ptr-spin {
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
}
.spinner.sm { width: 20px; height: 20px; }
.ptr.spinning .ptr-spin, .dm-ptr.busy .dm-ptr-spin, .sg-swipe-veil .sg-swipe-spin { animation: sgring .8s linear infinite; }
@keyframes sgring { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner, .ptr-spin, .dm-ptr-spin { animation-duration: 1.8s !important; } }

/* softer, slower shimmer on loading placeholders */
.skeleton {
  background: linear-gradient(100deg, rgba(255, 255, 255, .04) 20%, rgba(var(--violet-rgb, 139, 92, 255), .12) 40%, rgba(255, 255, 255, .04) 60%) !important;
  background-size: 250% 100% !important; animation: sgshimmer 1.6s ease-in-out infinite !important;
}
@keyframes sgshimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ---- splash loading bar: flowing gradient, soft glow --------------------- */
.app-splash-bar { width: 136px; height: 4px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.app-splash-bar span {
  width: 55%;
  background: linear-gradient(90deg, rgba(var(--cyan-rgb, 0, 216, 255), 0), var(--cyan, #00d8ff) 25%, var(--violet, #8b5cff) 55%, var(--magenta, #ff2ed1) 85%, rgba(var(--magenta-rgb, 255, 46, 209), 0));
  box-shadow: 0 0 10px rgba(var(--violet-rgb, 139, 92, 255), .7);
  animation: splash-bar 1.05s cubic-bezier(.65, 0, .35, 1) infinite;
}

/* ---- friendly error card (no raw code) ----------------------------------- */
.screen-error { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 70px 24px; }
.screen-error-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  font-size: 26px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--violet, #8b5cff), #ec4899); }
.screen-error b { font-size: 18px; }
.screen-error span { color: var(--muted, #8a8fa3); margin-bottom: 8px; }

/* ---- subscribe sheet: "+ Get Shots" pill -------------------------------- */
.sub-topup { border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #22d3ee, var(--violet, #8b5cff)); margin-inline-start: 6px; cursor: pointer; }