/**
 * Alpine Funded — Select Options (Step 1)
 *
 * Loaded only on the page holding the [alpine_select_options] shortcode
 * (see mu-plugins/af-select-options.php). Every selector is prefixed
 * with .af-select so no other page is affected.
 */

.af-select {
  /* Same tokens as checkout-v2.css, repeated on purpose: these two pages are
	   never on screen together, and copying 11 lines is cheaper than tying the
	   checkout stylesheet to a non-checkout page. */
  --af-select-blue: #017fdd;
  --af-select-ink: #030130;
  --af-select-body: #2d2d2d;
  --af-select-muted: #666666;
  --af-select-label: #7e8c96;
  --af-select-line: #cbe4f1;
  --af-select-was: #999999;
  --af-select-tint: #eff7fb;
  --af-select-soft: #f5faff;
  --af-select-pick: #ebf7ff;
  --af-select-page: #f6fbfc;
  --af-select-card: #ffffff;
  --af-select-line-hover: #9fd2ee;
  --af-select-grad: linear-gradient(180deg, #005473 0%, #38b6ff 100%);

  color: var(--af-select-body);
  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background: var(--af-select-page);
  /* Inherited, so one declaration covers every control on the page: without it
	   a tap paints the browser's own grey-blue block over the chip or add-on
	   row, on top of the :active style the design already has. */
  -webkit-tap-highlight-color: transparent;
}

/* A long press on a control selects its text instead of pressing it, and the
   selection highlight reads as a stray blue fill across the row. */
.af-select button,
.af-select label,
.af-select .af-select-btn-secondary {
  -webkit-user-select: none;
  user-select: none;
}

.af-select-shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 120px;
}

.af-select-body {
  padding-bottom: 56px;
}

body.af-select-step1 header[data-elementor-type="header"] {
  display: none;
}

.af-flow-nav {
  padding: 24px 0;
}

.af-select .af-flow-nav__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 120px;
}

.af-flow-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.af-flow-nav__home {
  display: block;
  line-height: 0;
}

.af-flow-nav__logo {
  display: block;
  width: auto;
  height: 48px;
}

.af-flow-nav__badge {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--af-select-label);
}

.af-select *,
.af-select *::before,
.af-select *::after {
  box-sizing: border-box;
}

.af-select-stepper {
  padding: 28px 0;
}

.af-select-stepper__labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.af-select-stepper__step,
.af-select-stepper__next {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.af-select-stepper__step {
  color: var(--af-select-blue);
}

.af-select-stepper__next {
  color: var(--af-select-label);
  font-weight: 400;
}

.af-select-stepper__track {
  height: 4px;
  border-radius: 100px;
  background: var(--af-select-tint);
  overflow: hidden;
}

.af-select-stepper__fill {
  display: block;
  width: 50%;
  height: 100%;
  border-radius: 100px;
  background: var(--af-select-blue);
}

.af-select-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 32px;
  align-items: start;
  padding: 56px 0;
}

.af-select-col-main {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

#af-select-head {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Sticky belongs on the grid item, not on a child of it: the column is
   start-aligned so it is only as tall as its content, and a child inside it has
   no room to travel. The grid container is the tall one. */
.af-select-col-side {
  position: sticky;
  top: 24px;
  align-self: start;
}

/* The old view is dimmed rather than cleared while new prices load, so there is
   no flicker on a slow connection.

   pointer-events: none because the dimmed view still shows the old prices — a
   click on the pay button during the swap would submit the previous state. */
.af-select-form.is-loading .af-select-tabs,
.af-select-form.is-loading #af-select-options,
.af-select-form.is-loading #af-select-side {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.af-select-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.af-select-head__title {
  margin: 0;
  font-size: 36px;
  line-height: 44px;
  font-weight: 700;
  color: var(--af-select-ink);
}

.af-select-head__sub {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--af-select-muted);
}

.af-select-head__promo {
  font-weight: 700;
  color: var(--af-select-blue);
}

.af-select-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.af-select-tabs.af-select-tabs--single {
  grid-template-columns: 1fr;
}

