/* burble-core.css / core-option.css: Option row and radio card.
   Linked by common/burble_core_css.php, in the order listed there. */

/* ── Option row ───────────────────────────────────────────────
   A full-width clickable row: tinted icon chip, title, description,
   trailing affordance. Used for "pick one of these" lists and for
   standing actions — the manifest-display picker and the not-paid
   menu's recovery actions.

   Consolidated from .mdp-option (manifest display popup) and
   .np-action-btn (not-paid menu), which said the same thing twice and
   differed only in padding and border width.

   Both element types render identically. As an <a> it navigates; as a
   <button> it does whatever its script does — width/text-align/font are
   pinned so the button does not inherit the UA's centred, shrink-to-fit
   look. Render it through components/option.php rather than by hand.

   Deliberately NOT folded in: .menu-card (core-card.css), the dashboard's
   module cards and the Settings tiles. It shares this anatomy but is a
   tile on a fixed footprint, not a row.                              */
.bc-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  background: var(--surface-sunken);
  border: 1.5px solid var(--border-color);
  border-radius: 14px;
  text-align: left;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s,
    transform 0.18s,
    box-shadow 0.18s;
}
.bc-option:hover {
  border-color: var(--teal);
  background: var(--teal-bg);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
  text-decoration: none;
}
.bc-option + .bc-option {
  margin-top: 10px;
}

.bc-option-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bc-option-icon svg {
  width: 20px;
  height: 20px;
}
/* Tints, the same set the settings and dashboard tiles already use. */
.bc-feature-icon--teal,
.bc-option-icon--teal {
  background: rgba(18, 181, 201, 0.12);
  color: var(--teal);
}
.bc-feature-icon--blue,
.bc-option-icon--blue {
  background: rgba(43, 125, 214, 0.12);
  color: var(--blue);
}
.bc-feature-icon--navy,
.bc-option-icon--navy {
  background: rgba(26, 39, 68, 0.1);
  color: var(--navy);
}
.bc-feature-icon--success,
.bc-option-icon--success {
  background: rgba(22, 163, 74, 0.12);
  color: var(--success);
}
.bc-feature-icon--amber,
.bc-option-icon--amber {
  background: rgba(217, 119, 6, 0.12);
  color: var(--warn);
}
.bc-feature-icon--purple,
.bc-option-icon--purple {
  background: rgba(124, 58, 237, 0.12);
  color: var(--purple);
}
.bc-feature-icon--plum,
.bc-option-icon--plum {
  background: rgba(138, 59, 144, 0.12);
  color: var(--plum);
}
/* Rose is pink, a colour; danger is red, for something destructive. */
.bc-feature-icon--rose,
.bc-option-icon--rose {
  background: rgba(219, 39, 119, 0.12);
  color: var(--rose);
}
.bc-feature-icon--danger,
.bc-option-icon--danger {
  background: rgba(225, 29, 72, 0.12);
  color: var(--danger);
}
.bc-feature-icon--slate,
.bc-option-icon--slate {
  background: rgba(71, 85, 105, 0.12);
  color: var(--sl-500);
}

/* The component emits spans, so the stack is made here rather than relying on
   block-level children. flex:1 lets the arrow sit hard right. */
.bc-option-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.bc-option-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
}
.bc-option-desc {
  font-size: 12px;
  color: var(--text-soft);
}
.bc-option-arrow {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--sl-300);
  transition:
    color 0.15s,
    transform 0.15s;
}
.bc-option:hover .bc-option-arrow {
  color: var(--teal);
  transform: translateX(2px);
}

/* ── Radio card ───────────────────────────────────────────────
   .bc-option as one of a set of choices rather than an action: a <label>
   wrapping a radio, so a click anywhere on the card picks it, and the card
   reads as chosen for as long as its radio is checked — no script. The radio
   is drawn like the toggle row's (below). Its content can run to several
   lines, and can hold a button, which an <a>/<button> .bc-option cannot.

     <label class="bc-option bc-option--radio" for="plan3">
       <input type="radio" name="plan_id" id="plan3" value="3">
       <span class="bc-option-text">…</span>
     </label>

   Hover only outlines the card: the teal tint is kept for the chosen one.
   .is-selected is there for a card whose radio is not inside it. */
.bc-option--radio {
  align-items: flex-start;
  margin: 0;
  font-weight: inherit;
}
.bc-option--radio:hover {
  background: var(--white);
  transform: none;
  box-shadow: none;
}
.bc-option--radio:has(input[type="radio"]:checked),
.bc-option--radio.is-selected {
  border-color: var(--teal);
  background: var(--teal-bg);
  box-shadow: 0 0 0 3px var(--teal-glow);
}
.bc-option--radio:has(input[type="radio"]:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}

/* In a grid the grid's gap does the spacing, not the stacked-row margin. */
:is(.bc-grid, .bc-grid-2, .bc-grid-3, .bc-grid-4, .bc-grid-auto, .bc-grid-fill)
  > .bc-option
  + .bc-option {
  margin-top: 0;
}