/* ==========================================================================
   Naturalistico checkout — v3 design
   --------------------------------------------------------------------------
   Serves /en/learn/checkout-test-v3 (lms/learn/checkout_test_v3.blade.php),
   the redesign sandbox for the live checkout. Same design language as
   lms/css/home_v3.css and lms/css/blog_detail_v3.css: Fraunces headings,
   Inter body, Poppins for kickers and buttons, 18px radius, the sky/teal
   palette and the two-layer shadow.

   Three rules this file lives by:

   1. EVERY selector is scoped under .nlp-checkout. The page runs inside
      lms/layouts/learn_school.blade.php, which loads Bootstrap 3 + Nifty +
      front.css. Scoping gives (0,2,x) against the theme's (0,1,x), so we win
      the cascade with no !important anywhere in this file.

   2. The page's own prefix is co- (checkout), NOT the .btn / .card names
      home_v3.css uses. Those exist on this page as live Bootstrap components
      the checkout JS drives, and renaming or restyling them wholesale would
      reach the gift-card rows, the modal and the Nifty notifications.

   3. A large part of this file restyles LEGACY class names — .payment_method_item,
      .form-control, .magic-radio, .tab-pane, .learn-checkout-card-item, .gc-*.
      They are kept because the inline checkout JS addresses them, and because
      the upsell add-to-cart appends server-rendered HTML that uses them
      (HomeController::learn_addcart_card renders the LIVE card partial). So the
      redesign has to reach those names through CSS rather than rewrite them.
   ========================================================================== */

/* ============ tokens ============ */
.nlp-checkout {
  --co-sky: #3FA9E8;
  --co-sky-deep: #2286C7;
  --co-sky-tint: #EDF6FC;
  --co-sky-line: #D3E9F8;
  --co-ink: #12303B;
  --co-teal: #0F6E78;
  --co-teal-deep: #0A4F57;
  --co-teal-tint: #EAF4F3;
  --co-paper: #FDFEFE;
  --co-mist: #F6FAFA;
  --co-line: #E6EDEC;
  --co-white: #ffffff;
  --co-text: #3D5058;
  --co-text-soft: #66787E;
  --co-gold: #F0C033;
  --co-green: #2EA194;
  --co-green-deep: #1F7A6F;
  --co-green-soft: #E7F3F0;
  --co-danger: #C2453B;
  --co-danger-soft: #FCEDEC;
  --co-radius: 18px;
  --co-radius-sm: 12px;
  /* One height for every control that shares a row, so the currency select and
     the mode chips line up instead of each taking its own from its padding. */
  --co-control-h: 46px;
  --co-shadow: 0 1px 2px rgba(15, 80, 95, .04), 0 8px 24px -10px rgba(15, 80, 95, .09);
  --co-shadow-lift: 0 3px 6px rgba(15, 80, 95, .05), 0 18px 40px -14px rgba(15, 80, 95, .16);

  /* The v3 header is sticky and ~67px tall (13px padding, a 40px control row,
     13px, 1px border). The sticky summary parks below it by the same amount,
     driven from here so one number moves both. Since 2026-08-31 the promo strip
     pins with the header inside .nlp-topbar, so the chrome to clear is the pair
     — lms/js/header_v3.js publishes the strip's measured height as
     --nlp-promo-h, which header_v3.css defaults to 0px. */
  --co-head-offset: calc(86px + var(--nlp-promo-h, 0px));

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--co-text);
  font-size: 16px;
  line-height: 1.65;
  background: var(--co-mist);
  -webkit-font-smoothing: antialiased;
}

/* ============ reset ============ */
.nlp-checkout *,
.nlp-checkout *::before,
.nlp-checkout *::after {
  box-sizing: border-box;
}

.nlp-checkout h1,
.nlp-checkout h2,
.nlp-checkout h3 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--co-ink);
  line-height: 1.16;
  letter-spacing: -0.012em;
  font-weight: 600;
  margin: 0;
}

.nlp-checkout p,
.nlp-checkout ul,
.nlp-checkout ol {
  margin: 0;
  padding: 0;
}

.nlp-checkout li {
  list-style: none;
}

.nlp-checkout a {
  color: inherit;
  text-decoration: none;
}

.nlp-checkout img {
  max-width: 100%;
  display: block;
}

.nlp-checkout button {
  font-family: inherit;
  cursor: pointer;
}

.nlp-checkout :focus-visible {
  outline: 2px solid var(--co-sky-deep);
  outline-offset: 2px;
  border-radius: 6px;
}

.nlp-checkout hr {
  border-top: 1px solid var(--co-line);
  margin: 16px 0;
}

/* ============ theme neutralisers ============
   front.css and Nifty put a radius, a grey shadow and 20px of bottom margin on
   every .card, and the layout pads #page-content. Undone here rather than
   worked around in each component. */
.nlp-checkout .card {
  background: var(--co-white);
  border: 1px solid var(--co-line);
  border-radius: var(--co-radius-sm);
  box-shadow: none;
  margin-bottom: 0;
}

.nlp-checkout .card> :first-child,
.nlp-checkout .card> :last-child {
  border-radius: 0;
}

.nlp-checkout .card-body {
  padding: 0;
}

.nlp-checkout .row {
  margin-left: 0;
  margin-right: 0;
}

/* ============ layout primitives ============ */
.nlp-checkout .co-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}

.nlp-checkout .kicker {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--co-sky-deep);
}

/* ============ buttons ============
   co-btn, not .btn — Bootstrap's .btn stays intact for the gift-card rows, the
   login modal and anything the JS injects. */
.nlp-checkout .co-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--co-sky);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  padding: 13px 26px;
  text-decoration: none;
  flex: 0 0 auto;
  white-space: nowrap;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  box-shadow: 0 6px 16px -6px rgba(63, 169, 232, .45);
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
}

.nlp-checkout .co-btn:hover,
.nlp-checkout .co-btn:focus {
  background: var(--co-sky-deep);
  color: #fff;
}

.nlp-checkout .co-btn:active {
  transform: scale(.985);
}

.nlp-checkout .co-btn-block {
  display: flex;
  width: 100%;
  white-space: normal;
  text-align: center;
}

.nlp-checkout .co-btn-ghost {
  background: transparent;
  color: var(--co-sky-deep);
  box-shadow: inset 0 0 0 1.5px var(--co-sky-deep);
}

.nlp-checkout .co-btn-ghost:hover,
.nlp-checkout .co-btn-ghost:focus {
  background: var(--co-sky-tint);
  color: var(--co-sky-deep);
}

/* The pay button is the one moment on the page that should feel like an
   arrival, so it is the only element carrying the teal gradient. */
