/* ==========================================================================
   07-CART-CHECKOUT.CSS — Al Aliyah Supermarket implementation kit
   Status: PENDING REVIEW.

   Covers: cart line item, order summary panel, address card, checkout
   layout shell. Guest checkout is off on this build (see project CLAUDE.md)
   so every checkout surface this file styles assumes a signed-in customer.
   ========================================================================== */

.aly-cart-layout {
  display: grid;
  gap: var(--space-6);
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 1024px) {
  .aly-cart-layout {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}

/* ---- Cart line item ---- */
.aly-cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding-block: var(--space-4);
  border-block-end: var(--border-width) solid var(--color-border);
}

.aly-cart-item__image {
  inline-size: 72px;
  block-size: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-surface-sunk);
}

.aly-cart-item__image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  padding: var(--space-1);
}

.aly-cart-item__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

.aly-cart-item__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aly-cart-item__meta {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.aly-cart-item__remove {
  font-size: var(--fs-xs);
  color: var(--color-error-strong);
  align-self: flex-start;
  min-block-size: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
}

.aly-cart-item__end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  text-align: end;
}

.aly-cart-item--loading {
  opacity: 0.55;
  pointer-events: none;
}

.aly-cart-item--removing {
  animation: aly-fade-out var(--duration-slow) var(--ease-standard) forwards;
}

@keyframes aly-fade-out {
  to { opacity: 0; transform: scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  .aly-cart-item--removing { animation: none; opacity: 0; }
}

/* ---- Order summary panel ---- */
.aly-order-summary {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-hairline);
  padding: var(--space-5);
  position: sticky;
  inset-block-start: calc(var(--nav-height) + var(--space-4));
}

.aly-order-summary__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin-block-end: var(--space-4);
}

.aly-order-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-body);
}

.aly-order-summary__row--total {
  border-block-start: var(--border-width) solid var(--color-border);
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.aly-order-summary__points-earn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  padding: var(--space-3);
  background-color: var(--gold-50);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--gold-text-on-cream);
}

.aly-order-summary__cta {
  margin-block-start: var(--space-5);
  inline-size: 100%;
}

/* ---- Address card ---- */
.aly-address-card {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: relative;
}

.aly-address-card--selected {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 1px var(--gold-500);
}

.aly-address-card__badge {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
}

.aly-address-card__name {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.aly-address-card__line {
  font-size: var(--fs-sm);
  color: var(--color-text-body);
}

.aly-address-card__phone {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  unicode-bidi: plaintext;
}

.aly-address-card__actions {
  display: flex;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

/* ---- Checkout step shell ---- */
.aly-checkout-steps {
  display: flex;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
  list-style: none;
  padding: 0;
}

.aly-checkout-steps__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.aly-checkout-steps__number {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  background-color: var(--color-surface-sunk);
  display: grid;
  place-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.aly-checkout-steps__item[aria-current="step"] {
  color: var(--color-text);
}

.aly-checkout-steps__item[aria-current="step"] .aly-checkout-steps__number {
  background-color: var(--gold-500);
  color: var(--ink-900);
}

.aly-checkout-steps__item--done .aly-checkout-steps__number {
  background-color: var(--color-success-deep);
  color: #FFFFFF;
}

/* ---- Empty cart ---- */
.aly-cart-empty {
  text-align: center;
  padding-block: var(--space-9);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.aly-cart-empty__icon {
  inline-size: 4rem;
  block-size: 4rem;
  color: var(--color-text-muted);
}

.aly-cart-empty__title {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
}

.aly-cart-empty__body {
  color: var(--color-text-muted);
  max-inline-size: 40ch;
}