/* ============================================================
   Gluoon Booking v2 — базова оболонка (screen / shell з Penpot)
   Всі селектори скоуплені під body.v2 — легасі-CSS сюди не дістає
   ============================================================ */

body.v2 { margin: 0; }

body.v2, body.v2 * , body.v2 *::before, body.v2 *::after { box-sizing: border-box; }
body.v2 [hidden] { display: none !important; }

body.v2 {
  min-height: 100vh;
  background-color: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* --- Фонове зображення + glow-еліпси (з компонента screen / shell) --- */
body.v2 .v2-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
body.v2 .v2-bg::before {
  content: ''; position: absolute; inset: 0;
  background: url('/static/booking/images/bg.svg') center / cover no-repeat;
  opacity: .8;
}
body.v2 .v2-bg .glow { position: absolute; border-radius: 50%; filter: blur(150px); }
body.v2 .v2-bg .glow-top      { left: 8%;  top: -340px; width: 1500px; height: 600px; background: var(--clr-primary);     opacity: .20; }
body.v2 .v2-bg .glow-top-r    { right: -5%; top: -200px; width: 800px;  height: 440px; background: var(--clr-violet-deep); opacity: .14; }
body.v2 .v2-bg .glow-bottom   { left: -11%; bottom: -260px; width: 1400px; height: 580px; background: var(--clr-primary);  opacity: .15; }
body.v2 .v2-bg .glow-bottom-r { right: 2%; bottom: -280px; width: 900px;  height: 460px; background: var(--clr-violet-dark); opacity: .17; }

/* --- Каркас: сайдбар + мейн --- */
body.v2 .v2-app { position: relative; z-index: 1; display: flex; min-height: 100vh; }

/* Сайдбар-капсула: 54px, x=8, fill #6A6EAE 10%, r22; кнопки 44×44, актив #9c27b0 r10 */
body.v2 .v2-sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0 18px;
}
body.v2 .v2-nav-capsule {
  width: 54px; margin-left: 0;
  background: rgba(106, 110, 174, .10);
  border-radius: 22px;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 5px 0;
}
body.v2 .v2-nav-btn {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-text-2); text-decoration: none;
  font-size: 19px; position: relative;
  transition: background .15s, color .15s;
}
body.v2 .v2-nav-btn:hover { background: var(--clr-fill-hover); color: var(--clr-text); }
body.v2 .v2-nav-btn.active { background: var(--clr-primary); color: #fff; }
body.v2 .v2-nav-btn .v2-nav-shield {
  position: absolute; right: 4px; bottom: 4px; font-size: 9px; color: #ffd700;
}
body.v2 .v2-sidebar-footer {
  margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
}

/* --- Топбар --- */
body.v2 .v2-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
body.v2 .v2-topbar {
  height: var(--topbar-h); flex: 0 0 var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-6) 0 var(--sp-8);
}
body.v2 .v2-topbar-spacer { flex: 1 1 auto; }

/* --- Контент і футер --- */
body.v2 .v2-content { flex: 1 1 auto; padding: var(--sp-6) var(--sp-6) var(--sp-4) var(--sp-8); min-width: 0; }
body.v2 .v2-footer {
  flex: 0 0 auto; text-align: center; padding: 8px 0 12px;
  color: var(--clr-text-4); font-size: var(--fs-sm);
}
body.v2 .v2-footer a { color: var(--clr-text-3); text-decoration: none; }
body.v2 .v2-footer a:hover { color: var(--clr-text-2); }

/* --- Картка (card / *) --- */
body.v2 .v2-card {
  background: var(--clr-card);
  border: 1px solid var(--clr-hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
body.v2 .v2-card-pad { padding: var(--sp-4); }

/* Заголовок сторінки всередині картки */
body.v2 .v2-page-title { font-size: var(--fs-h1); font-weight: 700; margin: 0; color: var(--clr-text); }

/* Тонка лінія-роздільник */
body.v2 .v2-hr { border: 0; border-top: 1px solid var(--clr-hairline); margin: 0; }

/* Скролбари в темній темі */
body.v2 ::-webkit-scrollbar { width: 10px; height: 10px; }
body.v2 ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 5px; }
body.v2 ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.16); }
body.v2 ::-webkit-scrollbar-track { background: transparent; }

/* --- Оболонка авторизації (screen / shell-auth, 1:1 з Penpot) ---
   Шари: відео gluon_intro.mp4 (приглушене) → 3 glow-еліпси → вуаль #05070c 55% --- */
