/* ═══════════════════════════════════════════════════════════════
   Benevibe Enrollment Sidebar — sidebar.css
   Incluye: sidebar cards + sticky fix + navegación lateral de steps
   Requiere: bnv-tokens.css cargado antes
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   STICKY FIX PARA ELEMENTOR
   El problema: Elementor envuelve el shortcode en
   .elementor-widget-container cuyo padre .elementor-column
   suele tener overflow:hidden o height fija, lo que rompe sticky.
   Solución: aplicar sticky al widget-container mismo en lugar
   de al .bnv-sidebar-wrap interior.
   ───────────────────────────────────────────────────────────── */

/* La columna de Elementor que contiene el sidebar debe tener
   height auto para que sticky funcione */
body.page-enrollment-helper .elementor-column:has(.bnv-sidebar-wrap) {
  height: auto !important;
  align-self: flex-start !important;
}

/* El widget container directamente sticky */
body.page-enrollment-helper .elementor-widget-container:has(.bnv-sidebar-wrap) {
  position:   sticky;
  top:        2rem;
  /* Asegurar que no haya overflow que corte el sticky */
  overflow:   visible !important;
}

/* El wrap en sí ya NO es sticky — el padre lo maneja */
.bnv-sidebar-wrap {
  position:       static;          /* sticky ahora lo hace el padre */
  width:          100%;
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

/* Fallback: si :has() no está disponible (Firefox antiguo), 
   mantener sticky en el wrap con overflow visible forzado */
@supports not (selector(:has(a))) {
  .bnv-sidebar-wrap {
    position: sticky;
    top:      2rem;
  }
  body.page-enrollment-helper .elementor-widget-container {
    overflow: visible !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   SHARED CARD SHELL
   ───────────────────────────────────────────── */
.bnv-sidebar {
  background:    var(--bnv-white);
  border:        1px solid var(--bnv-border);
  border-radius: var(--bnv-radius-xl);
  box-shadow:    var(--bnv-shadow-card);
  overflow:      hidden;
  font-family:   var(--bnv-font-body);
  isolation:     isolate;
  display:       block;
  width:         100%;
}

/* Reset de herencias de Elementor */
.elementor-widget-container .bnv-sidebar-wrap,
.elementor-widget-container .bnv-sidebar-wrap * {
  box-sizing: border-box;
}

.elementor-widget-container .bnv-sidebar-wrap h3 {
  margin:      0 0 2px;
  padding:     0;
  line-height: 1.3;
}


/* ─────────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────── */
.bnv-sidebar__header {
  padding:       1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--bnv-slate-100);
  background:    var(--bnv-slate-50);
}

.bnv-sidebar--profile .bnv-sidebar__header {
  padding-bottom: 1.25rem;
}

.bnv-sidebar__header h3 {
  margin:      0 0 2px;
  font-family: var(--bnv-font-heading);
  font-size:   1rem;
  font-weight: 700;
  color:       var(--bnv-slate-900);
}

.bnv-sidebar__subtitle {
  margin:    0;
  font-size: 0.75rem;
  color:     var(--bnv-muted-fg);
}


/* ─────────────────────────────────────────────────────────────
   USER PROFILE SNAPSHOT
   ───────────────────────────────────────────── */
.bnv-sidebar__profile {
  display:        flex;
  flex-direction: column;
  gap:            0;
  margin:         0;
  padding:        0;
  overflow:       hidden;
}

.bnv-profile__item {
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
  padding:       0.65rem 1.5rem;
  border-bottom: 1px solid var(--bnv-slate-100);
  transition:    background 0.2s ease;
}

.bnv-profile__item:last-child {
  border-bottom: none;
}

.bnv-profile__item.is-set {
  background: var(--bnv-primary-05);
}

.bnv-profile__icon {
  display:     flex;
  align-items: center;
  color:       var(--bnv-slate-400);
  flex-shrink: 0;
  transition:  color 0.2s ease;
}

.bnv-profile__item.is-set .bnv-profile__icon {
  color: var(--bnv-primary);
}

.bnv-profile__label {
  font-size:      0.6875rem;
  font-weight:    600;
  color:          var(--bnv-slate-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex:           1;
}

.bnv-profile__value {
  font-size:   0.75rem;
  font-weight: 600;
  color:        var(--bnv-slate-400);
  text-align:   right;
  transition:   color 0.2s ease, transform 0.15s ease;
}

/* Pill badge cuando el valor está definido */
.bnv-profile__item.is-set .bnv-profile__value {
  background:    var(--bnv-primary-10);
  color:         var(--bnv-primary);
  border-radius: 999px;
  padding:       0.15rem 0.5rem;
  font-size:     0.6875rem;
}


/* ─────────────────────────────────────────────────────────────
   EMPTY STATE
   ───────────────────────────────────────────── */
.bnv-sidebar__empty {
  padding:    2.5rem 1.5rem;
  text-align: center;
  color:      var(--bnv-slate-400);
  font-size:  0.8125rem;
}


/* ─────────────────────────────────────────────────────────────
   BENEFITS LIST
   ───────────────────────────────────────────── */
.bnv-sidebar__list {
  list-style: none;
  margin:     0;
  padding:    0.5rem 0;
}

.bnv-sidebar__item {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0.75rem 1.5rem;
  border-bottom:   1px solid var(--bnv-slate-100);
  animation:       bnv-fadein 0.2s ease;
}

.bnv-sidebar__item:last-child {
  border-bottom: none;
}

@keyframes bnv-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bnv-sidebar__item-info {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.bnv-sidebar__item-name {
  font-size:   0.8125rem;
  font-weight: 600;
  color:       var(--bnv-slate-900);
}

.bnv-sidebar__item-meta {
  font-size: 0.6875rem;
  color:     var(--bnv-muted-fg);
}

.bnv-sidebar__item-price {
  font-size:   0.875rem;
  font-weight: 700;
  color:       var(--bnv-slate-900);
  white-space: nowrap;
}

.bnv-sidebar__item-price small {
  font-size:   0.625rem;
  font-weight: 400;
  color:       var(--bnv-slate-400);
  margin-left: 1px;
}


/* ─────────────────────────────────────────────────────────────
   FOOTER / TOTAL
   ───────────────────────────────────────────── */
.bnv-sidebar__footer {
  padding:         1rem 1.5rem 1.25rem;
  border-top:      2px solid var(--bnv-slate-100);
  background:      var(--bnv-slate-50);
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}

.bnv-sidebar__total-label {
  font-size:      0.75rem;
  font-weight:    600;
  color:          var(--bnv-muted-fg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bnv-sidebar__total-amount {
  font-family: var(--bnv-font-heading);
  font-size:   1.375rem;
  font-weight: 800;
  color:       var(--bnv-slate-900);
}

/* ─────────────────────────────────────────────────────────────
   FOOTER — SALARY-BASED NOTE
   ───────────────────────────────────────────── */
.bnv-sidebar__footer--has-note {
  flex-direction: column;
  align-items:    flex-start;
  gap:            0.5rem;
}

.bnv-sidebar__salary-note {
  font-size:   0.6875rem;
  color:       var(--bnv-muted-fg);
  line-height: 1.4;
  margin:      0;
  padding-top: 0.25rem;
  border-top:  1px solid var(--bnv-slate-200);
  width:       100%;
}

.bnv-sidebar__item-price--salary-based {
  font-size:   0.75rem;
  font-weight: 500;
  color:       var(--bnv-muted-fg);
  font-style:  italic;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Sticky: volver a static en mobile */
  body.page-enrollment-helper .elementor-widget-container:has(.bnv-sidebar-wrap) {
    position: static;
  }

  .bnv-sidebar-wrap {
    position: static;
    width:    100%;
  }
}