/* Shared order list/detail presentation used by the homepage and account center. */
.modal-overlay.order-detail-overlay { background:rgba(15,23,42,.48); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.account-order-list { display:grid; gap:10px; margin-top:18px; }
.account-order-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:14px; align-items:center; padding:14px 16px; border:1px solid var(--border-color); border-radius:14px; background:var(--bg-card); }
.account-order-row--full { min-height:68px; grid-template-columns:64px minmax(0,1fr) auto auto; }
.account-order-link { cursor:pointer; transition:border-color .2s,background .2s,transform .2s; }
.account-order-link:hover { border-color:var(--accent-color); background:rgba(14,165,233,.05); transform:translateY(-1px); }
.account-order-thumb { width:64px; height:auto; aspect-ratio:4 / 3; object-fit:contain; border-radius:9px; border:1px solid var(--border-color); background:var(--bg-color); }
.account-order-thumb-placeholder { display:grid; place-items:center; color:var(--accent-color); background:linear-gradient(145deg,color-mix(in srgb,var(--accent-color) 9%,var(--bg-card)),var(--bg-color)); }
.account-order-thumb-placeholder svg { width:18px; height:18px; opacity:.7; }
.account-order-number { color:var(--text-muted); font: .76rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; }
.order-detail-number { color:var(--accent-color); font:700 .78rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.02em; }
.account-order-row time { color:var(--text-muted); font-size:.76rem; white-space:nowrap; }

