/*
 * etoro.css — blocco conversione eToro (inline / aside / compact).
 * Editoriale e premium, autosufficiente (NON dipende da components.css/.to-btn):
 * il bottone ha stile completo qui. Disclosure pubblicitaria + rischio in piccolo.
 */

:root { --etoro: #13c636; --etoro-ink: #0b8f28; --etoro-deep: #0a7a23; }

.to-etoro {
  position: relative; isolation: isolate;
  margin: var(--sp-6) 0; padding: var(--sp-5);
  border-radius: var(--radius-card);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--etoro) 12%, transparent), transparent 52%),
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--etoro) 4%, #fff));
  border: 1px solid color-mix(in srgb, var(--etoro) 26%, var(--brk-line));
  box-shadow: 0 12px 34px -16px rgba(11,143,40,0.30);
  overflow: hidden;
}
.to-etoro::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg, var(--etoro), var(--etoro-ink));
}

/* eyebrow editoriale (sostituisce il vecchio "MESSAGGIO PROMOZIONALE") */
.to-etoro__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.84rem;
  color: var(--etoro-ink); line-height: 1;
}
.to-etoro__eyebrow::before {
  content: "✓"; flex: 0 0 auto;
  display: inline-grid; place-items: center; width: 18px; height: 18px;
  font-size: 0.66rem; color: #fff; background: var(--etoro); border-radius: 50%;
  box-shadow: 0 2px 6px -1px rgba(19,198,54,0.6);
}

.to-etoro__main { display: grid; gap: var(--sp-4); align-items: center; }
@media (min-width: 760px) {
  .to-etoro--inline .to-etoro__main { grid-template-columns: 1.05fr 1fr auto; gap: var(--sp-5); }
}

.to-etoro__logo {
  display: inline-block; font-family: var(--font-heading); font-weight: 900;
  font-size: 1.7rem; letter-spacing: -0.04em; color: var(--etoro-ink); line-height: 1;
}
.to-etoro__brandrow { display: inline-flex; align-items: center; gap: 11px; }
.to-etoro__mark {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 12px;
  object-fit: contain; background: #fff; padding: 3px;
  box-shadow: 0 4px 14px -6px rgba(20,18,28,.28); border: 1px solid rgba(20,18,28,.06);
}
/* logo eToro esteso (wordmark ufficiale) — preferito al mark+testo */
.to-etoro__extlogo { height: 46px; width: auto; flex: 0 0 auto; display: block; }
.to-etoro--aside .to-etoro__extlogo { height: 40px; }
.to-etoro--compact .to-etoro__extlogo { height: 30px; }
.to-etoro__headline { margin: 9px 0 0; font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-lg); color: var(--brk-ink); line-height: 1.18; }
.to-etoro__subhead { margin: 7px 0 0; font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.55; }

.to-etoro__usps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.to-etoro__usps li { position: relative; padding-left: 28px; font-size: var(--fs-sm); font-weight: 600; color: var(--brk-ink); line-height: 1.4; }
.to-etoro__usps li::before {
  content: ""; position: absolute; left: 0; top: 1px;
  width: 19px; height: 19px; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat,
    linear-gradient(180deg, var(--etoro), var(--etoro-ink));
  box-shadow: 0 2px 6px -1px rgba(19,198,54,0.55);
}

.to-etoro__actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; }

/* Bottone autosufficiente (premium, niente dipendenza da .to-btn) */
.to-etoro__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px; border: 0; border-radius: 13px;
  font-family: var(--font-heading); font-weight: 800; font-size: 1.02rem; line-height: 1;
  color: #fff !important; text-decoration: none !important; white-space: nowrap; cursor: pointer;
  background: linear-gradient(180deg, #18d641, var(--etoro-ink));
  box-shadow: 0 12px 26px -10px rgba(11,143,40,0.6), inset 0 1px 0 rgba(255,255,255,0.28);
  transition: transform var(--dur-fast, .2s) var(--ease-out, ease), box-shadow var(--dur-fast, .2s), background var(--dur-fast, .2s);
}
.to-etoro__cta:hover { background: linear-gradient(180deg, var(--etoro), var(--etoro-deep)); transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(11,143,40,0.68), inset 0 1px 0 rgba(255,255,255,0.28); }
.to-etoro__cta:active { transform: translateY(0); }
.to-etoro__cta:focus-visible { outline: 3px solid color-mix(in srgb, var(--etoro) 55%, transparent); outline-offset: 2px; }
.to-etoro__arrow { transition: transform var(--dur-fast, .2s) var(--ease-out, ease); }
.to-etoro__cta:hover .to-etoro__arrow { transform: translateX(4px); }