body.v2.v2-auth-page { background: #05070c; }
body.v2 .v2-auth-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
body.v2 .v2-auth-bg video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
body.v2 .v2-auth-bg .glow { position: absolute; border-radius: 50%; }
body.v2 .v2-auth-bg .glow-a { left: 14%; top: -260px; width: 1300px; height: 700px; background: #6d28d9; opacity: .28; filter: blur(180px); }
body.v2 .v2-auth-bg .glow-b { left: 50%; top: 50%; width: 1100px; height: 700px; background: #9c27b0; opacity: .22; filter: blur(190px); }
body.v2 .v2-auth-bg .glow-c { left: -200px; bottom: 60px; width: 900px; height: 600px; background: #3b2a8c; opacity: .24; filter: blur(170px); }
body.v2 .v2-auth-bg .overlay { position: absolute; inset: 0; background: rgba(5, 7, 12, .55); }

body.v2 .v2-auth {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: flex-start;
  padding-left: clamp(24px, 7.8vw, 140px);
}
/* Лого Booking у лівому верхньому куті + GLUOON у правому */
body.v2 .v2-auth-applogo { position: absolute; top: 24px; left: 32px; }
body.v2 .v2-auth-applogo img { width: 40px; height: 40px; }
body.v2 .v2-auth-brand {
  position: absolute; top: 24px; right: 40px;
  display: flex; align-items: center; gap: 12px;
  color: #ffffff; font-weight: 800; font-size: 20px; letter-spacing: .04em;
}
body.v2 .v2-auth-brand img { width: 52px; height: 52px; }

/* card / login: 555×auto, fill #000 18%, stroke #fff 10%, r10, padding 40 */
body.v2 .v2-auth-card {
  width: min(555px, calc(100vw - 48px));
  background: rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 10px;
  padding: 36px 40px 32px;
}
body.v2 .v2-auth-card h1 { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--clr-text); }
body.v2 .v2-auth-card h1 .thin { font-weight: 400; }
body.v2 .v2-auth-card .sub { margin: 0 0 26px; color: var(--clr-text-2); font-size: 12.5px; }

/* Поле auth-форми: лейбл 9.5px + інпут 48px на #0b0e14 65% */
body.v2 .v2-auth-card .v2-field { margin-bottom: 16px; gap: 6px; }
body.v2 .v2-auth-card .v2-field-label { font-size: 9.5px; }
body.v2 .v2-auth-card .v2-input {
  height: 48px; background: rgba(11, 14, 20, .65);
  border-color: rgba(255, 255, 255, .10);
}
body.v2 .v2-auth-card .v2-input:focus { border-color: rgba(192, 132, 252, .45); }
body.v2 .v2-pass-wrap { position: relative; }
body.v2 .v2-pass-wrap .v2-input { padding-right: 42px; }
body.v2 .v2-pass-eye {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--clr-text-2); cursor: pointer; font-size: 14px;
  padding: 4px;
}
body.v2 .v2-auth-forgot {
  display: inline-block; margin: -4px 0 16px;
  color: #c77dff; font-size: 11.5px; font-weight: 600; text-decoration: none;
}
body.v2 .v2-auth-forgot:hover { text-decoration: underline; }

body.v2 .v2-auth-card .v2-btn--block { height: 48px; border-radius: 10px; font-size: 14px; font-weight: 600; }
body.v2 .v2-btn--login { background: rgba(156, 39, 176, .95); color: #fff; }
body.v2 .v2-btn--login:hover:not(:disabled) { background: var(--clr-primary-hover); }
body.v2 .v2-btn--google { background: rgba(255, 255, 255, .08); color: var(--clr-text); font-weight: 400; font-size: 13px; }
body.v2 .v2-btn--google:hover:not(:disabled) { background: rgba(255, 255, 255, .13); }
body.v2 .v2-auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; }
body.v2 .v2-auth-divider hr { flex: 1; border: 0; border-top: 1px solid rgba(255, 255, 255, .10); margin: 0; }
body.v2 .v2-auth-divider span { color: var(--clr-text-2); font-size: 11px; }
body.v2 .v2-auth-note { margin: 14px 0 0; text-align: center; color: var(--clr-text-2); font-size: 11px; }
body.v2 .v2-auth-bottom { margin: 10px 0 0; text-align: center; color: #c9d1e0; font-size: 11.5px; }
body.v2 .v2-auth-bottom a { color: #c9d1e0; font-weight: 600; text-decoration: none; margin-left: 8px; }
body.v2 .v2-auth-bottom a:hover { color: #ffffff; text-decoration: underline; }
body.v2 .v2-ver { font-size: 10px; color: #4a5568; margin-left: 6px; }

/* логотип Booking у сайдбарі (Penpot: Ellipse 52 #9c27b0/55% з layer blur 12 + logo 38) */
body.v2 .v2-side-logo { position: relative; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; flex: 0 0 auto; }
body.v2 .v2-side-logo::before { content: ''; position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(156,39,176,.55); filter: blur(12px); pointer-events: none; }
body.v2 .v2-side-logo img { position: relative; width: 38px; height: 38px; display: block; }
body.v2 .v2-side-ver { font-size: 8px; font-weight: 600; line-height: 1.1; color: #4a5568; text-align: center; letter-spacing: .01em; margin: -6px 0 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }