/* ====== Variables ====== */
:root {
  --bc-card-bg: #ffffff;
  --bc-card-radius: 18px;
  --bc-card-shadow: 0 8px 28px rgba(8,7,16,0.08);
  --bc-accent1: #ff4b9b;
  --bc-accent2: #7a39ff;
  --bc-text: #222;
  --bc-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --bc-padding-left: 64px;
  --bc-ring-size: 34px;
  --bc-dot-size: 12px;
  --bc-ring-left: calc(var(--bc-padding-left) / 2);
}

/* ====== Card Layout ====== */
.bc-card {
  width: 100%;
  max-width: 1100px;
  padding: 10px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  font-family: var(--bc-font);
  box-sizing: border-box;
  align-items: center;
}

.bc-left {
  display: flex;
  align-items: center;
  width: 100%;
}

.bc-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

/* ====== Pills ====== */
.bc-pill {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 14px 18px 14px var(--bc-padding-left);
  cursor: pointer;
  user-select: none;
  color: var(--bc-text);
  font-family: var(--bc-font);
  min-height: 56px;
  font-size: 15px;
  line-height: 1.15;
  background: #fff;
  border-radius: 12px;
  box-sizing: border-box;
}

.bc-pill input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  z-index: 4;
}

.bc-pill::before {
  content: "";
  position: absolute;
  left: var(--bc-ring-left);
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--bc-ring-size);
  height: var(--bc-ring-size);
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100' height='100'><defs><linearGradient id='g' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' stop-color='%239003F4'/><stop offset='100%' stop-color='%23F5255D'/></linearGradient></defs><circle cx='50' cy='50' r='44' fill='none' stroke='url(%23g)' stroke-width='6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.bc-pill::after {
  content: "";
  position: absolute;
  left: var(--bc-ring-left);
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: var(--bc-dot-size);
  height: var(--bc-dot-size);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, #9003F4 0%, #F5255D 100%);
  box-shadow: 0 6px 18px rgba(122,57,255,0.14);
  transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .12s ease;
}

.bc-pill.bc-checked::after {
  transform: translate(-50%, -50%) scale(1);
}

.bc-pill:hover::before { opacity: 0.98; }

/* ====== CTA Button ====== */
.bc-btn-quote {
  background: linear-gradient(90deg, var(--bc-accent1), var(--bc-accent2));
  color: #fff;
  padding: 12px 28px;
  border-radius: 40px;
  border: none;
  font-weight: 400;
  font-family: var(--bc-font);
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(122, 57, 255, 0.12);
  transition: transform 0.25s ease;
}

.bc-btn-quote:hover {
  transform: translateY(-2px);
}

/* ====== Responsive ====== */
@media (max-width: 992px) {
  .bc-options {
    grid-template-columns: 1fr 1fr; /* 2 columns instead of 3 */
  }
}

@media (max-width: 600px) {
  .bc-card {
    grid-template-columns: 1fr; /* stack pills & button vertically */
    gap: 14px;
  }
  .bc-options {
    grid-template-columns: 1fr; /* pills full-width */
  }
  .bc-btn-quote {
    width: 100%; /* button full width */
    text-align: center;
  }
}