:root{
  /* Telegram colors (device/theme dependent) */
  --tg-native-bg: var(--tg-theme-bg-color, #0d0d0d);
  --tg-native-text: var(--tg-theme-text-color, #ffffff);
  --tg-native-hint: var(--tg-theme-hint-color, #9aa3ad);
  --tg-native-link: var(--tg-theme-link-color, #2a9df4);
  --tg-native-button: var(--tg-theme-button-color, #2a9df4);
  --tg-native-button-text: var(--tg-theme-button-text-color, #ffffff);

  /*
    App theme tokens.
    Важно: НЕ привязываем базовые цвета интерфейса к tg-native-*,
    иначе при светлой системной теме в Telegram получаем чёрный текст на тёмном фоне.
  */
  --tg-bg: #0d0d0d;
  --tg-text: #f3f4f6;
  --tg-hint: #9aa3ad;
  --tg-link: #2a9df4;
  --tg-button: #2a9df4;
  --tg-button-text: #ffffff;

  --card-bg: rgba(255,255,255,0.05);
  --card-bg-hover: rgba(255,255,255,0.08);
  --border-color: rgba(255,255,255,0.10);
  --blue: var(--tg-link);
  --tabbar-offset: 12px;

  --modal-overlay: rgba(0,0,0,0.62);
  --modal-bg: rgba(17,19,23,.92);
  --modal-border: rgba(255,255,255,0.10);

  --field-bg: rgba(255,255,255,0.08);
  --field-placeholder: rgba(255,255,255,0.40);
  --field-focus-border: rgba(42,157,244,0.6);
  --field-focus-shadow: rgba(42,157,244,0.18);

  /* ===== РУЧКИ ДЛЯ СЕТКИ ПАРАМЕТРОВ (меняешь ТОЛЬКО их) ===== */
  --param-font: 13px;           /* размер текста */
  --param-gap: 8px;             /* РАССТОЯНИЕ между названием и значением */
  --param-px: 11px;             /* горизонтальные отступы строки */
  --param-py: 5px;              /* вертикальные отступы строки */
  --param-min-h: 32px;          /* минимальная высота строки */
  --param-line: 1.2;            /* межстрочный в строке */
  --param-value-weight: 600;    /* жирность чисел справа */
  --param-value-min: 84px;      /* минимальная ширина правой колонки */
}

:root[data-theme="light"]{
  --tg-bg: #f6f7f9;
  --tg-text: #0f172a;
  --tg-hint: #475569;
  --tg-link: #1a7dff;
  --tg-button: #1a7dff;
  --tg-button-text: #ffffff;

  --card-bg: rgba(0,0,0,0.03);
  --card-bg-hover: rgba(0,0,0,0.05);
  --border-color: rgba(0,0,0,0.12);

  --modal-overlay: rgba(0,0,0,0.45);
  --modal-bg: rgba(255,255,255,.96);
  --modal-border: rgba(0,0,0,0.10);

  --field-bg: rgba(0,0,0,0.04);
  --field-placeholder: rgba(15,23,42,0.45);
  --field-focus-border: rgba(26,125,255,0.65);
  --field-focus-shadow: rgba(26,125,255,0.18);
}

/* ====================== GLOBAL LAYOUT ====================== */
html, body{
  height:100%;
  margin:0;
  background:var(--tg-bg);
  color:var(--tg-text);
  font-family:system-ui,-apple-system,Roboto,sans-serif;
  overscroll-behavior:none;
  overflow:hidden;
  overflow-x:hidden;
  touch-action:manipulation;
}
*{box-sizing:border-box;}
.tg-app{position:fixed; inset:0; display:flex; flex-direction:column; overflow:hidden;}
.page-title{font-size:24px; font-weight:800; margin:18px 18px 14px; text-align:center !important;}
.muted{color:var(--tg-hint); margin:0 0 12px; line-height:1.5;}

/* Cards & Buttons */
.card{
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:16px;
  padding:16px 18px;
  margin:0 18px 16px;
  backdrop-filter:blur(8px);
  box-shadow:0 8px 22px rgba(0,0,0,.25);
  transition:background .2s ease, transform .2s ease;
  box-sizing:border-box;
}
.card:hover{background:var(--card-bg-hover);}

/* Scroll performance mode: temporarily remove expensive effects while scrolling */
.is-scrolling .card,
.is-scrolling .modal,
.is-scrolling .modal-card,
.is-scrolling .snackbar,
.is-scrolling .map-load-error-card{
  backdrop-filter:none !important;
}
.is-scrolling .card{box-shadow:0 4px 12px rgba(0,0,0,.18) !important;}
.is-scrolling .modal{background:rgba(10,12,16,.82) !important;}
.is-scrolling .snackbar{box-shadow:0 8px 18px rgba(0,0,0,0.35) !important;}

.button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 18px; border-radius:14px; border:none; cursor:pointer; font-weight:700;
  transition:transform .12s ease, opacity .12s ease;
}
.button:active{transform:scale(.97);}
.button.is-disabled{opacity:.55; cursor:not-allowed;}
.button.is-disabled:active{transform:none;}
.button:disabled{opacity:.55; cursor:not-allowed;}
.button:disabled:active{transform:none;}
.button.primary{background:var(--tg-button); color:var(--tg-button-text);}
.button.ghost{background:transparent; color:var(--tg-text); border:1px solid var(--border-color);}
.button.danger{background:#ef4444; border:1px solid #ef4444; color:#fff;}
.button.danger:hover{filter:brightness(1.05);}

.row.gap{display:flex; gap:10px; flex-wrap:wrap;}

/* ====================== ACCOUNT ====================== */
#tab-account{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:auto;
  padding-bottom:calc(110px + var(--tabbar-offset));
}
.account-shell{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:0 18px 18px;
}
.account-card{
  width:100%;
  max-width:420px;
  margin:0;
  text-align:center;
}
.account-card .muted{ text-align:center; }
#accountTitle{
  text-align:center !important;
  margin-left:18px;
  margin-right:18px;
}
.account-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  width:100%;
  margin-top:6px;
}
.account-actions .button{ width:100%; padding:10px 12px; }
.account-actions.stack{ grid-template-columns:1fr; }
.account-actions.stack .button{ height:44px; border-radius:14px; }

@media (max-width: 360px){
  .account-actions{ grid-template-columns:1fr; }
}

/* ====================== AUTH MODAL ====================== */
.auth-card{
  display:grid;
  gap:14px;
}
.auth-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.auth-title{font-size:20px; font-weight:800;}
.auth-step{
  font-size:12px;
  color:var(--tg-hint);
  border:1px solid var(--border-color);
  border-radius:999px;
  padding:4px 8px;
  background:rgba(255,255,255,0.05);
}
.auth-subtitle{
  color:var(--tg-hint);
  line-height:1.4;
}
.auth-fields{
  display:grid;
  gap:10px;
}
.auth-field{
  display:grid;
  gap:6px;
  font-size:12px;
  color:var(--tg-hint);
}
.auth-field input{
  width:100%;
  box-sizing:border-box;
  background:var(--field-bg);
  border:1px solid var(--border-color);
  border-radius:12px;
  padding:10px 12px;
  color:var(--tg-text);
  caret-color:var(--tg-text);
  -webkit-text-fill-color:var(--tg-text); /* iOS/Safari ensures correct text in inputs */
  font-size:15px;
  outline:none;
}
.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:hover,
.auth-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--tg-text);
  caret-color:var(--tg-text);
  transition: background-color 9999s ease-in-out 0s;
}
.auth-field input::placeholder{ color:var(--field-placeholder); }
.auth-field input:focus{
  border-color:var(--field-focus-border);
  box-shadow:0 0 0 3px var(--field-focus-shadow);
}
.auth-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.auth-actions .button{ width:100%; }
.auth-error{
  background:rgba(255,80,80,0.14);
  border:1px solid rgba(255,80,80,0.35);
  color:#ffb3b3;
  padding:8px 10px;
  border-radius:10px;
  font-size:13px;
}
.auth-note{
  color:#b0b0b0;
  font-size:12px;
  text-align:center;
}
.auth-terms{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:4px;
  text-align:left;
}
.auth-terms input[type="checkbox"]{
  margin-top:3px;
  width:18px;
  height:18px;
  accent-color: var(--tg-button);
}
.auth-terms .auth-terms-text{
  color:var(--tg-hint);
  font-size:13px;
  line-height:1.35;
}
.auth-terms .auth-terms-link{
  color:var(--tg-link);
  text-decoration:underline;
  cursor:pointer;
}

.booking-item{
  padding:12px;
  border-radius:14px;
  border:1px solid var(--border-color);
  background:rgba(255,255,255,0.03);
  cursor:pointer;
  transition:background .12s ease, transform .06s ease;
}
.booking-item:hover{ background:rgba(255,255,255,0.06); }
.booking-item:active{ transform:scale(.99); }

.kv{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:8px 10px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--border-color);
  background:rgba(255,255,255,0.03);
}
.kv-k{
  color:var(--tg-hint);
  font-size:12px;
}

/* ====================== TABBAR ====================== */
.tabbar{
  position:fixed; left:0; right:0;
  bottom:calc(env(safe-area-inset-bottom) + var(--tabbar-offset));
  padding:10px 12px calc(env(safe-area-inset-bottom) + 10px);
  background:var(--card-bg);
  backdrop-filter:saturate(1.2) blur(10px);
  border-top:1px solid var(--border-color);
  display:flex; gap:8px; align-items:stretch;
  z-index:1000;
}
.tabbar .tab{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--tg-hint);}
.tabbar .tab .icon{width:28px; height:28px; display:flex; align-items:center; justify-content:center;}
.tabbar .tab .icon svg, .tabbar .tab .icon img{width:28px; height:28px; display:block;}
.tabbar .tab .label{font-size:12px; white-space:nowrap; opacity:.85; text-align:center;}
.tabbar .tab.active{color:var(--blue);}
body.tab-transition .tg-app{transition:opacity .25s ease; opacity:.93;}

/* ====================== MODAL ====================== */
.modal{
  display:none; position:fixed; inset:0;
  backdrop-filter:blur(12px); background:var(--modal-overlay);
  z-index:50; align-items:center; justify-content:center;
}
.modal.show{display:grid; animation:fadeIn .15s ease;}
.modal.auth-modal{z-index:999 !important;}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.modal-card{
  background:var(--modal-bg);
  backdrop-filter:saturate(1.2) blur(10px);
  border:1px solid var(--modal-border); border-radius:20px;
  padding:20px;
  width:min(440px, 92vw);              /* чуть уже не делаем — важен box-sizing */
  max-height:85vh; 
  overflow-y:auto;
  overflow-x:hidden;
  box-shadow:0 6px 25px rgba(0,0,0,.4);
  transform:scale(.97); animation:scaleIn .2s ease forwards;
  box-sizing:border-box;               /* ← фикс: паддинги учитываются во width */
}
@keyframes scaleIn{to{transform:scale(1)}}