.nlp-checkout .pay_now_button {
  background: linear-gradient(135deg, var(--co-teal) 0%, var(--co-teal-deep) 100%);
  box-shadow: 0 8px 20px -8px rgba(15, 110, 120, .55);
  font-size: 15px;
  padding: 16px 26px;
}

.nlp-checkout .pay_now_button:hover,
.nlp-checkout .pay_now_button:focus {
  background: var(--co-teal-deep);
}

.nlp-checkout .checkout-next-button {
  padding: 16px 26px;
  font-size: 15px;
}

/* ============ page head ============ */
.nlp-checkout .co-head {
  padding: 40px 0 26px;
  text-align: center;
}

.nlp-checkout .co-head h1 {
  font-size: clamp(30px, 3.6vw, 42px);
  margin: 8px 0 0;
}

.nlp-checkout .co-promo {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--co-text-soft);
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* ============ the two-column grid ============ */
.nlp-checkout .co-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  align-items: start;
  padding-bottom: 60px;
}

.nlp-checkout .co-main {
  min-width: 0;
}

/* ============ toolbar: currency + modes ============
   Under the progress bar, between it and the step's cards.

   The two groups are laid out as one row of label-over-control: aligned to the
   START so both labels sit on the same line, both labels sharing one type spec
   (see below), and both controls sharing --co-control-h so the select and the
   chips sit on the same line too. .co-prog-meta owns the gap above, so this
   only sets its own bottom margin. */
.nlp-checkout .co-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 26px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.nlp-checkout .co-toolbar .co-currency {
  flex: 0 0 210px;
  max-width: 100%;
}

.nlp-checkout .co-toolbar .checkout-mode-menu {
  flex: 1 1 320px;
  min-width: 0;
}

/* One label spec for both groups. They differed before — 12.5px sentence case
   against 10.5px uppercase Poppins — which is what put them on two lines. */
.nlp-checkout .co-toolbar .co-currency>label,
.nlp-checkout .co-toolbar .co-modes-label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: var(--co-ink);
}

/* Both controls to the shared height, centred, so their tops and bottoms meet. */
.nlp-checkout .co-toolbar .bootstrap-select>.dropdown-toggle,
.nlp-checkout .co-toolbar .co-modes .menu-item {
  min-height: var(--co-control-h);
  display: inline-flex;
  align-items: center;
}

.nlp-checkout .co-toolbar .co-modes {
  align-items: stretch;
  gap: 8px;
}

.nlp-checkout .co-toolbar .co-modes .menu-item {
  padding: 0 18px;
}

/* ============ step rail ============
   Bootstrap's .nav-tabs draws a bottom border, floats its <li>s and gives the
   active one a box with three borders. All of it is undone; the markup stays
   because #checkout-first-step / -second-step and the two nested spans are what
   the inline step JS toggles 'active' on. */
.nlp-checkout .co-flow {
  margin: 0;
}

.nlp-checkout .nav-tabs.co-steps {
  display: flex;
  gap: 10px;
  border: 0;
  margin: 0 0 14px;
  padding: 0;
}

.nlp-checkout .nav-tabs.co-steps>li {
  float: none;
  flex: 1;
  margin: 0;
}

.nlp-checkout .nav-tabs.co-steps>li>a {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  line-height: inherit;
}

.nlp-checkout .nav-tabs.co-steps>li>a:hover,
.nlp-checkout .nav-tabs.co-steps>li>a:focus {
  background: transparent;
  border: 0;
}

.nlp-checkout .nav-tabs.co-steps>li.active>a,
.nlp-checkout .nav-tabs.co-steps>li.active>a:hover,
.nlp-checkout .nav-tabs.co-steps>li.active>a:focus {
  border: 0;
  background: transparent;
  color: inherit;
}

.nlp-checkout .co-steps .learn_auth_navigation_item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 14px;
  background: var(--co-white);
  border: 1px solid var(--co-line);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.nlp-checkout .co-steps>li.active .learn_auth_navigation_item {
  border-color: var(--co-sky-line);
  box-shadow: 0 0 0 3px var(--co-sky-tint);
}

/* The numbered disc. .active on .learn_circled_item means "this step is the one
   you are on"; .active on the parent .learn_auth_navigation_item means "this
   step is behind you" — the JS sets them independently, so the tick and the
   number are two children and only one shows at a time. */
.nlp-checkout .co-steps .learn_circled_item {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--co-mist);
  border: 1.5px solid var(--co-line);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--co-text-soft);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.nlp-checkout .co-steps .learn_circled_item.active {
  background: var(--co-sky);
  border-color: var(--co-sky);
  color: #fff;
}

.nlp-checkout .co-steps .circle-label {
  grid-area: 1 / 1;
}

.nlp-checkout .co-steps .circle-label-check {
  grid-area: 1 / 1;
  display: none;
  font-size: 12px;
}

/* Step completed: the parent is .active while the disc is not. */
.nlp-checkout .co-steps .learn_auth_navigation_item.active .learn_circled_item:not(.active) {
  background: var(--co-green-soft);
  border-color: var(--co-green);
  color: var(--co-green-deep);
}

.nlp-checkout .co-steps .learn_auth_navigation_item.active .learn_circled_item:not(.active) .circle-label {
  display: none;
}

.nlp-checkout .co-steps .learn_auth_navigation_item.active .learn_circled_item:not(.active) .circle-label-check {
  display: block;
}

.nlp-checkout .co-step-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}

.nlp-checkout .co-step-n {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--co-text-soft);
}

