.order-offers {
  width: 100%;
  display: flex;
  gap: var(--sizing-xs);
  flex-direction: column;
  margin-bottom: var(--spacing-xs);

  @media (width >=1024px) {
    border: none;
    padding: var(--spacing-small);
    background: var(--ui-surface-glass-thin);
  }
}

.order-offer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sizing-xs);
  align-self: stretch;
}

.order-offer__content {
  display: flex;
  align-items: center;
  gap: var(--sizing-xs);
  flex-grow: 1;
}

.order-offer__heading {
  color: var(--ui-text-icon-high);
  font: normal normal var(--fw-700) var(--fs-medium) / var(--lh-medium) var(--type-base-font-family);
  letter-spacing: 0;
}

.order-offer__title {
  color: var(--primary-color);
  font: normal normal var(--fw-700) var(--fs-medium) / var(--lh-medium) var(--type-base-font-family);
  letter-spacing: 0;
  line-height: var(--fs-large);

  @media (width >=102px) {
    font-weight: var(--fw-500);
    color: var(--schemes-on-surface);
  }
}

.order-offer__apply {
  display: flex;
}

.order-offer__title-code {
  color: var(--primary-color);
  font: normal normal var(--fw-500) var(--fs-medium) / var(--fs-large) var(--type-base-font-family);
}

.order-offer__icon {
  background: url('/genuine-accessories/icons/cart-offer-icon-blue.svg') no-repeat center / contain;
  width: var(--spacing-medium);
  height: var(--spacing-medium);

  @media (width >=1024px) {
    background: url('/genuine-accessories/icons/cart-offer-icon.svg') no-repeat center / contain;
  }
}

.order-offer__applied-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--sizing-xs);
}

.order-offer--applied,
.order-offer__apply {
  background: var(--shimmer-card-bg);
  padding: var(--sizing-m);

  @media (width >=1024px) {
    background: none;
    padding: 0;
  }
}

.order-offer__cta {
  border: none;
  cursor: pointer;
  background: transparent;
  background-image: url('/genuine-accessories/icons/chevron-right-blue.svg');
  padding: var(--spacing-xsmall);
  width: var(--spacing-big);
  height: var(--spacing-big);
  background-repeat: no-repeat;
  background-size: cover;

  span {
    display: none;
    text-decoration: none;
    transition: text-decoration-color 0.3s ease;
  }

  &:hover {
    span {
      text-decoration: underline;
      text-underline-offset: 2px;
    }
  }
}

.coupon-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--sizing-xs);
}

.modal dialog.order-offers-details__dialog.dialog--md-center .modal-container {
  padding: 0;
}

.modal dialog.order-offers-details__dialog.dialog--md-center .modal-header {
  border-bottom: none;
  padding: var(--spacing-l);
  justify-content: flex-end;
}

.modal dialog.order-offers-details__dialog.dialog--md-center .order-offers-details__content h4.cart-item-delete__title {
  padding: 0;
  display: block;
}

.modal dialog.order-offers-details__dialog.dialog--md-center .modal-header .close-button {
  margin: 0;
}

.modal dialog.order-offers-details__dialog.dialog--md-center .modal-content {
  padding: var(--sizing-xl) var(--spacing-l);
}

.cart-item-offers__header {
  width: 100%;
}

.cart-item-offers__title {
  color: var(--ui-text-icon-high);
  font: normal normal var(--fw-700) var(--fs-large) / var(--lh-large) var(--type-base-font-family);
  letter-spacing: 0;

  @media (width >=1024px) {
    padding: var(--spacing-l) 56px var(--sizing-m) var(--sizing-xl);
    font-weight: var(--fw-500);
  }

  &.show-lg {
    display: none;

    @media (width >=1024px) {
      display: block;
    }
  }
}

.cart-item-offers__logo-container {
  @media (width >=1024px) {
    display: none;
  }
}

.cart-item-offers__logo {
  background: url('/genuine-accessories/icons/MSGPA-logo.png') no-repeat;
  height: 27px;
  width: 122px;
}

.btn--secondary {
  background: var(--tertiary-color);
  color: var(--primary-color);
}

.btn--primary {
  background: var(--primary-color);
  color: var(--tertiary-color);
}