.af-select-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 68px;
  padding: 12px 6px;
  border: 1px solid var(--af-select-line);
  border-radius: 14px;
  background: var(--af-select-card);
  cursor: pointer;
  text-align: center;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.af-select-tab:not(.is-active):hover {
  border-color: var(--af-select-line-hover);
  background: var(--af-select-pick);
  box-shadow: 0 4px 14px rgba(3, 64, 112, 0.1);
}

.af-select-tab:not(.is-active):hover .af-select-tab__note {
  color: var(--af-select-muted);
}

.af-select-tab.is-active {
  cursor: default;
}

.af-select-tab__name {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--af-select-ink);
}

.af-select-tab__note {
  font-size: 12px;
  line-height: 18px;
  color: var(--af-select-label);
}

.af-select-tab.is-active {
  border-color: transparent;
  background: var(--af-select-grad);
  /* The gradient is laid out over the padding box but painted over the border
     box, so it tiles into the 1px transparent border and the next tile's start
     colour drew a dark line under the tab. */
  background-origin: border-box;
}

.af-select-tab.is-active .af-select-tab__name {
  color: #ffffff;
}
.af-select-tab.is-active .af-select-tab__note {
  color: #cde6ff;
}

.af-select-card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 24px;
  border: 1px solid var(--af-select-line);
  border-radius: 16px;
  background: var(--af-select-card);
}

.af-select-card__options {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.af-select-divider {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--af-select-line);
  opacity: 0.5;
}

.af-select-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.af-select-row__label {
  margin: 0;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--af-select-label);
}

.af-select-chips {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding-top: 8px; /* room for the "Most popular" badge that overhangs the top */
}

.af-select-chips--plan {
  grid-template-columns: repeat(3, 1fr);
}

.af-select-chip,
.af-select-seg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 8px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background: var(--af-select-soft);
  cursor: pointer;
  text-align: center;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* Keyboard users get a visible target even where the theme resets outlines. */
.af-select-tab:focus-visible,
.af-select-chip:focus-visible,
.af-select-seg:focus-visible,
.af-select-addon__box:focus-visible {
  outline: 2px solid var(--af-select-blue);
  outline-offset: 2px;
}

.af-select-chip:not(.is-selected):hover,
.af-select-seg:not(.is-selected):hover {
  border-color: var(--af-select-line-hover);
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(3, 64, 112, 0.1);
}

.af-select-chip.is-selected,
.af-select-seg.is-selected {
  cursor: default;
}

.af-select-chip.is-selected,
.af-select-seg.is-selected {
  border-color: transparent;
  background:
    linear-gradient(var(--af-select-pick), var(--af-select-pick)) padding-box,
    var(--af-select-grad) border-box;
}

.af-select-chip__name {
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  color: var(--af-select-ink);
}

.af-select-chip__prices {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.af-select-chip__was {
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  color: var(--af-select-was);
}

.af-select-chip__now {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  color: var(--af-select-muted);
}

.af-select-chip__note {
  font-size: 11px;
  line-height: 16px;
  color: var(--af-select-label);
}

.af-select-chip__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--af-select-grad);
  color: #ffffff;
  font-size: 9px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.af-select-segs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.af-select-seg {
  gap: 3px;
  border-radius: 12px;
}

.af-select-seg__name {
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: var(--af-select-muted);
}

.af-select-seg.is-selected .af-select-seg__name {
  color: var(--af-select-ink);
}

.af-select-seg__note {
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--af-select-label);
}

.af-select-seg.is-selected .af-select-seg__note {
  color: var(--af-select-blue);
}

.af-select-seg--icon {
  flex-direction: row;
  gap: 10px;
  padding: 14px 12px;
}

.af-select-seg__icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.af-select-addons {
  margin: 0;
  padding: 0;
  list-style: none;
}

.af-select-addon + .af-select-addon {
  border-top: 1px solid rgba(203, 228, 241, 0.7);
}

.af-select-addon__label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
}

/* The same box the checkout draws. A native checkbox ignores border,
   border-radius and background while it paints itself, so the outline set here
   never showed — appearance: none and a drawn tick are what make it appear. */
.af-select-addon__box {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--af-select-blue);
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
}

.af-select-addon__box:checked {
  background: var(--af-select-blue)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' fill='none'%3E%3Cpath d='M1 4.5 4.4 8 11 1' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 12px 9px no-repeat;
}

