/* Referral panel — glass navbar + alone AI Mode in corsa sul BOX */

.referral-panel {
  --rp-blue: #60a5fa;
  --rp-violet: #a78bfa;
  --rp-cyan: #22d3ee;
  --rp-mint: #34d399;
  --rp-pink: #f472b6;
  position: relative;
  /* niente isolation/radius sul root: in WebKit clippa filter:blur dei figli (alone a taglio netto) */
  isolation: auto;
  overflow: visible;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0 0 15px;
}

/* Alone soft dietro/intorno: discreto, poco sforo */
.referral-panel__glow {
  position: absolute;
  inset: -10px;
  z-index: 0;
  border-radius: 28px;
  pointer-events: none;
  background: conic-gradient(
    from var(--rp-spin, 0deg),
    transparent 0deg,
    transparent 210deg,
    rgba(96, 165, 250, 0.12) 240deg,
    rgba(96, 165, 250, 0.8) 270deg,
    rgba(167, 139, 250, 0.88) 295deg,
    rgba(34, 211, 238, 0.82) 320deg,
    rgba(52, 211, 153, 0.48) 340deg,
    transparent 360deg
  );
  filter: blur(14px);
  opacity: 0;
  -webkit-mask: none;
  mask: none;
  animation:
    referralSpin 3.2s linear infinite,
    referralAuraDuty 14s ease-in-out infinite;
  animation-play-state: paused;
}

.referral-panel.is-in-view .referral-panel__glow {
  animation-play-state: running;
}

.referral-panel.is-unlocked .referral-panel__glow {
  background: conic-gradient(
    from var(--rp-spin, 0deg),
    transparent 0deg,
    transparent 220deg,
    rgba(74, 222, 128, 0.16) 250deg,
    rgba(52, 211, 153, 0.85) 285deg,
    rgba(96, 165, 250, 0.7) 320deg,
    transparent 360deg
  );
}

/* Il pannello non deve mai clippare l’alone esterno */
.referral-panel.job-card,
.job-card.referral-panel,
.referral-offer-card.referral-panel {
  overflow: visible !important;
}