.nlp-checkout .co-step-t {
  font-size: 14px;
  font-weight: 600;
  color: var(--co-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- progress hairline ---------- */
.nlp-checkout .co-prog {
  height: 4px;
  border-radius: 999px;
  background: var(--co-line);
  overflow: hidden;
}

.nlp-checkout .co-prog-bar {
  display: block;
  height: 100%;
  width: 90%;
  background: linear-gradient(90deg, var(--co-sky) 0%, var(--co-teal) 100%);
  transition: width .3s ease;
}

.nlp-checkout .co-prog-meta {
  display: flex;
  justify-content: space-between;
  margin: 7px 0 22px;
  font-size: 12.5px;
  color: var(--co-text-soft);
}

/* ============ cards ============ */
.nlp-checkout .co-card {
  background: var(--co-white);
  border: 1px solid var(--co-line);
  border-radius: var(--co-radius);
  box-shadow: var(--co-shadow);
  padding: 26px 28px;
  margin-bottom: 18px;
}

.nlp-checkout .co-card-head {
  margin-bottom: 18px;
}

.nlp-checkout .co-card-head h2 {
  font-size: 21px;
  margin-top: 4px;
}

.nlp-checkout .co-card-note {
  font-size: 13.5px;
  color: var(--co-text-soft);
  margin-top: 6px;
}

.nlp-checkout .co-card-body> :first-child {
  margin-top: 0;
}

/* Bootstrap's fade/in pair drives the two steps; .tab-pane is display:none
   until .active, which the inline JS toggles. Only the transition is ours. */
.nlp-checkout .tab-content>.tab-pane {
  transition: opacity .18s ease;
}

/* ============ form fields ============ */
.nlp-checkout .co-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.nlp-checkout .co-fields-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nlp-checkout .co-fields+.co-fields {
  margin-top: 14px;
}

.nlp-checkout .co-field {
  min-width: 0;
}

.nlp-checkout .co-field-wide {
  grid-column: 1 / -1;
}

.nlp-checkout .co-field>label {
  display: block;
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--co-ink);
  text-transform: none;
  letter-spacing: normal;
  float: none;
  width: auto;
  padding: 0;
}

.nlp-checkout .co-req {
  color: var(--co-danger);
  margin-left: 1px;
}

.nlp-checkout .form-control {
  width: 100%;
  height: auto;
  padding: 12px 14px;
  border: 1px solid var(--co-line);
  border-radius: 11px;
  background: var(--co-white);
  color: var(--co-ink);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.nlp-checkout .form-control::placeholder {
  color: #9AAAAF;
}

.nlp-checkout .form-control:focus {
  border-color: var(--co-sky);
  box-shadow: 0 0 0 3px var(--co-sky-tint);
  outline: 0;
}

.nlp-checkout textarea.form-control {
  min-height: 92px;
  resize: vertical;
}

/* Bootstrap paints .help-block on every field whether or not it holds an error;
   empty ones would otherwise reserve a line under each input. */
.nlp-checkout .help-block {
  margin: 0;
  font-size: 12.5px;
  color: var(--co-danger);
}

.nlp-checkout .help-block:empty,
.nlp-checkout .help-block>strong:empty {
  display: none;
}

.nlp-checkout .help-block>strong {
  font-weight: 500;
}

.nlp-checkout .has-error .form-control {
  border-color: var(--co-danger);
}

.nlp-checkout .has-error .form-control:focus {
  box-shadow: 0 0 0 3px var(--co-danger-soft);
}

.nlp-checkout .has-error label,
.nlp-checkout .has-error .control-label {
  color: var(--co-danger);
}

/* bootstrap-select renders a button in place of the <select>. */
.nlp-checkout .bootstrap-select>.dropdown-toggle {
  padding: 12px 14px;
  border: 1px solid var(--co-line);
  border-radius: 11px;
  background: var(--co-white);
  color: var(--co-ink);
  font-family: inherit;
  font-size: 14.5px;
  box-shadow: none;
  height: auto;
}

.nlp-checkout .bootstrap-select>.dropdown-toggle:hover,
.nlp-checkout .bootstrap-select>.dropdown-toggle:focus,
.nlp-checkout .bootstrap-select.open>.dropdown-toggle {
  background: var(--co-white);
  border-color: var(--co-sky);
  box-shadow: 0 0 0 3px var(--co-sky-tint);
}

.nlp-checkout .bootstrap-select .dropdown-menu {
  border: 1px solid var(--co-line);
  border-radius: var(--co-radius-sm);
  box-shadow: var(--co-shadow-lift);
  padding: 6px;
}

.nlp-checkout .bootstrap-select .dropdown-menu li a {
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
}

/* ---------- "or" divider + Google ---------- */
.nlp-checkout .co-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 16px;
  font-size: 12px;
  color: var(--co-text-soft);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-family: 'Poppins', sans-serif;
}

.nlp-checkout .co-or::before,
.nlp-checkout .co-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--co-line);
}

.nlp-checkout .co-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 18px;
  border: 1px solid var(--co-line);
  border-radius: 999px;
  background: var(--co-white);
  color: var(--co-ink);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  transition: border-color .15s ease, background .15s ease;
}

.nlp-checkout .co-google:hover {
  border-color: var(--co-sky-line);
  background: var(--co-sky-tint);
  color: var(--co-ink);
}

.nlp-checkout .co-google img {
  width: 20px;
  height: 20px;
}

/* ============ selectable rows (payment plan + payment method) ============
   .payment_method_item is a legacy name the JS adds/removes 'active' on and
   hides through .payment_cc / .payment_other / .non-group-payment-method. The
   row is restyled into a v3 selection card; the hooks are untouched. */
.nlp-checkout .co-plans {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nlp-checkout .payment_method_item {
  border: 1px solid var(--co-line);
  border-radius: 14px;
  background: var(--co-white);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.nlp-checkout .payment_method_item:hover {
  border-color: var(--co-sky-line);
}

.nlp-checkout .payment_method_item.active {
  border-color: var(--co-sky);
  box-shadow: 0 0 0 3px var(--co-sky-tint);
}

.nlp-checkout .payment_method_item_header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.nlp-checkout .payment_method_item .radio {
  margin: 0;
  padding: 0;
  min-width: 0;
}

.nlp-checkout .payment_method_item .radio>label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding-left: 28px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--co-ink);
  cursor: pointer;
  min-height: 20px;
}

.nlp-checkout .co-pay-mark {
  flex: 0 0 auto;
  opacity: .85;
}

/* Nifty's magic-radio / magic-checkbox: keep the mechanism, restyle the dot. */
.nlp-checkout .magic-radio+label::before,
.nlp-checkout .magic-checkbox+label::before {
  width: 19px;
  height: 19px;
  top: 50%;
  margin-top: -9.5px;
  left: 0;
  border: 1.5px solid #C7D5D5;
  background: var(--co-white);
}

.nlp-checkout .magic-radio+label::after {
  width: 9px;
  height: 9px;
  top: 50%;
  margin-top: -4.5px;
  left: 5px;
  background: #fff;
}

.nlp-checkout .magic-radio:checked+label::before,
.nlp-checkout .magic-checkbox:checked+label::before {
  border-color: var(--co-sky);
  background: var(--co-sky);
}

.nlp-checkout .magic-checkbox:checked+label::after {
  top: 50%;
  margin-top: -6px;
  left: 6px;
}

.nlp-checkout .magic-radio:focus+label::before,
.nlp-checkout .magic-checkbox:focus+label::before {
  box-shadow: 0 0 0 3px var(--co-sky-tint);
}

.nlp-checkout .co-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.5;
}

.nlp-checkout .co-tag-green {
  background: var(--co-green-soft);
  color: var(--co-green-deep);
}

.nlp-checkout .co-tag-sky {
  background: var(--co-sky-tint);
  color: var(--co-sky-deep);
}

.nlp-checkout .payment_method_item_body {
  padding: 4px 16px 18px;
  border-top: 1px solid var(--co-line);
  margin-top: 2px;
}