.af-select-addon__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.af-select-addon__name {
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  color: var(--af-select-ink);
}

.af-select-addon__desc {
  font-size: 13px;
  line-height: 19px;
  color: var(--af-select-muted);
}

.af-select-addon__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex: 0 0 auto;
  text-align: right;
}

.af-select-addon__delta {
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: var(--af-select-blue);
  white-space: nowrap;
}

.af-select-addon__note {
  font-size: 11px;
  line-height: 16px;
  color: var(--af-select-label);
  white-space: nowrap;
}

.af-select-field {
  position: relative;
}

.af-select-field__icon {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
}

.af-select-field input[type="email"] {
  width: 100%;
  padding-left: 42px;
  height: 52px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--af-select-line);
  border-radius: 12px;
  background: var(--af-select-soft);
  color: var(--af-select-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 22px;
}

.af-select-field input[type="email"]::placeholder {
  color: var(--af-select-label);
}

.af-select-field input[type="email"]:focus {
  outline: 2px solid var(--af-select-blue);
  outline-offset: -1px;
}

.af-select-field.has-error input[type="email"] {
  border-color: #d63638;
}

.af-select-field__error {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 19px;
  color: #d63638;
}

.af-select-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--af-select-line);
  border-radius: 16px;
  background: var(--af-select-card);
}

.af-select-summary__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 192px;
}

.af-select-summary__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.af-select-summary__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.af-select-summary__eyebrow,
.af-select-summary__live {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--af-select-label);
}

.af-select-summary__live {
  font-size: 9px;
  line-height: 14px;
  font-weight: 400;
}

.af-select-summary__title {
  margin: 0;
  font-size: 22px;
  line-height: 33px;
  font-weight: 700;
  color: var(--af-select-ink);
}

.af-select-summary__crumbs {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--af-select-muted);
}

.af-select-summary__foot {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: var(--af-select-label);
}

.af-select-spec {
  width: 100%;
  /* Themes routinely give bare tables a bottom margin; it would push the
	   divider and everything under it a row out of rhythm. */
  margin: 0;
  border: 0;
  border-collapse: collapse;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(239, 247, 251, 0.5);
}

.af-select .af-select-spec thead,
.af-select .af-select-spec tbody,
.af-select .af-select-spec tr,
.af-select .af-select-spec th,
.af-select .af-select-spec td {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* The grey rule over the header row comes from the theme's
   `table thead:first-child tr:first-child th { border-block-start: 1px solid }`.
   The `border` shorthand above cannot clear it — that is a logical property, not
   one of the physical longhands — so this one mirrors the theme's selector. */
.af-select .af-select-spec thead:first-child tr:first-child th {
  border-block-start: 0;
}

.af-select-spec th,
.af-select-spec td {
  padding: 10px 14px;
  font-size: 13px;
  line-height: 20px;
  vertical-align: middle;
}

/* Inset shadow, not border-top: a border adds a pixel to every row and the table
   ends up 7px taller than the design draws. */
.af-select .af-select-spec tbody tr + tr th,
.af-select .af-select-spec tbody tr + tr td {
  box-shadow: inset 0 1px 0 rgba(203, 228, 241, 0.35);
}

.af-select-spec tbody th {
  font-weight: 400;
  text-align: left;
  color: var(--af-select-muted);
}

.af-select-spec tbody td {
  font-weight: 500;
  text-align: right;
  color: var(--af-select-ink);
}

.af-select .af-select-spec--multi thead th {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--af-select-blue);
  background: rgba(203, 228, 241, 0.35);
}

.af-select-spec--multi tbody td {
  text-align: center;
}

.af-select-spec--multi tbody th {
  width: 40%;
}

.af-select .af-select-info {
  display: inline-flex;
  vertical-align: -2px;
  margin: 0 0 0 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--af-select-label);
  cursor: help;
}

.af-select .af-select-info:hover,
.af-select .af-select-info:focus {
  background: transparent;
  color: var(--af-select-blue);
}

.af-select .af-select-info:focus-visible {
  outline: 2px solid var(--af-select-blue);
  outline-offset: 2px;
}

