/* ===================================
   LILAC BLUE COMPACT v5
   - Stelle "icon style" oro + bordo nero (come immagine)
   - Codice lilla
   - Card compatte
   - Animazioni stati
   - Mobile safe
   =================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700;800;900&family=DM+Serif+Display&family=JetBrains+Mono:wght@600&display=swap');

:root{
  --radius:18px;

  --bg1:#f6f1ff;
  --bg2:#efe7ff;
  --bg3:#e7f3ff;

  --card1:#efe7ff;
  --card2:#f7f2ff;

  --ink:#0b1220;
  --muted:rgba(11,18,32,.62);

  --blue:#1f6feb;

  --shadow:0 16px 34px rgba(11,18,32,.16);
  --shadowHover:0 22px 55px rgba(11,18,32,.22);

  --free1:#22c55e; --free2:#16a34a;
  --busy1:#ef4444; --busy2:#b91c1c;
  --stand1:#3b82f6; --stand2:#06b6d4;
  --off1:#64748b; --off2:#111827;

  --codeLilac1:#c4b5fd;
  --codeLilac2:#a78bfa;
  --codeText:#241a4a;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:Manrope, system-ui, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(900px 520px at 92% 10%, rgba(34,162,255,.16), transparent 60%),
    linear-gradient(180deg,var(--bg1),var(--bg2),var(--bg3));
}

body::after{content:"";display:block;clear:both;}

/* =========================
   CARD
   ========================= */
div.cartomante{
  position:relative;
  width:calc(33.333% - 16px);
  height:175px;
  float:left;

  margin:10px 8px;
  padding:14px;

  border-radius:var(--radius);

  background:
    radial-gradient(220px 160px at 18% 20%, rgba(255,255,255,.65), transparent 60%),
    linear-gradient(135deg,var(--card1),var(--card2));

  border:2px solid rgba(31,111,235,.85);
  box-shadow:var(--shadow);
  overflow:hidden;

  transition:.2s ease;
}

div.cartomante:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadowHover);
}

/* =========================
   STELLINE (STILE ICONE ORO + BORDO NERO)
   ========================= */
div.cartomante::after{
  content:"";
  position:absolute;
  top:10px;
  left:10px;

  width:128px;          /* ✅ larghezza “5 stelle” */
  height:24px;

  padding:0;
  border-radius:999px;

  background-color:rgba(255,255,255,.55);
  border:1px solid rgba(31,111,235,.30);

  /* SVG inline: 5 stelle oro con outline nero */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='52' viewBox='0 0 260 52'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFF3B0'/%3E%3Cstop offset='0.55' stop-color='%23FACC15'/%3E%3Cstop offset='1' stop-color='%23E0A800'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)' stroke='%23000' stroke-width='3.2' stroke-linejoin='round'%3E%3Cpolygon points='26,3 32,18 48,19 36,29 40,45 26,36 12,45 16,29 4,19 20,18'/%3E%3Cpolygon points='78,3 84,18 100,19 88,29 92,45 78,36 64,45 68,29 56,19 72,18'/%3E%3Cpolygon points='130,3 136,18 152,19 140,29 144,45 130,36 116,45 120,29 108,19 124,18'/%3E%3Cpolygon points='182,3 188,18 204,19 192,29 196,45 182,36 168,45 172,29 160,19 176,18'/%3E%3Cpolygon points='234,3 240,18 256,19 244,29 248,45 234,36 220,45 224,29 212,19 228,18'/%3E%3C/g%3E%3C/svg%3E");

  background-repeat:no-repeat;
  background-position:center;
  background-size:110px 22px;   /* ✅ dimensione icone */

  box-shadow:
    0 10px 20px rgba(11,18,32,.10),
    0 0 16px rgba(250,204,21,.22);

  animation:starsSoftGlow 2.4s ease-in-out infinite;
  opacity:.98;
}

@keyframes starsSoftGlow{
  0%,100%{ filter:brightness(1); transform:translateY(0); }
  50%{ filter:brightness(1.12); transform:translateY(-1px); }
}

/* =========================
   NOME
   ========================= */
.labelnome{
  font-family:"DM Serif Display", serif;
  font-size:20px;
  text-align:center;
  margin:6px auto;
  padding:7px 12px;

  background:rgba(255,255,255,.7);
  border-radius:14px;
  border:1px solid rgba(31,111,235,.35);

  width:fit-content;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

div.rating-inline{display:none !important;}

/* =========================
   CODICE LILLA
   ========================= */
.cartcodice{
  text-align:center;
  margin-bottom:58px;
  font-size:12px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--muted);
}

.cartcod{
  font-family:"JetBrains Mono", monospace;
  display:inline-block;
  margin-top:8px;
  padding:7px 12px;
  border-radius:999px;

  font-size:14px;
  letter-spacing:2px;

  background:linear-gradient(135deg,var(--codeLilac1),var(--codeLilac2));
  color:var(--codeText);

  border:1px solid rgba(31,111,235,.55);
  box-shadow:0 10px 22px rgba(11,18,32,.14);

  animation:codeBlink 3.2s ease-in-out infinite;
}

@keyframes codeBlink{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.12); }
}

/* =========================
   BOTTONE STATO
   ========================= */
a.pluslink{text-decoration:none;}

div.cartomante a.pluslink > div.btncart{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;

  height:42px;
  border-radius:14px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:12px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#fff;

  box-shadow:0 14px 26px rgba(11,18,32,.18);
  overflow:hidden;
  transition:.2s ease;
}

.btncart i{ margin-right:8px; }

/* =========================
   STATI + ANIMAZIONI
   ========================= */
.btn-free{
  background:linear-gradient(135deg,var(--free1),var(--free2));
  animation:freePulse 1.6s ease-in-out infinite;
}

@keyframes freePulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.05);}
}

.btn-free::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-70%;
  width:55%;
  height:180%;
  transform:rotate(25deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  animation:sweep 2s linear infinite;
}

@keyframes sweep{
  0%{left:-70%;}
  100%{left:140%;}
}

.btn-busy,
.btn-pause{
  background:linear-gradient(135deg,var(--busy1),var(--busy2));
  animation:busyBreathe 2.1s ease-in-out infinite;
}
@keyframes busyBreathe{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.08); }
}

.btn-standby{
  background:linear-gradient(135deg,var(--stand1),var(--stand2));
  background-size:200% 200%;
  animation:standShimmer 3s ease-in-out infinite;
}
@keyframes standShimmer{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

.btn-offline{
  background:linear-gradient(135deg,var(--off1),var(--off2));
  opacity:.9;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:900px){
  div.cartomante{
    width:calc(50% - 16px);
    height:170px;
  }
}

@media (max-width:600px){
  div.cartomante{
    width:calc(100% - 16px);
    height:165px;
    padding:12px;
  }

  .labelnome{font-size:18px;}

  .cartcodice{margin-bottom:54px;}
  .cartcod{font-size:13px;}

  div.cartomante a.pluslink > div.btncart{
    height:40px;
    font-size:11px;
  }

  /* stelline un filo più compatte su mobile */
  div.cartomante::after{
    width:118px;
    height:22px;
    background-size:104px 20px;
    top:9px;
    left:9px;
  }
}

@media (max-width:360px){
  div.cartomante{ height:172px; }
  .cartcodice{ margin-bottom:56px; }
}