.bsk-ea-picker {
  --bsk-picker-line: rgba(142, 164, 209, .2);
  --bsk-picker-muted: #94a1bb;
  --bsk-picker-text: #edf2ff;
  --bsk-picker-accent: #7fa3ff;
  min-width: 0;
  color: var(--bsk-picker-text, #edf2ff);
  font-family: var(--checkout-body, 'Sarabun', sans-serif);
}

.bsk-ea-picker *,
.bsk-ea-picker *::before,
.bsk-ea-picker *::after { box-sizing: border-box; }

.bsk-ea-picker__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
}

.bsk-ea-picker__eyebrow {
  display: block;
  color: #dbe5fa;
  font-size: .8rem;
  font-weight: 600;
}

.bsk-ea-picker__hint {
  margin: 2px 0 0;
  color: var(--bsk-picker-muted, #94a1bb);
  font-size: .69rem;
  line-height: 1.45;
}

.bsk-ea-picker__selection {
  flex: none;
  padding: 4px 7px;
  border: 1px solid rgba(127, 163, 255, .24);
  border-radius: 7px;
  background: rgba(77, 127, 255, .08);
  color: #adc1f2;
  font: 400 .55rem var(--checkout-mono, 'DM Mono', monospace);
  white-space: nowrap;
}

.bsk-ea-picker__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.bsk-ea-picker__card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 6px;
  overflow: hidden;
  border: 1px solid var(--bsk-picker-line, rgba(142, 164, 209, .2));
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(28, 42, 69, .58), #090e19 76%);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.bsk-ea-picker__card:hover {
  border-color: rgba(127, 163, 255, .62);
  background-color: #111a2c;
  transform: translateY(-1px);
}

.bsk-ea-picker__card:focus-visible {
  outline: 2px solid var(--bsk-picker-accent, #7fa3ff);
  outline-offset: 3px;
}

.bsk-ea-picker__card.is-selected {
  border-color: rgba(127, 163, 255, .9);
  background: linear-gradient(145deg, rgba(54, 83, 143, .3), #0b1120 78%);
  box-shadow: inset 0 0 0 1px rgba(127, 163, 255, .22);
}

.bsk-ea-picker__image-wrap {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  aspect-ratio: 3 / 4;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: radial-gradient(ellipse at center, rgba(64, 79, 111, .18), rgba(5, 8, 14, .5) 72%);
}

.bsk-ea-picker__image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bsk-ea-picker__image-wrap--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

.bsk-ea-picker__image-wrap--pair img {
  min-width: 0;
}

.bsk-ea-picker__check {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid rgba(220, 230, 250, .45);
  border-radius: 50%;
  background: rgba(6, 9, 18, .82);
  color: transparent;
}

.bsk-ea-picker__check svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bsk-ea-picker__card.is-selected .bsk-ea-picker__check {
  border-color: #9bb7ff;
  background: #416ee1;
  color: #fff;
}

.bsk-ea-picker__card-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
  padding: 7px 3px 3px;
}

.bsk-ea-picker__card-copy strong {
  overflow: hidden;
  color: #e6edfc;
  font-size: clamp(.66rem, 2.5vw, .78rem);
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bsk-ea-picker__card-copy small {
  overflow: hidden;
  color: #8694ae;
  font-size: .58rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bsk-ea-picker__price {
  margin-top: 4px;
  color: #adc1f2;
  font: 400 .54rem/1.45 var(--checkout-mono, 'DM Mono', monospace);
  white-space: nowrap;
}

.bsk-ea-picker__bundle-note {
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(127, 163, 255, .36);
  border-radius: 10px;
  background: linear-gradient(120deg, rgba(54, 83, 143, .18), rgba(8, 13, 24, .88));
}

.bsk-ea-picker__bundle-note[hidden] { display: none !important; }
.bsk-ea-picker__bundle-note > strong { color: #dce6ff; font-size: .72rem; }
.bsk-ea-picker__bundle-note p { margin: 2px 0 6px; color: #9eabc3; font-size: .66rem; line-height: 1.5; }
.bsk-ea-picker__bundle-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.bsk-ea-picker__bundle-price del { color: #7e8aa3; font: .58rem var(--checkout-mono, 'DM Mono', monospace); }
.bsk-ea-picker__bundle-price span { color: #c7d7ff; font: 400 .85rem var(--checkout-display, 'Bebas Neue', sans-serif); }

.bsk-ea-picker__live {
  min-height: 1.1em;
  margin: 5px 1px 0;
  color: #e0bb83;
  font-size: .64rem;
  line-height: 1.5;
}

@media (max-width: 360px) {
  .bsk-ea-picker__grid { gap: 6px; }
  .bsk-ea-picker__card { padding: 5px; }
  .bsk-ea-picker__card-copy { padding-inline: 2px; }
  .bsk-ea-picker__price { font-size: .49rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bsk-ea-picker__card { transition: none; }
  .bsk-ea-picker__card:hover { transform: none; }
}
