/* Кабінет v2 — адаптивні стилі. Один файл на всі 7 сайтів. */
:root{
  --kv-ink:#1a1a2e; --kv-muted:#7a828b; --kv-line:#eceff3; --kv-bg:#f6f7f9;
  --kv-accent:#28a745; --kv-accent-ink:#fff; --kv-danger:#dc3545; --kv-radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* standalone-сторінка (/cabinet/) — фарбуємо фон; у вбудованому режимі (/my/)
   фон і шрифти лишаються сайтовими, кабінет фарбує лише себе */
body.kv-standalone{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--kv-ink); background:var(--kv-bg); font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.kv-embed{ color:var(--kv-ink); font-size:15px; line-height:1.45 }
.kv-embed-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 16px}
@media (max-width:767.98px){ .kv-embed-head{padding:0 12px} }
.kv-embed-head h1{font-size:22px; margin:0}
.kv-embed .kv-app{padding-top:0}
/* на десктопі бічні відступи дає контейнер сайту; на мобільному їх немає — даємо свої */
@media (min-width:768px){ .kv-embed .kv-app{padding-left:0; padding-right:0} }
.kv-embed .kv-auth{margin:10px auto 30px}
button,input{font:inherit;color:inherit}

/* шапка */
.kv-top{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px;
  padding:12px 16px; background:#fff; border-bottom:1px solid var(--kv-line);
}
.kv-back{
  text-decoration:none; color:var(--kv-ink); font-size:20px; line-height:1;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:10px;
}
.kv-back:hover{background:var(--kv-bg)}
.kv-top-title{font-weight:700; font-size:16px; flex:1}
.kv-logout{
  background:none; border:1px solid var(--kv-line); border-radius:10px;
  padding:9px 14px; cursor:pointer; color:var(--kv-muted); min-height:40px;
}
.kv-logout:hover{border-color:var(--kv-muted); color:var(--kv-ink)}

/* картки */
.kv-card{
  background:#fff; border:1px solid var(--kv-line); border-radius:var(--kv-radius);
  padding:20px; margin-bottom:14px;
}
.kv-card h1,.kv-card h2{margin:0 0 6px; font-size:19px}
.kv-muted{color:var(--kv-muted); font-size:13.5px; margin:0 0 18px}