.account-order-detail-layout { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr); gap:20px; align-items:stretch; }
.account-order-detail-main, .account-order-detail-guide { min-width:0; }
.account-order-product-summary { display:grid; grid-template-columns:180px minmax(0,1fr); gap:14px; align-items:start; padding:12px; border:1px solid var(--border-color); border-radius:14px; background:color-mix(in srgb,var(--bg-card) 78%,var(--bg-color)); }
.account-order-summary-info { min-width:0; padding-top:2px; }
.account-order-meta-label { margin-bottom:8px; color:var(--text-muted); font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.account-order-detail-main { display:flex; flex-direction:column; min-height:0; padding-bottom:0; overflow:hidden; }
.account-order-detail-image { display:block; width:min(100%,180px); height:auto; max-height:135px; aspect-ratio:4 / 3; object-fit:contain; margin:0; border-radius:14px; border:1px solid var(--border-color); background:var(--bg-color); }
.account-order-image-placeholder { display:grid; place-items:center; align-content:center; gap:6px; color:var(--text-muted); background:linear-gradient(145deg,color-mix(in srgb,var(--accent-color) 9%,var(--bg-card)),var(--bg-color)); font-size:.72rem; font-weight:700; }
.account-order-image-placeholder svg { width:24px; height:24px; color:var(--accent-color); opacity:.7; }
.account-order-detail-guide { height:100%; max-height:none; min-height:0; overflow:auto; padding:18px; border:1px solid color-mix(in srgb,var(--accent-color) 20%,var(--border-color)); border-radius:16px; background:color-mix(in srgb,var(--accent-color) 5%,var(--bg-card)); }
.account-order-detail-guide h3 { display:flex; align-items:center; gap:7px; margin:0 0 12px; font-size:.92rem; }
.account-order-detail-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px; margin-top:0; color:var(--text-muted); font-size:.78rem; }
.account-order-meta-item { display:grid; grid-template-columns:4em minmax(0,1fr); align-items:baseline; gap:10px; min-width:0; min-height:32px; padding:6px 0; border-bottom:1px solid color-mix(in srgb,var(--border-color) 70%,transparent); background:none; }
.account-order-meta-item > span { color:var(--text-muted); font-size:.68rem; line-height:1.25; }
.account-order-meta-item > strong { min-width:0; overflow-wrap:anywhere; color:var(--text-main); font-size:.76rem; line-height:1.35; text-align:right; }
.account-order-meta-item:nth-last-child(-n+2) { border-bottom:0; }
.account-order-meta-item--amount > strong { color:var(--accent-color); }
.account-order-meta-item--coupon, .account-order-meta-item--datetime { grid-column:1 / -1; }
.account-order-meta-item--datetime > strong { white-space:nowrap; font-size:.72rem; }
.account-order-detail-section { margin-top:12px; padding-top:10px; border-top:1px solid var(--border-color); }
.account-order-delivery-section { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.account-order-detail-section h3 { margin:0; font-size:.9rem; }
.account-order-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; }
.account-order-section-head h3 { display:flex; align-items:center; gap:7px; }
.account-order-section-head > span { color:var(--text-muted); font-size:.74rem; }
.account-order-guide { color:var(--text-muted); font-size:.8rem; line-height:1.7; white-space:normal; }
.account-order-cards { flex:1 1 auto; min-height:80px; margin:0; max-height:none; overflow:auto; padding:10px; border:1px solid var(--border-color); border-radius:10px; background:var(--bg-color); color:var(--text-main); font:.78rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; word-break:break-all; user-select:text; }
.account-order-actions { position:static; z-index:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:auto; padding:14px 0 0; background:none; }
.account-order-actions button { min-width:0; min-height:36px; justify-content:center; gap:7px; border-radius:10px; font-size:.8rem; font-weight:800; }
.account-order-actions .btn-primary { border:1px solid var(--accent-color); box-shadow:0 5px 14px rgba(14,165,233,.16); }
.account-order-actions .btn-ghost { border:1px solid color-mix(in srgb,var(--accent-color) 45%,var(--border-color)); background:var(--bg-card); color:var(--accent-color); }
.account-order-actions .btn-ghost:hover { border-color:var(--accent-color); background:rgba(14,165,233,.08); }
.account-order-action-status { grid-column:1 / -1; min-height:0; color:var(--success-color); font-size:.76rem; line-height:1.3; }
.account-order-state { display:grid; gap:5px; margin-top:18px; padding:18px; border:1px dashed var(--border-color); border-radius:14px; background:var(--bg-color); color:var(--text-muted); font-size:.8rem; }
.account-order-state strong { color:var(--text-main); }
.account-order-state--pending strong { color:#d97706; }
.account-order-state--processing strong { color:#7c3aed; }
.account-orders-pagination { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:18px; flex-wrap:wrap; }
.account-page-button { min-width:34px; height:34px; padding:0 10px; border:1px solid var(--border-color); border-radius:9px; background:var(--bg-card); color:var(--text-main); font-size:.78rem; font-weight:700; cursor:pointer; }
.account-page-button:hover:not(:disabled), .account-page-button.active { border-color:var(--accent-color); color:var(--accent-color); background:rgba(14,165,233,.08); }
.account-page-button:disabled { opacity:.45; cursor:not-allowed; }
.account-page-ellipsis { padding:0 4px; color:var(--text-muted); }

.order-detail-modal { width:min(1100px,calc(100vw - 40px)); max-width:none; height:80vh; min-height:560px; max-height:calc(100vh - 40px); overflow:hidden; display:flex; flex-direction:column; }
.order-detail-modal__body { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; padding:18px 22px 16px; }
.order-detail-result { flex:1; min-height:0; overflow:hidden; }
.order-detail-result .account-order-detail-layout { height:100%; min-height:0; overflow:hidden; }
.order-detail-result .account-order-detail-main, .account-order-detail-modal .account-order-detail-main { min-height:0; overflow:hidden; padding-right:4px; }
.order-detail-result .account-order-detail-guide, .account-order-detail-modal .account-order-detail-guide { height:100%; max-height:none; min-height:0; overflow:auto; }
.order-detail-loading { display:grid; place-items:center; gap:10px; min-height:180px; color:var(--text-muted); }
.order-detail-loading svg { width:32px; height:32px; }
.order-detail-error { padding:20px; text-align:center; }
.order-detail-loading[hidden], .order-detail-error[hidden], .order-detail-result[hidden] { display:none !important; }

@media (max-width:768px) {
  .account-order-row { grid-template-columns:1fr auto; }
  .account-order-row--full { grid-template-columns:64px minmax(0,1fr); }
  .account-order-row--full > span, .account-order-row--full > time { grid-column:2; }
  .account-order-detail-layout { grid-template-columns:1fr; }
  .account-order-product-summary { grid-template-columns:1fr; }
  .account-order-detail-meta { grid-template-columns:1fr; gap:0; }
  .account-order-meta-item:nth-last-child(-n+2) { border-bottom:1px solid color-mix(in srgb,var(--border-color) 70%,transparent); }
  .account-order-meta-item:last-child { border-bottom:0; }
  .account-order-detail-image { width:min(100%,280px); max-height:210px; margin:0 auto; }
  .account-order-summary-info { padding-top:0; }
  .order-detail-modal { width:calc(100vw - 24px); height:80vh; min-height:460px; }
  .order-detail-result .account-order-detail-layout { overflow:auto; }
  .order-detail-result .account-order-detail-main, .account-order-detail-modal .account-order-detail-main { overflow:visible; }
  .account-order-delivery-section { min-height:240px; overflow:visible; }
  .account-order-delivery-section .account-order-cards { flex:0 1 auto; max-height:180px; }
  .account-order-actions { margin-top:12px; padding-top:0; }
  .order-detail-modal__body { padding:14px; }
  .order-detail-result .account-order-detail-guide, .account-order-detail-modal .account-order-detail-guide { height:260px; max-height:260px; min-height:0; overflow:auto; }
}