/* "Моят профил" — the customer's control panel (pkg-b2b-account, 2026-11-04).
   Approved palette only (modern-atelier-v2.css tokens). The one strong moment
   is the deep-petrol band with the company's name; everything below is quiet. */

.ck-acc {
  --acc-petrol: var(--ma-petrol, #123E44);
  --acc-deep: var(--ma-petrol-deep, #0B2B30);
  --acc-soft: var(--ma-petrol-soft, #1F5A61);
  --acc-bone: var(--ma-porcelain, #F6F4EF);
  --acc-mist: var(--ma-sage, #E6ECE9);
  --acc-champagne: var(--ma-champagne, #B8955A);
  --acc-champagne-light: var(--ma-champagne-light, #C8A86E);
  --acc-gold: var(--ma-gold, #86692F);
  --acc-ink: var(--ma-ink, #161A1B);
  --acc-muted: var(--ma-muted, #5A615F);
  --acc-line: rgba(18, 62, 68, .14);
  background: var(--acc-bone);
  color: var(--acc-ink);
  font-family: "Inter", system-ui, sans-serif;
  min-height: 70vh;
  padding-bottom: 4rem;
}
.ck-acc h1, .ck-acc h2, .ck-acc legend { font-family: "Manrope", "Inter", sans-serif; }

/* Band */
.ck-acc-band { background: var(--acc-deep); color: #fff; padding: 2.75rem 0 2.5rem; }
.ck-acc-band-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: end; }
.ck-acc-kind { color: var(--acc-champagne-light); font-size: .9rem; font-weight: 600; margin: 0 0 .5rem; }
.ck-acc-title { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 0 0 1.1rem; color: #fff; overflow-wrap: anywhere; }
.ck-acc-title:focus { outline: none; }
.ck-acc-facts { display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; margin: 0; }
.ck-acc-facts div { display: flex; gap: .45rem; align-items: baseline; }
.ck-acc-facts dt { color: rgba(255, 255, 255, .62); font-size: .85rem; }
.ck-acc-facts dd { margin: 0; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.ck-acc-out { margin-top: 1.25rem; min-height: 40px; padding: .55rem 1rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .38); background: transparent; color: #fff; font: 600 .9rem/1.2 "Inter", sans-serif; cursor: pointer; }
.ck-acc-out:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6); }
.ck-acc-out:focus-visible { outline: 2px solid var(--acc-champagne-light); outline-offset: 2px; }
.ck-acc-terms { border-left: 2px solid var(--acc-champagne); padding: .25rem 0 .25rem 1.25rem; font-size: .92rem; line-height: 1.55; color: rgba(255, 255, 255, .84); }
.ck-acc-terms p { margin: 0 0 .35rem; }
.ck-acc-terms-head { color: #fff; font-weight: 700; font-size: 1rem; }
.ck-acc-terms .ck-acc-btn { margin-top: .6rem; }

/* Tabs */
.ck-acc-body { padding-top: 1.75rem; }
.ck-acc-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--acc-line); margin-bottom: 1.75rem; overflow-x: auto; }
.ck-acc-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: .85rem 1rem; font: 600 .98rem/1 "Inter", sans-serif; color: var(--acc-muted); cursor: pointer; white-space: nowrap; }
.ck-acc-tab:hover { color: var(--acc-petrol); }
.ck-acc-tab.is-on { color: var(--acc-petrol); border-bottom-color: var(--acc-champagne); }
.ck-acc-tab:focus-visible, .ck-acc-btn:focus-visible, .ck-acc-link:focus-visible, .ck-acc summary:focus-visible { outline: 2px solid var(--acc-champagne); outline-offset: 2px; border-radius: 4px; }

/* Buttons */
.ck-acc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .7rem 1.25rem; border-radius: 10px; border: 1px solid var(--acc-petrol); background: var(--acc-petrol); color: #fff; font: 600 .95rem/1.2 "Inter", sans-serif; text-decoration: none; cursor: pointer; }
.ck-acc-btn:hover { background: var(--acc-soft); border-color: var(--acc-soft); color: #fff; }
.ck-acc-btn:disabled { opacity: .55; cursor: default; }
.ck-acc-btn-light { background: var(--acc-champagne); border-color: var(--acc-champagne); color: var(--acc-deep); }
.ck-acc-btn-light:hover { background: var(--acc-champagne-light); border-color: var(--acc-champagne-light); color: var(--acc-deep); }
.ck-acc-btn-ghost { background: transparent; color: var(--acc-petrol); }
.ck-acc-btn-ghost:hover { background: var(--acc-mist); color: var(--acc-petrol); }
.ck-acc-btn-danger { background: transparent; border-color: #A23B2E; color: #A23B2E; }
.ck-acc-btn-danger:hover { background: rgba(162, 59, 46, .07); border-color: #A23B2E; color: #A23B2E; }
.ck-acc-link { background: none; border: 0; padding: 0; color: var(--acc-gold); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* Orders */
.ck-acc-orders-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.ck-acc-sum { margin: 0; color: var(--acc-muted); }
.ck-acc-search input { min-width: min(320px, 100%); min-height: 44px; padding: .6rem .9rem; border: 1px solid var(--acc-line); border-radius: 10px; background: #fff; font: inherit; color: var(--acc-ink); }
.ck-acc-search input:focus { outline: 2px solid var(--acc-champagne); outline-offset: 1px; }
.ck-acc-orders { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--acc-line); }
.ck-acc-order { border-bottom: 1px solid var(--acc-line); }
.ck-acc-order summary { list-style: none; display: grid; grid-template-columns: minmax(120px, 1fr) minmax(130px, 1.2fr) auto 70px 110px; gap: .75rem; align-items: center; padding: 1rem .25rem; cursor: pointer; }
.ck-acc-order summary::-webkit-details-marker { display: none; }
.ck-acc-order summary:hover { background: rgba(230, 236, 233, .5); }
.ck-acc-order-no { font-weight: 700; color: var(--acc-petrol); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ck-acc-order-date, .ck-acc-order-count { color: var(--acc-muted); font-size: .92rem; }
.ck-acc-order-count { text-align: right; }
.ck-acc-order-total { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ck-acc-order-total::after { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-left: .6rem; border-right: 2px solid var(--acc-muted); border-bottom: 2px solid var(--acc-muted); transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
.ck-acc-order details[open] .ck-acc-order-total::after { transform: translateY(1px) rotate(-135deg); }
.ck-acc-chip { justify-self: start; font-size: .8rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; white-space: nowrap; }
.ck-acc-chip.is-open { background: var(--acc-mist); color: var(--acc-petrol); }
.ck-acc-chip.is-done { background: var(--acc-petrol); color: #fff; }
.ck-acc-chip.is-wait { background: rgba(184, 149, 90, .2); color: var(--acc-gold); }
.ck-acc-chip.is-muted { background: transparent; border: 1px solid var(--acc-line); color: var(--acc-muted); }
.ck-acc-order-body { padding: .25rem .25rem 1.5rem; }
.ck-acc-lines { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.ck-acc-lines li { display: grid; grid-template-columns: 56px 1fr auto; gap: .9rem; align-items: center; }
.ck-acc-lines img, .ck-acc-noimg { width: 56px; height: 56px; object-fit: contain; background: #fff; border: 1px solid var(--acc-line); border-radius: 8px; }
.ck-acc-noimg { display: block; }
.ck-acc-line-name { font-size: .95rem; line-height: 1.35; }
.ck-acc-line-name a { color: var(--acc-ink); text-decoration: none; }
.ck-acc-line-name a:hover { color: var(--acc-petrol); text-decoration: underline; }
.ck-acc-line-name em { font-style: normal; font-size: .8rem; color: var(--acc-gold); font-weight: 600; }
.ck-acc-line-qty { color: var(--acc-muted); font-size: .92rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ck-acc-order-meta { display: grid; gap: .3rem; margin: 0 0 1.1rem; padding: .9rem 1rem; background: #fff; border: 1px solid var(--acc-line); border-radius: 10px; font-size: .92rem; }
.ck-acc-order-meta div { display: grid; grid-template-columns: 120px 1fr; gap: .75rem; }
.ck-acc-order-meta dt { color: var(--acc-muted); }
.ck-acc-order-meta dd { margin: 0; overflow-wrap: anywhere; }
.ck-acc-reorder-msg { margin: 0 0 1rem; padding: .8rem 1rem; border-left: 3px solid var(--acc-petrol); background: var(--acc-mist); }
.ck-acc-reorder-msg.is-warn { border-left-color: var(--acc-champagne); }
.ck-acc-empty { padding: 2.5rem 0; max-width: 520px; }
.ck-acc-empty h2 { margin: 0 0 .5rem; font-size: 1.4rem; color: var(--acc-petrol); }
.ck-acc-empty p { color: var(--acc-muted); margin: 0 0 1.25rem; line-height: 1.55; }
.ck-acc-quiet { color: var(--acc-muted); }

/* Forms */
.ck-acc-form { max-width: 640px; }
.ck-acc-form fieldset { border: 0; padding: 0; margin: 0 0 1.75rem; display: grid; gap: 1rem; }
.ck-acc-form legend { font-size: 1.15rem; font-weight: 700; color: var(--acc-petrol); margin-bottom: .75rem; padding: 0; }
.ck-acc-field { display: grid; gap: .35rem; }
.ck-acc-field > span { font-weight: 600; font-size: .92rem; }
.ck-acc-field small { font-weight: 400; color: var(--acc-muted); }
.ck-acc-field input { min-height: 46px; padding: .65rem .9rem; border: 1px solid rgba(18, 62, 68, .22); border-radius: 10px; background: #fff; font: inherit; color: var(--acc-ink); }
.ck-acc-field input:focus { outline: 2px solid var(--acc-champagne); outline-offset: 1px; border-color: var(--acc-petrol); }
.ck-acc-check { display: flex; gap: .6rem; align-items: center; font-size: .95rem; }
.ck-acc-check input { width: 18px; height: 18px; accent-color: var(--acc-petrol); }
.ck-acc-locked { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem .9rem; border: 1px dashed var(--acc-line); border-radius: 10px; font-size: .92rem; }
.ck-acc-locked span { color: var(--acc-muted); }
.ck-acc-locked strong { overflow-wrap: anywhere; text-align: right; }
.ck-acc-hint { color: var(--acc-muted); font-size: .86rem; line-height: 1.5; margin: 0; }
.ck-acc-form > .ck-acc-hint { margin-bottom: 1.25rem; }
.ck-acc-error { color: #A23B2E; font-weight: 600; margin: 0 0 1rem; }
.ck-acc-ok { color: var(--acc-petrol); font-weight: 600; margin: 0 0 1rem; }
.ck-acc-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
.ck-acc-devices h2 { font-size: 1.15rem; color: var(--acc-petrol); margin: 0 0 .75rem; }
.ck-acc-devices > p { margin: 0 0 .75rem; line-height: 1.5; }
.ck-acc-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.ck-acc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ck-acc-fail { padding: 3rem 16px; }

@media (max-width: 820px) {
  .ck-acc-band { padding: 2rem 0 1.75rem; }
  .ck-acc-band-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .ck-acc-sec { grid-template-columns: 1fr; gap: 2rem; }
  .ck-acc-order summary { grid-template-columns: 1fr auto; grid-template-areas: "no total" "date chip"; row-gap: .35rem; }
  .ck-acc-order-no { grid-area: no; }
  .ck-acc-order-total { grid-area: total; }
  .ck-acc-order-date { grid-area: date; }
  .ck-acc-chip { grid-area: chip; justify-self: end; }
  .ck-acc-order-count { display: none; }
  .ck-acc-lines li { grid-template-columns: 48px 1fr; }
  .ck-acc-lines img, .ck-acc-noimg { width: 48px; height: 48px; }
  .ck-acc-line-qty { grid-column: 2; }
  .ck-acc-order-meta div { grid-template-columns: 1fr; gap: 0; }
  .ck-acc-search, .ck-acc-search input { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-acc-order-total::after { transition: none; }
}