/* Premium Comment Boxes — Highlight, Spotlight, Royal.

   Skins over the ordinary comment row, never a second comment component:
   comments-view.js wraps the avatar + body in .pc-card and adds
   .comment--pc-<tier>; likes, replies, delete, timestamps are the same nodes.
   Replies render OUTSIDE the card, so a thread under a Royal comment stays an
   ordinary thread.

   Motion is transform / opacity / background-position only, and all of it
   stops under prefers-reduced-motion. Each tier still reads as premium static. */

.comment--premium { display: block; }
.comment--premium > .pc-card {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
  isolation: isolate;
}
.comment--premium > .comment__replies,
.comment--premium > .pc-replies { margin-left: 60px; }

.pc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}

/* Upgrade button + owner-only expiry note, both in the actions row. */
.comment__action--upgrade { color: #a8700a; }
.comment__action--upgrade:hover { color: #7a4f00; background: rgba(240, 192, 64, .18); }
.pc-owner-note {
  margin-left: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--app-dim);
}

/* ---- Highlight ($0.99): noticeable, restrained ---------------------------- */

.comment--pc-highlight > .pc-card {
  padding: 12px 14px;
  border: 1.5px solid #3fcfdf;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(67, 220, 237, .10), rgba(67, 220, 237, .03));
  box-shadow: 0 0 0 3px rgba(67, 220, 237, .10), 0 4px 16px rgba(10, 139, 154, .14);
}
.comment--pc-highlight > .pc-card .pc-badge { color: #fff; background: #0a8b9a; }

/* ---- Spotlight ($2.99): clearly more valuable, gently alive --------------- */

.comment--pc-spotlight > .pc-card {
  padding: 14px 16px;
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(135deg, #fbf8ff, #f1f8ff) padding-box,
    linear-gradient(110deg, #7c4dff, #22c4e0, #ff4fb3, #7c4dff) border-box;
  background-size: 100% 100%, 300% 100%;
  box-shadow: 0 8px 26px rgba(124, 77, 255, .20), 0 2px 6px rgba(34, 196, 224, .14);
  transform: translateY(-1px);
  transition: transform .2s ease, box-shadow .2s ease;
  animation: pc-spot-border 6s linear infinite;
}
.comment--pc-spotlight > .pc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(124, 77, 255, .26), 0 3px 8px rgba(34, 196, 224, .18);
}
@keyframes pc-spot-border {
  from { background-position: 0 0, 0% 50%; }
  to   { background-position: 0 0, 300% 50%; }
}
.comment--pc-spotlight > .pc-card .comment__avatar {
  width: 44px;
  height: 44px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #7c4dff, 0 4px 12px rgba(124, 77, 255, .35);
}
.comment--pc-spotlight > .pc-card .comment__who { font-size: 14px; color: #4a24c9; }
.comment--pc-spotlight > .pc-card .pc-badge {
  color: #fff;
  background: linear-gradient(90deg, #7c4dff, #22a8e0);
  box-shadow: 0 2px 8px rgba(124, 77, 255, .35);
}

/* Four sparkles drifting up the right edge. Decorative, pointer-free. */
.pc-sparkles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}
.pc-sparkles i {
  position: absolute;
  bottom: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, rgba(124, 77, 255, .8) 60%, transparent 70%);
  opacity: 0;
  animation: pc-spark 5.5s ease-in-out infinite;
}
.pc-sparkles i:nth-child(1) { right: 6%;  animation-delay: 0s; }
.pc-sparkles i:nth-child(2) { right: 14%; animation-delay: 1.4s; width: 4px; height: 4px; }
.pc-sparkles i:nth-child(3) { right: 23%; animation-delay: 2.8s; }
.pc-sparkles i:nth-child(4) { right: 9%;  animation-delay: 4.1s; width: 5px; height: 5px; }
@keyframes pc-spark {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  25%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(-46px) scale(1.1); }
}

/* ---- Royal ($5.99): gold, prestigious, dominant --------------------------
   Ebony card inside a cast-gold frame. The dark ground is what makes gold
   read as gold on a white page, and it keeps cream body text at well over
   AA contrast. */

.comment--pc-royal > .pc-card {
  --app-dim: #d8c79a;
  --app-fg: #fff7e3;
  padding: 16px 18px 14px;
  color: #fff7e3;
  border: 3px solid transparent;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 214, 102, .16), transparent 55%) padding-box,
    linear-gradient(160deg, #2a1c08 0%, #170f04 55%, #241706 100%) padding-box,
    linear-gradient(135deg, #fff1b0 0%, #e8b93a 18%, #8a5a0c 38%, #f7d873 55%, #a66e10 75%, #ffe9a0 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(122, 76, 6, .55),
    0 0 22px rgba(240, 180, 40, .38),
    0 10px 30px rgba(60, 36, 0, .35);
  overflow: hidden;
}
/* Inner hairline, like the second rule of an engraved frame. */
.comment--pc-royal > .pc-card::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(247, 216, 115, .35);
  border-radius: 13px;
  pointer-events: none;
  z-index: -1;
}
/* The shimmer: one soft diagonal light crossing the card, then a long rest. */
.comment--pc-royal > .pc-card::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 38%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 236, 170, .14) 40%, rgba(255, 248, 220, .26) 50%, rgba(255, 236, 170, .14) 60%, transparent 100%);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
  animation: pc-royal-shine 7s ease-in-out infinite;
}
@keyframes pc-royal-shine {
  0%, 55% { transform: translateX(-130%) skewX(-18deg); }
  85%, 100% { transform: translateX(330%) skewX(-18deg); }
}