.nlp-checkout .co-plan-body {
  background: var(--co-mist);
}

.nlp-checkout .co-plan-title {
  font-weight: 600;
  color: var(--co-ink);
  margin: 14px 0 10px;
}

/* ---------- tick list ---------- */
.nlp-checkout .co-ticks {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.nlp-checkout .co-ticks li {
  position: relative;
  padding-left: 27px;
  font-size: 14px;
  color: var(--co-text-soft);
}

.nlp-checkout .co-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--co-green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7A6F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* ============ certificate offer ============ */
.nlp-checkout .co-cert {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 24px;
  align-items: start;
}

.nlp-checkout .co-cert-art img {
  border-radius: var(--co-radius-sm);
}

.nlp-checkout .co-cert-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 16px 0 4px;
}

.nlp-checkout .co-cert-price del {
  color: var(--co-text-soft);
  font-size: 15px;
}

.nlp-checkout .co-cert-price b {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  color: var(--co-ink);
  font-weight: 600;
}

/* Switchery draws its own pill; only the row around it is ours. */
.nlp-checkout .co-switch-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid var(--co-line);
  border-radius: 13px;
  background: var(--co-mist);
}

.nlp-checkout .co-switch-label {
  flex: 1;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--co-ink);
}

.nlp-checkout .switchery {
  flex: 0 0 auto;
}

/* ============ gift-card-covers-everything notice ============ */
.nlp-checkout .giftcard-covered-notice {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--co-green);
  border-radius: 14px;
  background: var(--co-green-soft);
  color: var(--co-green-deep);
  font-size: 14.5px;
}

.nlp-checkout .giftcard-covered-notice.hidden {
  display: none;
}

.nlp-checkout .giftcard-covered-notice .fa {
  font-size: 18px;
}

/* ============ Stripe payment element ============ */
.nlp-checkout #payment-element,
.nlp-checkout #address-element {
  margin-top: 12px;
}

/* ============ upsells ============
   front.css paints .checkout-upsell-section with its own border, padding and
   a blue fill. Here the section is only a wrapper — each group inside it is a
   co-card — and when there is nothing to upsell it holds a single empty div,
   which the theme would otherwise render as an empty blue box. */
.nlp-checkout .checkout-upsell-section {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
}

/* The offer now lives in a ~380px rail, not across the main column, so the card
   stacks: thumbnail beside the title, the bundle line under it, and the button
   full width at the foot. The partials are shared with the live page (and the
   handler re-appends server-rendered copies of them), so none of this touches
   their markup. */
.nlp-checkout .co-upsells {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nlp-checkout .upsell_course_item {
  width: 100%;
  padding: 0;
  margin: 0;
  float: none;
}

.nlp-checkout .learn-checkout-cart-card-item {
  border-radius: 14px;
}

.nlp-checkout .learn-checkout-upsell-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 14px;
}

.nlp-checkout .learn-checkout-upsell-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.nlp-checkout .checkout-upsell-image {
  flex: 0 0 auto;
  width: 54px;
}

.nlp-checkout .checkout-upsell-image img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 10px;
}

.nlp-checkout .checkout-upsell-content {
  min-width: 0;
  flex: 1;
}

/* Nifty's .text-overflow is on the title in both partials: nowrap + ellipsis,
   which in this width clipped every course to "Art Life …". Two lines instead. */
.nlp-checkout .checkout-upsell-content>p:first-child {
  font-size: 14px;
  font-weight: 600;
  color: var(--co-ink);
  line-height: 1.35;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.nlp-checkout .checkout-upsell-content>div {
  font-size: 12.5px;
  line-height: 1.5;
}

.nlp-checkout .learn-checkout-upsell-right {
  flex: 0 0 auto;
}

.nlp-checkout .learn-checkout-cart-right-price {
  font-weight: 700;
  color: var(--co-ink);
  font-size: 14px;
}

.nlp-checkout .checkout-upsell-content del {
  color: var(--co-text-soft);
}

.nlp-checkout .co-side .co-card {
  padding: 20px 18px;
}

.nlp-checkout .co-side .co-card-head {
  margin-bottom: 14px;
}

.nlp-checkout .co-side .co-card-head h2 {
  font-size: 19px;
}

/* .checkout-upsell-course is a Bootstrap .btn the JS binds by class, so it is
   restyled in place rather than renamed. */
.nlp-checkout .btn.checkout-upsell-course {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 999px;
  background: var(--co-sky);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 18px;
  box-shadow: none;
  text-transform: none;
  white-space: normal;
}

.nlp-checkout .btn.checkout-upsell-course:hover,
.nlp-checkout .btn.checkout-upsell-course:focus {
  background: var(--co-sky-deep);
  color: #fff;
}

/* ============ the sidebar: cross-sell ============
   The rail holds the upsell and nothing else. It is sticky so the offer stays
   alongside the form; --co-head-offset clears the v3 header, which is sticky
   and 67px tall (the same number blog_detail_v3.css parks its contents rail
   on). It is short, so unlike the summary it needs no height cap. */
.nlp-checkout .co-side {
  min-width: 0;
  position: sticky;
  top: var(--co-head-offset);
}

/* Nothing to cross-sell — either none was configured, or the shopper added the
   last one and the inline JS hid .upsell_course_group. Either way the rail is
   empty, so the flow takes the full width instead of sitting next to a gap. */
.nlp-checkout .co-grid[data-noside] {
  grid-template-columns: minmax(0, 1fr);
}

.nlp-checkout .co-grid[data-noside] .co-side {
  display: none;
}

/* ============ the order summary ============
   One inside each step now, at the position the live page puts it, so it is
   just another card in the flow — same width and spacing as the cards around
   it, nothing sticky. It renders twice; nothing here may key off an id. */
.nlp-checkout .co-summary {
  background: var(--co-white);
  border: 1px solid var(--co-line);
  border-radius: var(--co-radius);
  box-shadow: var(--co-shadow);
  padding: 26px 28px;
  margin-bottom: 18px;
}

/* ---------- step-1 course list (the 'light' variant) ----------
   .list-group / .list-group-item are Bootstrap; stripped back to a plain row. */
.nlp-checkout .co-items-light {
  margin: 0;
  padding: 0;
}

.nlp-checkout .co-items-light .list-group-item {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 0;
  border-bottom: 1px solid var(--co-line);
  border-radius: 0;
  padding: 12px 0;
  background: none;
  font-size: 14px;
  color: var(--co-ink);
}

.nlp-checkout .co-items-light .list-group-item:last-child {
  border-bottom: 0;
}

.nlp-checkout .co-li-title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nlp-checkout .co-li-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  font-weight: 600;
}

