/* =============================================================
   ACCOUNT / WISHLIST / ORDER TRACKING / FAQ / POLICY PAGES
   Extends style.css design .
   ============================================================= */

/* ---------------- Page header ---------------- */
.page-hero{ padding:48px 0 8px; }
.page-hero h1{ font-size:clamp(26px,3.6vw,40px); font-weight:900; margin:0 0 8px; }
.page-hero p{ color:var(--color-text-muted); margin:0; max-width:640px; }

/* ---------------- Dashboard shell ---------------- */
.dash-layout{ display:grid; grid-template-columns:260px 1fr; gap:28px; align-items:start; }

.dash-sidebar{ background:var(--color-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:20px; position:sticky; top:calc(var(--nav-height) + 20px); }
.dash-user{ display:flex; align-items:center; gap:12px; padding:6px 6px 18px; border-bottom:1px solid var(--color-border); margin-bottom:14px; }
.dash-avatar{ width:48px; height:48px; border-radius:50%; background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; flex:none; }
.dash-user strong{ display:block; font-size:15px; }
.dash-user span{ font-size:12px; color:var(--color-text-muted); }

.dash-nav{ display:flex; flex-direction:column; gap:4px; }
.dash-nav button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:right;
  padding:12px 14px; border-radius:var(--radius-md); font-weight:600; font-size:14px;
  color:var(--color-primary); transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.dash-nav button svg{ width:18px; height:18px; flex:none; }
.dash-nav button:hover{ background:var(--color-bg); }
.dash-nav button.active{ background:var(--color-primary); color:#fff; }
.dash-nav button.danger{ color:var(--color-danger); }
.dash-nav button.danger:hover{ background:rgba(226,55,68,.1); }

.dash-panel{ background:var(--color-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:32px; min-height:420px; }
.dash-panel h2{ font-size:20px; font-weight:800; margin:0 0 6px; }
.dash-panel > p.hint{ color:var(--color-text-muted); font-size:14px; margin:0 0 26px; }
.dash-panel-section{ display:none; }
.dash-panel-section.active{ display:block; }

.dash-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }

/* ---------------- Address cards ---------------- */
.address-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-bottom:22px; }
.address-card{ position:relative; border:1.5px solid var(--color-border); border-radius:var(--radius-md); padding:18px; }
.address-card.is-default{ border-color:var(--color-accent); background:rgba(181,101,29,.04); }
.address-card .badge-default{ position:absolute; top:14px; left:14px; background:var(--color-accent); color:#2B1608; font-size:11px; font-weight:800; padding:3px 10px; border-radius:var(--radius-pill); }
.address-card h4{ margin:0 0 6px; font-size:15px; }
.address-card p{ margin:0; font-size:13px; color:var(--color-text-muted); line-height:1.7; }
.address-card-actions{ display:flex; gap:8px; margin-top:14px; }
.address-card-actions button{ font-size:12px; font-weight:700; color:var(--color-primary); }
.address-card-actions button.danger{ color:var(--color-danger); }
.address-card-empty{ border:1.5px dashed var(--color-border); border-radius:var(--radius-md); padding:30px; text-align:center; color:var(--color-text-muted); font-size:14px; }

/* ---------------- Order history table ---------------- */
.orders-table{ width:100%; border-collapse:collapse; font-size:14px; }
.orders-table th{ text-align:right; padding:12px 10px; color:var(--color-text-muted); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--color-border); }
.orders-table td{ padding:14px 10px; border-bottom:1px solid var(--color-border); vertical-align:middle; }
.orders-table tr:last-child td{ border-bottom:none; }
.orders-table .view-order{ font-weight:700; color:var(--color-accent-dark); }

.status-pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--radius-pill); font-size:12px; font-weight:800; }
.status-pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.status-pill.st-processing,.status-pill.st-pending{ background:rgba(255,176,32,.14); color:#95650a; }
.status-pill.st-confirmed,.status-pill.st-paid{ background:rgba(181,101,29,.14); color:var(--color-accent-dark); }
.status-pill.st-shipped{ background:rgba(37,99,235,.12); color:#2563EB; }
.status-pill.st-delivered{ background:rgba(181,101,29,.18); color:#2B1608; }
.status-pill.st-cancelled,.status-pill.st-failed{ background:rgba(226,55,68,.12); color:var(--color-danger); }

/* ---------------- Order history — mobile cards ----------------
   Hidden by default (desktop/tablet show the .table-scroll table);
   swapped on at the mobile breakpoint in responsive.css, where the
   table is hidden instead. Keeps every field (incl. payment/order
   status + details button) visible without any horizontal scroll. */
.orders-cards{ display:none; }
.order-card{ border:1px solid var(--color-border); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:12px; }
.order-card:last-child{ margin-bottom:0; }
.order-card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--color-border); font-size:13px; }
.order-card-head strong{ font-size:14px; }
.order-card-head span{ color:var(--color-text-muted); }
.order-card-row{ display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:13.5px; }
.order-card-row > span:first-child{ color:var(--color-text-muted); }
.order-card-btn{ width:100%; margin-top:10px; padding:10px; border-radius:var(--radius-md); background:var(--color-bg); font-weight:700; color:var(--color-accent-dark); font-size:13.5px; }

/* ---------------- Order detail modal ---------------- */
.order-modal-overlay{ position:fixed; inset:0; background:rgba(17,17,17,.55); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; padding:20px; z-index:200; }
.order-modal-overlay.open{ display:flex; }
.order-modal{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; max-width:560px; max-height:86vh; overflow-y:auto; padding:30px; }
.order-modal-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.order-modal-head button{ font-size:20px; line-height:1; color:var(--color-text-muted); }
.order-line-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--color-border); }
.order-line-item img{ width:56px; height:56px; border-radius:var(--radius-sm); object-fit:cover; background:var(--color-bg); flex:none; }
.order-line-item .meta{ flex:1; font-size:13px; }
.order-line-item .meta strong{ display:block; font-size:14px; margin-bottom:2px; }
.order-totals-mini{ margin-top:16px; font-size:13px; }
.order-totals-mini div{ display:flex; justify-content:space-between; padding:5px 0; color:var(--color-text-muted); }
.order-totals-mini div.grand{ color:var(--color-primary); font-weight:800; font-size:15px; border-top:1px solid var(--color-border); margin-top:6px; padding-top:12px; }

