/* ==========================================================
   AB1 Simple Configurator – Style (AB1 clean)
========================================================== */

.ab1c{
  background: linear-gradient(180deg, #0b0b12, #111124);
  border-radius: 16px;
  padding: 22px;
  color: #f1f1f6;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  max-width: 960px;
  margin: auto;
}

/* Force titres en blanc même si thème impose du gris */
.ab1c-title{
  font-size: 28px;
  font-weight: 900;
  margin: 0 0 16px;
  color:#fff !important;
}
.ab1c h1,.ab1c h2,.ab1c h3,.ab1c h4,.ab1c h5,.ab1c h6{
  color:#fff !important;
}

/* Image */
.ab1c-img{
  width: 100%;
  height: auto;
  border-radius: 14px;
  margin-bottom: 16px;
}

/* Description */
.ab1c-desc{
  font-size: 14px;
  line-height: 1.6;
  color: #d7d7e5;
  margin-bottom: 22px;
}

/* Groupes */
.ab1c-group{
  margin: 26px 0 10px;
  font-size: 18px;
  font-weight: 900;
  color: #b59cff; /* violet */
}

/* Option rows */
.ab1c-option{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all .2s ease;
}

.ab1c-option:hover{
  background: rgba(124,58,237,0.15);
  border-color: rgba(124,58,237,0.45);
}

.ab1c-left{
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex: 1 1 auto;
  min-width:0;
}

.ab1c-option input{
  margin-top: 2px;
  accent-color: #7c3aed;
}

/* Texte option */
.ab1c-label{
  color:#f1f1f6;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap:anywhere;
  word-break: break-word;
}

/* Prix option */
.ab1c-price{
  color:#c7b7ff;
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
}

/* ✅ Sélection (ligne violette) */
.ab1c-option.is-selected{
  background: rgba(124,58,237,0.28) !important;
  border-color: rgba(124,58,237,0.85) !important;
  box-shadow: 0 0 0 1px rgba(124,58,237,0.35) inset;
}

.ab1c-option.is-selected,
.ab1c-option.is-selected *{
  color:#fff !important;
}

/* Total */
.ab1c-total{
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 24px;
  font-weight: 900;
  text-align: right;
  color:#fff;
}

.ab1c-total strong span{
  color:#fff !important;
}

/* Responsive */
@media (max-width: 768px){
  .ab1c{ padding: 16px; }
  .ab1c-title{ font-size: 22px; }
  .ab1c-total{ font-size: 20px; }
}

/* Mobile : prix passe en dessous */
@media (max-width: 600px){
  .ab1c-option{ flex-wrap: wrap; }
  .ab1c-price{
    width: 100%;
    text-align: right;
    margin-top: 6px;
    opacity: .92;
  }
}

/* Barre total sticky (dans le viewport) */
.ab1c-total{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--ab1c-bottom, 14px);
  width: min(960px, calc(100% - 28px));
  z-index: 999999; /* assez haut, mais pas délirant */
  background: rgba(10,10,18,0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 18px 55px rgba(0,0,0,0.55);
}

/* Pour éviter que la barre cache le bas du contenu */
.ab1c{ padding-bottom: 110px; }