/* =========================================================================
   HotelPartner — спільні компоненти (випливаючі вікна / bottom sheets)
   Використовуються модулем i18n та сторінкою профілю.
   ========================================================================= */

.hp-sheet-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  background:rgba(15,22,17,0.42);
  backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .26s ease;
}
.hp-sheet-overlay.is-open{ opacity:1; }

.hp-sheet{
  width:100%;
  max-width:760px;
  margin-top:0;
  background:var(--cream);
  border-radius:0 0 24px 24px;
  box-shadow:0 30px 60px -20px rgba(15,22,17,0.5);
  transform:translateY(-18px);
  opacity:0;
  transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .28s ease;
  max-height:88vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.hp-sheet-overlay.is-open .hp-sheet{ transform:translateY(0); opacity:1; }

.hp-sheet--wide{ max-width:1200px; }

.hp-sheet__grip{
  width:46px;height:5px;
  border-radius:99px;
  background:var(--line);
  margin:10px auto 4px;
  flex-shrink:0;
}
.hp-sheet__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:8px 22px 16px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.hp-sheet__title{
  margin:0;
  font-family:'Fraunces',serif;
  font-size:20px;
  font-weight:600;
  color:var(--ink);
}
.hp-sheet__sub{
  margin:2px 0 0;
  font-size:12.5px;
  color:var(--ink-soft);
  font-weight:600;
}
.hp-sheet__close{
  border:none;
  background:var(--card);
  color:var(--ink-soft);
  width:34px;height:34px;
  border-radius:50%;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px -6px rgba(23,40,31,0.4);
  transition:color .2s ease, transform .15s ease;
}
.hp-sheet__close:hover{ color:var(--ink); transform:scale(1.05); }
.hp-sheet__body{
  padding:18px 22px 26px;
  overflow-y:auto;
}

/* ---------- LANGUAGE LIST ---------- */
.hp-lang-list{
  padding:14px 18px 24px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hp-lang-item{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:14px;
  padding:12px 16px;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, transform .12s ease;
}
.hp-lang-item:hover{ border-color:var(--brass); transform:translateY(-1px); }
.hp-lang-item.is-active{
  background:linear-gradient(135deg, rgba(200,155,60,0.12), rgba(23,40,31,0.06));
  border-color:var(--brass);
}
.hp-lang-letter{
  width:34px;height:34px;
  border-radius:50%;
  background:var(--cream-deep);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
  font-size:14px;
  flex-shrink:0;
}
.hp-lang-item.is-active .hp-lang-letter{
  background:linear-gradient(135deg, var(--forest), var(--forest-deep));
  color:#F4EFE3;
}
.hp-lang-name{
  font-weight:700;
  font-size:15px;
  color:var(--ink);
  flex:1;
  text-align:left;
}
.hp-lang-check{
  width:26px;height:26px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--forest), var(--forest-deep));
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}

/* ---------- TRANSACTIONS EMPTY ---------- */
.hp-empty{
  text-align:center;
  padding:40px 20px 30px;
}
.hp-empty__icon{
  width:64px;height:64px;
  margin:0 auto 18px;
  border-radius:50%;
  background:var(--cream-deep);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);
}
.hp-empty__title{
  margin:0 0 8px;
  font-family:'Fraunces',serif;
  font-size:18px;
  font-weight:600;
  color:var(--ink);
}
.hp-empty__hint{
  margin:0 auto;
  max-width:36ch;
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:1.6;
}

/* ---------- VIP LIST (у попапі) ---------- */
.hp-vip-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.hp-vip-card{
  position:relative;
  border-radius:16px;
  padding:22px 26px;
  overflow:hidden;
  min-height:132px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:0 16px 30px -22px rgba(15,22,17,0.5);
}
.hp-vip-card__tier{
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:20px;
  letter-spacing:0.02em;
  margin:0 0 12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.hp-vip-badge{
  font-family:'Manrope',sans-serif;
  font-size:11px;
  font-weight:800;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.85);
  color:var(--forest-deep);
  letter-spacing:0.02em;
}
.hp-vip-card__row{
  margin:0 0 5px;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  max-width:70%;
}
.hp-vip-card__emblem{
  position:absolute;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  width:70px;height:70px;
  opacity:0.95;
}

