/* ============================================================
   SARAMAD — ORDERS PAGE (orders.php)
   Page-specific styles on top of base.css tokens.
   ============================================================ */

/* ---------- Page banner ---------- */
.orders-banner {
  background: var(--color-surface-dark);
  color: #fff;
  padding-block: var(--space-xl) var(--space-lg);
  position: relative;
  overflow: hidden;
}
.orders-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(640px 220px at 88% -30%, rgba(222, 132, 53, 0.28), transparent 70%),
    radial-gradient(420px 200px at 8% 130%, rgba(189, 214, 230, 0.14), transparent 70%);
  pointer-events: none;
}
.orders-banner .container { position: relative; }
.orders-banner__title {
  margin: 10px 0 0;
  font-size: var(--text-display-md);
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
}
.orders-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--text-caption);
}
.orders-crumb a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.orders-crumb a:hover { color: var(--color-primary); }
.orders-crumb__sep { color: rgba(255, 255, 255, 0.35); font-size: 12px; }

/* ---------- Layout ---------- */
.orders-section { margin: var(--space-xxl) 0 var(--space-section); }
.orders-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-xl);
  align-items: start;
}

/* ---------- Order cards (accordion) ---------- */
.orders-accordion { display: grid; gap: var(--space-base); }
.order-card {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.order-card--is-failed { border-inline-start: 4px solid var(--color-badge-red); }
.order-card--is-sent { border-inline-start: 4px solid var(--color-badge-green); }
.order-card--is-processing { border-inline-start: 4px solid var(--color-accent-blue); }

.order-card__header { margin: 0; }
.order-card__toggle {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 16px 20px;
  font: inherit;
  text-align: right;
  transition: background 0.15s var(--ease);
}
.order-card__toggle:hover { background: var(--color-surface-soft); }
.order-card__toggle::after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  color: var(--color-muted-soft);
  margin-inline-start: auto;
  transition: transform 0.25s var(--ease);
}
.order-card__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.order-card__id { font-weight: 700; color: var(--color-ink); font-size: var(--text-body-sm); }
.order-card__date { color: var(--color-muted); font-size: var(--text-caption); }
.order-card__status {
  padding: 3px 12px;
  border-radius: var(--radius-xs);
  font-size: var(--text-caption);
  font-weight: 700;
  margin-inline-start: auto;
}
.order-card__toggle.is-failed .order-card__status { background: rgba(192, 57, 43, 0.1); color: var(--color-badge-red); }
.order-card__toggle.is-sent .order-card__status { background: rgba(39, 174, 96, 0.12); color: var(--color-badge-green); }
.order-card__toggle.is-processing .order-card__status { background: rgba(189, 214, 230, 0.35); color: #3d5a70; }

.order-card__body { padding: 0 20px 20px; }
.order-card__empty { color: var(--color-muted); font-size: var(--text-body-sm); padding-top: var(--space-base); }

/* ---------- Items table ---------- */
.order-items { width: 100%; border-collapse: collapse; }
.order-items td {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-hairline-soft);
  vertical-align: middle;
}
.order-items tr:last-child td { border-bottom: 0; }
.order-items__title { display: table-cell; }
.order-items__title img {
  width: 52px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-hairline-soft);
  margin-inline-end: 12px;
  vertical-align: middle;
  background: var(--color-surface-soft);
}
.order-items__title a {
  color: var(--color-ink);
  font-weight: 600;
  font-size: var(--text-body-sm);
  text-decoration: none;
}
.order-items__title a:hover { color: var(--color-primary); }
.order-items__price {
  text-align: left;
  white-space: nowrap;
  color: var(--color-body);
  font-size: var(--text-body-sm);
}
.order-items__price small { color: var(--color-muted); }

/* ---------- Summary rows ---------- */
.order-summary {
  list-style: none;
  margin: var(--space-base) 0 0;
  padding: var(--space-base) 0 0;
  border-top: 1px dashed var(--color-hairline);
  display: grid;
  gap: 8px;
}
.order-summary li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: var(--text-body-sm);
}
.order-summary li span { color: var(--color-muted); }
.order-summary li b { color: var(--color-ink); font-weight: 600; text-align: left; }
.order-summary__coupon { color: var(--color-badge-red) !important; }
.order-summary__discount { color: var(--color-badge-red) !important; }
.order-summary__total { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--color-hairline-soft); }
.order-summary__total span { font-weight: 700; color: var(--color-ink); }
.order-summary__total b { font-size: var(--text-title-md); color: var(--color-primary); }

/* ---------- Empty state ---------- */
.orders-empty {
  background: var(--color-canvas);
  border: 1px dashed var(--color-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-xxl) var(--space-lg);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-base);
}
.orders-empty i { font-size: 34px; color: var(--color-muted-soft); }
.orders-empty p { margin: 0; color: var(--color-muted); }

/* ---------- Side column ---------- */
.orders-side { display: grid; gap: var(--space-base); position: sticky; top: calc(var(--nav-h) + 16px); }
.orders-counts {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-base);
  display: grid;
  gap: 10px;
}
.orders-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
}
.orders-count b { font-family: var(--font-latin); font-size: var(--text-title-md); font-weight: 800; }
.orders-count--processing { background: rgba(189, 214, 230, 0.3); color: #3d5a70; }
.orders-count--processing b { color: #3d5a70; }
.orders-count--failed { background: rgba(192, 57, 43, 0.08); color: var(--color-badge-red); }
.orders-count--sent { background: rgba(39, 174, 96, 0.1); color: var(--color-badge-green); }

/* ---------- Profile nav ---------- */
.profile-nav {
  background: var(--color-surface-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-sm);
  display: grid;
  gap: 4px;
}
.profile-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: var(--text-body-sm);
  font-weight: 500;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.profile-nav__link i { width: 18px; text-align: center; font-size: 13px; }
.profile-nav__link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.profile-nav__link.is-active { background: var(--color-primary); color: #fff; }
.profile-nav__link--danger:hover { background: rgba(192, 57, 43, 0.25); color: #ffd9d4; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .orders-layout { grid-template-columns: 1fr; }
  .orders-side { position: static; }
  .orders-counts { grid-template-columns: repeat(3, 1fr); }
  .orders-count { flex-direction: column; gap: 4px; padding: 12px 8px; text-align: center; }
  .profile-nav { grid-auto-flow: column; grid-auto-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .orders-counts { grid-template-columns: 1fr; }
  .profile-nav { grid-auto-flow: row; }
  .order-card__toggle { flex-direction: column; align-items: flex-start; gap: 4px; }
  .order-card__toggle .order-card__status { margin-inline-start: 0; align-self: flex-start; }
  .order-card__toggle::after { position: absolute; }
  .order-card__header { position: relative; }
  .order-card__toggle::after { margin: 0; position: absolute; top: 16px; left: 16px; }
}