/* Customer area: header account button, sign-in / sign-up panel (cart drawer
   and "Minha conta"), and the "Meus pedidos" list. Loaded without blocking
   first paint. Tokens: base.css; drawer parts: store-cart.css. */

/* ---------- Header button ---------- */

.account-button { display: inline-flex; align-items: center; gap: var(--space-2); }
.account-button__icon { flex: none; }

/* Narrow screens: the icon alone (the button keeps its aria-label). */
@media (max-width: 639.98px) {
  .account-button { padding-inline: 12px; }
  .account-button__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* ---------- Drawer container (same motion as the cart) ---------- */

#account-dialog {
  width: 100%;
  max-width: 460px;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  box-shadow: var(--shadow-drawer);
}

#account-dialog[open] { display: flex; flex-direction: column; }

@supports not (overlay: auto) {
  #account-dialog[open] { animation: slide-in-right var(--dur-slow) var(--ease-out-expo); }
}

@supports (overlay: auto) {
  #account-dialog { transform: translateX(100%); }
  #account-dialog[open] { transform: none; }
  @starting-style {
    #account-dialog[open] { transform: translateX(100%); }
  }
}

/* ---------- Sign-in / sign-up panel ---------- */

.drawer__body--auth,
.account { gap: var(--space-5); padding-top: var(--space-5); padding-bottom: var(--space-6); }

.auth-panel { display: flex; flex-direction: column; gap: var(--space-5); }
.auth-panel__intro { color: var(--muted); font-size: var(--fs-sm); line-height: 1.7; }

.auth-panel__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border);
}

.auth-panel__tab {
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  margin-bottom: -1px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-out-soft), border-color var(--dur-fast) var(--ease-out-soft);
}

.auth-panel__tab:hover { color: var(--text-2); }
.auth-panel__tab[aria-selected='true'] { border-bottom-color: var(--text); color: var(--text); }

.auth-panel__form { display: flex; flex-direction: column; gap: var(--space-4); }
.auth-panel__form .btn { min-height: 52px; margin-top: var(--space-2); }
.auth-panel[aria-busy='true'] .btn { cursor: progress; }

.auth-panel__status { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }
.auth-panel__status:empty { display: none; }

.drawer__body--auth .checkout__back { align-self: center; }

/* ---------- "Minha conta" ---------- */

.account__notice {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--fs-sm);
}

.account__loading { color: var(--muted); font-size: var(--fs-sm); }

.account__guest,
.account__member { display: flex; flex-direction: column; gap: var(--space-5); }

.account__who {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.account__hello { color: var(--text); font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.account__email { color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }

.account__logout {
  flex: none;
  min-height: 44px;
  padding-inline: var(--space-3);
  border: 0;
  background: none;
  color: var(--muted);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.account__logout:hover:not(:disabled) { color: var(--text); }
.account__logout:disabled { cursor: progress; opacity: 0.5; }

.account__heading {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ---------- Orders ---------- */

.orders { display: flex; flex-direction: column; gap: var(--space-4); }
.orders__status { color: var(--muted); font-size: var(--fs-sm); }
.orders__status:empty { display: none; }
.orders[aria-busy='true'] .orders__status { animation: pulse 1.4s ease-in-out infinite; }
.orders__list { display: flex; flex-direction: column; gap: var(--space-4); }
.orders__empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.orders__empty-text { color: var(--text-2); font-family: var(--font-display); font-size: 1.375rem; font-style: italic; }
.orders__retry { align-self: flex-start; }

@keyframes pulse { 50% { opacity: 0.45; } }

.order-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.order-card__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.order-card__number { color: var(--text); font-size: 1.5rem; font-weight: 500; font-variant-numeric: lining-nums; }
.order-card__total { color: var(--text); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.order-card__date { color: var(--muted); font-size: var(--fs-xs); }

.order-card__status {
  justify-self: end;
  padding: 2px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.order-card__status.is-paid,
.order-card__status.is-delivered { border-color: var(--success); color: var(--success); }
.order-card__status.is-cancelled { border-color: var(--danger); color: var(--danger); }

/* Timeline: five dots joined by a line; done steps solid, current ringed. */
.order-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-timeline__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.3;
  text-align: center;
}

.order-timeline__step::before {
  content: '';
  position: absolute;
  top: 5px;
  right: 50%;
  left: -50%;
  height: 1px;
  background: var(--border-strong);
}

.order-timeline__step:first-child::before { display: none; }
.order-timeline__step.is-done::before,
.order-timeline__step.is-current::before { background: var(--text-2); }

.order-timeline__dot {
  position: relative;
  width: 11px;
  height: 11px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-2);
}

.order-timeline__step.is-done .order-timeline__dot { border-color: var(--text-2); background: var(--text-2); }
.order-timeline__step.is-current .order-timeline__dot {
  border-color: var(--text);
  background: var(--text);
  box-shadow: 0 0 0 4px rgba(244, 241, 236, 0.14);
}
.order-timeline__step.is-done,
.order-timeline__step.is-current { color: var(--text); }
.order-timeline__step.is-current .order-timeline__label { font-weight: 600; }

/* Phones: five labels do not fit side by side, so the steps stack. */
@media (max-width: 479.98px) {
  .order-timeline { grid-template-columns: 1fr; gap: var(--space-2); }
  .order-timeline__step { flex-direction: row; gap: var(--space-3); font-size: var(--fs-xs); text-align: left; }
  .order-timeline__step::before { top: calc(-50% - var(--space-2)); right: auto; bottom: 50%; left: 5px; width: 1px; height: auto; }
}

.order-card__items { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

.order-item { display: flex; align-items: center; gap: var(--space-3); }

.order-item__media {
  flex: none;
  width: 52px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: calc(var(--radius) / 2);
  background: var(--media-bg);
}

.order-item__media img { width: 100%; height: 100%; object-fit: contain; }
.order-item__placeholder { width: 100%; height: 100%; gap: 0; }
.order-item__placeholder .photo-placeholder__mark { font-size: 0.875rem; letter-spacing: 0.1em; padding-left: 0.1em; }
.order-item__placeholder .photo-placeholder__note { display: none; }

.order-item__body { min-width: 0; }
.order-item__name { overflow: hidden; color: var(--text); font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.order-item__meta { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

.order-card__shipping { color: var(--muted); font-size: var(--fs-xs); }

.order-tracking {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}

.order-tracking__label {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.order-tracking__code { color: var(--text); font-size: 1rem; font-weight: 600; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; user-select: all; }
.order-tracking__copy { min-height: 40px; padding: 6px 12px; font-size: var(--fs-2xs); }
.order-tracking__link { color: var(--text-2); font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 4px; }
.order-tracking__link:hover { color: var(--text); }
.order-tracking__status { color: var(--success); font-size: var(--fs-xs); text-align: right; }

.order-card__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); }
.order-card__pay { min-height: 52px; }
.order-card__receipt { align-self: center; color: var(--text-2); font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .orders[aria-busy='true'] .orders__status { animation: none; }
}