.comment--pc-royal > .pc-card .comment__avatar {
  width: 48px;
  height: 48px;
  box-shadow: 0 0 0 2px #1a1105, 0 0 0 4px #e8b93a, 0 0 14px rgba(240, 180, 40, .55);
}
.comment--pc-royal > .pc-card .comment__avatar--letter { color: #2a1c08; background: linear-gradient(160deg, #ffe9a0, #d79a1e); font-size: 19px; }
.comment--pc-royal > .pc-card .comment__head { align-items: center; }
.comment--pc-royal > .pc-card .comment__who {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #ffd86b;
  background: linear-gradient(180deg, #fff3c4 0%, #ffd25a 45%, #e0a020 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  overflow-wrap: anywhere;
}
.comment--pc-royal > .pc-card .comment__text { font-size: 14.5px; color: #fff7e3; }
.comment--pc-royal > .pc-card .comment__when { color: #cbb57c; }
.comment--pc-royal > .pc-card .pc-badge {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .18em;
  color: #2a1c08;
  background: linear-gradient(180deg, #fff1b0, #e8b93a 55%, #b57a12);
  box-shadow: 0 0 0 1px rgba(122, 76, 6, .6), 0 2px 8px rgba(240, 180, 40, .35);
}
.comment--pc-royal > .pc-card .comment__action,
.comment--pc-royal > .pc-card .comment__like { color: #d8c79a; }
.comment--pc-royal > .pc-card .comment__action:hover,
.comment--pc-royal > .pc-card .comment__like:hover { color: #fff7e3; background: rgba(255, 216, 107, .14); }
.comment--pc-royal > .pc-card .comment__like.is-liked { color: #ff6b81; }
.comment--pc-royal > .pc-card .comment__badge { background: #b57a12; }
.comment--pc-royal > .pc-card .pc-owner-note { color: #d8c79a; }

/* The crown: a real image, sized by height so a better asset can drop in. */
.pc-crown {
  display: inline-block;
  flex: none;
  width: auto;
  height: 22px;
  margin: 0 -1px;
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)) drop-shadow(0 0 6px rgba(255, 200, 60, .45));
}

@media (max-width: 520px) {
  .comment--premium > .pc-card { gap: 10px; }
  .comment--pc-highlight > .pc-card { padding: 10px 11px; }
  .comment--pc-spotlight > .pc-card { padding: 11px 12px; }
  .comment--pc-royal > .pc-card { padding: 13px 13px 11px; }
  .comment--pc-spotlight > .pc-card .comment__avatar { width: 36px; height: 36px; }
  .comment--pc-royal > .pc-card .comment__avatar { width: 40px; height: 40px; }
  .comment--premium > .comment__replies { margin-left: 22px; }
  .pc-crown { height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .comment--pc-spotlight > .pc-card { animation: none; transition: none; }
  .comment--pc-spotlight > .pc-card:hover { transform: translateY(-1px); }
  .pc-sparkles { display: none; }
  .comment--pc-royal > .pc-card::after { animation: none; transform: translateX(150%) skewX(-18deg); opacity: .6; }
}

/* ---- Upgrade modal ------------------------------------------------------- */

.pc-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(8, 10, 18, .62);
  backdrop-filter: blur(3px);
}
.pc-modal__panel {
  position: relative;
  width: min(580px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 22px 22px 18px;
  color: #12131a;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.pc-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  font-size: 20px;
  line-height: 1;
  color: #606069;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.pc-modal__close:hover { background: rgba(127, 127, 127, .14); }
.pc-modal__title {
  margin: 0 36px 4px 0;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .02em;
}
.pc-modal__sub { margin: 0 0 16px; font-size: 13.5px; color: #606069; }
.pc-modal__preview {
  padding: 16px 14px;
  margin-bottom: 16px;
  background: #fff;
  border: 1px dashed rgba(127, 127, 127, .35);
  border-radius: 14px;
  min-height: 86px;
}
.pc-modal__preview .comment--premium > .comment__replies { display: none; }

.pc-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.pc-tier {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 12px 10px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: #f7f7f9;
  border: 2px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.pc-tier:hover { background: #f0f0f4; }
.pc-tier:focus-visible { outline: 2px solid #0a8b9a; outline-offset: 2px; }
.pc-tier__name { font-size: 12.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.pc-tier__price { font-size: 19px; font-weight: 900; }
.pc-tier__days { font-size: 11.5px; font-weight: 700; color: #606069; }
.pc-tier__blurb { font-size: 11.5px; color: #606069; line-height: 1.35; }
.pc-tier[aria-checked="true"].pc-tier--highlight { border-color: #3fcfdf; background: #effbfd; }
.pc-tier[aria-checked="true"].pc-tier--spotlight { border-color: #7c4dff; background: #f5f1ff; }
.pc-tier[aria-checked="true"].pc-tier--royal { border-color: #d79a1e; background: #fff8e4; }
.pc-tier--royal .pc-tier__name { display: flex; align-items: center; gap: 5px; color: #8a5a0c; }
.pc-tier--royal .pc-crown { height: 15px; filter: none; }

.pc-modal__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.pc-modal__fine { flex: 1; margin: 0; font-size: 11.5px; color: #606069; line-height: 1.4; }
.pc-modal__buy {
  flex: none;
  height: 42px;
  padding: 0 20px;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  color: #062238;
  background: #43dced;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.pc-modal__buy:hover:not(:disabled) { background: #2fcede; }
.pc-modal__buy:disabled { opacity: .6; cursor: default; }
.pc-modal__buy--royal { color: #2a1c08; background: linear-gradient(180deg, #ffe9a0, #e8b93a 60%, #c48a18); }
.pc-modal__buy--royal:hover:not(:disabled) { background: linear-gradient(180deg, #fff1b0, #f0c24a 60%, #d09520); }
.pc-modal__msg { min-height: 16px; margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: #d1344b; }

@media (max-width: 520px) {
  .pc-modal { padding: 10px; align-items: end; }
  .pc-modal__panel { padding: 18px 14px 14px; border-radius: 18px; max-height: calc(100vh - 20px); }
  .pc-tiers { gap: 6px; }
  .pc-tier { padding: 10px 7px; }
  .pc-tier__price { font-size: 16px; }
  .pc-tier__blurb { display: none; }
  .pc-modal__foot { flex-direction: column; align-items: stretch; }
  .pc-modal__buy { width: 100%; }
}

/* A reply box opened under a premium comment sits outside the card. */
.comment--premium > .comment-composer--reply { margin-left: 60px; }
@media (max-width: 520px) { .comment--premium > .comment-composer--reply { margin-left: 22px; } }

/* A narrow card must not crush the actions row: let it wrap, keep each
   control on one line, and give the owner's date its own line on a phone. */
.comment--premium > .pc-card .comment__actions { flex-wrap: wrap; }
.comment--premium > .pc-card .comment__like,
.comment--premium > .pc-card .comment__action { white-space: nowrap; }
@media (max-width: 520px) {
  .pc-owner-note { flex-basis: 100%; margin: 2px 0 0 10px; }
}