/* assets/css/account.css */

/* Account pages: sign-in screens and My Account (loaded through
   $page['styles']). Shared form pieces live in style.css. */

/* =========================================================
   Sign in, register, forgot and reset
   ========================================================= */

.auth-page { padding-top: var(--space-6); }
.auth-card { max-width: 460px; margin: 0 auto; }
.auth-card h1 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
.auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-5) 0 0;
  font-size: 0.95rem;
}
.auth-links a { color: var(--sigma-primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.auth-note { margin: var(--space-4) 0 0; font-size: 0.85rem; }

/* =========================================================
   My Account
   ========================================================= */

.account { padding-top: var(--space-5); }
.account-layout { display: grid; gap: var(--space-5); }
@media (min-width: 960px) {
  .account-layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-7); align-items: start; }
  .account-nav { position: sticky; top: calc(var(--header-height) + var(--space-5)); }
}
.account-main h1 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem); }

.account-nav {
  padding: var(--space-3);
  background: var(--sigma-white);
  border: 1px solid var(--sigma-border);
  border-radius: var(--radius-lg);
}
.account-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1); }
@media (min-width: 960px) {
  .account-nav ul { flex-direction: column; }
}
.account-nav a {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--sigma-text-dark);
}
.account-nav a:hover { background: var(--sigma-bg-section); }
.account-nav a[aria-current="page"] { background: var(--sigma-navy); color: var(--sigma-white); }
.account-nav form { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--sigma-border); }
.account-signout {
  width: 100%;
  min-height: var(--touch);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--sigma-text-medium);
  text-align: left;
}
.account-signout:hover { background: var(--sigma-bg-section); color: var(--sigma-primary-dark); }

.account-panel {
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  background: var(--sigma-white);
  border: 1px solid var(--sigma-border);
  border-radius: var(--radius-lg);
}
.account-panel h2 { font-size: 1.2rem; margin-bottom: var(--space-3); }
.account-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.account-panel .empty-state { padding: var(--space-5) 0; }
.account-grid { display: grid; gap: 0 var(--space-5); }
@media (min-width: 768px) {
  .account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.address-block { margin: 0; line-height: 1.7; color: var(--sigma-text-dark); }

.address-cards { display: grid; gap: 0 var(--space-5); }
@media (min-width: 768px) {
  .address-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.address-card { display: flex; flex-direction: column; }
.address-card-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); font-family: var(--font-heading); }
.address-card .address-block { flex: 1; color: var(--sigma-text-medium); }
.address-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4); margin-top: var(--space-3); }

/* Orders */
.order-list li + li { border-top: 1px solid var(--sigma-border); }
.order-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
}
.order-row .status-chip { justify-self: end; }
/* Narrow screens: total sits under the status chip, both right-aligned. */
.order-row .order-total { grid-column: 2; }
@media (min-width: 600px) {
  .order-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .order-row .order-total { grid-column: auto; min-width: 6rem; }
}
.order-number { font-family: var(--font-ui); font-weight: 500; color: var(--sigma-primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.order-meta { margin: 2px 0 0; font-size: 0.85rem; }
.order-total { font-family: var(--font-ui); font-weight: 500; color: var(--sigma-text-dark); text-align: right; }

.order-items { margin-bottom: var(--space-4); }
.order-items li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--sigma-border);
}
.order-item-name { margin: 0; font-family: var(--font-heading); font-weight: 600; color: var(--sigma-text-dark); }
/* A set: its suitcases under its heading, each at its real price (sets spec §7). */
.order-set > div { flex: 1; min-width: 0; }
.order-set-items { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.order-items .order-set-items li { padding: var(--space-1) 0 var(--space-1) var(--space-4); border-bottom: 0; font-size: 0.9rem; }

/* Status timeline: order received → being prepared → shipped → delivered. */
.timeline { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) {
  .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.timeline li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--sigma-text-medium);
}
.timeline-dot {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--sigma-border);
  background: var(--sigma-white);
}
.timeline li.is-done { color: var(--sigma-text-dark); font-weight: 500; }
.timeline li.is-done .timeline-dot { border-color: var(--sigma-primary); background: var(--sigma-primary); }
.tracking { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; }
.tracking .icon { color: var(--sigma-blue); }
.tracking a { color: var(--sigma-primary-dark); text-decoration: underline; text-underline-offset: 3px; }