.coupon-card__details p {
  font-weight: bold;
  margin-bottom: var(--spacing-6);
}

.coupon-card__details ul {
  padding-left: var(--fs-xmedium);
  margin: 0;
}

.coupon-card__details li {
  font-size: 13px;
  margin-bottom: var(--sizing-2xs);
}

.modal__footer {
  display: flex;
  justify-content: space-between;
  gap: var(--sizing-s);
}

.coupons-cards__wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.coupons-card__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart-item-offers_footer {
  width: 100%;
  display: flex;
  gap: var(--sizing-xs);
  justify-content: flex-end;
  padding: 20px;
  background: var(--color-neutral-50);
  box-shadow: var(--box-shadow-btn);
}

.cart-item-offers_footer button.button {
  width: 100%;
  justify-content: center;

  @media (width >=1024px) {
    width: 50%;
  }
}

button.button.offer-applied__done {
  color: var(--secondary-color);
  font: normal normal var(--fw-500) var(--fs-small) / var(--lh-20) var(--type-base-font-family);
  letter-spacing: 0.14px;
  display: none;

  &:focus-visible {
    outline: none;
  }

  @media (width >=768px) {
    display: block;
  }
}

/* Promo Code */
.promo-code__label {
  overflow: hidden;
  color: var(--ui-text-icon-high);
  text-overflow: ellipsis;
  font: normal normal var(--fw-500) var(--fs-medium) / var(--lh-medium) var(--type-base-font-family);
  letter-spacing: 0;
  margin-bottom: var(--sizing-xs);

  @media (width >=1024px) {
    font-size: var(--fs-small);
    font-weight: var(--fw-400);
    color: var(--ui-text-icon-medium);
  }
}

.promo-code__field {
  margin-top: var(--sizing-xs);
  display: flex;
  gap: var(--sizing-xs);
  background: var(--background-input-color);
  padding: 0 var(--sizing-xs) 0 var(--sizing-m);

  @media (width >=1024px) {
    padding: 0;
  }
}

.promo-code__field input {
  flex: 1;
  padding: var(--sizing-m) var(--sizing-m);
  border: none;
  border-radius: var(--sizing-xs);
  outline: none;
  background: transparent;
  height: 44px;
  font: var(--text-large-regular);

  &:disabled {
    cursor: not-allowed;
  }
}

.promo-code__field .btn {
  padding: var(--spacing-2xs) var(--sizing-m);
  border-radius: var(--sizing-xs);
  border: none;
  font-weight: var(--fw-600);
  cursor: pointer;
}

.promo-code__field .btn--apply {
  background: transparent;
  font: normal normal var(--fw-500) var(--fs-small) / var(--lh-medium) var(--type-base-font-family);
  color: var(--primary-color);

  &:disabled {
    cursor: not-allowed;
    color: var(--btn-disabled-color);
  }
}

.order-offers-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--sizing-m);
}

.coupon-section__title,
.coupons-card__title {
  font-size: var(--fs-medium);
  font-weight: var(--fw-700);
  margin: 0;

  @media (width >=1024px) {
    font-weight: var(--fw-500);
  }
}

.coupon-section__title {
  display: none;
}

.coupon-section__desc {
  font: var(--text-medium-regular);
  color: var(--gradient-gray-68);
  margin: var(--sizing-2xs) 0 0;
}

.promo-code {
  padding-bottom: var(--sizing-s);
  position: relative;
}

.promo-code::after {
  content: '';
  width: 100%;
  height: 1px;
  background: var(--background-blur-1);
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
}

