/* =========================================================
   CyberSource BGFI — Formulaires premium (checkboxes/cards)
   Charge en dernier après tous les autres CSS
   ========================================================= */

/* ============================================================
   PRODUITS INTÉRESSÉS — cards de sélection premium
   ============================================================ */
.products-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.product-pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 14px 14px;
  background: white;
  border: 1.5px solid #DDE7EF;
  border-radius: 14px;
  cursor: pointer;
  transition: all .18s cubic-bezier(.2, .8, .25, 1);
  user-select: none;
  overflow: hidden;
  min-height: 64px;
}
.product-pick:hover {
  border-color: #2E8F98;
  background: #F5F9FC;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(0, 53, 101, .15);
}

/* Hide the native checkbox visually but keep it accessible */
.product-pick input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom check indicator (top-right) */
.product-pick::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #DDE7EF;
  background: white;
  transition: all .18s;
}

/* Icon container */
.product-pick .pick-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #F1F8FF, #E6F3E9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #003565;
  transition: all .18s;
}
.product-pick .pick-icon svg {
  width: 20px;
  height: 20px;
}

.product-pick .pick-label {
  flex: 1;
  min-width: 0;
}
.product-pick .pick-label strong {
  display: block;
  color: #003565;
  font-size: .94rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1px;
}
.product-pick .pick-label small {
  display: block;
  color: #6A7D91;
  font-size: .75rem;
  line-height: 1.3;
}

/* CHECKED state */
.product-pick:has(input:checked) {
  border-color: #003565;
  background: linear-gradient(135deg, rgba(0, 53, 101, .04), rgba(58, 162, 171, .07));
  box-shadow: 0 10px 24px -10px rgba(0, 53, 101, .25), 0 0 0 3px rgba(0, 53, 101, .08);
}
.product-pick:has(input:checked)::after {
  border-color: #003565;
  background: #003565;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}
.product-pick:has(input:checked) .pick-icon {
  background: #003565;
  color: white;
  box-shadow: 0 6px 14px -4px rgba(0, 53, 101, .4);
}
.product-pick:has(input:checked) .pick-label strong {
  color: #003565;
}

/* Focus state (clavier) */
.product-pick:focus-within {
  outline: 2px solid #2E8F98;
  outline-offset: 2px;
}

/* ============================================================
   MOYENS DE PAIEMENT — pills avec icônes
   ============================================================ */
.payment-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.method-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 14px;
  background: white;
  border: 1.5px solid #DDE7EF;
  border-radius: 100px;
  cursor: pointer;
  transition: all .18s;
  font-size: .88rem;
  color: #31465F;
  user-select: none;
}

.method-pill input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.method-pill .method-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid #DDE7EF;
  background: white;
  flex-shrink: 0;
  transition: all .18s;
  position: relative;
}

.method-pill:hover {
  border-color: #2E8F98;
  background: #F5F9FC;
  color: #003565;
}

/* CHECKED state */
.method-pill:has(input:checked) {
  background: #003565;
  border-color: #003565;
  color: white;
  box-shadow: 0 6px 14px -4px rgba(0, 53, 101, .35);
}
.method-pill:has(input:checked) .method-dot {
  background: #3AA2AB;
  border-color: #2E8F98;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}

.method-pill:focus-within {
  outline: 2px solid #2E8F98;
  outline-offset: 2px;
}

/* ============================================================
   CONSENTEMENT — toggle switch premium
   ============================================================ */
.consent-box {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  background: #F5F9FC !important;
  border: 1.5px solid #DDE7EF !important;
  border-radius: 12px !important;
  cursor: pointer;
  transition: all .18s;
  margin: 0 !important;
}
.consent-box:hover {
  border-color: #3AA2AB !important;
  background: #EDF6F8 !important;
}
.consent-box:has(input:checked) {
  background: linear-gradient(135deg, rgba(0, 53, 101, .04), rgba(58, 162, 171, .08)) !important;
  border-color: #003565 !important;
}

/* Hide native checkbox */
.consent-box input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom box visual */
.consent-box .consent-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #BBC9D6;
  background: white;
  margin-top: 1px;
  transition: all .18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.consent-box .consent-check svg {
  width: 14px;
  height: 14px;
  color: white;
  opacity: 0;
  transform: scale(.5);
  transition: all .2s cubic-bezier(.2, .9, .25, 1.2);
}
.consent-box:has(input:checked) .consent-check {
  background: #003565;
  border-color: #003565;
  box-shadow: 0 4px 10px -2px rgba(0, 53, 101, .35);
}
.consent-box:has(input:checked) .consent-check svg {
  opacity: 1;
  transform: scale(1);
}

.consent-box span:not(.consent-check) {
  font-size: .9rem;
  line-height: 1.5;
  color: #31465F;
}

.consent-box:focus-within {
  outline: 2px solid #2E8F98;
  outline-offset: 2px;
}

/* ============================================================
   GENERAL CHECKBOX FALLBACK (anywhere)
   ============================================================ */
.field input[type="checkbox"]:not(.product-pick input):not(.method-pill input):not(.consent-box input) {
  width: 18px;
  height: 18px;
  accent-color: #003565;
  cursor: pointer;
}

/* ============================================================
   FORM CARD GLOBAL POLISH
   ============================================================ */
.form-card label {
  font-weight: 600;
  color: #003565;
  font-size: .88rem;
  margin-bottom: 6px;
  display: block;
}
.form-card .field { margin-bottom: 4px; }
.form-card .field.full { grid-column: 1 / -1; }

/* Label "Produits intéressés *" et "Moyens de paiement" */
.field-block-label {
  display: block;
  font-weight: 700;
  color: #003565;
  font-size: .92rem;
  margin-bottom: 10px;
  letter-spacing: .02em;
}
.field-block-label .required { color: #E85A5A; margin-left: 2px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 880px) {
  .products-pick {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .product-pick { padding: 12px 14px 12px 12px; gap: 10px; min-height: 60px; }
  .product-pick .pick-icon { width: 34px; height: 34px; border-radius: 9px; }
  .product-pick .pick-icon svg { width: 18px; height: 18px; }
  .product-pick .pick-label strong { font-size: .88rem; }
  .product-pick .pick-label small { font-size: .7rem; }
}

@media (max-width: 620px) {
  .products-pick { grid-template-columns: 1fr; gap: 9px; }
  .product-pick { padding: 12px 14px 12px 12px; min-height: 58px; }
  .product-pick::after { width: 16px; height: 16px; top: 8px; right: 8px; }
  .consent-box { padding: 14px 16px !important; gap: 12px !important; }
  .consent-box span:not(.consent-check) { font-size: .85rem; }
  .method-pill { font-size: .82rem; padding: 8px 13px 8px 12px; }
}

/* ============================================================
   ANIMATION SUBTILE AU CHECK
   ============================================================ */
@keyframes pickPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(.97); }
  100% { transform: scale(1); }
}
.product-pick:has(input:checked) { animation: pickPulse .25s ease; }
.method-pill:has(input:checked)  { animation: pickPulse .25s ease; }