/* Katrin Max - customer account pages, password pages and shared notices.
   Loaded after login.css, so it relies on that file's variables (--terracotta, --ink, --line, ...) and base styles. */

/* ---------- Notices (login, basket, account, password pages) ---------- */
.form-message{margin:0 0 18px; padding:12px 14px; border:1px solid #cfe3d6; border-left:4px solid var(--success); border-radius:10px; background:#F2F8F4; color:#1F4D36; font-size:13.5px; line-height:1.45;}
.form-message.error{border-color:#EFC4B8; border-left-color:var(--terracotta); background:#FDF3EF; color:#7A2A13;}
.form-message.info{border-color:var(--line); border-left-color:var(--ink-soft); background:var(--paper-warm); color:var(--ink);}
.form-message ul{margin:0; padding-left:18px; list-style:disc;}
.form-message ul li{margin:2px 0;}
.wrap .form-message{margin-top:18px;}

/* ---------- Layout ---------- */
.acct-wrap{max-width:1120px; margin:0 auto; padding:34px 32px 96px;}
.acct-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px;}
.acct-head h1{font-family:var(--display); font-weight:800; font-size:30px; letter-spacing:-.01em; line-height:1.15;}
.acct-sub{margin-top:6px; font-size:14px; color:var(--ink-soft);}
.acct-sub strong{color:var(--ink);}
.acct-mono{font-family:var(--mono); font-size:12.5px; background:var(--paper-warm); border:1px solid var(--line); border-radius:6px; padding:1px 7px;}

.acct-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; border-bottom:1px solid var(--line); padding-bottom:14px;}
.acct-tabs a{display:inline-flex; align-items:center; padding:10px 16px; border-radius:8px; font-weight:700; font-size:13.5px; color:var(--ink); border:1.5px solid var(--line); background:#fff; transition:border-color .15s, color .15s, background .15s;}
.acct-tabs a:hover{border-color:var(--terracotta); color:var(--terracotta-dark);}
.acct-tabs .t-short{display:none;}
.acct-tabs::-webkit-scrollbar{display:none;}
.acct-tabs{scrollbar-width:none;}
.acct-tabs a[aria-current="page"]{background:var(--terracotta); border-color:var(--terracotta); color:#fff;}

.acct-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:26px; align-items:start;}
.acct-card{border:1px solid var(--line); border-radius:16px; background:#fff; padding:26px;}
.acct-card + .acct-card{margin-top:22px;}
.acct-card h2{font-family:var(--display); font-weight:800; font-size:19px; margin-bottom:16px; display:flex; align-items:baseline; justify-content:space-between; gap:12px;}
.acct-card h2 a{font-family:var(--body); font-size:13px; font-weight:700; color:var(--terracotta-dark); border-bottom:1px solid var(--terracotta);}
.acct-muted{color:var(--ink-soft); font-size:13.5px;}

/* ---------- Buttons ---------- */
.acct-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:8px; border:2px solid var(--terracotta); background:var(--terracotta); color:#fff; font-weight:700; font-size:13.5px; line-height:1.2; cursor:pointer; transition:background .15s, border-color .15s, color .15s; text-align:center;}
.acct-btn:hover{background:var(--terracotta-dark); border-color:var(--terracotta-dark);}
.acct-btn.ghost{background:#fff; border-color:var(--line); color:var(--ink);}
.acct-btn.ghost:hover{border-color:var(--terracotta); color:var(--terracotta-dark); background:#fff;}
.acct-btn.green{background:var(--success); border-color:var(--success);}
.acct-btn.green:hover{opacity:.92; background:var(--success); border-color:var(--success);}
.acct-btn.small{padding:8px 13px; font-size:12.5px;}

/* ---------- Orders ---------- */
.acct-orders{display:flex; flex-direction:column; gap:12px;}
.acct-order{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto auto; gap:14px 22px; align-items:center; border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:#fff; transition:border-color .15s, box-shadow .15s;}
.acct-order:hover{border-color:var(--terracotta); box-shadow:0 10px 24px -16px rgba(193,80,46,.5);}
.ao-num{font-family:var(--display); font-weight:800; font-size:16px; color:var(--terracotta-dark); white-space:nowrap;}
.ao-date{display:block; margin-top:2px; font-size:12.5px; color:var(--ink-soft);}
.ao-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-size:13px; color:var(--ink-soft);}
.ao-badge{display:inline-block; padding:3px 9px; border-radius:20px; font-size:11.5px; font-weight:700; background:#FDF1EA; color:var(--terracotta-dark); border:1px solid #F1D3C6;}
.ao-badge.is-done{background:#EEF6F1; color:#2C6446; border-color:#CFE3D6;}
.ao-total{text-align:right;}
.ao-total strong{display:block; font-family:var(--display); font-weight:900; font-size:17px; color:var(--ink);}
.ao-total small{font-size:11.5px; color:var(--ink-soft);}
.ao-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
.ao-actions form{margin:0;}
.acct-empty{text-align:center; padding:34px 10px;}
.acct-empty p{margin-bottom:18px; color:var(--ink-soft);}

/* narrow card (overview page): number/total on the first row, status/buttons below */
.acct-orders.compact .acct-order{grid-template-columns:minmax(0,1fr) auto;}
.acct-orders.compact .ao-meta{grid-column:1/2;}
.acct-orders.compact .ao-total{grid-column:2/3; grid-row:1/3; align-self:start;}
.acct-orders.compact .ao-actions{grid-column:1/-1; justify-content:flex-start;}

/* ---------- Order details ---------- */
.al-list{display:flex; flex-direction:column;}
.al-row{display:grid; grid-template-columns:64px minmax(0,1fr) auto auto; gap:6px 16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line);}
.al-row:first-child{padding-top:0;}
.al-row:last-child{border-bottom:0; padding-bottom:0;}
.al-img{width:64px; height:64px; border-radius:10px; background:var(--paper-warm); display:flex; align-items:center; justify-content:center; padding:6px; overflow:hidden;}
.al-img img{max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply;}
.al-name{font-weight:700; font-size:14px; line-height:1.3;}
.al-name a:hover{color:var(--terracotta-dark);}
.al-code{display:block; font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); margin-top:3px;}
.al-qty{font-size:13px; color:var(--ink-soft); white-space:nowrap; text-align:right;}
.al-sum{font-weight:800; font-size:14.5px; white-space:nowrap; text-align:right; min-width:86px;}
.al-gone{font-size:11.5px; color:var(--terracotta-dark); font-weight:700; margin-top:3px; display:block;}
.acct-sum-row{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.acct-sum-row span:first-child{color:var(--ink-soft);}
.acct-sum-row strong{text-align:right;}
.acct-sum-total{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding-top:16px;}
.acct-sum-total span{font-weight:700; font-size:14px;}
.acct-sum-total strong{font-family:var(--display); font-weight:900; font-size:23px; color:var(--terracotta-dark);}
.acct-dl{display:grid; grid-template-columns:minmax(0,120px) minmax(0,1fr); gap:9px 14px; font-size:13.5px;}
.acct-dl dt{color:var(--ink-soft);}
.acct-dl dd{font-weight:600; word-break:break-word;}
.acct-back{display:inline-block; margin-bottom:16px; font-size:13px; font-weight:700; color:var(--terracotta-dark);}
.acct-back:hover{text-decoration:underline;}
.acct-actions-bar{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;}
.acct-actions-bar form{margin:0;}

/* ---------- Forms (profile, password) ---------- */
.acct-form{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px;}
.acct-form .lf-field{margin-bottom:18px;}
.acct-form .lf-field.full{grid-column:1/-1;}
.acct-form .lf-field small{display:block; margin-top:5px; font-size:12px; color:var(--ink-soft);}
.acct-form .lf-field input[readonly]{background:var(--paper-warm); color:var(--ink-soft);}
.lf-field small{display:block; margin-top:5px; font-size:12px; color:var(--ink-soft);}
.lf-field .req{color:var(--terracotta);}
.acct-form-actions{grid-column:1/-1; display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.acct-form-actions .acct-btn{min-width:180px;}

@media (max-width:900px){
  .acct-grid{grid-template-columns:minmax(0,1fr);}
  .acct-order{grid-template-columns:minmax(0,1fr) auto; }
  .ao-meta{grid-column:1/2;}
  .ao-total{grid-column:2/3; grid-row:1/3; align-self:start;}
  .ao-actions{grid-column:1/-1; justify-content:flex-start;}
}
@media (max-width:680px){
  .acct-wrap{padding:22px 16px 72px;}
  .acct-head h1{font-size:24px;}
  .acct-head{align-items:flex-start;}
  .acct-tabs{gap:6px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:12px; margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px;}
  .acct-tabs a{padding:9px 14px; white-space:nowrap; flex:0 0 auto;}
  .acct-tabs .t-full{display:none;}
  .acct-tabs .t-short{display:inline;}
  .acct-card{padding:20px 16px; border-radius:14px;}
  .acct-form{grid-template-columns:minmax(0,1fr);}
  .acct-form-actions .acct-btn{width:100%;}
  .al-row{grid-template-columns:54px minmax(0,1fr) auto; grid-template-areas:"img name name" "img qty sum";}
  .al-row .al-img{grid-area:img; width:54px; height:54px;}
  .al-row .al-main{grid-area:name;}
  .al-row .al-qty{grid-area:qty; text-align:left;}
  .al-row .al-sum{grid-area:sum;}
  .acct-dl{grid-template-columns:minmax(0,96px) minmax(0,1fr);}
  .ao-actions .acct-btn{flex:1 1 auto;}
  .ao-actions form{flex:1 1 auto;}
  .ao-actions form .acct-btn{width:100%;}
}