/* Coupon Card */
.coupon-card {
  position: relative;
  background: var(--light-theme-interactive-surface-selected);
  padding: var(--sizing-m);
  overflow: hidden;

  .coupon-card__badge {
    background: var(--semantics-text-or-icon-link);
    color: var(--tertiary-color);
    font: normal normal var(--fw-500) var(--fs-xxsmall) / var(--lh-xsmall) var(--type-base-font-family);
    padding: 6.5px var(--sizing-xs);
  }

  .coupon-card__remove,
  .coupon-card__apply {
    padding: 15px var(--sizing-s);
    background: transparent;
    color: var(--primary-color);
    font: normal normal var(--fw-500) var(--fs-small) / var(--lh-medium) var(--type-base-font-family);
    border: 0;
    cursor: pointer;

    @media (width >=1024px) {
      color: var(--primary-variations-hover);
    }

    &:disabled {
      cursor: not-allowed;
      color: var(--btn-disabled-color);
    }
  }

  .coupon-card__main {
    display: flex;
    align-items: flex-start;
    gap: var(--sizing-xs);
    flex-direction: column;
  }

  .coupon-card__icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url('/genuine-accessories/icons/order-offer-icon-blue.svg');
  }

  .coupon-card__title {
    font: normal normal var(--fw-500) var(--fs-small) / var(--lh-medium) var(--type-base-font-family);
    margin: 0;
    color: var(--ui-text-icon-high);
  }

  .coupon-card__subtitle {
    font: normal normal var(--fw-400) var(--fs-xsmall) / var(--lh-16) var(--type-base-font-family);
    color: var(--ui-text-icon-high);
    margin: 0;
  }

  .order-offer__logo {
    display: flex;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: var(--sizing-xs);
    background: var(--tertiary-color);
    flex: 0 0 auto;
  }

  .coupon-section {
    padding: var(--sizing-xl) 0;
  }

  .coupon-card__info {
    display: flex;
    gap: var(--sizing-xs);
    align-items: center;
  }

  .coupon-card__details {
    margin-top: var(--sizing-xs);
    position: relative;
    padding-top: var(--sizing-m);
    text-align: center;

    .coupon-card__details-content {
      display: none;
    }

    p {
      color: var(--ui-text-icon-high);
      font: normal normal var(--fw-500) var(--fs-xsmall) / var(--lh-medium) var(--type-base-font-family);
      letter-spacing: 0.14px;
      margin: 0 0 var(--spacing-6);
      text-align: left;
    }

    ul {
      margin: 0;
      padding-left: var(--fs-xmedium);
      color: var(--ui-text-icon-high);
      text-align: left;

      li {
        margin: var(--sizing-2xs) 0;
        font: normal normal var(--fw-400) var(--fs-xsmall) / var(--line-height-body-low) var(--type-base-font-family);
        text-align: left;
        list-style: disc;
      }
    }
  }

  .coupon-card__toggle {
    background: none;
    border: none;
    padding: 16px;
    color: var(--primary-color);
    font: normal normal var(--fw-500) var(--fs-small) / var(--lh-medium) var(--type-base-font-family);
    cursor: pointer;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;

    span::after {
      content: '';
      position: absolute;
      margin-left: var(--sizing-xs);
      top: 50%;
      width: 0.8rem;
      height: 0.8rem;
      border-right: 2px solid var(--primary-color);
      border-bottom: 2px solid var(--primary-color);
      transform: translateY(-70%) rotate(45deg);
      transition: transform 0.2s ease;
    }
  }

  .coupon-card__details::after {
    content: '';
    width: 100%;
    height: 1px;
    background: var(--background-blur-1);
    position: absolute;
    top: 0;
    left: 0;
    display: block;
  }

  .coupon-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.order-offers-details__content {
  display: grid;
  gap: var(--sizing-m);
  padding: var(--sizing-l);

  @media (width >=1024px) {
    padding: 0 var(--sizing-xl);
  }

  .coupon-card {
    background: var(--background-blur-2);

    &.open {
      background: var(--gradients-accent-section-bg-1);

      .coupon-card__details-content {
        display: block;
      }

      .coupon-card__toggle span::after {
        transform: translateY(-25%) rotate(225deg);
        transition: transform 0.2s ease;
      }
    }
  }
}

.order-offer__removeCta {
  background-image: url('/genuine-accessories/icons/cancel-filled.svg');
  width: 40px;
  height: 40px;
  padding: var(--spacing-xsmall);
  background-repeat: no-repeat;
  background-size: auto;
  border: none;
  background-color: transparent;
  background-position: center;
  cursor: pointer;
}

.order-offers-details__title {
  color: var(--ui-text-icon-high);
  font: normal normal var(--fw-500) var(--fs-large) / var(--fs-xlarge) var(--type-base-font-family);
  letter-spacing: 0;
}

