/* =========================================================
   Sponsor Guard Card (Astra-friendly, premium but subtle)
   HTML:
   .sponsor-guard.(login|need-sponsor|need-upgrade).(neutral|lvl1|lvl2)
     .sponsor-guard__inner
       .sponsor-guard__mark
       .sponsor-guard__body
         .sponsor-guard__title
         .sponsor-guard__desc
         .sponsor-guard__actions
           a.sponsor-guard__btn
   ========================================================= */

/* Use Astra variables if available, fall back gracefully */
:root{
  --sg-bg: var(--ast-global-color-5, #ffffff);
  --sg-text: var(--ast-global-color-2, #111827);
  --sg-subtext: rgba(17,24,39,.72);
  --sg-border: rgba(17,24,39,.12);
  --sg-border-weak: rgba(17,24,39,.08);

  --sg-radius: 16px;
  --sg-pad: 16px;

  --sg-shadow: 0 14px 34px rgba(0,0,0,.08);
  --sg-shadow-soft: 0 8px 20px rgba(0,0,0,.06);

  /* Accent defaults */
  --sg-accent: rgba(99,102,241,.95);      /* indigo-ish, premium neutral */
  --sg-accent-weak: rgba(99,102,241,.12);

  /* Lv1: champagne gold */
  --sg-lv1: rgba(206,164,92,.98);
  --sg-lv1-weak: rgba(206,164,92,.14);

  /* Lv2: royal blue */
  --sg-lv2: rgba(37,99,235,.98);
  --sg-lv2-weak: rgba(37,99,235,.14);

  /* Danger-ish (not sponsor / expired) */
  --sg-warn: rgba(234,88,12,.98);
  --sg-warn-weak: rgba(234,88,12,.12);
}

.sponsor-guard{
  margin: 18px 0;
}

.sponsor-guard__inner{
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 14px;

  padding: var(--sg-pad);
  border-radius: var(--sg-radius);

  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.86));
  border: 2px solid rgb(234,88,12);
  box-shadow: var(--sg-shadow-soft);

  position: relative;
  overflow: hidden;
}

/* a faint premium sheen */
.sponsor-guard__inner::after{
  content:"";
  position:absolute;
  right: -40px;
  top: -60px;
  width: 180px;
  height: 180px;
  transform: rotate(12deg);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 58%);
  pointer-events:none;
  opacity: .75;
}

/* Left ornament bar (uses accent vars) */
.sponsor-guard__mark{
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(234,88,12), rgba(0,0,0,.08));
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 10px 18px rgba(0,0,0,.10);
  position: relative;
}

.sponsor-guard__mark::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 12px;
  width: 6px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  opacity: .85;
}

.sponsor-guard__body{ min-width: 0; }

.sponsor-guard__title{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--sg-text);
  margin: 0 0 6px;
}

.sponsor-guard__desc{
  font-size: 13px;
  line-height: 1.65;
  color: var(--sg-subtext);
  margin: 0;
}

.sponsor-guard__actions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Button: keep it looking like a button under Astra link styles */
.sponsor-guard__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;
  border-radius: 12px;

  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.72);
  color: var(--sg-text) !important;

  text-decoration: none !important;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .02em;

  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 10px 18px rgba(0,0,0,.06);

  transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}

.sponsor-guard__btn:hover{
  background: rgba(255,255,255,.92);
  border-color: rgba(0,0,0,.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,.65) inset,
    0 16px 26px rgba(0,0,0,.10);
}

.sponsor-guard__btn:active{
  transform: translateY(1px);
}

/* =============== Variants =============== */
/* Default (neutral) */
.sponsor-guard.neutral .sponsor-guard__inner{
  border-color: var(--sg-border-weak);
}
.sponsor-guard.neutral .sponsor-guard__mark{
  background: linear-gradient(180deg, var(--sg-accent), rgba(0,0,0,.08));
}
.sponsor-guard.neutral .sponsor-guard__btn{
  border-color: rgba(99,102,241,.22);
  background: linear-gradient(180deg, rgba(99,102,241,.12), rgba(255,255,255,.78));
}

/* Lv1 (gold) */
.sponsor-guard.lvl1 .sponsor-guard__inner{
  border-color: rgba(206,164,92,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,250,240,.88));
}
.sponsor-guard.lvl1 .sponsor-guard__mark{
  background: linear-gradient(180deg, rgba(206,164,92,1), rgba(120,85,25,.20));
}
.sponsor-guard.lvl1 .sponsor-guard__btn{
  border-color: rgba(206,164,92,.28);
  background: linear-gradient(180deg, rgba(206,164,92,.14), rgba(255,255,255,.82));
}

/* Lv2 (blue) */
.sponsor-guard.lvl2 .sponsor-guard__inner{
  border-color: rgba(37,99,235,.20);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,248,255,.90));
}
.sponsor-guard.lvl2 .sponsor-guard__mark{
  background: linear-gradient(180deg, rgba(37,99,235,1), rgba(18,45,120,.20));
}
.sponsor-guard.lvl2 .sponsor-guard__btn{
  border-color: rgba(37,99,235,.24);
  background: linear-gradient(180deg, rgba(37,99,235,.12), rgba(255,255,255,.82));
}

/* Need sponsor / expired: slightly warning tone but still premium */
.sponsor-guard.need-sponsor .sponsor-guard__inner,
.sponsor-guard.need-upgrade .sponsor-guard__inner,
.sponsor-guard.login .sponsor-guard__inner{
  box-shadow: var(--sg-shadow);
}

/* If you want “need-sponsor” more alert than “need-upgrade” */
.sponsor-guard.need-sponsor .sponsor-guard__mark{
  background: linear-gradient(180deg, var(--sg-warn), rgba(120,40,0,.18));
}
.sponsor-guard.need-sponsor .sponsor-guard__btn{
  border-color: rgba(234,88,12,.24);
  background: linear-gradient(180deg, rgba(234,88,12,.10), rgba(255,255,255,.82));
}

/* Upgrade: keep it closer to lv color (lvl1/lvl2 already handled), fallback to accent */
.sponsor-guard.need-upgrade.neutral .sponsor-guard__mark{
  background: linear-gradient(180deg, var(--sg-accent), rgba(0,0,0,.08));
}

/* Login: slightly calmer */
.sponsor-guard.login .sponsor-guard__desc{
  color: rgba(17,24,39,.68);
}

/* =============== Responsive =============== */
@media (max-width: 520px){
  .sponsor-guard__inner{
    grid-template-columns: 12px 1fr;
    gap: 12px;
    padding: 14px;
  }
  .sponsor-guard__btn{
    width: 100%;
    justify-content: center;
  }
}

/* Dark mode: subtle adjustments (won't break if site doesn't use dark) */
@media (prefers-color-scheme: dark){
  .sponsor-guard__inner{
    background: linear-gradient(180deg, rgba(20,20,20,.78), rgba(10,10,10,.78));
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 14px 34px rgba(0,0,0,.45);
  }
  .sponsor-guard__title{ color: rgba(255,255,255,.90); }
  .sponsor-guard__desc{ color: rgba(255,255,255,.68); }
  .sponsor-guard__btn{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.90) !important;
    box-shadow: 0 12px 22px rgba(0,0,0,.35);
  }
  .sponsor-guard__btn:hover{
    background: rgba(255,255,255,.12);
  }
}