/* ============================================================
   Wint Technology — auth-ui.css
   Стили для аутентификации: кнопка в шапке, модалка, личный кабинет
   Совместимы с существующей палитрой winttechnology.kz:
   - Основной синий:  #1b3a6b
   - Бирюзовый:       #009999
   ============================================================ */

/* ============ КНОПКА «ВОЙТИ» В ШАПКЕ ============ */
.wt-auth-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #1b3a6b;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}
.wt-auth-header-btn:hover { background: #2a4f80; }

/* ============ USER CHIP (когда залогинен) ============ */
.wt-auth-header-user {
  position: relative;
  display: flex;
  align-items: center;
}
.wt-auth-userchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.2s ease;
  color: #1b3a6b;
  font-size: 14px;
  font-weight: 500;
}
.wt-auth-userchip:hover { background: #e2e8f0; }
.wt-auth-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: #009999;
}
.wt-auth-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.wt-auth-username {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wt-auth-b2b-badge {
  background: #009999;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* ============ DROPDOWN ПОД ЧИПОМ ============ */
.wt-auth-userdrop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  padding: 6px;
  z-index: 1000;
}
.wt-auth-userdrop[hidden] { display: none; }
.wt-auth-dropitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: #1b3a6b;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: background 0.15s ease;
}
.wt-auth-dropitem:hover { background: #f1f5f9; }
.wt-auth-dropitem-danger { color: #c62828; }
.wt-auth-dropitem-danger:hover { background: #fee2e2; }

/* ============ МОДАЛКА ============ */
.wt-auth-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: wt-fade-in 0.2s ease;
}
@keyframes wt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.wt-auth-modal {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 32px 28px 28px;
  max-width: 420px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: wt-slide-up 0.25s ease;
}
@keyframes wt-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.wt-auth-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  font-size: 18px;
  color: #64748b;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.wt-auth-modal-close:hover { background: #f1f5f9; color: #1b3a6b; }
.wt-auth-modal-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 600;
  color: #1b3a6b;
  text-align: center;
}

/* ============ TABS ============ */
.wt-auth-tabs {
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 20px;
}
.wt-auth-tabs button {
  flex: 1;
  background: none;
  border: none;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.wt-auth-tabs button.wt-tab-active {
  background: #fff;
  color: #1b3a6b;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ============ SOCIAL BUTTONS ============ */
.wt-auth-social {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.wt-auth-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #1b3a6b;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.wt-auth-social-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.wt-auth-apple {
  background: #000;
  color: #fff;
  border-color: #000;
}
.wt-auth-apple:hover { background: #222; border-color: #222; }

.wt-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 18px;
  color: #94a3b8;
  font-size: 12px;
}
.wt-auth-divider::before,
.wt-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

/* ============ FORM ============ */
.wt-auth-form {
  display: flex;
  flex-direction: column;
}
.wt-auth-form label {
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  margin-bottom: 6px;
}
.wt-auth-form input,
.wt-auth-form textarea {
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 14px;
  background: #fff;
  color: #0f172a;
  font-family: inherit;
  transition: border-color 0.15s ease;
}
.wt-auth-form input:focus,
.wt-auth-form textarea:focus {
  outline: none;
  border-color: #009999;
  box-shadow: 0 0 0 3px rgba(0,153,153,0.15);
}
.wt-auth-form input:disabled {
  background: #f8fafc;
  color: #64748b;
}

.wt-auth-hint {
  font-size: 12px;
  color: #64748b;
  margin: 4px 0 12px;
  line-height: 1.45;
}
.wt-auth-error {
  color: #c62828;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  margin-top: 8px;
  display: none;
}
.wt-auth-success {
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  margin-top: 8px;
  display: none;
}

/* ============ BUTTONS ============ */
.wt-btn {
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.wt-btn-primary {
  background: #1b3a6b;
  color: #fff;
}
.wt-btn-primary:hover:not(:disabled) { background: #2a4f80; }
.wt-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.wt-link {
  background: none;
  border: none;
  color: #009999;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 0;
  font-family: inherit;
}
.wt-link:hover { color: #007777; }

/* ============ ЛИЧНЫЙ КАБИНЕТ ============ */
.wt-dash-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px;
}
.wt-dash-header { margin-bottom: 28px; }
.wt-dash-header h2 {
  margin: 0 0 6px;
  color: #1b3a6b;
  font-size: 26px;
}
.wt-dash-sub {
  margin: 0;
  color: #64748b;
  font-size: 14px;
}
.wt-dash-warn {
  display: flex;
  gap: 12px;
  background: #fff8e1;
  border-left: 4px solid #ffa000;
  padding: 14px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: #5d4037;
}
.wt-dash-warn span { font-size: 22px; flex-shrink: 0; }

.wt-dash-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 24px;
}
.wt-dash-tab {
  background: none;
  border: none;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s ease;
  font-family: inherit;
}
.wt-dash-tab:hover { color: #1b3a6b; }
.wt-dash-tab-active {
  color: #1b3a6b;
  border-bottom-color: #009999;
}

.wt-dash-pane[hidden] { display: none; }
.wt-dash-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}
.wt-dash-row label {
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  margin-bottom: 6px;
}
.wt-dash-row input,
.wt-dash-row textarea {
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-family: inherit;
  resize: vertical;
}
.wt-dash-row input:focus,
.wt-dash-row textarea:focus {
  outline: none;
  border-color: #009999;
  box-shadow: 0 0 0 3px rgba(0,153,153,0.15);
}
.wt-dash-row input:disabled { background: #f8fafc; color: #64748b; }
.wt-dash-hint {
  font-size: 13px;
  color: #64748b;
  margin: 6px 0 16px;
  line-height: 1.5;
}
.wt-dash-providers {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.wt-prov-badge {
  background: #f1f5f9;
  color: #1b3a6b;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.wt-dash-empty {
  text-align: center;
  padding: 40px 20px;
  color: #475569;
  font-size: 16px;
  line-height: 1.6;
}

/* ============ MOBILE ============ */
@media (max-width: 480px) {
  .wt-auth-modal {
    padding: 24px 18px 20px;
    border-radius: 12px;
  }
  .wt-auth-username { max-width: 80px; }
  .wt-auth-userchip { padding: 4px 10px 4px 4px; }
  .wt-auth-avatar { width: 24px; height: 24px; }
  .wt-dash-tabs { overflow-x: auto; }
  .wt-dash-tab { white-space: nowrap; }
}