/* Карточка «Подробнее»: всегда помещается в окно, кнопки видны без прокрутки */
.modal-card.details{
  width:min(520px, 92vw);              /* меньше, чтобы точно входило в окно */
  max-height:92vh;
  display:grid;
  grid-template-rows: auto auto 1fr auto;
  gap:10px;
  padding:16px;
  box-sizing:border-box;               /* ← без «вываливания» за края */
}

/* --- Details: применяем «ручки» из :root именно в карточке Подробнее --- */
.modal-card.details .param-list{ font-size: var(--param-font); }

.modal-card.details .param-row{
  /* те же отступы/высота, но без сетки — просто рядом */
  display:inline-flex;
  flex-wrap:nowrap;
  gap: var(--param-gap);
  padding: var(--param-py) var(--param-px);
  min-height: var(--param-min-h);
  line-height: var(--param-line);
}


.modal-card.details .param-row .k{ font-size: var(--param-font); }
.modal-card.details .param-row .v{
  font-size: var(--param-font);
  font-weight: var(--param-value-weight);
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}



.details-title{font-weight:800; font-size:20px; text-align:center;}
.details-desc{color:var(--tg-hint); text-align:center; line-height:1.35;}

/* область с фото и параметрами прокручивается, кнопки — всегда внизу */
.details-body{overflow:auto; display:grid; gap:10px;}

/* Параметры: стабильная «яблочная» сетка — не расползается ни на одной ОС */
.param-list{
  border:1px solid var(--border-color);
  border-radius:12px;
  overflow:hidden;
  width:100%;
  box-sizing:border-box;
}

/* --- Детали: сетка параметров 2×4 (две колонки) --- */
.param-list.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  width:100%;
  border:1px solid var(--border-color);
  border-radius:12px;
  overflow:hidden;
  box-sizing:border-box;
}

/* каждая ячейка — свой бордер сверху; у левого столбца добавим вертикальный разделитель */
.param-item{ border-top:1px solid var(--border-color); }
.param-item:nth-child(-n+2){ border-top:none; }              /* у первой строки нет верхней границы */
.param-item:nth-child(odd){ border-right:1px solid var(--border-color); } /* вертикальная линия между колонками */

.param-list.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;  /* ← всегда две колонки */
  width:100%;
  border:1px solid var(--border-color);
  border-radius:12px;
  overflow:hidden;
  box-sizing:border-box;
}




/* внутри ячейки — наш уже знакомый «параметр + значение рядом» */
.param-item .param-row{
  display:inline-flex;
  align-items:center;
  gap: var(--param-gap);
  padding: var(--param-py) var(--param-px);
  min-height: var(--param-min-h);
  line-height: var(--param-line);
  max-width:100%;
}


/* «Параметр + значение» стоят РЯДОМ, без растяжения на всю строку */
.param-row{
  display:inline-flex;           /* ← вместо грид-таблицы */
  flex-wrap:nowrap;
  align-items:center;
  gap: var(--param-gap);         /* расстояние между названием и значением */
  padding: var(--param-py) var(--param-px);
  border-top:1px solid var(--border-color);
  line-height: var(--param-line);
  min-height: var(--param-min-h);
  max-width:100%;                /* не вываливаться за карточку */
}



.param-row:first-child{border-top:none;}

