/* copyzor.com — fiokom.html + admin.html (js/account.js). Loaded after site.css and order.css; reuses the order-flow form styles. */

.acc-app { display: flex; flex-direction: column; gap: 24px; }
.acc-intro { max-width: 60ch; font-size: 16px; line-height: 1.6; color: var(--fg-2); }
.acc-form { max-width: 520px; }
.acc-msg, .acc-sent { max-width: 640px; }
.acc-sent:focus-visible, .acc-msg:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }
.acc-loading { min-height: 120px; }

/* signed in: who + sign out */
.acc-who { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.acc-who p { min-width: 0; font-size: 14px; line-height: 1.6; color: var(--fg-2); overflow-wrap: anywhere; }
.acc-hello { color: var(--acid); font-weight: 700; }
.acc-email { color: var(--fg); }
.acc-who__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.acc-who__act .of-ghost { align-self: center; }
.acc-h { margin-top: 8px; }

/* orders: the order flow's review card (.of-rev) with an acid head = order id + status badge */
.acc-orders { display: flex; flex-direction: column; gap: 24px; }
.acc-order__head h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; overflow-wrap: anywhere; }
.acc-order .of-rev__head { padding: 8px 10px 8px 18px; }
.acc-order .of-rev dt, .acc-order dt { flex-basis: 160px; }
.acc-drive { padding: 18px 18px 4px; }
.acc-drive .of-go { max-width: 100%; }
.acc-badge {
  display: inline-block; padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  color: var(--fg); background: var(--cz-black); border: 2px solid var(--cz-black);
}
.acc-badge--in_progress { color: var(--acid); }
.acc-badge--ready { color: var(--cz-black); background: var(--acid); border-color: var(--cz-black); }
.acc-badge--delivered { color: var(--fg-2); }
dd .acc-badge--received, dd .acc-badge--in_progress, dd .acc-badge--delivered { border-color: var(--cz-grey-50); }
.acc-empty { display: flex; flex-direction: column; gap: 20px; font-size: 16px; line-height: 1.6; color: var(--fg-2); }
.acc-empty p { margin: 0; }

/* admin */
.acc-banner {
  padding: 14px 18px; font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: 0.04em;
  color: var(--cz-black); background: var(--acid); border: 2px dashed var(--cz-black); outline: 2px solid var(--acid);
}
.acc-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.acc-tools__q { flex: 1 1 260px; }
.acc-tools .of-field:not(.acc-tools__q) { flex: 0 1 180px; }
.acc-count { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.acc-adm dd a { color: var(--acid); overflow-wrap: anywhere; }
.acc-upd { display: flex; flex-direction: column; gap: 16px; padding: 18px; border-top: 2px solid var(--cz-grey-50); }
.acc-upd__grid { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 16px; }
.acc-note { min-height: 72px; }
.acc-upd__act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.acc-upd .of-btn { min-height: 48px; padding: 10px 22px; }
.acc-res { align-self: flex-start; padding: 6px 10px; font-size: 13px; line-height: 1.5; color: var(--acid); border: 2px solid var(--acid); }
.acc-res--err { color: var(--cz-black); background: var(--acid); }
.acc-res[hidden] { display: none; }
.acc-hist { padding: 0 18px 14px; font-size: 13px; }
.acc-hist summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; color: var(--fg-2); }
.acc-hist summary:hover { color: var(--acid); }
.acc-hist__l { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--fg-2); }
.acc-hist__l .acc-badge { border-color: var(--cz-grey-50); }
.acc-hist__t { color: var(--fg); }
/* cancel = the status "cancelled": red (#ff8a7e) option, select, warning, inline confirm and tags; removed cards greyed (the update
   form stays full strength: saving another status restores the order) */
.acc-opt--cancel { color: #ff8a7e; }
.acc-upd select.acc-st--cancel { color: #ff8a7e; border-color: #ff8a7e; }
.acc-warn { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #ff8a7e; }
.acc-cq { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 2px dashed rgba(255, 122, 107, 0.7); background: rgba(255, 122, 107, 0.06); }
.acc-cq p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg); }
.acc-cq__act { display: flex; flex-wrap: wrap; gap: 10px; }
.acc-cq .acc-cq__yes { color: #ff8a7e; border-color: #ff8a7e; }
.acc-cq .acc-cq__yes:hover, .acc-cq .acc-cq__yes:focus-visible { color: var(--cz-black); background: #ff8a7e; border-color: #ff8a7e; }
.acc-showhid[aria-pressed="true"] { border-color: var(--acid); color: var(--acid); }
.acc-badge--cancelled { color: #ff8a7e; }
.acc-hist__l .acc-badge--cancelled { border-color: #ff8a7e; }
.acc-badge--hidden { color: #ff8a7e; background: var(--cz-black); border: 2px dashed #ff8a7e; }
.acc-adm--hidden { border-style: dashed; }
.acc-adm--hidden .acc-order__head { background: var(--cz-grey-50); }
.acc-adm--hidden .acc-order__head h3, .acc-adm--hidden > dl, .acc-adm--hidden > .acc-hist { opacity: 0.5; filter: grayscale(1); }

@media (max-width: 560px) {
  .acc-upd__grid { grid-template-columns: minmax(0, 1fr); }
  .acc-upd { padding: 16px 14px; }
  .acc-hist { padding: 0 14px 12px; }
  .acc-drive { padding: 16px 14px 4px; }
  .acc-tools .of-field:not(.acc-tools__q) { flex: 1 1 140px; }
}

/* custom offers (admin): the toggle row, the create form, the result with the link + copy, the offer list */
.acc-of { display: flex; flex-direction: column; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.acc-of__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.acc-of__head .acc-h { margin: 0; }
.acc-of__toggle[aria-expanded="true"] { border-color: var(--acid); color: var(--acid); }
.acc-of__panel { display: flex; flex-direction: column; gap: 20px; }
.acc-of__form { display: flex; flex-direction: column; gap: 16px; max-width: none; }
.acc-of__sub { margin: 0; font-size: 16px; font-weight: 700; }
.acc-of__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.acc-of__f--title, .acc-of__f--description { grid-column: 1 / -1; }
.acc-of__desc { min-height: 140px; }
.acc-of__count { margin: 6px 0 0; font-size: 12px; }
.acc-of__done { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 2px solid var(--acid); }
.acc-of__done p { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.acc-of__done:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }
.acc-of__link { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.acc-of__link .of-in { flex: 1 1 260px; min-width: 0; font-size: 13px; }
.acc-ofi__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 0 18px 18px; }
.acc-ofi__act .acc-of__link { flex: 1 1 100%; }
.acc-ofi .acc-cq { margin: 0 18px 18px; }
.acc-ofi .of-rev__head h3 { letter-spacing: 0.02em; text-transform: none; }
.acc-ofst--open { color: var(--acid); }
.acc-ofst--paid { color: var(--cz-black); background: var(--acid); }
.acc-ofst--cancelled { color: #ff8a7e; }
.acc-ofst--expired { color: var(--fg-2); }
.acc-ofi__cancel { color: #ff8a7e; border-color: rgba(255, 138, 126, 0.6); }
@media (max-width: 560px) {
  .acc-of__grid { grid-template-columns: minmax(0, 1fr); }
  .acc-ofi__act { padding: 0 14px 14px; }
  .acc-ofi .acc-cq { margin: 0 14px 14px; }
}