/* Referrals – shared card CSS (admin preview + frontend)
 * File: assets/shared/css/referrals-card.css
 */

.tsf-ref-card{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  position:relative;
  border-radius: 18px;
  
  transform: translateZ(0);

  --tsfScale: 1;

  --tsfFont: ui-sans-serif;
  --tsfHeadlineWeight: 820;

  --tsfFsKicker: calc(12px * var(--tsfScale));
  --tsfFsH1:     calc(18px * var(--tsfScale));
  --tsfFsSub:    calc(13px * var(--tsfScale));
  --tsfFsName:   calc(16px * var(--tsfScale));
  --tsfFsBadge:  calc(12px * var(--tsfScale));
  --tsfFsBtn:    calc(14px * var(--tsfScale));
  --tsfFsFoot:   calc(12px * var(--tsfScale));

  --tsfPad:   calc(22px * var(--tsfScale));
  --tsfGap:   calc(14px * var(--tsfScale));
  --tsfRad1:  calc(18px * var(--tsfScale));
  --tsfRad2:  calc(16px * var(--tsfScale));
  --tsfRad3:  calc(14px * var(--tsfScale));

  --tsfFrameGap: calc(14px * var(--tsfScale));

  --tsfText: #e8ecff;
  --tsfMuted: rgba(232,236,255,.72);
  --tsfSub: rgba(232,236,255,.78);

  --tsfPanel1: rgba(10,16,35,.62);
  --tsfPanel2: rgba(10,16,35,.35);

  --tsfBadgeText: #e8ecff;
  --tsfBadgeBorder: rgba(0,245,255,.35);
  --tsfBadgeBg: rgba(0,245,255,.07);

  --tsfBtnA: rgba(0,245,255,.18);
  --tsfBtnB: rgba(255,43,214,.18);
  --tsfBtnText: #e8ecff;
  --tsfBtnGlow: rgba(255,43,214,.14);

  color: var(--tsfText);
  font-family: var(--tsfFont), system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing:.2px;
}

.tsf-ref-frame{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 4;
}
.tsf-ref-frame > div{ width:100%; height:100%; }
.tsf-ref-frame svg{
  width:100%;
  height:100%;
  display:block;
  filter: saturate(1.25) contrast(1.10) drop-shadow(0 0 14px rgba(0,245,255,.25));
  opacity: 1;
}