/* вхід */
.kv-auth{max-width:440px; margin:40px auto; padding:0 16px}
.kv-auth-card{padding:24px}
.kv-tabs{display:flex; gap:8px; margin-bottom:18px}
.kv-tab{
  flex:1; padding:10px; border:1px solid var(--kv-line); background:#fff;
  border-radius:10px; cursor:pointer; color:var(--kv-muted); min-height:42px;
}
.kv-tab.is-active{border-color:var(--kv-ink); color:var(--kv-ink); font-weight:600}
.kv-field{margin-bottom:14px}
.kv-field label{display:block; font-size:13px; color:var(--kv-muted); margin-bottom:6px}
.kv-field input{
  width:100%; padding:12px 14px; border:1px solid var(--kv-line);
  border-radius:10px; background:#fff; min-height:46px;
}
.kv-field input:focus{outline:none; border-color:var(--kv-accent)}
.kv-field input.is-err{border-color:var(--kv-danger); background:#fff7f7}
.kv-auth-links{display:flex; justify-content:space-between; gap:10px; margin-top:14px; flex-wrap:wrap}
.kv-link{
  background:none; border:none; padding:8px 4px; cursor:pointer;
  color:#3b82f6; font-size:13.5px; text-decoration:underline; min-height:36px;
}

/* кнопки */
.kv-btn{
  width:100%; padding:13px 18px; border:none; border-radius:10px; cursor:pointer;
  font-weight:700; min-height:48px; letter-spacing:.2px;
}
.kv-btn-primary{background:var(--kv-accent); color:var(--kv-accent-ink)}
.kv-btn-primary:disabled{opacity:.6; cursor:default}
.kv-btn-ghost{
  background:#fff; border:1px solid var(--kv-line); color:var(--kv-ink);
  width:auto; padding:10px 16px; min-height:42px; font-weight:600; font-size:14px;
}
.kv-btn-ghost:hover{border-color:var(--kv-muted)}
.kv-btn-danger{color:var(--kv-danger); border-color:#f3d2d6}

/* повідомлення */
.kv-msg{
  padding:10px 12px; border-radius:10px; font-size:13.5px; margin-bottom:12px;
  background:#fff7f7; color:var(--kv-danger); border:1px solid #f3d2d6;
}
.kv-msg.is-ok{background:#f2fbf5; color:#1e7e34; border-color:#cfe9d7}

/* застосунок */
.kv-app{max-width:860px; margin:0 auto; padding:16px 16px 80px}
.kv-nav{display:flex; gap:6px; margin-bottom:16px; overflow-x:auto; scrollbar-width:none}
.kv-nav::-webkit-scrollbar{display:none}
.kv-nav-item{
  flex:0 0 auto; padding:9px 14px; border:1px solid var(--kv-line); background:#fff;
  border-radius:999px; cursor:pointer; color:var(--kv-muted); white-space:nowrap; min-height:40px;
}
.kv-nav-item.is-active{background:var(--kv-ink); border-color:var(--kv-ink); color:#fff; font-weight:600}
.kv-badge{
  display:inline-block; min-width:18px; padding:0 5px; margin-left:6px;
  background:var(--kv-danger); color:#fff; border-radius:999px; font-size:11px; line-height:18px; text-align:center;
}
.kv-view-head{display:flex; justify-content:flex-end; margin-bottom:8px}

/* список замовлень */
.kv-order{background:#fff; border:1px solid var(--kv-line); border-radius:var(--kv-radius); margin-bottom:12px; overflow:hidden}
.kv-order-head{display:flex; gap:14px; padding:14px 16px; align-items:flex-start}
.kv-order-poster{width:56px; height:78px; border-radius:8px; object-fit:cover; background:var(--kv-bg); flex:0 0 auto}
.kv-order-main{flex:1; min-width:0}
.kv-order-title{font-weight:700; font-size:15.5px; margin-bottom:3px}
.kv-order-meta{font-size:13px; color:var(--kv-muted)}
.kv-order-side{text-align:right; flex:0 0 auto}
.kv-order-sum{font-weight:700; white-space:nowrap}
.kv-order-no{font-size:12px; color:var(--kv-muted); margin-top:2px}
.kv-status{
  display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px;
  font-weight:700; margin-bottom:6px; letter-spacing:.2px;
}
.kv-status.s-paid{background:#e8f6ec; color:#1e7e34}
.kv-status.s-wait{background:#fff6e5; color:#a06400}
.kv-status.s-off{background:#f1f3f5; color:#6c757d}
.kv-status.s-ret{background:#fdecee; color:#b02a37}
.kv-seats{border-top:1px solid var(--kv-line); padding:10px 16px; display:flex; flex-direction:column; gap:8px}
.kv-seat{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13.5px}
.kv-seat-place{min-width:0}
.kv-seat-price{color:var(--kv-muted); white-space:nowrap}
.kv-order-acts{border-top:1px solid var(--kv-line); padding:12px 16px; display:flex; gap:8px; flex-wrap:wrap}
.kv-pdf{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 13px; border-radius:9px; text-decoration:none;
  background:#fff; border:1px solid var(--kv-line); color:var(--kv-ink);
  font-size:13.5px; font-weight:600; min-height:38px;
}
.kv-pdf:hover{border-color:var(--kv-ink)}
.kv-pdf::before{content:'↓'; font-weight:700; opacity:.55}

.kv-order-note{
  border-top:1px solid var(--kv-line); padding:11px 16px;
  display:flex; gap:8px; align-items:flex-start;
  font-size:13px; color:#8a6d10; background:#fffdf5;
}
.kv-order-note-dot{color:#f0ad4e; line-height:1.2; font-size:11px; margin-top:2px}

/* обране / сповіщення */
.kv-item{
  background:#fff; border:1px solid var(--kv-line); border-radius:var(--kv-radius);
  padding:14px 16px; margin-bottom:10px; display:flex; gap:12px; align-items:flex-start;
}
.kv-item-main{flex:1; min-width:0}
.kv-item-title{font-weight:600; margin-bottom:2px}
.kv-item-meta{font-size:13px; color:var(--kv-muted)}
.kv-item.is-unread{background:#fbfdfb}

/* фінанси */
.kv-pay{align-items:center}
.kv-pay-amount{font-weight:700; white-space:nowrap; font-size:15px}
.kv-pay-amount.is-pay{color:var(--kv-danger)}      /* оплата — червона (гроші пішли) */
.kv-pay-amount.is-refund{color:var(--kv-accent)}   /* повернення — зелене (гроші прийшли) */

/* профіль */
.kv-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.kv-toggle{
  display:flex; align-items:flex-start; gap:12px; padding:12px 0;
  border-top:1px solid var(--kv-line); cursor:pointer;
}
.kv-toggle:first-of-type{border-top:none}
.kv-toggle input{position:absolute; opacity:0; width:0; height:0}
.kv-toggle-box{
  position:relative; flex:0 0 auto; width:44px; height:26px; border-radius:999px;
  background:#dfe3e8; transition:background .18s; margin-top:2px;
}
.kv-toggle-box::after{
  content:''; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:50%; background:#fff; transition:transform .18s; box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.kv-toggle input:checked + .kv-toggle-box{background:var(--kv-accent)}
.kv-toggle input:checked + .kv-toggle-box::after{transform:translateX(18px)}
.kv-toggle-text b{display:block; font-weight:600; font-size:14.5px}
.kv-toggle-text em{display:block; font-style:normal; font-size:13px; color:var(--kv-muted); margin-top:2px}

/* порожньо / завантаження */
.kv-empty{text-align:center; color:var(--kv-muted); padding:38px 12px; font-size:14px}
.kv-empty a{color:#3b82f6}
.kv-skeleton{height:96px; border-radius:var(--kv-radius); margin-bottom:12px;
  background:linear-gradient(90deg,#eef1f4 25%,#f6f8fa 50%,#eef1f4 75%); background-size:200% 100%;
  animation:kvsk 1.2s infinite}
@keyframes kvsk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* тост */
.kv-toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--kv-ink); color:#fff; padding:11px 18px; border-radius:10px;
  font-size:14px; z-index:100; max-width:92vw; text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
}

/* мобільний */
@media (max-width:640px){
  .kv-auth{margin:20px auto}
  .kv-app{padding:12px 12px 70px}
  .kv-order-head{padding:12px}
  .kv-order-poster{width:48px; height:66px}
  .kv-order-title{font-size:15px}
  .kv-nav{position:sticky; top:61px; z-index:15; background:var(--kv-bg); padding:6px 0}
  /* у вбудованому режимі (/my/) власної шапки немає — інакше меню зависає над карткою */
  .kv-embed .kv-nav{position:static; top:auto; padding:0 0 4px; background:transparent}
  .kv-grid-2{grid-template-columns:1fr}
}