/* ════════════════════════════════════════════════════════════════════════
   LIVEIN MODULES CSS · Quiz · Calculator · WebChat · Wishlist · Compare
   Richiede livein-tokens.css.
   ════════════════════════════════════════════════════════════════════════ */

/* ── QUIZ ── */
.li-quiz{ max-width:680px; margin:0 auto; padding:48px 24px; background:var(--li-surface); border-radius:var(--li-r-xl); box-shadow:var(--li-shadow-lg); }
.li-quiz__progress{ position:relative; height:6px; background:var(--li-sand-100); border-radius:var(--li-r-pill); overflow:hidden; margin-bottom:24px }
.li-quiz__progress span{ display:block; text-align:center; font:var(--li-w-semi) var(--li-text-xs)/1 var(--li-font-body); color:var(--li-text-mute); margin-top:14px; text-transform:uppercase; letter-spacing:var(--li-tr-wider) }
.li-quiz__bar{ position:absolute; left:0; top:0; bottom:0; background:var(--li-primary); transition:width 480ms var(--li-ease-out) }
.li-quiz__q{ font:var(--li-w-bold) var(--li-text-3xl)/1.2 var(--li-font-display); color:var(--li-text); margin:8px 0 32px; text-wrap:balance }
.li-quiz__opts{ display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:24px }
@media(min-width:600px){ .li-quiz__opts{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) } }
.li-quiz__opt{
  display:flex; flex-direction:column; gap:6px;
  padding:18px 22px;
  background:var(--li-surface);
  border:1.5px solid var(--li-border);
  border-radius:var(--li-r-lg);
  font:var(--li-w-semi) var(--li-text-base)/1.3 var(--li-font-body);
  color:var(--li-text);
  text-align:left;
  cursor:pointer;
  transition:all var(--li-dur) var(--li-ease-out);
}
.li-quiz__opt small{ font-weight:var(--li-w-regular); font-size:var(--li-text-xs); color:var(--li-text-mute) }
.li-quiz__opt:hover{ border-color:var(--li-primary); transform:translateY(-2px) }
.li-quiz__opt.is-on{ background:rgba(255,107,53,.07); border-color:var(--li-primary); color:var(--li-text) }
.li-quiz__nav{ display:flex; justify-content:space-between; gap:12px; margin-top:24px }
.li-quiz__form{ display:flex; flex-direction:column; gap:16px }
.li-quiz__results{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin:24px 0 32px }
.li-quiz__r{ padding:20px; background:var(--li-sand-50); border-radius:var(--li-r-lg); border:1px solid var(--li-border) }
.li-quiz__r h3{ font:var(--li-w-bold) var(--li-text-lg)/1.2 var(--li-font-display); margin:0 0 4px; color:var(--li-text) }
.li-quiz__r p{ font:var(--li-w-medium) var(--li-text-xs)/1 var(--li-font-body); text-transform:uppercase; letter-spacing:var(--li-tr-wider); color:var(--li-text-mute); margin:0 0 12px }
.li-quiz__r strong{ font:var(--li-w-bold) var(--li-text-xl)/1 var(--li-font-display); color:var(--li-primary) }