/* Левый столбец — чуть контрастнее и плотнее, лучше читается */
.param-row .k{
  color:var(--tg-hint);
  font-weight:600;         /* подчёркиваем подпись параметра */
  letter-spacing:.1px;     /* микро-аптечка читабельности */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* Значение — белым, чуть тяжелее (но не жирнее заголовков) */
.param-row .v{
  color:var(--tg-text);
  font-weight:700;         /* было var(--param-value-weight); можно оставить 600–700 */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}




/* На всякий случай — плавная прокрутка тела «Подробнее» на мобильных */
.details-body{
  overflow:auto;
  display:grid;
  gap:10px;
}

/* Фолбэк: если нет Grid — аккуратный Flex без расползания */
@supports not (display: grid){
  .param-row{display:flex;justify-content:space-between;gap:12px;}
  .param-row .k{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .param-row .v{flex:0 0 min(42%, 180px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
}



/* Галерея в карточке: стрелки + счётчик, без проскока */
.camp-gal{
  position:relative; margin:8px 0 0;
  border:1px solid var(--border-color); border-radius:14px; overflow:hidden;
  background:rgba(255,255,255,.05);
}
.camp-gal .viewport{display:flex; transition:transform .25s ease; will-change:transform;}
.camp-gal img{
  width:100%;
  height:clamp(200px, 32vh, 280px);
  object-fit:cover; display:block; user-select:none;
  opacity:0; transition:opacity .18s ease;
}
.camp-gal img[src]{ opacity:1; }

.camp-gal .gal-counter{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:6px; font-size:12px; color:#fff;
  background:rgba(0,0,0,.45); border-radius:999px; padding:4px 10px; pointer-events:none;
}
/* Стрелки перелистывания (мини-галерея) - компактный стиль */
.gal-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:0; line-height:1; user-select:none; cursor:pointer;
  background:rgba(0,0,0,0.4);
  color:#fff;
  border:1px solid rgba(255,255,255,0.15);
  backdrop-filter:blur(3px);
  transition:all .12s ease;
}
.gal-arrow.left{ left:8px; }
.gal-arrow.right{ right:8px; }
.gal-arrow::before{
  content:"";
  width:8px; height:8px;
  border-top:1.5px solid #fff;
  border-right:1.5px solid #fff;
  transform:translate(-50%, -50%) rotate(-135deg);
  position:absolute; top:50%; left:50%;
}
.gal-arrow.right::before{ transform:translate(-50%, -50%) rotate(45deg); }
.gal-arrow:hover{
  background:rgba(0,0,0,0.55);
  border-color:rgba(255,255,255,0.25);
}
.gal-arrow:active{
  transform:translateY(-50%) scale(.92);
  background:rgba(0,0,0,0.6);
}
.gal-arrow.disabled{
  opacity:.2; pointer-events:none;
}



/* Полноэкранная галерея */
.fs-modal{ position:fixed; inset:0; z-index:9999; display:grid; grid-template-rows: 1fr auto; background:rgba(0,0,0,.9); }
.fs-viewport{ overflow:hidden; }

/* Стрелки в полноэкранной галерее - компактный стиль */
.fs-arrow{
  position:fixed; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:10px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(0,0,0,0.45); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:0; line-height:1; cursor:pointer; user-select:none;
  z-index:10000;
  backdrop-filter:blur(3px);
  transition:all .12s ease;
}
.fs-arrow.left{ left:16px; }
.fs-arrow.right{ right:16px; }
.fs-arrow::before{
  content:"";
  width:9px; height:9px;
  border-top:1.5px solid #fff;
  border-right:1.5px solid #fff;
  transform:translate(-50%, -50%) rotate(-135deg);
  position:absolute; top:50%; left:50%;
}
.fs-arrow.right::before{ transform:translate(-50%, -50%) rotate(45deg); }
.fs-arrow:hover{
  background:rgba(0,0,0,0.6);
  border-color:rgba(255,255,255,0.25);
}
.fs-arrow:active{
  transform:translateY(-50%) scale(.92);
  background:rgba(0,0,0,0.7);
}



.fs-track{ display:flex; transition:transform .25s ease; height:100%; }
/* Слайды в полноэкранке: позволяем жесты, убираем выделение и даём GPU-ускорение трансформаций */
.fs-track img{
  width:100vw;
  height:100vh;
  object-fit:contain;
  background:#000;
  user-select:none;
  touch-action:none;          /* нужно для pinch/панорамирования на iOS */
  will-change:transform;      /* плавнее масштаб и перетаскивание */
  transition:transform .05s linear; /* лёгкое сглаживание при пане; зум делаем без анимации */
}

.fs-ui{
  display:grid; gap:10px;
  /* добавили нижний отступ с учётом «подбородка» iPhone */
  padding:10px 10px calc(env(safe-area-inset-bottom) + 18px);
  grid-template-columns:1fr 1fr; align-items:center;
  background:linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,.1));
}

.fs-counter{ grid-column:1 / -1; justify-self:center; color:#fff; font-size:13px; opacity:.9; }
.fs-actions .button{ width:100%; height:44px; border-radius:12px; }
.fs-actions{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:10px; }



/* Узкая «оболочка» именно для фильтра — внешнюю прозрачную рамку ужимаем */
.modal-card.booking-shell{
  background:transparent; border:none; box-shadow:none; padding:0; width:auto; max-width:none;
}

/* ====================== MAP ====================== */
.map-wrap{position:relative; height:calc(100vh - 110px); margin:16px; border-radius:16px; overflow:hidden;}
#map{position:absolute; inset:0; z-index:0;}
.map-ui{position:absolute; inset:0; pointer-events:none; z-index:500;}
.map-load-error{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,0.18);
  backdrop-filter:blur(2px);
  z-index:450;
}
.map-load-error-card{
  width:min(520px, 92vw);
  border-radius:18px;
  padding:16px 16px 14px;
  background:rgba(17,19,23,.88);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 10px 28px rgba(0,0,0,0.45);
  text-align:center;
}
.map-load-error-title{font-weight:900;font-size:18px;}
.map-load-error-text{margin-top:8px;color:var(--tg-hint);line-height:1.35;}
.map-load-error-btn{margin-top:12px;width:100%;}
.map-btn{
  pointer-events:auto; position:absolute; bottom:18px; border:none; background:none; box-shadow:none;
  padding:0; cursor:pointer; transition:transform .12s ease;
}
.map-btn.left{left:18px;}
.map-btn.right{right:18px;}
.map-btn:hover{background:none; box-shadow:none;}
.map-btn:active{transform:scale(.96);}
.map-btn.filter-active{filter:drop-shadow(0 10px 28px rgba(34,197,94,.7));}
.map-ui .map-btn .tg-emoji{width:64px; height:64px; display:block;}
/* календарь чуть меньше компаса */
#openBookingFilter .tg-emoji{transform:scale(0.74); transform-origin:center center;}

/* Черновик бронирования — кнопка над календарём */
.map-btn.draft{bottom:94px;}
.map-btn.draft.cart-btn{
  left:50%;
  transform:translateX(-50%);
  bottom:18px;
}
.map-btn.draft.cart-btn .tg-emoji{
  width:64px;
  height:64px;
  display:block;
}
.map-btn.draft.cart-btn:active{
  transform:translateX(-50%) !important;
  opacity:0.8;
}
.map-btn.draft .map-badge{
  position:absolute;
  top:-2px;
  right:-2px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:var(--tg-button);
  color:var(--tg-button-text);
  font-size:12px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(14,22,33,0.95);
  box-shadow:0 6px 14px rgba(0,0,0,0.35);
  box-sizing:border-box;
}
/* подсветка активного фильтра */
#openBookingFilter.filter-active .tg-emoji,
#toggleFilters.filter-active .tg-emoji{
  box-shadow:
    0 0 0 8px rgba(34,197,94,0.26),
    0 0 0 14px rgba(34,197,94,0.12),
    0 12px 28px rgba(0,0,0,0.45);
  border-radius:50%;
  background:rgba(34,197,94,0.22);
  transform:scale(0.78);
  transform-origin:center center;
}