/* ---------------- Order tracking timeline ---------------- */
.track-form{ display:flex; gap:12px; flex-wrap:wrap; background:var(--color-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:24px; margin-bottom:36px; }
.track-form .form-group{ flex:1; min-width:220px; margin-bottom:0; }
.track-form button{ align-self:flex-end; }

.track-result{ background:var(--color-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:34px; }
.track-order-head{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:14px; margin-bottom:36px; padding-bottom:24px; border-bottom:1px solid var(--color-border); }
.track-order-head h3{ margin:0 0 6px; font-size:20px; }
.track-order-head span{ color:var(--color-text-muted); font-size:13px; }

.timeline{ display:flex; align-items:flex-start; justify-content:space-between; position:relative; margin:0 0 40px; overflow-x:auto; padding:4px 4px 10px; gap:4px; }
.timeline::before{ content:""; position:absolute; top:19px; right:5%; left:5%; height:3px; background:var(--color-border); z-index:0; }
.timeline-step{ position:relative; z-index:1; flex:1; min-width:92px; text-align:center; }
.timeline-dot{ width:38px; height:38px; border-radius:50%; background:#fff; border:3px solid var(--color-border); margin:0 auto 10px; display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--color-text-muted); transition:all var(--dur-med) var(--ease); }
.timeline-step.done .timeline-dot{ background:var(--color-accent); border-color:var(--color-accent); color:#2B1608; }
.timeline-step.current .timeline-dot{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; animation:pulseDot 1.6s infinite; }
.timeline-step.cancelled .timeline-dot{ background:var(--color-danger); border-color:var(--color-danger); color:#fff; }
.timeline-step span{ font-size:12.5px; font-weight:700; color:var(--color-text-muted); display:block; }
.timeline-step.done span,.timeline-step.current span{ color:var(--color-primary); }
@keyframes pulseDot{ 0%,100%{ box-shadow:0 0 0 0 rgba(17,17,17,.28); } 50%{ box-shadow:0 0 0 8px rgba(17,17,17,0); } }

.track-items{ margin-top:10px; }
.track-empty{ text-align:center; color:var(--color-text-muted); padding:40px 10px; }

/* ---------------- FAQ accordion ---------------- */
.faq-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
.faq-tabs button{ padding:10px 20px; border-radius:var(--radius-pill); border:1.5px solid var(--color-border); font-weight:700; font-size:13px; color:var(--color-text-muted); transition:all var(--dur-fast) var(--ease); }
.faq-tabs button:hover{ border-color:var(--color-primary); color:var(--color-primary); }
.faq-tabs button.active{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }

.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--color-card); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); overflow:hidden; }
.faq-question{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 24px; text-align:right; font-weight:700; font-size:15px; }
.faq-question .plus{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--color-bg); display:flex; align-items:center; justify-content:center; transition:transform var(--dur-med) var(--ease); font-size:16px; }
.faq-item.open .faq-question .plus{ transform:rotate(45deg); background:var(--color-accent); color:#2B1608; }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height var(--dur-med) var(--ease); }
.faq-answer p{ margin:0; padding:0 24px 20px; color:var(--color-text-muted); font-size:14px; line-height:1.8; }
.faq-item.open .faq-answer{ max-height:400px; }

/* ---------------- Policy / shipping content pages ---------------- */
.policy-layout{ display:grid; grid-template-columns:240px 1fr; gap:36px; align-items:start; }
.policy-toc{ position:sticky; top:calc(var(--nav-height) + 20px); background:var(--color-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:20px; }
.policy-toc h4{ margin:0 0 12px; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-muted); }
.policy-toc a{ display:block; padding:8px 10px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600; color:var(--color-primary); }
.policy-toc a:hover{ background:var(--color-bg); }

.policy-block{ background:var(--color-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:32px; margin-bottom:20px; scroll-margin-top:calc(var(--nav-height) + 20px); }
.policy-block h3{ font-size:19px; font-weight:800; margin:0 0 14px; display:flex; align-items:center; gap:10px; }
.policy-block h3 .num{ width:30px; height:30px; border-radius:50%; background:var(--color-primary); color:#fff; font-size:13px; display:flex; align-items:center; justify-content:center; flex:none; }
.policy-block p{ color:var(--color-text-muted); font-size:14.5px; line-height:1.9; margin:0 0 12px; }
.policy-block ul{ margin:0 0 12px; padding-inline-end:0; }
.policy-block ul li{ position:relative; padding-inline-end:22px; margin-bottom:8px; color:var(--color-text-muted); font-size:14.5px; line-height:1.75; }
.policy-block ul li::before{ content:"—"; position:absolute; right:0; color:var(--color-accent); font-weight:800; }
.policy-note{ background:var(--color-bg); border-radius:var(--radius-md); padding:16px 18px; font-size:13.5px; color:var(--color-text-muted); border-inline-start:3px solid var(--color-accent); }

/* ---------------- Empty states ---------------- */
.empty-state{ text-align:center; padding:60px 20px; }
.empty-state .icon{ width:64px; height:64px; border-radius:50%; background:var(--color-bg); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color:var(--color-text-muted); }
.empty-state h3{ margin:0 0 8px; font-size:18px; }
.empty-state p{ color:var(--color-text-muted); font-size:14px; margin:0 0 20px; }

/* ---------------- Responsive ---------------- */
@media (max-width:900px){
  .dash-layout,.policy-layout{ grid-template-columns:1fr; }
  .dash-sidebar,.policy-toc{ position:static; }
  .dash-nav{ flex-direction:row; flex-wrap:wrap; }
  .dash-nav button{ width:auto; }
  .dash-form-grid{ grid-template-columns:1fr; }

  /* ROOT CAUSE of the page-wide horizontal scroll on the "طلباتي" tab:
     `overflow-x:auto` was applied directly to the <table> itself with
     `display:block`. A <table> element forced to `display:block` still
     has table-model children (thead/tr/td keep their UA-default
     table-row-group/table-row/table-cell display), so the browser has
     to generate an anonymous table box to lay them out — and that
     anonymous box's intrinsic (min-content) width is not reliably
     contained by the outer element's own `overflow:auto` in every
     engine. The scroll region ends up leaking out to the nearest
     ancestor that DOES clip overflow, which on this site is
     `<body>` — so the whole page, including the sticky top navbar,
     scrolled sideways instead of just the table.
     Fix: scroll a plain wrapper DIV instead (see #ordersWrap markup
     change in js/account.js), and leave the <table> itself as a
     normal table (no display:block) so its native table layout
     algorithm works exactly as it always did — only now it's safely
     contained inside a div whose overflow really is its own. */
  .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
  .table-scroll .orders-table{ white-space:nowrap; }
}