.tsf-ref-content{
  position:relative;
  z-index:3;
  border-radius: var(--tsfRad2);
  background: linear-gradient(180deg, var(--tsfPanel1), var(--tsfPanel2));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:hidden;
  padding: calc(var(--tsfPad) + var(--tsfFrameGap));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.tsf-ref-cut{
  position:absolute;
  inset: var(--tsfPad);
  border-radius: var(--tsfRad3);
  border: 1px solid rgba(255,255,255,.10);
  clip-path: polygon(
    16px 0, calc(100% - 26px) 0, 100% 18px,
    100% calc(100% - 18px), calc(100% - 16px) 100%,
    22px 100%, 0 calc(100% - 22px), 0 18px
  );
  pointer-events:none;
  opacity:.65;
}

.tsf-ref-sweep{
  position:absolute;
  inset:-45% -10%;
  background: linear-gradient(90deg, transparent, rgba(0,245,255,.16), transparent);
  transform: rotate(14deg) translateX(-60%);
  animation: tsf_ref_sweep 5.8s linear infinite;
  pointer-events:none;
  opacity:.55;
  mix-blend-mode: screen;
}
@keyframes tsf_ref_sweep{
  0%{ transform: rotate(14deg) translateX(-60%); }
  100%{ transform: rotate(14deg) translateX(60%); }
}

.tsf-ref-grid{ display:grid; gap: var(--tsfGap); }

.tsf-ref-top{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap: calc(12px * var(--tsfScale));
  min-width:0;
  flex-wrap: wrap;
  overflow: visible;
}

.tsf-ref-title{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap: calc(6px * var(--tsfScale));
  flex: 1 1 240px;
  padding-right: calc(120px * var(--tsfScale));
}

.tsf-ref-kicker{
  font-size: var(--tsfFsKicker);
  color: var(--tsfMuted);
  text-transform: uppercase;
  letter-spacing: 2.4px;
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}
.tsf-ref-h1{
  font-size: var(--tsfFsH1);
  font-weight: var(--tsfHeadlineWeight);
  line-height:1.1;
  color: var(--tsfText);
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}
.tsf-ref-sub{
  font-size: var(--tsfFsSub);
  color: var(--tsfSub);
  line-height:1.25;
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}

.tsf-ref-badge{
  position: absolute;
  top: var(--tsfFrameGap);
  right: var(--tsfFrameGap);
  z-index: 6;

  font-size: var(--tsfFsBadge);
  padding: calc(8px * var(--tsfScale)) calc(10px * var(--tsfScale));
  border-radius: 999px;
  border: 1px solid var(--tsfBadgeBorder);
  background: var(--tsfBadgeBg);
  box-shadow: 0 0 10px rgba(0,245,255,.10);
  color: var(--tsfBadgeText);

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: min(52%, calc(100% - (2 * var(--tsfFrameGap))));
  margin: 0;
}

.tsf-ref-panel{
  border-radius: var(--tsfRad3);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  padding: calc(12px * var(--tsfScale));
  display:flex;
  flex-direction:column;
  gap: calc(10px * var(--tsfScale));
  margin-top: calc(2px * var(--tsfScale));
  margin-left: calc(var(--tsfFrameGap) * 0.2);
  margin-right: calc(var(--tsfFrameGap) * 0.2);
}

.tsf-ref-label{
  font-size: var(--tsfFsFoot);
  color: var(--tsfMuted);
}

.tsf-ref-name{
  font-size: var(--tsfFsName);
  font-weight: 820;
  letter-spacing:.4px;
  line-height: 1.15;
  text-shadow: 0 0 10px rgba(0,245,255,.18);
  color: var(--tsfText);
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}

.tsf-ref-btn{
  font-size: var(--tsfFsBtn);
  cursor:pointer;
  user-select:none;
  border:none;
  border-radius: calc(12px * var(--tsfScale));
  padding: calc(12px * var(--tsfScale));
  color: var(--tsfBtnText);
  background: linear-gradient(90deg, var(--tsfBtnA), var(--tsfBtnB));
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
  font-weight:750;
  width: 100%;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  text-decoration: none;
  display: inline-block;
}
.tsf-ref-btn:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.tsf-ref-btn:active{ transform: translateY(0px) scale(.99); }
/* ===== TSF: prevent "squash into a thin column" ===== */

/* a shortcode wrapper kapjon normális viselkedést */
.tsf-referrals{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* ha túl szűk a konténer (pl. sidebar/column), ne essen szét -> legyen scroll */
.tsf-referrals{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px; /* hogy a scroll ne vágjon ronda legyen */
}

/* kártya: ne menjen 320px alá (ez alatt minden design szétesik) */
.tsf-ref-card{
  min-width: 320px;
}

/* keskeny nézetben ne vegyünk el fix 120px-et a title-től */
@media (max-width: 520px){
  .tsf-ref-title{
    padding-right: 0;
  }

  /* badge maradhat abszolút, de kicsit kisebb legyen, hogy ne ütközzön */
  .tsf-ref-badge{
    max-width: 70%;
  }
}
/* ===== TSF Referrals: frontend must match admin preview exactly ===== */

/* 1) a shortcode wrapper ne deformáljon */
.tsf-referrals{
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 2) FIX design width (ez az “igazi” preview méret) */
.tsf-ref-card{
  width: 520px;          /* <- EZ A LÉNYEG */
  max-width: 520px;
  position: relative;    /* badge/frame ehhez igazodjon */
  box-sizing: border-box;
}

/* 3) biztos box-model mindenkinek */
.tsf-ref-card, .tsf-ref-card *{
  box-sizing: border-box;
}

/* 4) frame mindig content felett */
.tsf-ref-frame{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.tsf-ref-frame > div{ width:100%; height:100%; }
.tsf-ref-frame svg{ width:100%; height:100%; display:block; }

/* 5) content safe inset + rétegek */
.tsf-ref-content{
  position: relative;
  z-index: 3;

  /* FONTOS: ugyanaz a safe “kerettől beljebb” logika */
  padding: calc(var(--tsfPad) + var(--tsfFrameGap));
}

/* 6) badge – ugyanaz a fix pozíció, mint adminban */
.tsf-ref-badge{
  position: absolute !important;
  top: 30px !important;
  right: 30px !important;
  z-index: 999 !important;
  margin: 0 !important;

  box-shadow: 0 0 10px rgba(0,245,255,.10) !important;
  max-width: min(52%, calc(100% - 60px));
}

/* 7) title adjon helyet a badge-nek (admin preview logika) */
.tsf-ref-title{
  padding-right: 120px;
}

/* 8) a panel ne engedje, hogy a gomb “kilógjon” (shadow miatt) */
.tsf-ref-panel{
  overflow: hidden;
}
/* opcionális: ha szűk helyre kerül, a konténer görgessen, ne a kártya deformálódjon */
.tsf-referrals{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* ===== Fix: no square shadow artifacts inside rounded panel ===== */

/* a panel tényleg vágjon kerekítve (shadow/glow ne rajzoljon szögletes “layer”-t) */
.tsf-ref-panel{
  border-radius: var(--tsfRad3);
  overflow: hidden;
  background-clip: padding-box;
}

/* a gomb glow-ja ne csináljon “boxy” artefactot */
.tsf-ref-btn{
  border-radius: calc(12px * var(--tsfScale));
  background-clip: padding-box;
}

/* ha még mindig látszik egy sötét téglalap: az általában filter/border miatt van */
.tsf-ref-panel{
  filter: none;
}
.tsf-ref-content{
  box-shadow: none; /* ha previewban tényleg nincs ilyen perem */
}