.order-offer-slider {
  overflow: hidden;
  display: block;
  position: relative;
}

.coupon-slider {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.coupon-slider .splide__track {
  height: 100%;
}

.coupon-slider .splide__list {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin-bottom: var(--spacing-28);
}

.coupon-slider .splide__slide {
  width: auto;
}

.coupon-slider .splide__list .coupon-card {
  min-width: 320px;

  @media (width >=768px) {
    min-width: 356px;
  }

  @media (width>=1024px) {
    min-width: 288px;
  }

  @media (width>=1366px) {
    min-width: 356px;
  }
}

.offer__container .coupon__container {
  margin-bottom: var(--spacing-xs);
}

.order-offer__price-tag {
  display: flex;
  height: var(--spacing-l);
  padding: 0 var(--sizing-xs);
  justify-content: center;
  align-items: center;
  gap: var(--sizing-xs);
  background: var(--instock-green);
  color: var(--color-neutral-50);
  font-size: var(--fs-xxsmall);
  font-style: normal;
  font-weight: var(--fw-500);
  line-height: var(--lh-xsmall);
  letter-spacing: 0.4px;
}

@media (width >=1024px) {
  .order-offers {
    background: var(--tertiary-color);
  }

  .order-offer__title-code {
    color: var(--schemes-on-surface);
    font-size: var(--fs-medium);
  }

  .order-offer__icon {
    width: var(--spacing-small);
    height: var(--spacing-small);
  }

  .order-offer__cta {
    background-image: none;
    width: auto;
  }

  .order-offer__cta span {
    display: block;
    color: var(--primary-color);
    font: var(--text-small-medium);
  }

  .order-offer--applied {
    padding: var(--sizing-2xs) 0 var(--sizing-2xs) var(--sizing-s);
    border-top: 1px solid var(--border-gray-1);
    background: none;
  }

  .order-offer--applied .order-offer__title-code {
    font-size: var(--fs-small);
    margin: var(--spacing-2xs) 0;
  }

  .modal dialog.order-offers-details__dialog.dialog--md-center .modal-header {
    padding: 0;
  }

  .modal dialog.order-offers-details__dialog.dialog--md-center .modal-header .cart-item-delete__title {
    padding: 0;
    font: var(--text-large-medium);
    display: block;
  }

  .modal dialog.order-offers-details__dialog.dialog--md-center .modal-footer {
    display: block;
  }

  .modal dialog.order-offers-details__dialog.dialog--md-center .modal-content {
    padding: 0 var(--sizing-xl);
  }

  .promo-code__label {
    font-size: var(--fs-small);
  }

  .coupon-section__desc {
    font-size: var(--fs-small);
  }

  .promo-code__field input {
    font-size: var(--fs-medium);
  }

  .coupon-section__title {
    display: block;
  }

  .coupon-section {
    padding: 0;
  }

  .show-sm {
    display: block;

    @media (width >=1024px) {
      display: none;
    }
  }

  .show-lg {
    display: none;

    @media (width >=1024px) {
      display: block;
    }
  }
}

/* Success Modal Styles */
.success-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sizing-s);
  padding: var(--spacing-l) var(--spacing-l) var(--spacing-xlarge);
  background: var(--color-neutral-50);

  @media (width >=1024px) {
    padding: var(--spacing-l);
  }
}

.success-modal__title {
  color: var(--neutrals-sub-texts-paragraphs);
  font: normal normal var(--fw-500) var(--fs-medium) / var(--lh-medium) var(--type-base-font-family);
  text-align: center;

  @media (width >=1024px) {
    font: normal normal var(--fw-700) var(--fs-21) / var(--lh-large) var(--type-base-font-family);
  }
}

.success-modal__savings {
  color: var(--text-gray);
  text-align: center;
  font: normal normal var(--fw-400) var(--fs-small) / var(--lh-normal) var(--type-base-font-family);
  line-height: normal;

  @media (width >=1024px) {
    font-size: var(--fs-medium);
  }
}

.success-modal__dealer {
  color: var(--text-gray-1);
  font: normal normal var(--fw-400) var(--fs-small) / var(--lh-normal) var(--type-base-font-family);
  text-align: center;

  @media (width >=1024px) {
    font-size: var(--fs-medium);
  }
}

