/* ── Moje konto (docs/design/screens/my-account.html) ── */
.account-section { padding: var(--space-8) 0 var(--space-16); }

/* Two-column: sidebar nav + content */
.account-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-8);
  align-items: start;
}

/* ── Sidebar ── */
.account-sidebar { position: sticky; top: var(--space-8); }

.account-profile-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  text-align: center;
}
.account-name { font-size: var(--text-base); font-weight: 700; color: var(--color-text-primary); overflow-wrap: anywhere; }
.account-email { font-size: var(--text-xs); color: var(--color-text-hint); margin-top: 2px; overflow-wrap: anywhere; }

.account-nav {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.account-nav form { margin: 0; }
.account-nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  background: none; border-left: none; border-right: none; border-top: none;
  font-family: var(--font-primary); width: 100%; text-align: left;
}
.account-nav > :last-child,
.account-nav > :last-child .account-nav-item { border-bottom: none; }
.account-nav-item:hover { background: var(--color-bg-subtle); color: var(--color-primary); }
.account-nav-item.active {
  background: var(--color-bg-subtle);
  color: var(--color-primary); font-weight: 600;
  border-left: 3px solid var(--color-primary);
  padding-left: calc(var(--space-5) - 3px);
}
.account-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.account-nav-item.logout { color: var(--color-error); }
.account-nav-item.logout:hover { background: var(--color-status-cancelled-bg); color: var(--color-error); }

/* ── Content panels ── */
.account-panel { display: none; }
.account-panel.active { display: block; }

.account-panel .panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-6); flex-wrap: wrap; gap: var(--space-3);
}
.account-panel .panel-title { font-size: var(--text-2xl); font-weight: 700; color: var(--color-text-primary); }

/* ── Status badge (colours: .badge-* in orders.css) ── */
.status-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 3px var(--space-3); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 700; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* ── Order list ── */
.order-list { display: flex; flex-direction: column; gap: var(--space-4); }

.order-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.order-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }

.order-card-header {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}
.order-num { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-primary); }
.order-date { font-size: var(--text-xs); color: var(--color-text-hint); }
.order-total { font-size: var(--text-base); font-weight: 700; color: var(--color-price); text-align: right; }
.order-card.is-cancelled .order-total { color: var(--color-text-hint); }

.order-card-body {
  padding: var(--space-3) var(--space-6) var(--space-4);
  display: flex; align-items: center; justify-content: flex-end;
}
.order-card-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.order-card-actions .btn-sm {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-primary); font-size: var(--text-xs); font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: all 0.15s;
}
.order-card-actions .btn-sm-primary { background: var(--color-primary); color: var(--color-text-inverse); border: none; }
.order-card-actions .btn-sm-primary:hover { background: var(--color-primary-dark); }
.order-card-actions .btn-sm-outline { background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.order-card-actions .btn-sm-outline:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }

/* ── Empty orders state ── */
.empty-orders {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-16) var(--space-8);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
}
.empty-orders .empty-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--color-bg-subtle);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-hint);
}
.empty-orders .empty-icon svg { width: 32px; height: 32px; opacity: 0.3; }
.empty-orders .empty-title { font-size: var(--text-xl); font-weight: 700; }
.empty-orders .empty-desc { font-size: var(--text-sm); color: var(--color-text-secondary); max-width: 360px; }
.btn-go-shop {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-primary); color: var(--color-text-inverse); border: none; border-radius: var(--radius-md);
  font-family: var(--font-primary); font-size: var(--text-sm); font-weight: 600;
  padding: var(--space-3) var(--space-6); cursor: pointer; text-decoration: none;
  transition: background 0.15s;
}
.btn-go-shop:hover { background: var(--color-primary-dark); }

/* ── Profile panel ── */
.settings-form { display: flex; flex-direction: column; gap: var(--space-5); max-width: 720px; }
.settings-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); overflow: hidden;
}
.settings-card-header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  font-size: var(--text-base); font-weight: 700; color: var(--color-text-primary);
}
.settings-card-body { padding: var(--space-6); }
.settings-card-body .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.settings-card-body .form-group,
.settings-card-body .form-grid-2 { margin-bottom: var(--space-4); }
.settings-card-body .form-grid-2 .form-group { margin-bottom: 0; }
.settings-card-body .alert { margin-bottom: var(--space-4); }
.btn-save {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-primary); color: var(--color-btn-primary-text); border: none; border-radius: var(--radius-md);
  font-family: var(--font-primary); font-size: var(--text-sm); font-weight: 600;
  padding: var(--space-3) var(--space-6); cursor: pointer; transition: background 0.15s;
}
.btn-save:hover { background: var(--color-primary-dark); }
.settings-card-note { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.btn-deactivate {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: transparent; color: var(--color-error); border: 1.5px solid var(--color-error-border); border-radius: var(--radius-md);
  font-family: var(--font-primary); font-size: var(--text-sm); font-weight: 600;
  padding: var(--space-3) var(--space-6); cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.btn-deactivate:hover { background: var(--color-error-bg); border-color: var(--color-error); }

/* ── Order detail ── */
.order-detail-back {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary);
  text-decoration: none; margin-bottom: var(--space-5);
  transition: color 0.15s;
}
.order-detail-back:hover { color: var(--color-primary); }
.order-detail-back svg { width: 16px; height: 16px; }

@media (max-width: 768px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-sidebar { position: static; }
  .order-card-header { grid-template-columns: 1fr auto; }
}

@media (max-width: 640px) {
  .settings-card-body .form-grid-2 { grid-template-columns: 1fr; }
}