/**
 * @file
 * CycleIn basket page.
 *
 * Styles tso_ecommerce's basket form to match the supplied Basket Guest,
 * Basket Signed in, Basket Empty and Basket Focus designs. All rules are
 * scoped to the form because the upstream module owns the basket markup.
 */

/* The design sets the basket on a light-grey canvas with a centred 1200px
   content area. The :has() scope prevents the page-shell adjustment leaking
   to other routes if the form is ever rendered outside /basket. */
.cyclein-page__main:has(.tso-ecommerce-basket-form) {
  background: var(--color-green-light, #f0f0f0);
  padding-block: var(--space-80, 80px) var(--space-96, 96px);
}

.cyclein-page__main:has(.tso-ecommerce-basket-form)
  .cyclein-region--content
  > .cyclein-region__inner {
  inline-size: 100%;
  max-inline-size: 100%;
}

.tso-ecommerce-basket-form {
  display: grid;
  gap: 0 var(--layout-gutter, 24px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Page context and checkout progress. These are supplied by the custom
   form-alter because tso_ecommerce's route does not emit a title block. */
.cyclein-basket-header {
  display: grid;
  grid-column: 1 / -1;
  justify-items: start;
  margin-block-end: var(--space-32, 32px);
}

.cyclein-basket-header__back {
  align-items: center;
  display: inline-flex;
  gap: var(--space-8, 8px);
  margin-block-end: var(--space-32, 32px);
  text-decoration: none;
}

.cyclein-basket-header__back-label {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.cyclein-basket-header__back::before {
  content: "\2190";
  font-size: 1.35em;
  line-height: 1;
}

.cyclein-basket-header__title {
  font-family: var(--font-family-base);
  font-size: var(--type-h2-size, 35px);
  line-height: var(--type-h2-line-height, 1.2);
  margin: 0 0 var(--space-8, 8px);
}

.cyclein-basket-header__intro {
  font-size: var(--type-body-large-size, 20px);
  line-height: var(--type-body-large-line-height, 1.5);
  margin: 0 0 var(--space-24, 24px);
}

.cyclein-basket-progress {
  display: flex;
  inline-size: min(100%, 26rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.cyclein-basket-progress__item {
  flex: 1 1 0;
  font-size: var(--type-mobile-label-size, 16px);
  font-weight: var(--font-weight-bold, 700);
  min-inline-size: 0;
  padding-block-start: var(--space-40, 40px);
  position: relative;
}

.cyclein-basket-progress__item:last-child {
  flex: 0 0 auto;
}

.cyclein-basket-progress__item::before {
  background: var(--color-green-light, #f0f0f0);
  border: 3px solid var(--color-brand-black, #063335);
  border-radius: var(--radius-pill, 1000px);
  block-size: var(--space-32, 32px);
  content: "";
  inline-size: var(--space-32, 32px);
  inset-block-start: 0;
  inset-inline-start: 0;
  position: absolute;
  z-index: 1;
}

.cyclein-basket-progress__item:not(:last-child)::after {
  background: var(--color-brand-black, #063335);
  block-size: 3px;
  content: "";
  inline-size: calc(100% - var(--space-32, 32px));
  inset-block-start: calc(var(--space-16, 16px) - 1px);
  inset-inline-start: var(--space-32, 32px);
  position: absolute;
}

.cyclein-basket-progress__item--current::before {
  background: var(--color-brand-black, #063335);
}

/* Filled basket. Its internal 12-column grid keeps the product card, summary
   and full-width organisation signpost together as one form render element. */
.cyclein-basket-content {
  display: grid;
  gap: var(--space-24, 24px) var(--layout-gutter, 24px);
  grid-column: 1 / -1;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.cyclein-basket-items {
  display: grid;
  gap: var(--space-24, 24px);
  grid-column: 1 / span 8;
}

.cyclein-basket-item,
.cyclein-basket-summary {
  background: var(--color-white, #ffffff);
  border-radius: var(--radius-24, 24px);
  padding: var(--space-32, 32px);
}

.cyclein-basket-item__header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16, 16px);
  justify-content: space-between;
}

.cyclein-basket-item__title,
.cyclein-basket-summary > h2,
.cyclein-basket-organisation h2 {
  font-family: var(--font-family-base);
  font-size: var(--type-h3-size, 25px);
  line-height: var(--type-h3-line-height, 1.3);
  margin: 0;
}

.cyclein-basket-item__price {
  font-size: var(--type-h3-size, 25px);
  font-weight: var(--font-weight-black, 900);
  margin: 0;
  white-space: nowrap;
}

.cyclein-basket-item__price span {
  color: var(--color-brand-black-muted, #5a7070);
  font-size: var(--type-mobile-label-size, 16px);
  font-weight: var(--font-weight-bold, 700);
  margin-inline-start: var(--space-4, 4px);
}

.cyclein-basket-item__description {
  color: var(--color-brand-black-muted, #5a7070);
  margin: var(--space-16, 16px) 0 0;
  max-inline-size: 50ch;
}

.cyclein-basket-item__features {
  display: grid;
  gap: var(--space-12, 12px);
  list-style: none;
  margin: var(--space-24, 24px) 0 0;
  padding: 0;
}

.cyclein-basket-item__features li {
  align-items: center;
  display: grid;
  gap: var(--space-12, 12px);
  grid-template-columns: var(--space-24, 24px) minmax(0, 1fr);
}

.cyclein-basket-item__features li::before {
  background-color: var(--color-brand-yellow, #e3ff42);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23063335' d='M9.2 16.4 4.8 12l1.4-1.4 3 3 8.6-8.6 1.4 1.4z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px;
  block-size: var(--space-24, 24px);
  border-radius: var(--radius-pill, 1000px);
  content: "";
  inline-size: var(--space-24, 24px);
}

.cyclein-basket-item__footer {
  align-items: center;
  border-block-start: 1px solid var(--color-brand-black-tint, #ccd3d3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16, 16px);
  justify-content: space-between;
  margin-block-start: var(--space-24, 24px);
  padding-block-start: var(--space-24, 24px);
}

.cyclein-basket-item__licence,
.cyclein-basket-item__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8, 8px);
  margin: 0;
}

.cyclein-basket-item__licence {
  color: var(--color-brand-black-muted, #5a7070);
  font-size: var(--type-mobile-label-size, 16px);
  font-weight: var(--font-weight-bold, 700);
}

.cyclein-basket-item__quantity-label {
  letter-spacing: 0.03em;
}

.cyclein-basket-item__quantity {
  align-items: center;
  background: var(--color-white, #ffffff);
  border: 1px solid var(--color-brand-lime, #00ff00);
  border-radius: var(--radius-pill, 1000px);
  color: var(--color-brand-black, #063335);
  display: inline-flex;
  gap: var(--space-4, 4px);
  justify-content: center;
  min-block-size: 2.25rem;
  min-inline-size: 3.25rem;
  padding-inline: var(--space-8, 8px);
}

.cyclein-basket-item__quantity::before,
.cyclein-basket-summary__secure span {
  background-color: currentColor;
  block-size: 0.9rem;
  content: "";
  inline-size: 0.9rem;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cyclein-basket-item__actions {
  gap: var(--space-24, 24px);
}

.cyclein-basket-item__view {
  color: var(--color-brand-black, #063335);
  font-weight: var(--font-weight-bold, 700);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.tso-ecommerce-basket-form .cyclein-basket-item__remove {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ca3535' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2m-9 0 1 14h8l1-14'/%3E%3C/svg%3E");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 1.2rem;
  border: 0;
  color: var(--color-error, #ca3535);
  cursor: pointer;
  font-weight: var(--font-weight-bold, 700);
  min-block-size: var(--a11y-min-target, 44px);
  padding: 0 0 0 calc(var(--space-8, 8px) + 1.2rem);
}

.cyclein-basket-item__view:hover,
.tso-ecommerce-basket-form .cyclein-basket-item__remove:hover {
  color: var(--color-brand-pink, #d41166);
  text-decoration: underline;
}

.cyclein-basket-summary {
  align-self: start;
  grid-column: 9 / -1;
}

.cyclein-basket-summary > h2 {
  margin-block-end: var(--space-24, 24px);
}

.cyclein-basket-summary__prices {
  display: grid;
  gap: var(--space-16, 16px);
  margin: 0 0 var(--space-24, 24px);
}

.cyclein-basket-summary__prices > div {
  color: var(--color-brand-black-muted, #5a7070);
  display: grid;
  gap: var(--space-16, 16px);
  grid-template-columns: minmax(0, 1fr) auto;
}

.cyclein-basket-summary__prices dt,
.cyclein-basket-summary__prices dd {
  margin: 0;
}

.cyclein-basket-summary__prices dd {
  color: var(--color-brand-black, #063335);
  font-weight: var(--font-weight-bold, 700);
  text-align: end;
  white-space: nowrap;
}

.cyclein-basket-summary__prices > .cyclein-basket-summary__total {
  border-block-start: 1px solid var(--color-brand-black-tint, #ccd3d3);
  color: var(--color-brand-black, #063335);
  font-size: var(--type-body-large-size, 20px);
  padding-block-start: var(--space-24, 24px);
}

.tso-ecommerce-basket-form .cyclein-basket-summary__checkout {
  border: 0;
  border-radius: var(--radius-pill, 1000px);
  color: var(--color-white, #ffffff);
  cursor: pointer;
  font-weight: var(--font-weight-bold, 700);
  inline-size: 100%;
  min-block-size: var(--a11y-min-target, 44px);
  padding: var(--space-12, 12px) var(--space-16, 16px);
  white-space: normal;
}

.cyclein-basket-summary__checkout--authenticated {
  background: var(--color-brand-black, #063335);
}

/* Registration and sign-in are separate journeys out of an anonymous basket,
   and the design weights them equally: two pink actions, side by side. */
.cyclein-basket-summary__auth {
  display: grid;
  gap: var(--space-16, 16px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cyclein-basket-summary__checkout--sign-up,
.cyclein-basket-summary__checkout--log-in {
  background: var(--color-brand-pink, #d41166);
}

.tso-ecommerce-basket-form
  :is(
    .cyclein-basket-summary__checkout--sign-up,
    .cyclein-basket-summary__checkout--log-in
  ):hover {
  background: var(--color-brand-pink-hover, #bf0f5c);
}

@media (max-width: 479px) {
  .cyclein-basket-summary__auth {
    grid-template-columns: 1fr;
  }
}

.cyclein-basket-summary__helper {
  color: var(--color-brand-black-muted, #5a7070);
  font-size: var(--type-mobile-label-size, 16px);
  font-weight: var(--font-weight-bold, 700);
  margin: var(--space-16, 16px) 0 0;
}

.cyclein-basket-summary__secure {
  align-items: center;
  border-block-start: 1px solid var(--color-brand-black-tint, #ccd3d3);
  color: var(--color-brand-black-muted, #5a7070);
  display: flex;
  font-size: var(--type-mobile-label-size, 16px);
  font-weight: var(--font-weight-bold, 700);
  gap: var(--space-8, 8px);
  justify-content: center;
  margin: var(--space-24, 24px) 0 0;
  padding-block-start: var(--space-24, 24px);
}

.cyclein-basket-organisation {
  align-items: center;
  background: var(--color-white, #ffffff);
  border: 2px solid var(--color-brand-pink, #d41166);
  border-radius: var(--radius-24, 24px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24, 24px);
  grid-column: 1 / -1;
  justify-content: space-between;
  padding: var(--space-24, 24px) var(--space-32, 32px);
}

.cyclein-basket-organisation h2 {
  margin-block-end: var(--space-4, 4px);
}

.cyclein-basket-organisation p {
  color: var(--color-brand-black-muted, #5a7070);
  margin: 0;
}

.cyclein-basket-organisation a {
  align-items: center;
  background: var(--color-green-light, #f0f0f0);
  border-radius: var(--radius-pill, 1000px);
  color: var(--color-brand-black, #063335);
  display: inline-flex;
  font-weight: var(--font-weight-bold, 700);
  gap: var(--space-12, 12px);
  min-block-size: var(--a11y-min-target, 44px);
  padding: var(--space-8, 8px) var(--space-24, 24px);
  text-decoration: none;
}

.cyclein-basket-organisation a:hover {
  background: var(--color-brand-yellow, #e3ff42);
}

/* Empty state. It is a purchase prompt rather than a checkout stage, so its
   only page context is the Back link above the card. */
.cyclein-basket-header__back--empty {
  grid-column: 1 / -1;
  justify-self: start;
  margin-block-end: var(--space-32, 32px);
}

.cyclein-empty-basket {
  align-items: center;
  background: var(--color-white, #ffffff);
  border-radius: var(--radius-24, 24px);
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
  padding: var(--space-32, 32px) var(--space-40, 40px);
  text-align: center;
}

.cyclein-empty-basket__icon {
  align-items: center;
  background: var(--color-brand-yellow, #e3ff42);
  border-radius: var(--radius-pill, 1000px);
  color: var(--color-brand-black, #063335);
  display: inline-flex;
  inline-size: var(--space-64, 64px);
  justify-content: center;
  min-block-size: var(--space-64, 64px);
  margin-block-end: var(--space-16, 16px);
}

.cyclein-empty-basket__icon svg {
  fill: none;
  inline-size: var(--space-40, 40px);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.cyclein-empty-basket__heading {
  font-family: var(--font-family-base);
  font-size: var(--type-h2-size, 35px);
  line-height: var(--type-h2-line-height, 1.2);
  margin: 0 0 var(--space-8, 8px);
}

.cyclein-empty-basket__body {
  color: var(--color-brand-black-muted, #5a7070);
  margin: 0;
  max-inline-size: 47rem;
}

.cyclein-empty-basket__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16, 16px);
  justify-content: center;
  margin-block-start: var(--space-24, 24px);
}

.cyclein-empty-basket__actions .form-submit,
.cyclein-empty-basket__buy-now,
.cyclein-empty-basket__learn-more,
.cyclein-empty-basket-help__contact {
  align-items: center;
  border: 0;
  border-radius: var(--radius-pill, 1000px);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--type-mobile-label-size, 16px);
  font-weight: var(--font-weight-bold, 700);
  justify-content: center;
  line-height: var(--type-button-line-height, 1.2);
  min-block-size: var(--a11y-min-target, 44px);
  padding: var(--space-8, 8px) var(--space-24, 24px);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.cyclein-empty-basket__actions .form-submit,
.cyclein-empty-basket__buy-now,
.cyclein-empty-basket__learn-more {
  inline-size: 10rem;
}

.cyclein-empty-basket__actions .form-actions {
  margin: 0;
}

.cyclein-empty-basket__actions .form-submit,
.cyclein-empty-basket__buy-now {
  background: var(--color-brand-pink, #d41166);
  color: var(--color-white, #ffffff);
}

.cyclein-empty-basket__actions .form-submit:hover,
.cyclein-empty-basket__buy-now:hover {
  background: var(--color-brand-pink-hover, #bf0f5c);
}

.cyclein-empty-basket__learn-more {
  background: var(--color-brand-black, #063335);
  color: var(--color-white, #ffffff);
  gap: var(--space-8, 8px);
}

.cyclein-empty-basket__learn-more:hover {
  background: var(--color-brand-black-hover, #052e30);
}

.cyclein-empty-basket__learn-more::after,
.cyclein-empty-basket-help__contact::after {
  content: "\2192";
}

.cyclein-empty-basket-help {
  align-items: center;
  border: 2px solid var(--color-brand-pink, #d41166);
  border-radius: var(--radius-24, 24px);
  column-gap: var(--space-40, 40px);
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-block-start: var(--space-24, 24px);
  padding: var(--space-24, 24px) var(--space-32, 32px);
}

.cyclein-empty-basket-help h2 {
  font-family: var(--font-family-base);
  font-size: var(--type-h3-size, 25px);
  line-height: var(--type-h3-line-height, 1.3);
  margin: 0 0 var(--space-4, 4px);
}

.cyclein-empty-basket-help p {
  color: var(--color-brand-black-muted, #5a7070);
  margin: 0;
}

.cyclein-empty-basket-help__contact {
  background: var(--color-green-light, #f0f0f0);
  color: var(--color-brand-black, #063335);
  gap: var(--space-8, 8px);
  white-space: nowrap;
}

.cyclein-empty-basket-help__contact:hover {
  background: var(--color-brand-yellow, #e3ff42);
}

/* Match the dedicated focus-state design and keep keyboard location obvious
   on every interactive basket control. */
.tso-ecommerce-basket-form
  :is(a, input[type="number"], input[type="submit"]):focus-visible {
  outline: var(--a11y-focus-ring-outer, 3px) solid var(--color-focus, #ffdd00);
  outline-offset: var(--a11y-focus-offset, 2px);
}

@media (max-width: 1199px) {
  .cyclein-page__main:has(.tso-ecommerce-basket-form) {
    padding-block: var(--space-48, 48px) var(--space-64, 64px);
  }

  .tso-ecommerce-basket-form {
    gap: var(--space-24, 24px);
  }

  .cyclein-basket-header {
    margin-block-end: 0;
  }

  .cyclein-basket-items,
  .cyclein-basket-summary {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .cyclein-page__main:has(.tso-ecommerce-basket-form) {
    padding-block: var(--space-40, 40px) var(--space-48, 48px);
  }

  .cyclein-basket-item,
  .cyclein-basket-summary {
    padding: var(--space-24, 24px);
  }

  .cyclein-basket-item__footer,
  .cyclein-basket-organisation {
    align-items: flex-start;
    flex-direction: column;
  }

  .cyclein-empty-basket {
    padding: var(--space-32, 32px) var(--space-24, 24px);
  }

  .cyclein-empty-basket__heading {
    font-size: var(--type-mobile-h2-size, 30px);
  }

  .cyclein-empty-basket-help {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-24, 24px);
    row-gap: var(--space-24, 24px);
  }

  .cyclein-empty-basket-help__contact {
    justify-self: start;
  }
}

@media (max-width: 479px) {
  .cyclein-basket-item__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .cyclein-basket-item__actions {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-8, 8px);
  }

  .cyclein-basket-organisation a {
    inline-size: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tso-ecommerce-basket-form :is(input, a) {
    transition: none;
  }
}