/* CVIP – FBB Settings Helper — v1.0.2 (UI snella, popup stile Race Engineer Advisor) */

/* ---- Card base ---- */
.cvip-fbbh__card{
  max-width:920px;
  width:min(920px, calc(100% - 48px));
  margin:48px auto 180px;
  padding:28px 26px;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,0.04);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

.cvip-fbbh__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.cvip-fbbh__title{font-size:20px;font-weight:800;color:#111827;line-height:1.1}
.cvip-fbbh__subtitle{margin-top:6px;color:#6b7280;font-size:13px;line-height:1.35}

.cvip-fbbh__center{text-align:center;margin-top:18px}
.cvip-fbbh__sectionTitle{font-weight:400;color:#111827;margin:0 0 10px 0}
.cvip-fbbh__sectionTitle--center{font-size:14px}
.cvip-fbbh__hint{color:#6b7280;font-size:12px;margin-top:14px}

/* ---- Griglia sintomi ---- */
.cvip-fbbh__symptoms{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  max-width:860px;
  margin:0 auto
}
@media (max-width: 900px){.cvip-fbbh__symptoms{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 540px){.cvip-fbbh__symptoms{grid-template-columns:1fr;}}

.cvip-fbbh-sym{
  cursor:pointer;
  user-select:none;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:14px;
  padding:14px 14px;
  text-align:left;
  display:flex;
  gap:10px;
  align-items:flex-start;
  transition:all .15s ease;
}
.cvip-fbbh-sym:hover{background:#f9fafb;transform:translateY(-1px)}
.cvip-fbbh-sym:focus{outline:3px solid rgba(22,163,74,0.25);outline-offset:2px}
.cvip-fbbh-sym__ic{font-size:18px;line-height:1;margin-top:1px}
.cvip-fbbh-sym__t{font-weight:800;color:#111827;font-size:14px;line-height:1.15}
.cvip-fbbh-sym__s{margin-top:4px;color:#6b7280;font-size:12px;line-height:1.25}

/* ---- Popup stile REA (copiato/adattato) ---- */
.rea-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:99999
}
.rea-modal-overlay.is-open{display:flex}

.rea-modal{
  width:min(920px,100%);
  max-height:calc(100vh - 32px);
  background:#fff;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,0.25);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative
}

.rea-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid #e5e7eb;
  position:relative; /* serve al watermark */
}

.rea-modal-title{margin:0;font-size:16px;font-weight:800;color:#111827}
.rea-modal-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* IMPORTANTE: il watermark deve ancorarsi all'header, non al body */
.rea-modal-body{
  padding:16px;
  overflow:auto;
  position:static !important;
}

.rea-modal-close{
  cursor:pointer;
  border:0;
  width:40px !important;
  height:40px !important;
  padding:0 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  border-radius:10px !important;
  background:#374151 !important;
  color:#ffffff !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.22) !important;
}
.rea-modal-close:hover{background:#1f2937 !important}
body.rea-modal-lock{overflow:hidden}

/* Bottoni */
.rea-btn{
  cursor:pointer;
  border:0;
  border-radius:999px;
  padding:12px 20px;
  background:#16a34a;
  color:#fff;
  font-weight:800;
  box-shadow:0 6px 18px rgba(22,163,74,0.25)
}
.rea-btn:hover{filter:brightness(0.96)}
.rea-btn:focus{outline:3px solid rgba(22,163,74,0.25);outline-offset:2px}

/* Condividi (icona) — allineato al close */
.rea-btn--share{
  background:#374151 !important;
  color:#ffffff !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.22) !important;
  border-radius:10px !important;
}
.rea-btn--share:hover{background:#1f2937 !important}

/* Pulsante share solo icona */
.rea-btn--icon{
  width:40px;
  height:40px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.rea-btn--icon svg{width:18px;height:18px;display:block}

/* Feedback copia link (fallback) */
.rea-btn.is-copied{filter:brightness(0.92)}

.rea-result{padding:14px;border:1px dashed #d1d5db;border-radius:10px;background:#f9fafb}
.rea-tip{margin:6px 0 0 0;color:#6b7280;font-size:12px}
.rea-badge{display:inline-block;font-size:12px;border-radius:999px;padding:2px 8px;background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe}
.rea-pill{display:inline-block;font-size:12px;border-radius:999px;padding:2px 8px;border:1px solid #e5e7eb;background:#fff}

/* cards prove */
.cvip-fbbh-sugg{padding:10px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;margin-top:10px}
.cvip-fbbh-sugg__title{font-weight:800;color:#111827}
.cvip-fbbh-sugg__prio{font-size:11px;font-weight:900;border-radius:999px;padding:2px 8px;border:1px solid #e5e7eb;background:#fff}
.cvip-fbbh-sugg__prio.high{border-color:#fecaca;background:#fef2f2;color:#7f1d1d}
.cvip-fbbh-sugg__prio.medium{border-color:#fed7aa;background:#fff7ed;color:#7c2d12}
.cvip-fbbh-sugg__prio.low{border-color:#e5e7eb;background:#f9fafb;color:#374151}
.cvip-fbbh-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
@media (max-width:720px){.cvip-fbbh-grid2{grid-template-columns:1fr}}

/* Watermark nel popup (header) */
.cvip-fbbh-watermark{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  font-size:11px;
  color:rgba(17,24,39,0.35);
  font-weight:900;
  letter-spacing:0.04em;
  user-select:none;
  pointer-events:none;
  white-space:nowrap;
  z-index:5;
}

/* ---- Mobile: popup più compatto (come REA) ---- */
@media (max-width:720px){
  .cvip-fbbh__card{width:calc(100% - 24px);margin:24px auto 120px;padding:18px 16px}
}

@media (max-width:640px){
  .rea-modal-overlay{
    padding:80px 14px !important;
    align-items:flex-start !important;
    justify-content:center !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    box-sizing:border-box
  }
  .rea-modal{width:100% !important;max-height:70vh !important;border-radius:16px !important}
  .rea-modal-header{padding:10px 12px !important;gap:8px !important}
  .rea-modal-title{font-size:14px !important}
  .rea-tip{font-size:11px !important;line-height:1.25 !important}
  .rea-modal-controls{gap:8px !important}
  .rea-modal-body{padding:12px !important}
  .rea-result{padding:10px !important}

  .cvip-fbbh-watermark{
    top:14px;
    font-size:10px;
  }

  .rea-modal-close{
    width:40px !important;
    height:40px !important;
  }
}