.nlp-checkout .co-sum-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}

.nlp-checkout .co-sum-head h2 {
  font-size: 19px;
}

.nlp-checkout .co-sum-count {
  font-size: 12.5px;
  color: var(--co-text-soft);
}

/* Desktop shows the summary open and has no use for the toggle. */
.nlp-checkout .co-sum-toggle {
  display: none;
}

/* ---------- course rows ----------
   .learn-checkout-card-item is also the class of the markup the upsell
   add-to-cart appends from the server, so an added course inherits this. */
.nlp-checkout .co-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nlp-checkout .learn-checkout-card-item {
  border: 1px solid var(--co-line);
  border-radius: 13px;
  padding: 12px;
  background: var(--co-white);
}

.nlp-checkout .learn-checkout-cart-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.nlp-checkout .learn-checkout-card-item-content {
  display: flex;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.nlp-checkout .checkout-card-item-image {
  flex: 0 0 auto;
  width: 54px;
}

.nlp-checkout .checkout-card-item-image img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 9px;
}

.nlp-checkout .checkout-card-item-course-content {
  min-width: 0;
}

.nlp-checkout .checkout-card-item-course-content>p:first-child {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--co-ink);
  line-height: 1.4;
}

.nlp-checkout .checkout-card-item-course-content .course-item-price {
  font-weight: 700;
  color: var(--co-ink);
  font-size: 13.5px;
}

.nlp-checkout .group_option_price {
  color: var(--co-text-soft);
  font-size: 13px;
}

.nlp-checkout .learn-checkout-cart-right {
  flex: 0 0 auto;
}

.nlp-checkout .delete_cart {
  color: #A9B7BB;
  transition: color .15s ease;
}

.nlp-checkout .delete_cart:hover {
  color: var(--co-danger);
}

.nlp-checkout .learn-checkout-bonus-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--co-green-soft);
  color: var(--co-green-deep);
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* per-course printed-certificate toggle inside a summary row */
.nlp-checkout .learn-checkout-certificate-form {
  margin-top: 10px;
  font-size: 12.5px;
}

.nlp-checkout .learn-checkout-certificate-form hr {
  margin: 10px 0;
}

.nlp-checkout .learn-checkout-certificate-form .flex {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nlp-checkout .learn-checkout-certificate-form .course-item-price {
  font-weight: 700;
}

/* ---------- gift-card balance ---------- */
.nlp-checkout .co-giftcard-balance {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 13px 14px;
  border: 1px solid var(--co-line);
  border-radius: 13px;
  background: var(--co-mist);
}

.nlp-checkout .co-giftcard-balance-text {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--co-ink);
}

.nlp-checkout .co-giftcard-balance-text small {
  display: block;
  color: var(--co-text-soft);
  font-size: 12px;
}

/* ---------- coupon ---------- */
.nlp-checkout .co-coupon {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--co-line);
}

.nlp-checkout .co-coupon.hidden {
  display: none;
}

.nlp-checkout .co-coupon>label {
  display: block;
  margin: 0 0 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--co-ink);
}

.nlp-checkout .co-coupon-row {
  display: flex;
  gap: 8px;
}

.nlp-checkout .co-coupon-row .form-control {
  flex: 1;
  min-width: 0;
}

.nlp-checkout .co-coupon-row .co-btn {
  padding: 11px 18px;
  font-size: 13px;
}

.nlp-checkout .notification_label_part:not(:empty) {
  margin-top: 10px;
}

.nlp-checkout .notification_label_part .alert {
  margin: 0;
  padding: 10px 13px;
  border-radius: 11px;
  font-size: 13px;
  border: 0;
}

.nlp-checkout .notification_label_part .alert-success {
  background: var(--co-green-soft);
  color: var(--co-green-deep);
}

.nlp-checkout .notification_label_part .alert-danger {
  background: var(--co-danger-soft);
  color: var(--co-danger);
}

/* ---------- price lines ---------- */
.nlp-checkout .co-lines {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--co-line);
}

.nlp-checkout .co-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  padding: 5px 0;
  color: var(--co-text);
}

.nlp-checkout .co-line>span:last-child {
  font-weight: 600;
  color: var(--co-ink);
  white-space: nowrap;
}

.nlp-checkout .co-line-green,
.nlp-checkout .co-line-green>span:last-child {
  color: var(--co-green-deep);
}

.nlp-checkout .co-line-note {
  font-size: 12px;
  color: var(--co-text-soft);
  margin-top: -2px;
}

.nlp-checkout .co-line.hidden {
  display: none;
}

.nlp-checkout .co-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-top: 14px;
  padding-top: 15px;
  border-top: 1px solid var(--co-line);
}

.nlp-checkout .co-total>span:first-child {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--co-text-soft);
}

.nlp-checkout .co-total .cart-total-price {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--co-ink);
  line-height: 1.1;
  white-space: nowrap;
}

/* ---------- actions ----------
   One block at the foot of each step, holding that step's real button. The two
   are in separate panes now, so nothing has to hide one against the other — the
   pane's own display:none does it. .co-grid[data-step] survives only because
   the sidebar logic still reads it. */
.nlp-checkout .co-actions {
  margin-top: 2px;
  margin-bottom: 8px;
}

/* The reassurance points read as a centred row under the button, wrapping back
   to one per line when the column narrows. */
.nlp-checkout .co-trust {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  justify-content: center;
}

.nlp-checkout .co-trust li {
  position: relative;
  padding-left: 24px;
  font-size: 12.5px;
  color: var(--co-text-soft);
}

.nlp-checkout .co-trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232EA194' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- currency + modes ---------- */
.nlp-checkout .co-side-foot {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--co-line);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
  align-items: flex-start;
}

.nlp-checkout .co-currency {
  flex: 0 0 220px;
  max-width: 100%;
}

.nlp-checkout .checkout-mode-menu {
  flex: 1 1 300px;
  min-width: 0;
}

.nlp-checkout .co-currency>label {
  display: block;
  margin: 0 0 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--co-ink);
}

.nlp-checkout .co-modes-label {
  margin: 0 0 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--co-text-soft);
}

.nlp-checkout .co-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.nlp-checkout .co-modes>li {
  margin: 0;
  padding: 0;
}

.nlp-checkout .co-modes .menu-item {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--co-line);
  background: var(--co-white);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--co-text);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.nlp-checkout .co-modes .menu-item:hover {
  border-color: var(--co-sky-line);
  background: var(--co-sky-tint);
  color: var(--co-sky-deep);
}

/* .active is set by the mode JS when a mode is switched on. */
.nlp-checkout .co-modes .menu-item.active {
  border-color: var(--co-sky);
  background: var(--co-sky);
  color: #fff;
}