/* Ошибка в полях бронирования/фильтра */
.bk-input.bk-error,
.bk-select.bk-error{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 1px rgba(239,68,68,0.55), 0 0 12px rgba(239,68,68,0.35);
}

/* Кнопка автоподбора — голубая рамка (телеграм-стиль) */
.alloc-autopick{
  border-color:var(--tg-link) !important;
  box-shadow:0 0 0 1px rgba(42,157,244,0.55), 0 0 14px rgba(42,157,244,0.22);
}
.alloc-autopick.cancel{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 1px rgba(239,68,68,0.55), 0 0 14px rgba(239,68,68,0.22);
}
.alloc-autopick:disabled{
  border-color:rgba(42,157,244,0.35) !important;
  box-shadow:none;
}

.multi-tabs{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  justify-content:center;
  margin-bottom:12px;
  min-height:58px;
}
.multi-tab{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid var(--border-color);
  background:transparent;
  color:var(--tg-text);
  cursor:pointer;
  box-sizing:border-box;
  /* Prevent text selection on long press */
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  /* Smooth border transition */
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.multi-tab.active{
  border-color:var(--tg-button);
  box-shadow:0 0 0 2px rgba(48, 158, 248, .25);
}
.multi-tab-title{
  font-weight:800;
  font-size:14px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  width:100%;
}
.multi-tab-sub{
  font-size:12px;
  color:var(--tg-hint);
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  width:100%;
}

.compare-list{margin-top:12px;}
.compare-camp{padding:14px;}
.compare-camp-title{font-weight:800;font-size:18px;line-height:1.2;}
.compare-camp-sub{margin-top:6px;}
.compare-variants{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.compare-variant{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border-color);
  background:rgba(255,255,255,0.03);
}
@media (max-width:420px){
  .compare-variant{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
}
.compare-variant-main{flex:1;min-width:0;}
.compare-variant-text{
  font-weight:700;
  white-space:normal;
  word-break:break-word;
  line-height:1.25;
}
.compare-variant-price{
  margin-top:4px;
  font-weight:800;
}
.button.primary.compare-add{
  padding:10px 14px;
  border-radius:12px;
  white-space:nowrap;
  flex-shrink:0;
}
.button.ghost.compare-toggle{
  white-space:nowrap;
  flex-shrink:0;
  min-width:max-content;
}
.button.ghost.compare-toggle.compare-remove{
  border-color:#ef4444;
  color:#ef4444;
}

/* ====================== SNACKBAR ====================== */
.snackbar{
  position:fixed;
  left:50%;
  top:calc(env(safe-area-inset-top) + 20px);
  transform:translateX(-50%);
  z-index:2000;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:min(560px, 92vw);
  padding:10px 12px;
  border-radius:14px;
  background:rgba(17,19,23,.94);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 10px 28px rgba(0,0,0,0.45);
  backdrop-filter:saturate(1.2) blur(10px);
  animation:snackIn .2s ease;
  box-sizing:border-box;
}
.snackbar.hide{
  opacity:0;
  transform:translateX(-50%) translateY(-8px);
  transition:opacity .2s ease, transform .2s ease;
}
.snackbar-text{
  flex:1;
  font-size:13px;
  line-height:1.25;
  color:var(--tg-text);
}
.snackbar-action{
  border:none;
  background:transparent;
  color:var(--tg-link);
  font-weight:800;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
}
.snackbar-action:active{transform:scale(.98);}
@keyframes snackIn{from{opacity:0; transform:translateX(-50%) translateY(-10px)} to{opacity:1; transform:translateX(-50%) translateY(0)}}
/* уменьшили геолокацию */
#geoBtn .tg-emoji {
  transform:scale(0.83);
  transform-origin:center center;
}

/* Anti-overscroll (не отдаём жесты «шторке» Telegram) */
html, body, .tg-app, .map-wrap, #map{overscroll-behavior:none;}
html, body, .tg-app, .modal, .modal-card, .alloc-card{overflow-x:hidden !important;}
#map, .leaflet-container{touch-action:pan-x pan-y;}

/* ====================== CLUSTERS & POPUPS ====================== */
.camp-popup{min-width:280px; text-align:center;}
.camp-popup .title{font-weight:800; font-size:20px; margin:4px 0 6px;}
.camp-popup .cover{width:100%; height:120px; object-fit:cover; border-radius:10px; border:1px solid var(--border-color); margin-bottom:8px;}
.camp-popup .price{color:var(--tg-hint); margin:6px 0 10px;}
.camp-popup .button{font-size:14px; padding:9px 14px;}
.camp-popup .button.ghost{border:1px solid var(--border-color);}

/* === Leaflet popup close button (телеграм-стиль): красный квадрат с белым «×» === */
.leaflet-popup.camp-popup .leaflet-popup-close-button{
  display:none;                       /* скрываем кнопку закрытия */
  position:absolute;
  top:8px; right:8px;
  width:26px; height:26px;
  background:#ef4444;                /* красный фон */
  color:#fff;                         /* белый знак */
  border-radius:6px;                  /* скруглённый квадрат */
  border:1px solid rgba(0,0,0,0.25);
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
  opacity:1;                          /* Leaflet иногда снижает прозрачность */
  line-height:26px;
  text-align:center;
  font-weight:900;
  font-size:18px;
  text-indent:0;                      /* показываем «×», не прячем */
  background-image:none;              /* без иконок по умолчанию */
}
.leaflet-popup.camp-popup .leaflet-popup-close-button:hover{
  filter:brightness(1.06);
}
.leaflet-popup.camp-popup .leaflet-popup-close-button:active{
  transform:scale(.96);
}


.cl-marker{
  border-radius:999px; background:rgba(10,132,255,.15);
  border:1px solid rgba(10,132,255,.5); box-shadow:0 6px 18px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
}
.cl-marker .cl-inner{color:#fff; font-weight:800; font-size:14px;}
.cl-medium{width:52px!important; height:52px!important;}
.cl-large{width:60px!important; height:60px!important;}

.emoji-marker{display:flex; align-items:flex-end; justify-content:center;}
.emoji-marker.std{width:36px; height:44px;}
.emoji-marker.vip{width:72px; height:88px;}
.emoji-marker.std .emoji-pin{font-size:22px; line-height:1; transform:translateY(-1px);}
.emoji-marker.vip .emoji-pin{font-size:44px; line-height:1; transform:translateY(-2px);}


/* === Крышка в балуне: эмоджи до загрузки фото === */
.popup-cover{
  position:relative;
  width:100%;
  height:160px;                      /* совпадает с .popup-photo */
  border-radius:10px;
  border:1px solid var(--border-color);
  overflow:hidden;
  background:rgba(255,255,255,0.05);
}
.popup-cover .popup-emoji{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:42px; line-height:1;
  background:rgba(0,0,0,0.08);
}
.popup-cover img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity .18s ease;
}
/* когда картинка загрузилась — проявляем фото и прячем эмоджи */
.popup-cover.loaded img{ opacity:1; }
.popup-cover.loaded .popup-emoji{ display:none; }


/* ====================== GENERIC BUTTONS (INSIDE POPUPS/MODALS) ====================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:14px; font-weight:700;
  border:none; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.18);
}
.btn-primary{background:#2b7cff; color:#fff;}
/* Телеграм-контраст для зелёной: всегда белый текст */
.btn-success{background:#22c55e; color:#fff;}
.btn-light{background:#ffffff; color:#0f1216;}
.button.green{background:#22c55e; border-color:#22c55e; color:#fff;}
.button.green:hover{background:#2ed868;}


/* ====================== BOOKING FILTER (COMPACT 2×2) ====================== */
/* оболочка фильтра внутри модалки — узкая внешняя рамка */
.modal-card.booking-shell .booking-card{
  background:rgba(17,19,23,.92);
  color:#e5e7eb;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  width:min(290px, 86vw);
  padding:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.modal-card.booking-shell .booking-title{
  font-weight:800; font-size:16px; margin:4px 2px 10px; text-align:center;
}

/* сетка 2×2 одинаковых колонок */
.modal-card.booking-shell .booking-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.modal-card.booking-shell .bk-field{display:grid; gap:6px;}
.modal-card.booking-shell .bk-field>span{color:var(--tg-hint); font-size:12px;}

/* визуальные «кнопки» (дата/значение) — используются и в корзине */
.bk-input{
  height:44px;
  border:1px solid var(--border-color);
  border-radius:12px;
  background:var(--field-bg);
  color:var(--tg-text);
  padding:0 12px;
  display:flex;
  align-items:center;
  font-size:17px;
  font-weight:700;
  cursor:pointer;
  box-sizing:border-box;
}
.bk-input:focus{
  outline:none;
  border-color:var(--field-focus-border);
  box-shadow:0 0 0 3px var(--field-focus-shadow);
}
.bk-input-inline{
  height:34px;
  padding:0 10px;
  font-size:14px;
  border-radius:12px;
  display:inline-flex;
  vertical-align:middle;
}

/* date — кладём нативный инпут поверх «кнопки» */
.modal-card.booking-shell .bk-date{position:relative;}
/* Дата: храним значение в скрытом input, НО кликаем только по нашей кнопке (без системного календаря) */
.modal-card.booking-shell .bk-native{
  position:absolute; inset:0;
  opacity:0;
  pointer-events:none;        /* <— запрещаем системный date-picker */
  border:0; background:transparent;
  width:100%; height:100%;
}

/* ====================== DATE PICKER (CUSTOM) ====================== */
.dp-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.66);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.dp-card{
  width:min(330px, 92vw);
  background:rgba(17,19,23,0.96);
  color:#e5e7eb;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  padding:12px;
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
  box-sizing:border-box;
}
.dp-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.dp-nav{
  border:none;
  background:transparent;
  color:#e5e7eb;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  border-radius:10px;
  padding:6px 10px;
}
.dp-nav:hover{background:rgba(255,255,255,0.06);}
.dp-selects{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  gap:8px;
  justify-content:center;
}
.dp-select{
  height:38px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.10);
  background:#0f1216;
  color:#e5e7eb;
  padding:0 10px;
  font-weight:800;
  min-width:0;
  max-width:160px;
}
.dp-grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:6px;
  text-align:center;
}
.dp-dow{
  color:#9aa3ad;
  font-size:12px;
  font-weight:800;
  padding:4px 0;
}
.dp-empty{height:36px;}
.dp-day{
  border:1px solid rgba(255,255,255,0.10);
  background:transparent;
  color:#e5e7eb;
  border-radius:10px;
  padding:8px 0;
  font-weight:900;
  cursor:pointer;
  min-width:0;
  box-sizing:border-box;
}
.dp-day:hover{background:rgba(255,255,255,0.06);}
.dp-day.selected{
  background:#22c55e;
  border-color:#22c55e;
  color:#fff;
}
.dp-day.today{
  border-color:#2a9df4;
}
.dp-day.disabled{
  opacity:0.35;
  cursor:not-allowed;
  background:rgba(255,255,255,0.03);
}
.dp-day.busy{
  opacity:0.35;
  cursor:not-allowed;
  background:rgba(239,68,68,0.10);
  border-color:rgba(239,68,68,0.35);
}


/* селекты в стиле фильтра (используются и в окне распределения гостей) */
.bk-select{
  height:44px;
  border:1px solid var(--border-color);
  border-radius:12px;
  background:var(--field-bg);
  color:var(--tg-text);
  padding:0 10px;
  width:100%;
  font-size:17px;
  font-weight:700;
  line-height:1.2;
}
.bk-select:focus{
  outline:none;
  border-color:var(--field-focus-border);
  box-shadow:0 0 0 3px var(--field-focus-shadow);
}
/* выпадающий список: принудительно читаемые цвета (на части браузеров игнорируется) */
.bk-select option{color:#0f1216; background:#ffffff;}

/* подсказка над сеткой */
.modal-card.booking-shell .booking-hint{
  font-size:13px; color:var(--tg-hint); margin:8px 2px 12px; line-height:1.4; text-align:center;
}

/* чекбокс для split-room */
.modal-card.booking-shell .bk-checkbox-wrapper{
  display:flex; gap:10px; align-items:center; padding:10px 0; cursor:pointer;
  font-size:14px;
}
.modal-card.booking-shell .bk-checkbox{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:20px; height:20px; min-width:20px; flex-shrink:0;
  border:2px solid var(--border-color); border-radius:6px;
  background:var(--field-bg);
  cursor:pointer;
  transition:all 0.2s ease;
  position:relative;
}
.modal-card.booking-shell .bk-checkbox:hover{
  border-color:var(--field-focus-border);
}
.modal-card.booking-shell .bk-checkbox:checked{
  background:#1a7dff; border-color:#1a7dff;
}
.modal-card.booking-shell .bk-checkbox:checked::after{
  content:'✓';
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#ffffff; font-size:14px; font-weight:700; line-height:1;
}

/* нижние кнопки — в линию 1:1:1 */
.modal-card.booking-shell .booking-actions{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:10px;
}
.modal-card.booking-shell .booking-actions .button{height:42px; border-radius:12px; min-width:0; padding:0 8px; font-size:12px;}

/* узкие экраны — не расползаемся */
@media (max-width:360px){
  .modal-card.booking-shell .booking-card{width:92vw;}
}

/* ====================== ACCOMMODATIONS LIST (BOOKING FLOW) ====================== */
.accom-card{display:grid; gap:12px;}
.accom-head{display:grid; gap:4px; text-align:center;}
.accom-title{font-weight:800; font-size:16px; color:var(--tg-text);}
.accom-sub{
  color:var(--tg-hint);
  font-size:13px;
  line-height:1.25;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.accom-hint{
  color:var(--tg-text);
  font-size:13px;
  line-height:1.35;
  padding:10px 12px;
  border:1px solid #ef4444; /* red border to highlight */
  border-radius:12px;
  background:var(--card-bg);
  text-align:center; /* center caption inside red frame */
}
/* Smaller font specifically for the "К выбору апартаментов" button */
#bkApply{font-size:11px;}
.accom-list{display:grid; gap:10px;}
.accom-item{
  display:grid;
  grid-template-columns: 64px 1fr auto;
  gap:12px;
  align-items:center;
  width:100%;
  border:1px solid var(--border-color);
  border-radius:14px;
  background:var(--card-bg);
  padding:10px;
  cursor:pointer;
  color:var(--tg-text);
  text-align:left;
}
.accom-item:hover{background:var(--card-bg-hover);}
.accom-thumb{
  width:64px;
  height:52px;
  border-radius:12px;
  border:1px solid var(--border-color);
  object-fit:cover;
  background:var(--card-bg);
}
.accom-thumb.ph{display:block;}
.accom-main{min-width:0; display:grid; gap:2px;}
.accom-name{font-weight:800; font-size:14px; color:var(--tg-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.accom-meta{color:var(--tg-hint); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.accom-price{font-weight:800; font-size:13px; color:var(--tg-text); white-space:nowrap;}
.accom-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.accom-actions .button{height:42px; border-radius:12px; min-width:0;}

/* ====================== GUEST ALLOCATION (MANUAL SPLIT) ====================== */
.alloc-card{display:grid; gap:12px; overflow-x:hidden; max-width:100%;}
.alloc-hint{min-height:18px; font-size:13px; line-height:1.35; text-align:center;}
.alloc-hint.ok{color:#22c55e;}
.alloc-hint.warn{color:#f59e0b;}
.alloc-hint.err{color:#ef4444;}
.alloc-hint .hint-link{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  font:inherit;
  font-weight:800;
  color:var(--tg-link);
  text-decoration:underline;
  cursor:pointer;
}
.alloc-hint .hint-link:hover{opacity:0.9;}
.alloc-hint .hint-link:active{opacity:0.8;}
.alloc-list{display:grid; gap:10px; overflow-x:hidden; max-width:100%;}
.alloc-item{
  display:grid;
  grid-template-columns: 74px 1fr 32px;
  gap:10px;
  align-items:stretch;
  width:100%;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  padding:10px;
  box-sizing:border-box;
}

/* Large lists: let Chromium skip offscreen rendering for smoother scroll */
@supports (content-visibility: auto){
  .accom-item,
  .alloc-item,
  .card{
    content-visibility:auto;
    contain-intrinsic-size: 160px 1px;
  }
}
.alloc-thumb{
  width:74px;
  height:64px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  object-fit:cover;
  background:rgba(255,255,255,0.02);
}
.alloc-thumb.ph{display:block;}
.alloc-main{min-width:0; display:grid; gap:6px;}
.alloc-name{font-weight:800; font-size:14px; color:var(--tg-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.alloc-meta{font-size:12px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.alloc-controls{display:grid; grid-template-columns: 1fr 1fr; gap:10px;}
.alloc-control{display:grid; gap:4px;}
.alloc-step{display:grid; grid-template-columns: 34px 1fr 34px; gap:6px; align-items:center;}
.alloc-btn{
  height:38px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.10);
  background:#0f1216;
  color:#e5e7eb;
  font-weight:900;
  cursor:pointer;
}
.alloc-input{
  height:38px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.10);
  background:#0f1216;
  color:#e5e7eb;
  font-weight:800;
  text-align:center;
  width:100%;
  box-sizing:border-box;
}
.alloc-remove{
  border:none;
  background:transparent;
  color:#9aa3af;
  font-weight:900;
  cursor:pointer;
  border-radius:10px;
}
.alloc-remove:hover{color:var(--tg-text); background:var(--card-bg-hover);}
.alloc-add{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
}
.alloc-select{
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:#0f1216;
  color:#e5e7eb;
  padding:0 10px;
  font-weight:700;
  min-width:0;
}
.alloc-summary{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  background:rgba(255,255,255,0.03);
  padding:10px 12px;
  display:grid;
  gap:6px;
}
.alloc-summary:empty{display:none;}
.alloc-row{display:flex; justify-content:space-between; gap:10px; align-items:center;}
.alloc-val{font-weight:900; color:var(--tg-text); white-space:nowrap;}
.alloc-actions{display:grid; grid-template-columns:1fr; gap:10px;}
.alloc-actions .button{height:42px; border-radius:12px; min-width:0; width:100%;}

/* price block inside details */
.alloc-price-card{
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  padding:clamp(8px, 2.6vw, 10px) clamp(10px, 3.2vw, 12px);
  display:flex;
  gap:clamp(8px, 2.8vw, 12px);
  flex-wrap:wrap;
  align-items:center;
  font-size:clamp(12px, 3.2vw, 13px);
  width:100%;
  max-width:340px;
  margin:0 auto;
  box-sizing:border-box;
  overflow:hidden; /* страховка от выезда на iOS */
}
.alloc-price-card .price-item{
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(6px, 2.2vw, 10px);
}
.alloc-price-card .price-item.total{flex:1 1 100%;}
.alloc-price-card .price-k{
  flex:1 1 auto;
  min-width:0;
  color:var(--tg-hint);
  font-weight:800;
  font-size:inherit;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.alloc-price-card .price-v{
  flex:0 0 auto;
  color:#22c55e;
  font-weight:900;
  font-size:clamp(13px, 3.4vw, 14px);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.accom-actions .button:only-child{grid-column:1/-1;}

/* ====================== ROOM DETAILS: COMPACT PARAMS ====================== */
.room-params-compact{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  background:rgba(255,255,255,0.03);
  padding:6px 8px;
  display:grid;
  gap:4px;
}
.room-param-line{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
  line-height:1.1;
}
.room-param-k{color:var(--tg-hint); font-size:14px; font-weight:800;}
.room-param-sep{color:rgba(255,255,255,0.22); font-weight:500;}
.room-param-v{color:var(--tg-text); font-size:14px; font-weight:900;}
.room-toggle-all{width:100%; height:38px; border-radius:12px;}
.room-toggle-all.button.ghost{
  border:2px solid #2a9df4;
  color:#e5e7eb;
}
.room-toggle-all.button.ghost:hover{background:rgba(42,157,244,0.08);}

/* Gallery in room cards: do not crop */
.camp-gal.room-gal img{
  object-fit:contain;
  background:rgba(0,0,0,0.22);
  height:clamp(160px, 24vh, 220px);
}

/* All params modal list */
.allparams-list{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  background:rgba(255,255,255,0.03);
  overflow:hidden;
}
.allparams-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-top:1px solid rgba(255,255,255,0.06);
}
.allparams-row:first-child{border-top:none;}
.allparams-k{color:var(--tg-hint); font-weight:700; font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.allparams-v{color:var(--tg-text); font-weight:800; font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right;}

/* ====================== MISC ====================== */
.loading-emoji{display:inline-block; animation:spinEmoji 1s linear infinite;}
@keyframes spinEmoji{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* ====================== NEW BOOKING CONFIRMATION STYLES ====================== */
.alloc-item-new{
  display:grid;
  grid-template-columns: 74px 1fr;
  gap:10px;
  width:100%;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  padding:10px;
  box-sizing:border-box;
}
.alloc-main-new{
  min-width:0;
  display:grid;
  gap:6px;
}
.alloc-guest-btn{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.10);
  background:#0f1216;
  color:#e5e7eb;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  font-size:13px;
  transition:background 0.2s;
}
.alloc-guest-btn:hover{
  background:rgba(255,255,255,0.06);
}
.alloc-remove-btn{
  border:none;
  background:transparent;
  font-size:18px;
  cursor:pointer;
  padding:4px;
  line-height:1;
  border-radius:8px;
  transition:background 0.2s;
}
.alloc-remove-btn:hover{
  background:rgba(239,68,68,0.1);
}