/*
 * Pricing-page styles React set inline in NewWelcome.js.
 *
 * The selected-card border was a ternary on the `style` prop:
 *     border: choosePlan === id ? "2px solid #f37720" : "2px solid #2a2f36"
 * The unselected value already matches .new-welcome-card in newWelcome.css, so
 * only the selected state needs expressing.
 */

.rc-plan-card.is-selected {
  border: 2px solid #f37720;
}

/* NewWelcome.js's savings badge, which was ~8 inline declarations. */
.rc-plan-savings {
  font-size: 13px;
  background-color: #f37720;
  padding: 5px;
  width: 120px;
  font-weight: 600;
  align-self: center;
  margin-bottom: 10px;
}

/* The CHOOSE control. In the app it is a <button>; here it must be a link,
   because it leaves for another origin — so it needs the layout the button got
   from its own inline styles. */
.rc-choose-plan {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 80%;
  text-decoration: none;
}

/* The cards are clickable divs in the app with no keyboard affordance at all.
   They are radios here, so they need a visible focus ring. */
.rc-plan-card:focus-visible,
.rc-choose-plan:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 4px;
}

/* Without JS nothing can be selected, so every card should read as available
   rather than one being falsely highlighted. The server marks no card selected;
   assets/js/pricing.js sets the initial state on load. */