.success-modal__expiry {
  color: var(--ui-text-icon-low);
  font: normal normal var(--fw-400) var(--fs-small) / var(--lh-medium) var(--type-base-font-family);
  text-align: center;

  @media (width >=1024px) {
    font-size: var(--fs-medium);
  }
}

.success-modal__button {
  cursor: pointer;
  width: 100%;
}

.offers__slider {
  overflow: hidden;
}

.modal dialog.cart-success-modal__dialog.dialog--md-center .modal-container {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.modal dialog.cart-success-modal__dialog.dialog--md-center .modal-footer {
  display: none;
}

.modal dialog.cart-success-modal__dialog.dialog--md-center .modal-content {
  padding: 0;
  background: transparent;
}

.offer-success-modal__dialog .close-button-container {
  @media (width >=768px) {
    position: absolute;
    top: 0;
    right: 0;
  }
}

.offer-applied-success__header-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 220px;

  @media (width >=1024px) {
    padding: 21px var(--spacing-2xs) 15px;
    background-color: var(--tertiary-color);
  }
}

.offer-applied-success__icons-wrapper {
  display: flex;
  align-items: center;
  gap: 2.75px;
  border-radius: 68.75px;
  margin-bottom: var(--spacing-small);
  background: var(--primary-color);
  width: 47px;
  height: 47px;
  padding: 10.5px var(--spacing-small);

  @media (width >=1024px) {
    width: 72px;
    height: 72px;
    padding: var(--sizing-xl) 22px var(--spacing-small);
  }
}

.icon-success {
  background: url('/genuine-accessories/icons/check.svg') no-repeat center / contain;
  width: var(--fs-xmedium);
  height: var(--fs-xmedium);

  @media (width >=1024px) {
    width: 30px;
    height: 30px;
  }
}

.offer-applied-success__icons-bg {
  background: url('/genuine-accessories/icons/icon_success.svg') no-repeat center / contain;
  height: 124px;
  width: 100%;
}

.splide__pagination li .splide__pagination__page.is-active.splide__pagination__page.is-active {
  background: var(--interactive-text-icon-secondary);
}

/* Success Modal Dialog Styles */
dialog.cart-success-modal__dialog.offer-success-modal__dialog.dialog--md-center {
  @media (width < 768px) {
    .modal-container {
      bottom: 50%;
      left: 50%;
      border-radius: var(--radius-12);
      transform: translate(-50%, 50%);
      padding: var(--sizing-l);
      max-width: 335px;
    }

    .success-modal {
      border-radius: var(--sizing-s);
      padding: var(--sizing-s) var(--sizing-xl) var(--spacing-xbig);
    }

    .close-button {
      display: none;
    }
  }
}

.promo-code__error.error {
  color: var(--semantics-text-or-icon-error);
  padding-top: var(--sizing-xs);
}

@media (width < 1024px) {
  .modal .offer-variants-modal__dialog {
    &.fullscreen {
      .modal-container {
        .modal-header {
          padding: 19px var(--container-margin);
          display: flex;
        }
      }
    }
  }
}

.order-offers.order-offers--single-view {
  @media (width <= 1024px) {
    padding-bottom: var(--spacing-l);
    margin-bottom: var(--spacing-l);
    border-bottom: 1px solid var(--color-neutral-300);
  }

  .order-offer__apply {
    display: block;
    background-color: var(--tertiary-color);
    padding: 0;

    @media (width >= 768px) {
      padding: var(--spacing-big);
    }

    @media (width >= 1024px) {
      padding: 0;
    }

    .cart-item-offers__title {
      display: none;
    }

    .order-offers-wrapper {
      display: block;

      .promo-code {
        padding: var(--sizing-m) 0 0;

        &::after {
          display: none;
        }

        .promo-code__field {
          gap: 0;
          padding: 0;
          justify-content: center;
        }
      }
    }
  }

  &:has(.order-offer--applied) {
    .order-offer__apply-coupon {
      display: none;
    }
  }

  .order-offer--applied {
    margin-top: var(--sizing-xs);
  }
}