/* ============ mode panels (group / gift / gift card) ============
   The three partials keep their .team-section / .gift-section / .giftcard-section
   hooks; the boxes around them become v3 cards. */
.nlp-checkout .team-section,
.nlp-checkout .gift-section,
.nlp-checkout .giftcard-section {
  background: var(--co-white);
  border: 1px solid var(--co-line);
  border-radius: var(--co-radius);
  box-shadow: var(--co-shadow);
  padding: 26px 28px;
  margin: 0 0 18px;
}

.nlp-checkout .team-section.hidden,
.nlp-checkout .gift-section.hidden,
.nlp-checkout .giftcard-section.hidden {
  display: none;
}

.nlp-checkout .team-section>p:first-child,
.nlp-checkout .gift-section p.pt-20 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  color: var(--co-ink);
  line-height: 1.16;
}

.nlp-checkout .team-section .p3_13,
.nlp-checkout .gift-section .p3_13 {
  font-size: 13.5px;
  color: var(--co-text-soft);
  margin-top: 6px;
}

.nlp-checkout .team-section .pl-2 {
  padding-left: 0;
}

.nlp-checkout .gift-section .form-group,
.nlp-checkout .team-section .form-group {
  margin: 14px 0 0;
}

.nlp-checkout .gift-section .form-group>label,
.nlp-checkout .team-section .form-group>label {
  display: block;
  float: none;
  width: auto;
  padding: 0;
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--co-ink);
}

.nlp-checkout .gift-section .col-lg-12,
.nlp-checkout .gift-section .col-lg-6,
.nlp-checkout .team-section .col-lg-12,
.nlp-checkout .team-section .col-lg-6 {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  float: none;
}

.nlp-checkout .team-section .empty-state {
  padding: 16px;
  border: 1px dashed var(--co-line);
  border-radius: 12px;
  background: var(--co-mist);
  color: var(--co-text-soft);
  font-size: 13px;
  text-align: center;
}

.nlp-checkout .team-section .team-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: start;
  margin-top: 10px;
}

.nlp-checkout .btn-link {
  color: var(--co-sky-deep);
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 0;
  background: none;
  border: 0;
}

.nlp-checkout .btn-link:hover {
  color: var(--co-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nlp-checkout .add-btn-wrapper {
  margin-top: 10px;
}

.nlp-checkout .checkbox {
  margin: 14px 0 0;
}

.nlp-checkout .checkbox label {
  padding-left: 28px;
  font-size: 14px;
  color: var(--co-ink);
}

/* ---------- gift card ---------- */
.nlp-checkout .gc-grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: 24px;
  align-items: start;
}

.nlp-checkout .gc-preview-col {
  min-width: 0;
}

.nlp-checkout .gc-form-col {
  min-width: 0;
}

.nlp-checkout .gc-card {
  border-radius: 16px;
  padding: 20px;
  background: linear-gradient(135deg, var(--co-teal) 0%, var(--co-teal-deep) 100%);
  color: #fff;
  box-shadow: var(--co-shadow-lift);
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 190px;
}

.nlp-checkout .gc-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nlp-checkout .gc-brand {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
}

.nlp-checkout .gc-card-mid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: auto;
}

.nlp-checkout .gc-card-occasion {
  font-size: 12px;
  opacity: .82;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

.nlp-checkout .gc-card-amount {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.1;
}

.nlp-checkout .gc-card-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  opacity: .78;
}

.nlp-checkout .gc-preview-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--co-text-soft);
}

.nlp-checkout .gc-label {
  display: block;
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--co-ink);
}

.nlp-checkout .gc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nlp-checkout .gc-chip {
  margin: 0;
  cursor: pointer;
}

.nlp-checkout .gc-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.nlp-checkout .gc-chip-box {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--co-line);
  background: var(--co-white);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--co-text);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.nlp-checkout .gc-chip:hover .gc-chip-box {
  border-color: var(--co-sky-line);
}

.nlp-checkout .gc-chip input:checked+.gc-chip-box {
  border-color: var(--co-sky);
  background: var(--co-sky-tint);
  color: var(--co-sky-deep);
}

.nlp-checkout .gc-chip input:focus-visible+.gc-chip-box {
  box-shadow: 0 0 0 3px var(--co-sky-tint);
}

.nlp-checkout .gc-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.nlp-checkout .gc-bulk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}

.nlp-checkout .gc-error {
  color: var(--co-danger);
  font-size: 13px;
}

.nlp-checkout .gc-error.hidden,
.nlp-checkout .gc-arrival-date.hidden,
.nlp-checkout .gc-bulk-recipients.hidden,
.nlp-checkout .gc-collapsed.hidden {
  display: none;
}

.nlp-checkout .gc-team-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 15px 17px;
  border: 1px solid var(--co-line);
  border-radius: 14px;
  background: var(--co-mist);
}

.nlp-checkout .gc-team-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--co-sky-tint);
  color: var(--co-sky-deep);
}

.nlp-checkout .gc-team-text {
  flex: 1;
  min-width: 0;
}

.nlp-checkout .gc-team-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--co-ink);
}

.nlp-checkout .gc-team-desc {
  font-size: 12.5px;
  color: var(--co-text-soft);
}

.nlp-checkout .gc-collapsed-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 17px;
  border: 1px solid var(--co-green);
  border-radius: 14px;
  background: var(--co-green-soft);
}

.nlp-checkout .gc-collapsed-icon {
  flex: 0 0 auto;
}

.nlp-checkout .gc-collapsed-info {
  flex: 1;
  min-width: 0;
}

.nlp-checkout .gc-collapsed-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--co-green-deep);
}

.nlp-checkout .gc-collapsed-line {
  font-size: 12.5px;
  color: var(--co-text-soft);
}

.nlp-checkout .gc-collapsed-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* The gift-card and team panels use Bootstrap .btn variants the JS binds by
   class; restyled in place, same reason as .checkout-upsell-course. */
.nlp-checkout .btn.gc-addtocart-btn {
  border: 0;
  border-radius: 999px;
  background: var(--co-sky);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 13px 24px;
  box-shadow: none;
  text-transform: none;
}

.nlp-checkout .btn.gc-addtocart-btn:hover,
.nlp-checkout .btn.gc-addtocart-btn:focus {
  background: var(--co-sky-deep);
  color: #fff;
}

.nlp-checkout .btn.btn-default {
  border: 1px solid var(--co-line);
  border-radius: 999px;
  background: var(--co-white);
  color: var(--co-ink);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  box-shadow: none;
  text-transform: none;
}

.nlp-checkout .btn.btn-default:hover,
.nlp-checkout .btn.btn-default:focus {
  border-color: var(--co-sky-line);
  background: var(--co-sky-tint);
  color: var(--co-sky-deep);
}

