/* ==========================================================================
   EcoSTEM Shop — customer account pages (Phase 2)
   Additive. Namespaced under .eco-auth / .eco-account. Loaded after shop.css.
   Reuses shop.css primitives where they exist (.eco-section, .eco-wrap,
   .eco-h1/.eco-h2, .eco-p, .eco-btn, .eco-field, .eco-grid2, .eco-badge,
   .eco-notice); only account-specific classes are defined here.
   ========================================================================== */

.eco-auth {
  max-width: 460px;
  margin: 0 auto;
}
.eco-auth .eco-h1 { margin-bottom: .35rem; }

.eco-auth__form {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin-top: 1.1rem;
}
.eco-auth__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 1.2rem;
  margin-top: 1.1rem;
  font-size: .9rem;
}
.eco-auth__links a {
  color: var(--fern, #3f7d4e);
  text-decoration: none;
}
.eco-auth__links a:hover { text-decoration: underline; }

.eco-auth__err,
.eco-account .eco-auth__err {
  background: #fce9e6;
  border: 1px solid #e7b7ad;
  color: #8a2c1c;
  border-radius: 10px;
  padding: .7rem .85rem;
  font-size: .9rem;
  margin-top: 1rem;
}
.eco-auth__ok {
  background: #e7f3ea;
  border: 1px solid #a9d3b4;
  color: #24623a;
  border-radius: 10px;
  padding: .7rem .85rem;
  font-size: .9rem;
  margin-top: 1rem;
}

.eco-field__hint {
  display: block;
  margin-top: .3rem;
  font-size: .78rem;
  color: var(--ink-soft, #6b6b63);
}

/* ---------------------------------------------------------------- account */
.eco-account {
  max-width: 760px;
  margin: 0 auto;
}
.eco-account__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.eco-account__card {
  border: 1px solid var(--parch-dark, #e3dccb);
  border-radius: 16px;
  padding: 1.3rem 1.4rem;
  margin-bottom: 1.2rem;
  background: var(--card, #fffdf7);
}
.eco-account__card .eco-h2 { margin: 0 0 .9rem; font-size: 1.1rem; }
.eco-account__cardhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}
.eco-account__cardhead .eco-h2 { margin: 0; }

.eco-account__form {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  max-width: 420px;
}
.eco-account__addrform { max-width: 100%; }

.eco-account__addrs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;
}
.eco-account__addr {
  border: 1px solid var(--parch-dark, #e3dccb);
  border-radius: 12px;
  padding: .9rem 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.eco-account__addr-body { font-size: .9rem; line-height: 1.55; }
.eco-account__addr-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3rem;
}
.eco-account__formactions {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
}

.eco-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .85rem;
  color: var(--fern, #3f7d4e);
  cursor: pointer;
  text-decoration: underline;
}
.eco-linkbtn--danger { color: #b23b26; }

.eco-muted { color: var(--ink-soft, #6b6b63); }

/* nav account link — mirrors the existing .nav-cart affordance */
.nav-account {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.nav-account:hover { opacity: .75; }
.nav-account svg { width: 20px; height: 20px; }

@media (max-width: 620px) {
  .eco-account__addr { flex-direction: column; }
  .eco-account__addr-actions { flex-direction: row; align-items: flex-start; }
}

/* ==========================================================================
   Checkout + customer orders (Phase 7). Additive; reuses shop.css primitives
   (.eco-co, .eco-co__summary, .eco-sum__row*, .eco-thanks*, .eco-notice).
   ========================================================================== */
.eco-co { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 1.6rem; align-items: start; }
.eco-co__main { min-width: 0; }
.eco-co__note { font-size: .8rem; color: var(--ink-soft, #6b6b63); margin-top: .7rem; }
.eco-h3 { font-size: .95rem; margin: 1rem 0 .5rem; }

.eco-addr-opt {
  display: flex; gap: .6rem; align-items: flex-start;
  border: 1px solid var(--parch-dark, #e3dccb); border-radius: 10px;
  padding: .7rem .8rem; margin-bottom: .55rem; font-size: .88rem; line-height: 1.5; cursor: pointer;
}
.eco-addr-opt input { margin-top: .2rem; }
.eco-addr-opt:has(input:checked) { border-color: var(--fern, #3f7d4e); background: #f4f8f4; }

.eco-tablewrap { overflow-x: auto; }
.eco-orders { width: 100%; border-collapse: collapse; font-size: .88rem; }
.eco-orders th, .eco-orders td { padding: .55rem .5rem; border-bottom: 1px solid var(--parch-dark, #e3dccb); text-align: left; }
.eco-orders th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft, #6b6b63); }
.eco-orders__row { cursor: pointer; }
.eco-orders__row:hover { background: #f6f2e9; }

.eco-ostatus {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; text-transform: capitalize;
  background: #eee7d7; border: 1px solid var(--parch-dark, #e3dccb); color: #5a5443;
}
.eco-ostatus--pending, .eco-ostatus--pay-pending    { background: #fdf1dc; border-color: #e8cf94; color: #8a5a12; }
.eco-ostatus--confirmed, .eco-ostatus--processing   { background: #e4eefb; border-color: #a9c6e6; color: #274b73; }
.eco-ostatus--shipped                               { background: #e7ecfb; border-color: #b3bce6; color: #33408a; }
.eco-ostatus--delivered, .eco-ostatus--pay-paid     { background: #e7f3ea; border-color: #a9d3b4; color: #24623a; }
.eco-ostatus--cancelled, .eco-ostatus--pay-failed   { background: #fce9e6; border-color: #e7b7ad; color: #8a2c1c; }
.eco-ostatus--refunded, .eco-ostatus--pay-refunded  { background: #f0e9f5; border-color: #cdb9dc; color: #5a3a73; }

.eco-osum { margin-top: .9rem; font-size: .9rem; }
.eco-osum > div { display: flex; justify-content: space-between; padding: .2rem 0; }
.eco-osum__total { font-weight: 700; border-top: 1px solid var(--parch-dark, #e3dccb); margin-top: .3rem; padding-top: .5rem !important; }

.eco-timeline { list-style: none; margin: 0; padding: 0; font-size: .87rem; line-height: 1.75; }
.eco-timeline li { border-left: 2px solid var(--parch-dark, #e3dccb); padding-left: .7rem; margin-bottom: .25rem; }

@media (max-width: 780px) {
  .eco-co { grid-template-columns: 1fr; }
}
.eco-thanks__actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }
.eco-thanks__actions .eco-btn { margin-top: 0; }