/*
 * Dopameez storefront — components used by the interactive pages (stash,
 * checkout summary, order confirmation, account, login) that are rendered
 * by JavaScript or are too page-specific for components.css.
 */

/* ----- stash rows (stash + account addresses) ----- */
.stash-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.stash-row__img {
  width: 64px;
  height: 80px;
  border-radius: 8px;
  background: #24211B center/cover no-repeat;
  flex: none;
}
.stash-row__info { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stash-row__name { font: 600 15px 'Space Grotesk', sans-serif; }
.stash-row__meta { font: 500 10px 'IBM Plex Mono', monospace; letter-spacing: .12em; opacity: .55; }
.stash-row__qty { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.stash-row__qty button {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  background: transparent; color: inherit;
  font: 500 15px 'Space Grotesk', sans-serif; cursor: pointer; line-height: 1;
}
.stash-row__qty span { font: 600 13px 'IBM Plex Mono', monospace; min-width: 18px; text-align: center; }
.stash-row__price { font: 600 14px 'IBM Plex Mono', monospace; flex: none; }
.stash-row [data-remove] {
  flex: none; width: 30px; height: 30px; border: none; background: none;
  font: 400 20px 'Space Grotesk', sans-serif; color: color-mix(in srgb, var(--ink) 55%, transparent);
  cursor: pointer; border-radius: 50%;
}
.stash-row [data-remove]:hover { color: #c23; background: color-mix(in srgb, #c23 8%, transparent); }

/* ----- order history rows ----- */
.ord-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 2px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  text-decoration: none; color: inherit;
}
.ord-row__num { font: 600 15px 'Space Grotesk', sans-serif; }
.ord-row__meta { font: 400 12.5px 'Space Grotesk', sans-serif; color: color-mix(in srgb, var(--ink) 62%, transparent); }
.ord-status-pill {
  font: 600 10px 'IBM Plex Mono', monospace; letter-spacing: .12em;
  padding: 6px 10px; border-radius: 999px; flex: none;
  background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc);
}
.ord-status-pill.is-cancelled { background: color-mix(in srgb, #c23 12%, transparent); color: #c23; }

/* ----- order confirmation ----- */
.oc-hero { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(28px, 4vh, 44px); }
.oc-timeline { display: flex; gap: clamp(14px, 4vw, 44px); padding-top: 26px; }
.oc-timeline__bar {
  position: absolute; top: 10px; left: 12px; right: 12px; height: 2px;
  background: color-mix(in srgb, var(--ink) 15%, transparent);
}
.oc-timeline__step { flex: 1; display: flex; flex-direction: column; gap: 8px; position: relative; }
.oc-timeline__dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 15%, transparent); flex: none;
}
.oc-timeline__step.is-reached .oc-timeline__dot { background: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent); }
.oc-timeline__step.is-cancelled .oc-timeline__dot { background: #c23; box-shadow: 0 0 0 4px color-mix(in srgb, #c23 18%, transparent); }
.oc-timeline__label { font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: .1em; }
.oc-timeline__label em { font-style: normal; opacity: .5; margin-left: 4px; }
.oc-timeline__desc { font: 400 11.5px/1.5 'Space Grotesk', sans-serif; color: color-mix(in srgb, var(--ink) 58%, transparent); }
@media (max-width: 640px) { .oc-timeline { flex-direction: column; gap: 16px; } .oc-timeline__bar { display: none; } }

.oc-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.oc-item__info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oc-item__name { font: 600 14px 'Space Grotesk', sans-serif; }
.oc-item__meta { font: 500 10px 'IBM Plex Mono', monospace; letter-spacing: .1em; opacity: .55; }
.oc-item__price { font: 600 13px 'IBM Plex Mono', monospace; flex: none; }

/* ----- account ----- */
.acc-wrap { display: flex; flex-direction: column; gap: 8px; }
.acc-addr-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  border-radius: 12px; padding: 14px 16px;
  font: 400 13.5px/1.6 'Space Grotesk', sans-serif;
}

/* ----- login ----- */
.login-wrap { display: flex; flex-direction: column; gap: 16px; }
.login-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px; border-radius: 14px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
  background: transparent; color: inherit;
  font: 600 14px 'Space Grotesk', sans-serif; cursor: pointer;
}
.login-divider { display: flex; align-items: center; gap: 12px; font: 500 10px 'IBM Plex Mono', monospace; letter-spacing: .18em; opacity: .5; }
.login-divider::before, .login-divider::after { content: ''; height: 1px; flex: 1; background: color-mix(in srgb, var(--ink) 15%, transparent); }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field label { font: 500 10.5px 'IBM Plex Mono', monospace; letter-spacing: .1em; opacity: .6; }
.login-field input {
  padding: 13px 14px; border-radius: 12px; background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
  font: 400 15px 'Space Grotesk', sans-serif; color: inherit;
}
.login-submit { width: 100%; justify-content: center; border: none; cursor: pointer; }
.login-status { min-height: 1.4em; font: 500 12px 'IBM Plex Mono', monospace; letter-spacing: .05em; text-align: center; }
.login-status.ok { color: var(--acc); }
.login-status.err { color: #c23; }