/* Superficie interna: clip glass + satin (radius solo qui, non sul root) */
.referral-panel__surface {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: 16px;
  pointer-events: none;
  background: color-mix(in srgb, #fff 55%, transparent);
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.referral-panel__glass {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 16px;
}

.referral-panel__glass-pan {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 50% 50%;
  opacity: 0;
  will-change: background-position, background-size, transform, opacity;
  animation: referralGlassPan 26s linear 0.6s infinite;
}

.referral-panel__satin {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: color-mix(in srgb, #eef1f8 40%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Bordo nitido iridescente sul perimetro del box */
.referral-panel__ring {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 16px;
  padding: 1.5px;
  pointer-events: none;
  background: conic-gradient(
    from var(--rp-spin, 0deg),
    transparent 0deg,
    transparent 200deg,
    var(--rp-blue) 245deg,
    var(--rp-violet) 285deg,
    var(--rp-cyan) 320deg,
    var(--rp-mint) 345deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  animation:
    referralSpin 3.2s linear infinite,
    referralAuraDuty 14s ease-in-out infinite;
  animation-play-state: paused;
}

.referral-panel.is-in-view .referral-panel__ring {
  animation-play-state: running;
}

.referral-panel.is-unlocked .referral-panel__ring {
  background: conic-gradient(
    from var(--rp-spin, 0deg),
    transparent 0deg,
    transparent 210deg,
    #4ade80 250deg,
    #34d399 295deg,
    #60a5fa 335deg,
    transparent 360deg
  );
}

.referral-panel__kind.hf-kind,
.referral-panel__kind {
  position: relative;
  z-index: 4;
  display: inline-flex;
  margin: 12px 16px 0;
}

.referral-panel__inner {
  position: relative;
  z-index: 4;
  padding: 16px 18px 16px;
}

.referral-panel__kicker {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #15803d;
}

.referral-panel__title {
  margin: 0 0 8px;
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.25;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.referral-panel__body {
  margin: 0 0 14px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #334155;
}

.referral-panel__body strong {
  color: #0f172a;
  font-weight: 700;
}

.referral-panel__caption {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #334155;
}

.referral-offer-card.referral-panel {
  /* non eredita padding/ombra delle job-card */
  padding: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

.referral-share-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0 0 12px;
}

.referral-share-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.referral-share-chip {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 1px 2px rgba(15, 23, 42, 0.04);
  color: #0f172a !important;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  cursor: pointer;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.15s ease;
}

.referral-share-chip:hover {
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(255, 255, 255, 0.7);
  color: #0f172a !important;
}

.referral-share-chip:active {
  transform: scale(0.985);
}

.referral-share-chip.is-open {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(148, 163, 184, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 1px rgba(59, 130, 246, 0.12);
}

/* Chip = copia: non ereditare stile bottone blu .referral-copy-btn */
.referral-share-chip.referral-copy-btn {
  flex: 1 1 0;
  width: auto;
  background: rgba(255, 255, 255, 0.28);
  color: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 1px 2px rgba(15, 23, 42, 0.04);
  font-weight: 600;
}

.referral-share-chip.referral-copy-btn:hover {
  background: rgba(255, 255, 255, 0.42);
  color: #0f172a;
}

.referral-share-chip.referral-copy-btn.is-copied {
  background: #15803d !important;
  color: #fff !important;
  border-color: #166534 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 16px rgba(22, 163, 74, 0.45);
  animation: referralShareChipCopied 0.7s ease-out both;
}

@keyframes referralShareChipCopied {
  0% {
    filter: brightness(1.08);
    transform: scale(1.02);
  }
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
}

.referral-share-chip__ico {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: block;
  opacity: 0.88;
}

.referral-share-chip--wa .referral-share-chip__ico {
  color: #128c7e;
}

.referral-link-reveal {
  margin-top: 8px;
  overflow: hidden;
}

.referral-link-reveal[hidden] {
  display: none !important;
}

.referral-link-reveal .referral-link-box {
  margin: 0;
}

.referral-link-reveal .referral-link-field input {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.referral-link-reveal .referral-copy-btn {
  background: rgba(255, 255, 255, 0.32);
  color: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  font-weight: 600;
}

.referral-link-reveal .referral-copy-btn:hover {
  background: rgba(255, 255, 255, 0.48);
}

.referral-link-reveal .referral-copy-btn.is-copied {
  background: rgba(255, 255, 255, 0.55);
  color: #166534;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 0 16px rgba(52, 211, 153, 0.28);
}

/* Legacy link box */
.referral-link-box {
  display: flex;
  gap: 10px;
  margin: 0 0 10px;
  flex-wrap: wrap;
  align-items: stretch;
}

.referral-link-field {
  position: relative;
  flex: 1 1 180px;
  min-width: 0;
  border-radius: 12px;
  padding: 1.5px;
  background: transparent;
  transition: background 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
}

.referral-link-box input[type='text'],
.referral-link-field input[type='text'],
.referral-link-field .exmap-referral-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border-radius: 10.5px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.9rem;
  color: #0f172a;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.35s ease;
}

.referral-link-box input[type='text']:focus,
.referral-link-field input[type='text']:focus,
.referral-link-field .exmap-referral-input:focus {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* Campo: alone soft su copia */
.referral-link-box.is-copied-flash .referral-link-field {
  background: conic-gradient(
    from var(--rp-copy-spin, 0deg),
    transparent 0deg,
    transparent 180deg,
    #60a5fa 230deg,
    #a78bfa 275deg,
    #22d3ee 315deg,
    #34d399 345deg,
    transparent 360deg
  );
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 18px rgba(96, 165, 250, 0.35),
    0 0 28px rgba(52, 211, 153, 0.28);
  animation:
    referralCopyFieldSpin 1.35s linear both,
    referralCopyFieldAura 1.35s ease-in-out both;
}

.referral-link-box.is-copied-flash .referral-link-field input,
.referral-link-box.is-copied-flash .referral-link-field .exmap-referral-input {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

@property --rp-copy-spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes referralCopyFieldSpin {
  to { --rp-copy-spin: 360deg; }
}

@keyframes referralCopyFieldAura {
  0% {
    filter: brightness(1);
    opacity: 0;
  }
  18% {
    filter: brightness(1.06);
    opacity: 1;
  }
  55% {
    filter: brightness(1.04);
    opacity: 1;
  }
  100% {
    filter: brightness(1);
    opacity: 0;
    box-shadow: none;
  }
}

.referral-copy-btn {
  flex: 0 0 auto;
  padding: 11px 16px;
  border-radius: 10px;
  border: none;
  background: #2563eb;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transform-origin: center center;
  transition:
    background 0.28s ease,
    box-shadow 0.35s ease,
    transform 0.2s ease,
    filter 0.28s ease;
}

.referral-copy-btn:hover {
  background: #1d4ed8;
}

.referral-copy-btn:active:not(.is-copied):not(:disabled) {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

.referral-copy-btn.is-copied {
  background: #15803d;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 18px rgba(52, 211, 153, 0.45),
    0 0 28px rgba(96, 165, 250, 0.22);
  animation: referralCopyRefined 0.7s ease-out both;
}

@keyframes referralCopyRefined {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(52, 211, 153, 0),
      0 0 0 rgba(96, 165, 250, 0);
    filter: brightness(1.05);
  }
  35% {
    transform: scale(1.03);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.4),
      0 0 22px rgba(52, 211, 153, 0.55),
      0 0 36px rgba(96, 165, 250, 0.28);
    filter: brightness(1.08);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.28),
      0 0 14px rgba(52, 211, 153, 0.35),
      0 0 22px rgba(96, 165, 250, 0.16);
    filter: brightness(1);
  }
}

.referral-progress {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: #475569;
}

.referral-progress__num {
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

@property --rp-spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes referralSpin {
  to { --rp-spin: 360deg; }
}

/* Acceso ~4.5s, spento ~9.5s — attira senza restare fisso */
@keyframes referralAuraDuty {
  0%, 4% { opacity: 0; }
  10%, 32% { opacity: 0.95; }
  38%, 100% { opacity: 0; }
}

@keyframes referralGlassPan {
  0% {
    background-position: 50% 50%;
    background-size: 100% 100%;
    transform: scale(1);
    opacity: 0;
  }
  5% {
    background-position: 46% 48%;
    background-size: 150% 150%;
    transform: scale(1.1);
    opacity: 0.2;
  }
  10% {
    background-position: 54% 52%;
    background-size: 170% 170%;
    transform: scale(1.14);
    opacity: 0.28;
  }
  16% {
    background-position: 50% 50%;
    background-size: 100% 100%;
    transform: scale(1);
    opacity: 0;
  }
  40% { opacity: 0; }
  45% {
    background-position: 52% 46%;
    background-size: 145% 145%;
    transform: scale(1.08);
    opacity: 0.18;
  }
  52% {
    background-position: 48% 54%;
    background-size: 165% 165%;
    transform: scale(1.12);
    opacity: 0.26;
  }
  58% {
    background-position: 50% 50%;
    background-size: 100% 100%;
    transform: scale(1);
    opacity: 0;
  }
  100% { opacity: 0; }
}

@supports not (background: conic-gradient(from var(--rp-spin), red, blue)) {
  .referral-panel__glow {
    animation: none;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.55), rgba(167, 139, 250, 0.45), rgba(52, 211, 153, 0.4));
    filter: blur(18px);
  }
  .referral-panel__ring {
    animation: none;
    background: linear-gradient(135deg, #60a5fa, #a78bfa, #34d399);
  }
}

@media (prefers-reduced-motion: reduce) {
  .referral-panel__ring,
  .referral-panel__glow,
  .referral-panel__glass-pan {
    animation: none !important;
  }
  .referral-panel__glass-pan {
    opacity: 0.16;
    background-size: 120% 120%;
  }
  .referral-panel__glow,
  .referral-panel__ring {
    opacity: 0.25;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.4), rgba(167, 139, 250, 0.35));
  }
  .referral-copy-btn.is-copied {
    animation: none;
  }
  .referral-copy-btn:active:not(.is-copied):not(:disabled) {
    transform: none;
  }
  .referral-link-box.is-copied-flash .referral-link-field {
    animation: none;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.55), rgba(52, 211, 153, 0.45));
    box-shadow: 0 0 14px rgba(96, 165, 250, 0.28);
  }
}