/* The tip hangs off the summary card, not the cell or the icon: the table's
   overflow: hidden (its rounded corners) would clip it there. Vertically it keeps
   its static position, the icon's top (it is a flex child of the icon), and is
   lifted above the row; horizontally it starts at the table's edge, so it stays
   on screen however the label wraps. */
.af-select .af-select-summary {
  position: relative;
}

.af-select-info__tip {
  display: none;
  position: absolute;
  left: 22px; /* the summary's padding, i.e. the table's left edge */
  z-index: 30;
  width: max-content;
  max-width: min(260px, calc(100% - 44px));
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--af-select-ink);
  color: #ffffff;
  font-family: inherit;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  text-align: left;
  white-space: normal;
  transform: translateY(calc(-100% - 8px));
  pointer-events: none;
}

.af-select-info:hover .af-select-info__tip,
.af-select-info:focus .af-select-info__tip {
  display: block;
}

.af-select-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.af-select-total__label {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--af-select-label);
}

.af-select-total__prices {
  display: flex;
  align-items: center;
  gap: 8px;

}

.af-select-total__was {
  font-size: 14px;
  line-height: 20px;
  color: var(--af-select-was);
}

.af-select-total__now {
  font-size: 30px;
  line-height: 45px;
  font-weight: 700;
  color: var(--af-select-blue);
}

.af-select-alert {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fcf0f1;
  color: #9e2326;
  font-size: 13px;
  line-height: 19px;
}

.af-select-submit {
  width: 100%;
  height: 58px;
  border: 0;
  border-radius: 8px;
  background: var(--af-select-blue);
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

/* :focus, not just :focus-visible: browsers do not match :focus-visible on a
   mouse click, so clicking the button would otherwise show nothing. */
.af-select-submit:hover:not(:disabled),
.af-select-submit:focus:not(:disabled) {
  background: #0169b5;
}

.af-select-submit:focus,
.af-select-submit:focus-visible {
  outline: none;
  box-shadow: none;
}

.af-select-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.af-select-faq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  border: 1px solid var(--af-select-line);
  border-radius: 16px;
  background: var(--af-select-card);
  box-shadow: 0 6px 24px rgba(3, 64, 112, 0.1);
}

.af-select-faq__title {
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 27px;
  font-weight: 600;
  color: var(--af-select-ink);
}

.af-select-faq__sub {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--af-select-muted);
}

.af-select-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 200px;
  height: 48px;
  padding: 0 24px;
  border: 1.5px solid var(--af-select-blue);
  border-radius: 8px;
  color: var(--af-select-blue);
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.af-select-btn-secondary:hover {
  background: #ebf7ff;
  border-color: #0169b5;
  color: #0169b5;
}

.af-select-btn-secondary:focus-visible {
  outline: 2px solid var(--af-select-blue);
  outline-offset: 2px;
}

