/* =========================================================================
   EDIUSFA CORE — Platform front styles (PHASE 4)
   Customer-account endpoints + auth OTP panel. Builds on the design
   tokens only — no new palette, no layout hacks.
   ========================================================================= */

/* ---- endpoint headers ------------------------------------------------- */
.ep-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem;margin:0 0 1.25rem}
.ep-head h2{margin:0;font-size:1.15rem}
.ep-desc{margin:0;color:var(--text-muted);font-size:.85rem;flex:1 1 100%}
.ep-actions{display:flex;gap:.5rem;margin-inline-start:auto}

/* ---- shared form grammar (account endpoints) -------------------------- */
.frm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.9rem}
.fld{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;color:var(--text-muted)}
.fld > span{font-weight:600;color:var(--text)}
.fld .input,.fld .select,.fld .textarea{width:100%;border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:.55rem .75rem;font:inherit;font-size:.9rem;color:var(--text)}
.fld .input:focus,.fld .select:focus,.fld .textarea:focus{outline:2px solid var(--primary-soft);border-color:var(--primary)}
.frm-msg{min-height:1.2em;font-size:.82rem;margin:.25rem 0 0}
.frm-msg.is-ok{color:var(--success)}
.frm-msg.is-err{color:var(--danger)}
.frm-msg.is-warn{color:var(--warning)}

/* ---- tickets ------------------------------------------------------------ */
.tkt-list{display:flex;flex-direction:column;gap:.6rem}
.tkt-row{display:flex;align-items:center;gap:.9rem;padding:.9rem 1.1rem;text-decoration:none;color:inherit}
.tkt-main{display:flex;flex-direction:column;gap:.15rem;flex:1;min-width:0}
.tkt-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkt-main .mono{font-size:.72rem;color:var(--text-subtle)}
.tkt-date{font-size:.78rem;color:var(--text-subtle);white-space:nowrap}
.tkt-form{display:flex;flex-direction:column;gap:.9rem;margin-bottom:1.25rem}
.tkt-thread{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.25rem}
.tkt-msg{border:1px solid var(--border);border-radius:14px;padding:.9rem 1.1rem;background:var(--surface)}
.tkt-msg header{display:flex;align-items:center;gap:.6rem;font-size:.8rem;color:var(--text-subtle);margin-bottom:.45rem}
.tkt-msg header time{margin-inline-start:auto}
.tkt-msg.is-mine{background:var(--primary-soft);border-color:transparent}
.tkt-msg.is-staff{background:var(--surface-muted)}
.tkt-body p{margin:.3rem 0;font-size:.92rem;line-height:1.9}
.tkt-att{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--primary-ink);text-decoration:none;margin:0 .5rem .5rem 0;border:1px dashed var(--border-strong);border-radius:10px;padding:.35rem .7rem}
.tkt-att:hover{background:var(--surface-muted)}

/* ---- notifications ------------------------------------------------------ */
.notif-prefs{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-bottom:1.1rem}
.notif-pref-title{font-size:.9rem}
.notif-pref{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--text-muted)}
.notif-list{display:flex;flex-direction:column;gap:.6rem}
.notif-row{display:flex;align-items:center;gap:.9rem;padding:.85rem 1.1rem}
.notif-row div{flex:1;min-width:0}
.notif-row p{margin:.2rem 0 0;font-size:.85rem;color:var(--text-muted)}
.notif-row time{font-size:.75rem;color:var(--text-subtle);white-space:nowrap}
.notif-row.is-unread{border-inline-start:3px solid var(--primary);background:var(--primary-soft)}

/* ---- points --------------------------------------------------------------- */
.pts-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem;margin-bottom:1.25rem}
.pts-balance span,.pts-level span{display:block;font-size:.78rem;color:var(--text-muted);margin-bottom:.2rem}
.pts-balance b{font-size:1.6rem;color:var(--primary-ink)}
.pts-level b{font-size:1.1rem}
.pts-level small{display:block;color:var(--text-muted);font-size:.8rem;margin-top:.2rem}
.pts-levels{grid-column:1/-1;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.pts-levels li{border:1px solid var(--border);border-radius:12px;padding:.5rem .9rem;font-size:.82rem;display:flex;flex-direction:column;min-width:150px}
.pts-levels li .mono{color:var(--text-subtle);font-size:.72rem}
.pts-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;font-size:.86rem}
.pts-table th,.pts-table td{padding:.6rem .9rem;text-align:start;border-bottom:1px solid var(--border)}
.pts-table th{background:var(--surface-muted);font-size:.78rem;color:var(--text-muted)}
.pts-table .is-plus{color:var(--success);font-weight:700}
.pts-table .is-minus{color:var(--danger);font-weight:700}

/* ---- security ---------------------------------------------------------- */
.sec-form{margin-bottom:1.1rem;max-width:560px}
.sec-title{display:block;font-size:.95rem;margin-bottom:.75rem}
.sec-form .fld{margin-bottom:.75rem}
.sec-sessions{list-style:none;margin:0 0 .9rem;padding:0;display:flex;flex-direction:column;gap:.4rem;font-size:.82rem;color:var(--text-muted)}
.sec-sessions li{display:flex;gap:.8rem;flex-wrap:wrap}

/* ---- auth OTP panel ------------------------------------------------------ */
.otp-panel{display:flex;flex-direction:column;gap:.9rem;margin-top:1.25rem;border-top:1px dashed var(--border-strong);padding-top:1.25rem}
.otp-title{display:flex;align-items:center;gap:.5rem;font-size:.95rem;margin:0}
.otp-steps{display:flex;flex-direction:column;gap:.9rem}
.otp-steps[data-step="code"] .otp-step-phone{display:none}
.otp-steps[data-step="phone"] .otp-step-code{display:none}
.otp-row{display:flex;gap:.6rem;align-items:stretch}
.otp-row .input{flex:1}
.otp-code input{letter-spacing:.5em;text-align:center;font-size:1.1rem}
.otp-hint{font-size:.78rem;color:var(--text-subtle);margin:0}
.otp-alt{font-size:.82rem;color:var(--text-muted);margin:.25rem 0 0}
.otp-alt a{color:var(--primary-ink)}

/* ---- favorites toggle on product cards (state only; .p-wish exists) ---- */
.p-wish{transition:transform .18s ease,color .18s ease}
.p-wish.is-active{color:var(--danger)}
.p-wish.is-active svg{fill:currentColor}
.p-wish.is-busy{pointer-events:none;opacity:.55}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:640px){
	.tkt-row,.notif-row{flex-wrap:wrap}
	.pts-table{display:block;overflow-x:auto}
	.ep-actions{flex-basis:100%;margin-inline-start:0}
}