@import '../../../kioskSale/selfServiceBar.less';

// Platform-scoped presentation. H5 and PC retain the existing Kiosk rules.
.pisell-kiosk-sale[data-appearance='self-service'] {
  container: kiosk-sale / inline-size;
  .kiosk-self-service-bar-metrics();
  --pisell-kiosk-cart-media-width: 168px;
  --pisell-kiosk-cart-rail-width: 196px;
  --pisell-kiosk-cart-content-padding: 20px;
  --pisell-kiosk-cart-title-size: 28px;
  --pisell-kiosk-cart-price-size: 28px;

  .pisell-kiosk-sale__cart-header {
    min-height: 96px;
    justify-content: flex-start;
    padding: max(24px, env(safe-area-inset-top)) 32px 20px;
    border-bottom: 0;

    h1 {
      font-size: 32px;
      font-weight: 800;
      line-height: 1.2;
      text-align: left;
    }
  }

  .pisell-kiosk-sale__cart-body {
    padding-bottom: var(--pisell-kiosk-cart-capsule-reserved-space);

    .pisell-sale-detail-main {
      gap: 16px;
      padding: 8px 28px 12px;
    }

    .pisell-sale-detail-scroll-content {
      padding: 4px 4px 16px;
      overscroll-behavior: contain;
    }

    .pisell-sale-detail-cart-items {
      gap: 16px;

      > * {
        flex-shrink: 0;
      }
    }

    .pisell-sale-detail-cart-items__empty {
      align-items: center;
      padding: 32px 16px;
      color: #667085;
      font-size: 22px;
    }

    .pisell-cart-sku-card-a12__name,
    .pisell-cart-sku-card-a12__specification-value,
    .pisell-cart-sku-card-a12__specification-summary {
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .pisell-cart-sku-card-a12__quantity-control .numeric-stepper {
      height: auto;
      grid-template-columns: 44px minmax(32px, 1fr) 44px;

      .numeric-stepper-button {
        width: 44px;
        height: 44px;
      }

      .numeric-stepper-display {
        width: auto;
        font-size: 22px;
      }
    }

    // Booking/bundle rows retain their specialized content and original actions.
    .pisell-cart-sku-card-wrapper:not(.pisell-cart-sku-card-wrapper--a12) {
      border-color: #e4e7ec;
      border-radius: 18px;
      box-shadow: 0 12px 28px rgba(16, 24, 40, 0.08);
    }

    .pisell-sale-detail-promotion-wallet-panels,
    .pisell-sale-detail-amount-details {
      width: 100%;
    }

    .pisell-sale-detail-amount-details__summary-left {
      font-size: 24px;
    }
  }

  .pisell-kiosk-cart-capsule.pisell-kiosk-cart-capsule--floating {
    .kiosk-self-service-bar-frame();

    button {
      .kiosk-self-service-bar-button();

      &:focus-visible {
        outline: 3px solid var(--pisell-kiosk-device-primary);
        outline-offset: 4px;
      }
    }

    .pisell-kiosk-cart-capsule {
      // Follow HDLKioskFloatingBar: one flexible summary between two fixed slots.
      &__leading,
      &__summary,
      &__trailing {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: inherit;
      }

      &__leading,
      &__trailing {
        flex: 0 0 auto;
      }

      &__summary {
        flex: 1 1 auto;
        justify-content: flex-end;
      }

      &__trailing {
        justify-content: flex-end;
        margin-left: auto;
      }

      &__total,
      &__note-button--cart {
        margin-left: 0;
      }

      &__back-button,
      &__note-button,
      &__promotion-button,
      &__cart-button {
        border: 1px solid #d0d5dd;
        background: #fff;
        color: #111827;

        &:disabled {
          opacity: 0.4;
        }
      }

      &__note-button--active,
      &__promotion-button--active {
        border-color: var(--pisell-kiosk-device-primary);
        background: var(--pisell-kiosk-device-primary-bg);
        color: var(--pisell-kiosk-device-primary);
      }

      &__note-badge,
      &__promotion-badge,
      &__badge {
        background: var(--pisell-kiosk-device-primary);
      }

      &__total {
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
      }

      &__total-label {
        color: rgba(255, 255, 255, 0.72);
        font-size: 16px;
      }

      &__amount {
        color: #fff;
        font-size: 28px;
        font-variant-numeric: tabular-nums;
        animation: none;
      }

      &__cart-button {
        min-width: 78px;
        padding: 0 18px;
      }

      &__icon {
        font-size: 28px;
      }

      &__label {
        display: none;
      }

      &__checkout-button {
        min-width: 144px;
        background: var(--pisell-kiosk-device-primary);
        color: var(--pisell-kiosk-device-primary-foreground);

        &:hover:not(:disabled) {
          background: var(--pisell-kiosk-device-primary-hover);
        }

        &:active:not(:disabled) {
          background: var(--pisell-kiosk-device-primary-active);
        }

        &:disabled:not(.pisell-kiosk-cart-capsule__checkout-button--loading) {
          opacity: 0.45;
        }
      }
    }
  }
}

@container kiosk-sale (min-width: 960px) {
  .pisell-kiosk-sale__cart-body {
    --pisell-kiosk-cart-media-width: 228px;
    --pisell-kiosk-cart-title-size: 32px;
    --pisell-kiosk-cart-price-size: 30px;
  }
}

@container kiosk-sale (max-width: 620px) {
  .pisell-kiosk-sale__cart-body {
    --pisell-kiosk-cart-media-width: 88px;
    --pisell-kiosk-cart-rail-width: 148px;
    --pisell-kiosk-cart-content-padding: 12px;
    --pisell-kiosk-cart-title-size: 20px;
    --pisell-kiosk-cart-price-size: 22px;
  }

  .pisell-kiosk-sale[data-appearance='self-service'] {
    .pisell-kiosk-sale__cart-header {
      padding-inline: 20px;

      h1 {
        font-size: 26px;
      }
    }

    .pisell-kiosk-sale__cart-body .pisell-sale-detail-main {
      padding-inline: 12px;
    }

    .pisell-cart-sku-card-a12 {
      grid-template-columns: var(--pisell-kiosk-cart-media-width) minmax(0, 1fr);

      &--without-media {
        grid-template-columns: minmax(0, 1fr);
      }

      &__rail {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) 44px;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border-top: 1px solid #e4e7ec;
        border-left: 0;
      }

      &__delete {
        position: static;
        grid-column: 3;
        grid-row: 1;
      }

      &__price {
        grid-column: 1;
        grid-row: 1;
      }

      &__quantity-control {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        width: 140px;
        margin: 0;
        padding: 0;
      }
    }

    .pisell-kiosk-cart-capsule.pisell-kiosk-cart-capsule--floating {
      .kiosk-self-service-bar-compact-frame();

      button {
        .kiosk-self-service-bar-compact-button();
      }

      .pisell-kiosk-cart-capsule__note-label,
      .pisell-kiosk-cart-capsule__promotion-label {
        display: none;
      }

      .pisell-kiosk-cart-capsule__amount {
        font-size: 22px;
      }

      .pisell-kiosk-cart-capsule__checkout-button {
        min-width: 0;
      }
    }
  }
}