/* градієнти рівнів (як на прикладі) */
.hp-vip-card--1{ background:linear-gradient(100deg,#DCE3EC 0%,#B9C4D3 100%); color:#33404F; }
.hp-vip-card--1 .hp-vip-card__tier{ color:#2C3846; }
.hp-vip-card--2{ background:linear-gradient(100deg,#7FD4E8 0%,#F0A868 100%); color:#fff; }
.hp-vip-card--3{ background:linear-gradient(100deg,#D9553B 0%,#3E7E96 100%); color:#fff; }
.hp-vip-card--4{ background:linear-gradient(100deg,#B6D94A 0%,#2E9E5B 100%); color:#fff; }
.hp-vip-card--5{ background:linear-gradient(100deg,#2A2A2A 0%,#111111 100%); color:#fff; }
.hp-vip-card--5 .hp-vip-card__tier{ color:var(--brass-light); }

@media (max-width:600px){
  .hp-vip-card__row{ max-width:100%; font-size:12px; }
  .hp-vip-card__emblem{ opacity:0.35; }
}

/* =========================================================================
   Плаваюча кнопка мови — тільки на мобільних, завжди на екрані (fixed)
   ========================================================================= */
.hp-float-lang{
  display:none; /* на десктопі схована — там кнопки в шапках */
}
@media (max-width: 720px){
  /* показуємо плаваючу кнопку */
  .hp-float-lang{
    display:inline-flex;
    align-items:center;
    gap:6px;
    position:fixed;
    top:calc(10px + env(safe-area-inset-top));
    right:12px;
    z-index:1200;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:var(--ink);
    font-family:'Manrope',sans-serif;
    font-weight:700;
    font-size:12.5px;
    box-shadow:0 6px 18px -8px rgba(23,40,31,0.35);
    cursor:pointer;
  }
  .hp-float-lang:active{ transform:scale(0.96); }

  /* ховаємо звичайні кнопки мови в шапках, щоб не дублювались */
  .locale-pill#langBtn,
  .dep-lang#langBtn,
  .start-topbar #langBtn,
  .dash-header__right #langBtn{
    display:none !important;
  }
  /* якщо в шапці лишається лише логотип — прибираємо порожній блок відступів */
  .start-topbar:empty{ display:none; }
}

/* =========================================================================
   Плаваюча кнопка теми (світла/темна) — на всіх сторінках
   ========================================================================= */
.hp-float-theme{
  position:fixed !important;
  left:18px !important;
  right:auto !important;
  top:auto !important;
  bottom:calc(18px + env(safe-area-inset-bottom)) !important;
  z-index:1201;
  width:46px; height:46px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--ink);
  box-shadow:0 10px 26px -10px rgba(23,40,31,0.5);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.hp-float-theme:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(23,40,31,0.55); }
.hp-float-theme:active{ transform:scale(0.94); }
[data-theme="dark"] .hp-float-theme{ background:rgba(30,35,41,0.95); color:var(--brass-light); }
/* десктоп: якщо на сторінці є нижня навігація — піднімаємо кнопку над нею */
body:has(.bottom-nav) .hp-float-theme{ bottom:calc(84px + env(safe-area-inset-bottom)) !important; }

/* на мобільному трохи менша і піднята над навігацією */
@media (max-width: 720px){
  .hp-float-theme{ left:14px !important; width:42px; height:42px; }
  /* сторінки з нижньою навігацією — піднімаємо кнопку помітно вище неї */
  body:has(.bottom-nav) .hp-float-theme{
    bottom:calc(96px + env(safe-area-inset-bottom)) !important;
  }
  /* сторінки без навігації (вхід, поповнення, виведення) — стандартний низ */
  body:not(:has(.bottom-nav)) .hp-float-theme{
    bottom:calc(20px + env(safe-area-inset-bottom)) !important;
  }
}

/* ============= ТЕМНА ТЕМА: VIP-картки скролера ============= */
[data-theme="dark"] .hp-vip-card--1{
  background:linear-gradient(100deg,#2A2F38 0%,#232830 100%);
  color:var(--ink);
}
[data-theme="dark"] .hp-vip-card--1 .hp-vip-card__tier{ color:var(--ink); }
[data-theme="dark"] .hp-vip-card__emblem{ opacity:0.5; }

/* ============= ТЕМНА ТЕМА: модалки та листи ============= */
[data-theme="dark"] .hp-modal{ background:var(--card); color:var(--ink); }
[data-theme="dark"] .hp-modal__text{ color:var(--ink-soft); }
[data-theme="dark"] .hp-modal__btn--ghost{ background:var(--cream-deep); color:var(--ink); border-color:var(--line); }
[data-theme="dark"] .hp-sheet{ background:var(--card); color:var(--ink); }
[data-theme="dark"] .hp-lang-item{ color:var(--ink); }
[data-theme="dark"] .hp-lang-item:hover{ background:var(--cream-deep); }
[data-theme="dark"] .hp-modal__rows .r{ color:var(--ink-soft); }