/* =======================================================================
   variant-picker-mrcd-v1.css
   Redesign visual do seletor de variantes nos cards de produto agrupado.
   Cria uma área destacada com borda amarela Multigiro, label "ESCOLHA
   SUA OPÇÃO", contagem de opções e hint de toque.
   Aplica somente a cards com classe .card__variant-picker (gerados pelo
   groupCardHTML quando há >1 variação).
   Dark mode + light mode. Mobile + desktop.
======================================================================= */

/* --- Container principal --- */
.card__variant-picker{
  margin-top: auto;
  border: 2px solid var(--mg-yellow, #ffc20e);
  border-radius: 12px;
  padding: 8px 8px 6px;
  background: rgba(255,194,14,0.05);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

/* Hover/focus: brilho amarelo */
.card__variant-picker:hover,
.card__variant-picker:focus-within{
  border-color: var(--mg-yellow-2, #e6a800);
  box-shadow: 0 0 0 3px rgba(255,194,14,0.18);
  background: rgba(255,194,14,0.09);
}

/* --- Header: label + contagem --- */
.card__variant-picker__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 0 2px;
}

.card__variant-picker__label{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.6px;
  color: var(--mg-yellow-2, #c89200);
  text-transform: uppercase;
  line-height: 1;
}

.card__variant-picker__count{
  font-size: 10px;
  font-weight: 700;
  color: var(--mg-ink-soft, #888);
  background: var(--mg-surface, rgba(255,255,255,0.08));
  border: 1px solid var(--mg-line, rgba(255,255,255,0.1));
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.2;
  white-space: nowrap;
}

/* --- Select override dentro do picker --- */
.card__variant-picker .card__variant{
  margin-top: 0 !important;
  border-color: rgba(255,194,14,0.35) !important;
  /* Setinha amarela custom em vez de cinza */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e6a800' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}
.card__variant-picker .card__variant:focus{
  border-color: var(--mg-yellow, #ffc20e) !important;
  box-shadow: 0 0 0 2px rgba(255,194,14,0.25);
}

/* --- Hint de toque --- */
.card__variant-picker__hint{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--mg-ink-soft, #888);
  margin-top: 5px;
  opacity: 0.65;
  transition: opacity .2s ease;
  pointer-events: none;
  line-height: 1;
}
.card__variant-picker__hint svg{
  flex-shrink: 0;
  opacity: 0.7;
}

.card__variant-picker:hover .card__variant-picker__hint,
.card__variant-picker:focus-within .card__variant-picker__hint{
  opacity: 1;
  color: var(--mg-yellow-2, #c89200);
}

/* ============================
   Light mode
   ============================ */
html[data-theme="light"] .card__variant-picker{
  background: rgba(255,194,14,0.06);
  border-color: #e6a800;
}
html[data-theme="light"] .card__variant-picker:hover,
html[data-theme="light"] .card__variant-picker:focus-within{
  background: rgba(255,194,14,0.11);
  border-color: #cc8c00;
  box-shadow: 0 0 0 3px rgba(255,194,14,0.15);
}
html[data-theme="light"] .card__variant-picker__label{
  color: #996e00;
}
html[data-theme="light"] .card__variant-picker__count{
  background: #f5f0e0;
  border-color: #e0d5b8;
  color: #6b5a2e;
}
html[data-theme="light"] .card__variant-picker .card__variant{
  border-color: #d4b44a !important;
}
html[data-theme="light"] .card__variant-picker:hover .card__variant-picker__hint,
html[data-theme="light"] .card__variant-picker:focus-within .card__variant-picker__hint{
  color: #996e00;
}

/* ============================
   Responsivo mobile (< 600px)
   ============================ */
@media (max-width: 600px){
  .card__variant-picker{
    padding: 6px 6px 4px;
    border-radius: 10px;
  }
  .card__variant-picker__header{
    margin-bottom: 4px;
  }
  .card__variant-picker__label{
    font-size: 9px;
    letter-spacing: 0.4px;
  }
  .card__variant-picker__count{
    font-size: 9px;
    padding: 1px 5px;
  }
  .card__variant-picker__hint{
    font-size: 9px;
    margin-top: 3px;
  }
}