/* ── CALCULATOR ── */
.li-calc{ max-width:780px; margin:0 auto; padding:48px 24px; background:var(--li-surface); border-radius:var(--li-r-xl); box-shadow:var(--li-shadow-lg); }
.li-calc__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin:24px 0 32px }
.li-calc__grid label{ display:block; font:var(--li-w-medium) var(--li-text-sm)/1.4 var(--li-font-body); color:var(--li-text-mute); margin-bottom:8px }
.li-calc__grid label strong{ color:var(--li-primary); font-weight:var(--li-w-bold); font-size:var(--li-text-base) }
.li-calc__grid input[type="range"]{ width:100%; accent-color:var(--li-primary) }
.li-calc h3{ font:var(--li-w-bold) var(--li-text-xl)/1.2 var(--li-font-display); margin:24px 0 12px; color:var(--li-text) }
.li-calc__opts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px }
.li-calc__opt{ display:flex; flex-direction:column; padding:12px 14px; background:var(--li-surface); border:1.5px solid var(--li-border); border-radius:var(--li-r); font:var(--li-w-semi) var(--li-text-sm)/1.3 var(--li-font-body); color:var(--li-text); cursor:pointer; text-align:left; transition:all var(--li-dur) var(--li-ease-out) }
.li-calc__opt small{ font-weight:var(--li-w-regular); font-size:var(--li-text-xs); color:var(--li-text-mute); margin-top:2px }
.li-calc__opt:hover{ border-color:var(--li-primary) }
.li-calc__opt.is-on{ border-color:var(--li-primary); background:rgba(255,107,53,.06) }
.li-calc__cta{ text-align:center; margin:32px 0 20px }
.li-calc__out:empty{ display:none }
.li-calc__out{ background:var(--li-sand-50); padding:24px; border-radius:var(--li-r-lg); text-align:center; border:1px solid var(--li-border) }
.li-calc__price{ font:var(--li-w-bold) var(--li-text-4xl)/1 var(--li-font-display); color:var(--li-primary); margin:8px 0 }