/* ============ reviews ============ */
.nlp-checkout .co-reviews {
  padding: 56px 0 52px;
  background: var(--co-white);
  border-top: 1px solid var(--co-line);
}

/* Left-aligned like the prototype's section heads — a centred heading over a
   left-aligned row of cards reads as two different grids. The carousel's
   arrows ride at the far end of this row, the way the v3 homepage rails do. */
.nlp-checkout .co-reviews-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.nlp-checkout .co-reviews-title {
  min-width: 0;
}

.nlp-checkout .co-reviews-head h2 {
  font-size: clamp(24px, 3vw, 33px);
  margin-top: 7px;
}

/* Same control as .rail-nav in home_v3.css. slick's stylesheet positions
   .slick-prev/.slick-next absolutely against the slider and hides their text
   with a transparent colour — both are undone here so the buttons can simply
   sit in the head, and so currentColor reaches the chevron. */
.nlp-checkout .co-reviews-nav {
  margin-left: auto;
  display: flex;
  gap: 9px;
  flex: 0 0 auto;
}

.nlp-checkout .co-reviews-nav .slick-prev,
.nlp-checkout .co-reviews-nav .slick-next {
  position: static;
  transform: none;
  margin: 0;
  padding: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--co-line);
  background: var(--co-white);
  color: var(--co-ink);
  display: grid;
  place-items: center;
  box-shadow: var(--co-shadow);
  font-size: 0;
  line-height: 0;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.nlp-checkout .co-reviews-nav .slick-prev:hover,
.nlp-checkout .co-reviews-nav .slick-next:hover,
.nlp-checkout .co-reviews-nav .slick-prev:focus,
.nlp-checkout .co-reviews-nav .slick-next:focus {
  background: var(--co-sky-tint);
  color: var(--co-sky-deep);
}

/* The strip loops, so slick only marks an arrow disabled if every review fits
   on screen at once — in which case it genuinely has nowhere to go. */
.nlp-checkout .co-reviews-nav .slick-disabled {
  opacity: .28;
  cursor: default;
  box-shadow: none;
}

.nlp-checkout .co-reviews-nav svg {
  width: 15px;
  height: 15px;
}

.nlp-checkout .co-reviews-head h2 em {
  font-style: italic;
  color: var(--co-teal);
}

/* Three across, inside the page column. The slider is a direct child of
   .co-wrap, so it inherits the 1200px width the checkout above it uses; the
   negative margin only cancels the card gutter so the outer cards line up with
   the grid edge instead of sitting 9px inside it. */
/* No width:100% here on purpose — an explicit width would ignore the negative
   margins and only shift the strip left, leaving the last card 18px short of
   the grid's right edge. Letting it auto-size lets the margins widen it by
   exactly the two outer gutters, so the outer cards line up with the columns. */
.nlp-checkout .testimonial-slider {
  padding: 4px 0 10px;
  margin: 0 -9px;
}

.nlp-checkout .slick-list {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* slick puts .slick-slide on .testimonial-item itself (the cards are direct
   children of .slider), so the gutter is a margin on the card. Slides are
   flex items of the track and stretch to the tallest — height:100% is what
   makes every card in view the same height. */
.nlp-checkout .testimonial-item {
  margin: 0 9px;
  height: auto;
  padding: 22px 24px;
  border-radius: var(--co-radius);
  text-align: left;
  background: var(--co-white);
  border: 1px solid var(--co-line);
  box-shadow: var(--co-shadow);
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.nlp-checkout .slick-track {
  display: flex;
  align-items: stretch;
}

.nlp-checkout .slick-slide {
  height: auto;
  float: none;
}

.nlp-checkout .co-review-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nlp-checkout .learn-review-placeholder,
.nlp-checkout .placeholder-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--co-sky-tint);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.nlp-checkout .co-review-who {
  min-width: 0;
}

.nlp-checkout .co-review-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--co-ink);
}

/* The course title. Two lines at most — some certifications have long names
   and a third line would push the quote out of alignment across the row. */
.nlp-checkout .co-review-role {
  font-size: 12.5px;
  color: var(--co-text-soft);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nlp-checkout .testimonial-stars {
  font-size: 15px;
  color: var(--co-gold);
  letter-spacing: 2px;
}

/* text-align is set explicitly: front.css centres .learn-checkout-review-content
   at 30px for the old full-bleed strip, and a centred quote in a narrow column
   reads badly. Everything else here already outranks that rule on specificity. */
.nlp-checkout .testerminal_review_content {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15.5px;
  line-height: 1.55;
  letter-spacing: normal;
  color: var(--co-ink);
}

/* The slick config in the blade supplies its own arrows —
   <button class="slick-prev custom-arrow"><svg>…</svg></button> — so the
   chevron is a real child element, not a pseudo. slick-theme draws a font glyph
   in :before, which would show up as a second arrow next to that child.
   The buttons themselves are styled under .co-reviews-nav further up: they are
   appended into the section head, not positioned over the slider. */
.nlp-checkout .slick-prev:before,
.nlp-checkout .slick-next:before {
  content: none;
}

/* ============ guarantee band ============ */
.nlp-checkout .co-guarantee {
  background: var(--co-teal-tint);
  padding: 46px 0;
}

.nlp-checkout .co-guarantee-in {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.nlp-checkout .co-guarantee-copy h2 {
  font-size: clamp(23px, 2.6vw, 30px);
  margin: 7px 0 10px;
}

.nlp-checkout .co-guarantee-copy p {
  font-size: 14.5px;
  color: var(--co-text-soft);
  max-width: 60ch;
}

.nlp-checkout .co-guarantee .kicker {
  color: var(--co-teal-deep);
}

/* ============ responsive ============ */
@media (max-width: 1100px) {
  .nlp-checkout .co-grid {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 22px;
  }
}

@media (max-width: 991px) {

  /* One column. The rail is the cross-sell now, so it follows the flow rather
     than leading it — no order override, and nothing sticky at this width. */
  .nlp-checkout .co-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .nlp-checkout .co-side {
    position: static;
  }

  /* The summary still collapses to its header here: it sits between the form
     and the pay button, and expanded it would push the button off the screen. */
  .nlp-checkout .co-summary {
    padding: 0;
    overflow: hidden;
  }

  .nlp-checkout .co-sum-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 18px;
    border: 0;
    background: var(--co-white);
    text-align: left;
  }

  .nlp-checkout .co-sum-toggle-label {
    flex: 1;
    min-width: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--co-ink);
  }

  .nlp-checkout .co-sum-toggle .co-sum-count {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
  }

  /* .co-total sits outside .co-sum-body, so it is on screen in both states and
     already carries the price — the toggle would only repeat it. The element
     stays in the DOM because it is a .cart-total-price the pricing JS writes to. */
  .nlp-checkout .co-sum-toggle-price {
    display: none;
  }

  .nlp-checkout .co-sum-caret {
    color: var(--co-text-soft);
    transition: transform .2s ease;
  }

  .nlp-checkout .co-sum-toggle[aria-expanded="true"] .co-sum-caret {
    transform: rotate(180deg);
  }

  .nlp-checkout .co-sum-body {
    display: none;
    padding: 0 18px;
  }

  .nlp-checkout .co-sum-body.is-open {
    display: block;
  }

  .nlp-checkout .co-sum-head {
    display: none;
  }

  .nlp-checkout .co-total,
  .nlp-checkout .co-actions,
  .nlp-checkout .co-trust,
  .nlp-checkout .co-side-foot {
    margin-left: 18px;
    margin-right: 18px;
  }

  .nlp-checkout .co-side-foot {
    padding-bottom: 20px;
  }

  .nlp-checkout .co-cert,
  .nlp-checkout .gc-grid,
  .nlp-checkout .co-guarantee-in {
    grid-template-columns: minmax(0, 1fr);
  }

  .nlp-checkout .co-guarantee-art {
    max-width: 170px;
  }
}