.af-select-cta {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.af-select-only-mobile {
  display: none;
}

@media (max-width: 1280px) {
  /* Horizontal only. The shorthand also reset .af-select-body's bottom padding,
	   and the theme footer rides 16px up over whatever it follows, so the FAQ card
	   lost its last 16px between 721 and 1240. */
  .af-select-shell,
  .af-select .af-flow-nav__inner {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 1080px) {
  .af-select-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 32px 0;
  }

  .af-select-col-side {
    position: static;
  }
}

@media (max-width: 720px) {
  .af-select-shell,
  .af-select .af-flow-nav__inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .af-select-only-desktop {
    display: none;
  }
  .af-select-only-mobile {
    display: inline;
  }

  .af-flow-nav {
    padding: 18px 0;
  }
  .af-flow-nav__logo {
    height: 32px;
  }
  .af-flow-nav__badge {
    font-size: 12px;
    line-height: 18px;
  }

  .af-select-stepper {
    padding: 6px 0 14px;
  }
  .af-select-stepper__labels {
    margin-bottom: 8px;
  }
  .af-select-stepper__step,
  .af-select-stepper__next {
    font-size: 12px;
    line-height: 18px;
  }

  .af-select-col-main {
    gap: 14px;
  }
  #af-select-head {
    gap: 14px;
  }

  .af-select-head {
    gap: 6px;
  }
  .af-select-head__title {
    font-size: 26px;
    line-height: 36px;
  }
  .af-select-head__sub {
    font-size: 14px;
    line-height: 22px;
  }

  .af-select-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .af-select-tab {
    min-height: 55px;
    padding: 9px 6px;
    border-radius: 12px;
  }
  .af-select-tab__name {
    font-size: 13px;
    line-height: 20px;
  }
  .af-select-tab__note {
    font-size: 12px;
    line-height: 18px;
    white-space: normal;
  }

  .af-select-card {
    gap: 22px;
    padding: 16px;
    border-radius: 14px;
  }
  .af-select-card__options {
    gap: 22px;
  }
  .af-select-row {
    gap: 8px;
  }
  .af-select-row__label {
    font-size: 12px;
    line-height: 18px;
  }

  .af-select-chips {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 20px;
  }
  .af-select-chips--plan {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Account type and trading platform read as a radio list on mobile (ALPF-18). */
  .af-select-segs {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .af-select-seg,
  .af-select-seg.is-selected,
  .af-select-seg:not(.is-selected):hover {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-align: left;
  }
  .af-select-segs > .af-select-seg + .af-select-seg {
    border-top: 1px solid var(--af-select-line);
  }
  .af-select-seg::before {
    content: "";
    flex: none;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--af-select-label);
    border-radius: 50%;
    background: var(--af-select-card);
  }
  .af-select-seg.is-selected::before {
    border: 6px solid var(--af-select-blue);
  }

  .af-select-field input[type="email"] {
    height: 50px;
  }

  .af-select-summary {
    gap: 10px;
    padding: 16px 0 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .af-select-summary__media {
    height: 150px;
  }
  .af-select-summary__title {
    font-size: 18px;
    line-height: 27px;
  }
  .af-select-summary__head {
    display: none;
  }

  .af-select-summary__titlerow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .af-select-spec {
    border-radius: 14px;
    background: transparent;
  }
  .af-select .af-select-spec th,
  .af-select .af-select-spec td {
    padding: 11px 16px;
  }

  .af-select .af-select-spec tbody tr:nth-child(odd) th,
  .af-select .af-select-spec tbody tr:nth-child(odd) td {
    background: #f5fafd;
  }
  .af-select .af-select-spec tbody tr:nth-child(even) th,
  .af-select .af-select-spec tbody tr:nth-child(even) td {
    background: rgba(239, 247, 251, 0.6);
  }
  .af-select .af-select-spec tbody tr + tr th,
  .af-select .af-select-spec tbody tr + tr td {
    border-top: 0;
  }

  .af-select-info__tip {
    left: 0;
    max-width: min(260px, 100%);
  }

  .af-select-total {
    align-items: flex-end;
    margin-top: 6px;
  }
  .af-select-total__label {
    font-size: 12px;
    line-height: 18px;
  }
  .af-select-total__now {
    font-size: 28px;
    line-height: 42px;
  }

  .af-select-submit {
    height: 60px;
  }
  .af-select-summary__foot {
    font-size: 11px;
    line-height: 16px;
  }

  /* Pinned from the top of the page rather than only once the summary card is
	   reached. The slot holds the height the bar takes out of the flow, so the bar
	   drops back in without the layout shifting; select-options-v2.js does the swap.

	   Not position:sticky: sticky can only travel inside its own parent, and the
	   parent here is the summary card far down the page. */
  .af-select-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    gap: 8px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: var(--af-select-page);
  }

  .af-select-cta__slot {
    min-height: var(--af-select-cta-height, 150px);
  }

  .af-select-cta.is-inline {
    position: static;
    padding: 0;
    background: transparent;
  }

  .af-select-body {
    padding-bottom: 24px;
  }

  .af-select-faq {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 16px;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(3, 64, 112, 0.1);
  }

  .af-select-faq__title {
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
  }
  .af-select-faq__sub {
    font-size: 13px;
    line-height: 20px;
  }

  .af-select-btn-secondary {
    width: 100%;
  }

  .af-select-addon__label {
    flex-wrap: nowrap;
  }
  .af-select-addon__price {
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    width: auto;
    padding-left: 0;
    text-align: right;
  }
}

@media (max-width: 340px) {
  .af-select-chips {
    grid-template-columns: repeat(2, 1fr);
  }
}