/* ── WEB CHAT BUBBLE ── */
.li-wc{ position:fixed; bottom:24px; right:100px; z-index:1090; font-family:var(--li-font-body) }
@media(max-width:640px){ .li-wc{ bottom:160px; right:16px } }
.li-wc__bubble{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:58px; height:58px;
  background:var(--li-navy-800); color:#fff;
  border:0; border-radius:50%;
  box-shadow:0 8px 24px rgba(10,20,32,.35);
  cursor:pointer;
  transition:transform var(--li-dur) var(--li-ease-out);
}
.li-wc__bubble:hover{ transform:scale(1.08) }
.li-wc__dot{ position:absolute; top:6px; right:6px; width:12px; height:12px; border-radius:50%; background:var(--li-sunset-500); border:2px solid var(--li-navy-800); animation:li-wc-blink 2s infinite }
@keyframes li-wc-blink{ 0%,100%{opacity:1} 50%{opacity:.4} }
.li-wc__panel{ position:absolute; bottom:74px; right:0; width:340px; max-width:calc(100vw - 40px); background:var(--li-surface); border-radius:var(--li-r-lg); box-shadow:var(--li-shadow-xl); overflow:hidden; display:flex; flex-direction:column; max-height:540px; animation:li-wc-pop 320ms var(--li-ease-out) }
@keyframes li-wc-pop{ from{transform:translateY(20px) scale(.96);opacity:0} to{transform:translateY(0) scale(1);opacity:1} }
.li-wc__panel header{ background:var(--li-navy-800); color:#fff; padding:18px 20px; display:flex; align-items:center; gap:8px }
.li-wc__panel header strong{ font:var(--li-w-bold) var(--li-text-base)/1 var(--li-font-display); flex:1 }
.li-wc__panel header small{ display:block; font:var(--li-w-regular) var(--li-text-xs)/1 var(--li-font-body); color:rgba(255,255,255,.7) }
.li-wc__panel header button{ background:transparent; border:0; color:#fff; font-size:24px; cursor:pointer; padding:0; margin-left:auto }
.li-wc__msgs{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px; max-height:340px }
.li-wc__m{ padding:10px 14px; border-radius:var(--li-r-lg); font:var(--li-w-regular) var(--li-text-sm)/1.5 var(--li-font-body); max-width:80%; word-wrap:break-word }
.li-wc__m--ai{ background:var(--li-sand-100); color:var(--li-text); align-self:flex-start; border-bottom-left-radius:4px }
.li-wc__m--user{ background:var(--li-primary); color:#fff; align-self:flex-end; border-bottom-right-radius:4px }
.li-wc__typing{ font-size:24px; line-height:.5; padding:14px 18px }
.li-wc__form{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--li-border); background:var(--li-sand-50) }
.li-wc__form input{ flex:1; padding:10px 14px; border:1px solid var(--li-border); border-radius:var(--li-r-pill); background:#fff; font:var(--li-w-medium) var(--li-text-sm)/1.4 var(--li-font-body); color:var(--li-text); outline:none }
.li-wc__form input:focus{ border-color:var(--li-primary); box-shadow:var(--li-shadow-ring) }
.li-wc__form button{ width:38px; height:38px; border:0; border-radius:50%; background:var(--li-primary); color:#fff; font-weight:bold; font-size:18px; cursor:pointer; transition:background var(--li-dur) }
.li-wc__form button:hover{ background:var(--li-primary-hover) }


/* ── WISHLIST + COMPARE BUTTONS ── */
.li-wish{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.9); border:0; cursor:pointer; transition:transform var(--li-dur) }
.li-wish svg{ width:18px; height:18px; stroke:var(--li-text); fill:none; stroke-width:2; transition:fill var(--li-dur), stroke var(--li-dur) }
.li-wish:hover{ transform:scale(1.1) }
.li-wish.is-on svg{ fill:var(--li-primary); stroke:var(--li-primary) }

.li-cmp-bar{
  position:fixed; bottom:0; left:0; right:0;
  background:var(--li-navy-800); color:#fff;
  padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  transform:translateY(100%);
  transition:transform var(--li-dur-slow) var(--li-ease-out);
  z-index:1080;
  box-shadow:0 -8px 24px rgba(0,0,0,.2);
}
.li-cmp-bar.is-visible{ transform:translateY(0) }
.li-cmp-bar strong{ font:var(--li-w-bold) var(--li-text-base)/1 var(--li-font-body) }


/* ── TRUST STRIP ── */
.li-trust-strip__item{ font:var(--li-w-medium) var(--li-text-sm)/1.4 var(--li-font-body) }


/* ── SOCIAL PROOF ── */
.li-social-proof{
  background:var(--li-surface);
  border:1px solid var(--li-border);
  border-radius:var(--li-r-lg);
  padding:14px 20px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  font:var(--li-w-medium) var(--li-text-sm)/1.4 var(--li-font-body);
  color:var(--li-text);
  margin:0 auto var(--li-sp-4);
  box-shadow:var(--li-shadow-sm);
}
.li-social-proof__avatars{ display:flex }
.li-social-proof__avatars span{ width:28px; height:28px; border-radius:50%; background:var(--li-sand-200); border:2px solid #fff; margin-left:-8px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--li-text-mute) }
.li-social-proof__avatars span:first-child{ margin-left:0 }
.li-social-proof strong{ color:var(--li-primary); font-weight:var(--li-w-bold) }


/* ── HERO IMAGE FALLBACK · CSS-only se file mancante ── */
.li-hero__media:has(img:not([src])),
.li-hero__media:has(img[src=""]){
  background:linear-gradient(135deg, var(--li-navy-900), var(--li-navy-700) 60%, var(--li-sunset-800));
}
img.li-fallback{ background:linear-gradient(135deg, var(--li-sand-100), var(--li-sand-200)) }


/* ── CUSTOM CURSOR (mouse-only) ── */
@media (pointer:fine){
  .li-cursor{
    position:fixed; top:0; left:0;
    width:20px; height:20px;
    border:2px solid var(--li-primary);
    border-radius:50%;
    pointer-events:none;
    z-index:9999;
    transform:translate(-50%, -50%);
    transition:width var(--li-dur), height var(--li-dur), background var(--li-dur), opacity var(--li-dur);
    mix-blend-mode:difference;
    opacity:0;
  }
  .li-cursor.is-active{ opacity:1 }
  .li-cursor.is-hover{ width:48px; height:48px; background:var(--li-primary); border-color:var(--li-primary) }
}
@media (prefers-reduced-motion:reduce){ .li-cursor{ display:none !important } }