@media (max-width: 767px) {
  .nlp-checkout .co-wrap {
    padding: 0 18px;
  }

  .nlp-checkout .co-head {
    padding: 26px 0 20px;
    text-align: left;
  }

  .nlp-checkout .co-promo {
    margin-left: 0;
  }

  .nlp-checkout .co-card,
  .nlp-checkout .team-section,
  .nlp-checkout .gift-section,
  .nlp-checkout .giftcard-section {
    padding: 20px 18px;
    border-radius: 15px;
  }

  .nlp-checkout .co-fields,
  .nlp-checkout .co-fields-3,
  .nlp-checkout .gc-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .nlp-checkout .co-step-t {
    font-size: 13px;
  }

  .nlp-checkout .nav-tabs.co-steps {
    gap: 8px;
  }

  .nlp-checkout .co-steps .learn_auth_navigation_item {
    padding: 11px 12px;
    gap: 9px;
  }

  .nlp-checkout .co-total .cart-total-price {
    font-size: 26px;
  }

  .nlp-checkout .learn-checkout-upsell-item {
    flex-wrap: wrap;
  }

  /* The thumbnail is 54px against a column that also carries the price and the
     add-to-cart button at this width (.learn-checkout-upsell-right is hidden-xs,
     so the .visible-xs button sits inside the content). flex-start left it
     stranded at the top; centre it against the column it sits beside. */
  .nlp-checkout .learn-checkout-upsell-left {
    align-items: center;
  }

  .nlp-checkout .team-section .team-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .nlp-checkout .gc-bulk-row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One card at a time here, so it gets the room for a longer excerpt. The
     arrows stay in the head and wrap under the heading when it needs the width. */
  .nlp-checkout .co-reviews {
    padding: 40px 0 40px;
  }

  .nlp-checkout .co-reviews-nav {
    margin-left: 0;
  }

  .nlp-checkout .testerminal_review_content {
    -webkit-line-clamp: 8;
  }

  .nlp-checkout .testimonial-item {
    padding: 20px 18px;
  }

  /* Payment plan + payment method rows are centred at this width. Two things
     are wrong on the desktop row once it is this narrow: the card mark sits on
     the far right and squeezes a label like "Saved card (XXXX4242)" into three
     ragged lines, and the label's 28px dot gutter is one-sided, so centred text
     lands 14px right of the row's centre — the "2 monthly installments" tilt.
     So the mark drops under the label, and the gutter is mirrored on the right
     to put the text back on the row's axis. The dot stays pinned to the left
     edge (position: absolute in nifty's magic-radio) — that is the affordance,
     and unpinning it would need the ::before/::after pair back in flow. */
  .nlp-checkout .co-plans .payment_method_item_header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    text-align: center;
  }

  .nlp-checkout .co-plans .payment_method_item .radio>label {
    justify-content: center;
    text-align: center;
    padding-right: 28px;
    /* nifty's .magic-radio + label:not(:empty) sets text-indent: 25px, which the
       label's span inherits. Centred, that indents the FIRST line only and drops
       it 12.5px off the axis while the wrapped lines under it sit true — the
       visible tilt on "2 monthly installments of $51.00". The dot gutter is real
       padding here, so the indent has nothing left to do. Mobile only: desktop
       labels are left-aligned and keep the indent they ship with. */
    text-indent: 0;
  }

  .nlp-checkout .co-plans .co-pay-mark {
    align-self: center;
  }

  /* The dot is drawn by the label's ::before at top: 50%, so it centres on the
     LABEL — which is now just the first line of a two-line row, leaving the dot
     high against the label + card-mark stack. Re-anchor it to the row instead:
     the header is the only box whose height is the whole row, and its vertical
     padding is symmetric, so its 50% IS the row's centre. Both .radio (nifty
     ships it position: relative) and the label have to go static for the header
     to become the containing block; the input itself is position: fixed and
     parked off-screen, so it does not care. left then counts from the header's
     padding box, hence + its own 16px padding to land where .radio starts. */
  .nlp-checkout .co-plans .payment_method_item_header {
    position: relative;
  }

  .nlp-checkout .co-plans .payment_method_item .radio,
  .nlp-checkout .co-plans .payment_method_item .radio>label {
    position: static;
  }

  .nlp-checkout .co-plans .payment_method_item .radio>label::before {
    left: 16px;
  }

  .nlp-checkout .co-plans .payment_method_item .radio>label::after {
    left: 21px;
  }

  /* The membership plan's own body (title + ticks) follows the header. */
  .nlp-checkout .co-plan-body {
    text-align: center;
  }

  /* inline-flex, not inline-block: it shrink-wraps so text-align centres the
     whole list, and the base rule's column + 9px gap survive. The tick rows
     themselves stay left-aligned — centred bullets read as a mistake. */
  .nlp-checkout .co-plan-body .co-ticks {
    display: inline-flex;
    text-align: left;
  }

  /* Guarantee band: badge over centred copy. */
  .nlp-checkout .co-guarantee-in {
    justify-items: center;
    text-align: center;
  }

  .nlp-checkout .co-guarantee-art {
    margin-left: auto;
    margin-right: auto;
  }

  .nlp-checkout .co-guarantee-copy p {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (prefers-reduced-motion: reduce) {

  .nlp-checkout *,
  .nlp-checkout *::before,
  .nlp-checkout *::after {
    transition-duration: .01ms;
    animation-duration: .01ms;
  }
}