.to-etoro__review { text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--etoro-ink); text-decoration: none; }
.to-etoro__review:hover { text-decoration: underline; }

/* disclaimer in PICCOLO (rischio + disclosure pubblicitaria) */
.to-etoro .to-etoro__disc {
  margin: var(--sp-4) 0 0; padding-top: var(--sp-3);
  border-top: 1px solid color-mix(in srgb, var(--etoro) 16%, var(--brk-line));
  font-size: 0.62rem !important; line-height: 1.5; color: var(--color-text-faint, #8c95a0);
}
.to-etoro .to-etoro__adv { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: inherit; color: var(--color-text-muted); }

/* --- Aside (sticky sidebar) --- */
.to-etoro--aside { margin: 0; padding: var(--sp-4); }
.to-etoro--aside .to-etoro__main { grid-template-columns: 1fr; gap: var(--sp-3); }
.to-etoro--aside .to-etoro__logo { font-size: 1.35rem; }
.to-etoro--aside .to-etoro__cta { width: 100%; }

/* --- Compact (single strip) --- */
.to-etoro--compact { padding: var(--sp-3) var(--sp-4); }
.to-etoro--compact .to-etoro__main { grid-template-columns: 1fr auto; gap: var(--sp-3); align-items: center; }
.to-etoro--compact .to-etoro__disc { margin-top: var(--sp-2); }

/* --- Mobile (stack pulito, bottone full-width) --- */
@media (max-width: 759px) {
  .to-etoro { padding: var(--sp-4); }
  .to-etoro__main { gap: var(--sp-4); }
  .to-etoro__actions { align-items: stretch; }
  .to-etoro__cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .to-etoro__arrow, .to-etoro__cta { transition: none; }
}

/* === eToro MOBILE: barra sticky in basso (sobria, chiudibile) === */
.to-etoro-stick { display: none; }
@media (max-width: 768px) {
  /* su mobile la promo NON sta nel testo: si usa la barra sticky */
  .to-etoro--inline { display: none !important; }
  .to-etoro-stick:not([hidden]) {
    position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 1200;
    display: flex; align-items: center; gap: 11px;
    background: #fff; border: 1px solid var(--brk-line, #e7e3f0); border-radius: 14px;
    padding: 11px 13px; box-shadow: 0 14px 32px -10px rgba(21, 18, 28, 0.34);
    transform: translateY(150%); opacity: 0; transition: transform 0.22s ease, opacity 0.22s ease;
  }
  .to-etoro-stick.is-in { transform: none; opacity: 1; }
}
.to-etoro-stick__x {
  position: absolute; top: -10px; right: -6px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink, #15121c); color: #fff; border: 2px solid #fff; font-size: 15px; line-height: 1;
  cursor: pointer; box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.4); display: grid; place-items: center; padding: 0;
}
.to-etoro-stick__logo { font-family: var(--disp, Georgia, serif); font-weight: 800; font-size: 1.1rem; color: #04be68; flex: 0 0 auto; }
.to-etoro-stick__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.to-etoro-stick__t { font-weight: 700; font-size: 0.82rem; color: var(--ink, #15121c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.to-etoro-stick__disc { font-size: 0.58rem; color: #8c95a0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.to-etoro-stick__cta { flex: 0 0 auto; background: #04be68; color: #fff; font-weight: 700; font-size: 0.8rem; padding: 9px 14px; border-radius: 9px; text-decoration: none; white-space: nowrap; }