: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;
  --tabbar-safe-bottom: max(12px, env(safe-area-inset-bottom));
  --tabbar-lift: 10px;
  --tabbar-reserve: calc(82px + var(--tabbar-safe-bottom) + var(--tabbar-lift));
  --map-shell-bg: #000000;
  --map-frame-bg: #d8d8de;
  --glass-bg: rgba(26,26,26,0.90);
  --glass-bg-strong: rgba(26,26,26,0.95);
  --glass-bg-hover: rgba(42,42,42,0.90);
  --glass-border: rgba(255,255,255,0.10);
  --glass-shadow: 0 24px 48px rgba(0,0,0,0.32);
  --glass-shadow-soft: 0 18px 36px rgba(0,0,0,0.24);
  --accent-sand: #e5d3b3;
  --accent-sand-strong: #d8c5a3;
  --accent-sand-bg: rgba(229,211,179,0.12);
  --accent-sand-bg-strong: rgba(229,211,179,0.18);
  --accent-sand-border: rgba(229,211,179,0.24);
  --accent-sand-shadow: 0 18px 32px rgba(0,0,0,0.16);
  --accent-sand-text-dark: #1a1a1a;

  --modal-overlay: rgba(0,0,0,0.62);
  --modal-bg: rgba(17,19,23,.92);
  --app-vh: 100dvh;
  --app-vw: 100vw;
  --modal-safe-top: max(12px, env(safe-area-inset-top));
  --modal-safe-bottom: max(12px, env(safe-area-inset-bottom));
  --modal-available-height: calc(var(--app-vh) - var(--modal-safe-top) - var(--modal-safe-bottom));
  --modal-border: rgba(255,255,255,0.10);
  --modal-enter-ease: cubic-bezier(.22,1,.36,1);
  --modal-overlay-enter-duration: .24s;
  --modal-card-enter-duration: .42s;

  --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;      /* минимальная ширина правой колонки */
}

@font-face{
  font-family:"Manrope";
  src:url("/static/fonts/manrope/manrope-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src:url("/static/fonts/manrope/manrope-medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src:url("/static/fonts/manrope/manrope-semibold.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src:url("/static/fonts/manrope/manrope-bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src:url("/static/fonts/manrope/manrope-extrabold.woff2") format("woff2");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

: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(--map-shell-bg);
  color:var(--tg-text);
  font-family:"Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overscroll-behavior:auto;
  overflow:hidden;
  overflow-x:hidden;
  touch-action:auto;
}
*{box-sizing:border-box;}
.tg-app{position:fixed; inset:0; display:flex; flex-direction:column; overflow:hidden;}
.tab-content{min-height:0;}
#tab-map{
  flex:1 1 auto;
  min-height:0;
  padding:12px 12px calc(var(--tabbar-reserve) + 4px);
  background:var(--map-shell-bg);
}
.page-title{font-size:24px; font-weight:800; margin:18px 18px 14px; text-align:left !important;}
.page-title.greet-title{
  text-align:left !important;
  display:block !important;
}
.greet-title .greet-core{
  display:inline-block;
  position:relative;
  white-space:nowrap;
}
.greet-title .greet-emoji{
  position:absolute;
  left:100%;
  margin-left:10px;
  top:50%;
  transform:translateY(-50%);
}
.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 is expensive on long scroll lists (iOS/Android) */
  box-shadow:0 6px 16px rgba(0,0,0,.22);
  transition:background .2s ease, transform .2s ease;
  box-sizing:border-box;
}
.card:hover{background:var(--card-bg-hover);}

.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(var(--tabbar-reserve) + 6px);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#tab-services,
#tab-help{
  height:100%;
  overflow:auto;
  padding-bottom:var(--tabbar-reserve);
  -webkit-overflow-scrolling:touch;
}
.account-shell{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:14px;
  width:100%;
  max-width:456px;
  margin:0 auto;
  padding:6px 18px 0;
}
.account-shell.is-guest{
  justify-content:center;
  padding-top:0;
}
.account-card{
  width:100%;
  margin:0;
  text-align:center;
  border-radius:28px;
  border:1px solid rgba(229,211,179,.14);
  background:rgba(26,26,26,.92);
  box-shadow:0 24px 52px rgba(0,0,0,.22);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  padding:22px 20px 20px;
}
.account-card .muted{
  text-align:center;
  color:rgba(255,255,255,.68);
}
#accountTitle{
  text-align:left !important;
  width:calc(100% - 36px);
  max-width:456px;
  margin:18px auto 6px;
}
#accountTitle[style*="display:none"]{
  display:none !important;
}
.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:50px; border-radius:16px; }

.account-card--guest .muted{
  margin:0 0 18px;
  font-size:16px;
  line-height:1.55;
}

.account-card--guest .button,
.account-card--actions .button{
  min-height:50px;
  border-radius:16px;
  font-size:15px;
  font-weight:800;
}

.account-card--guest .button.primary{
  background:linear-gradient(180deg, var(--accent-sand) 0%, var(--accent-sand-strong) 100%);
  color:var(--accent-sand-text-dark);
  box-shadow:0 16px 28px rgba(0,0,0,.18);
}

.account-card--guest .button.primary:hover{
  background:linear-gradient(180deg, #ecddc1 0%, var(--accent-sand) 100%);
}

.account-card--guest .button.ghost,
.account-card--actions .button.ghost{
  border:1px solid rgba(229,211,179,.14);
  background:rgba(255,255,255,.04);
  color:var(--accent-sand);
}

.account-card--guest .button.ghost:hover,
.account-card--actions .button.ghost:hover{
  background:rgba(229,211,179,.08);
  border-color:rgba(229,211,179,.24);
}

.account-card--user{
  display:grid;
  gap:14px;
  text-align:left;
}

.account-user-head{
  display:grid;
  gap:6px;
}

.account-user-title{
  font-size:24px;
  line-height:1.05;
  font-weight:800;
  letter-spacing:-.04em;
  color:#fff;
}

.account-user-subtitle{
  color:rgba(229,211,179,.82);
  font-size:13px;
  line-height:1.35;
  font-weight:700;
}

.account-summary{
  display:grid;
  gap:10px;
}

.account-summary-row{
  display:grid;
  gap:4px;
  padding:14px 16px;
  border-radius:20px;
  border:1px solid rgba(229,211,179,.12);
  background:rgba(255,255,255,.05);
}

.account-summary-label{
  color:rgba(229,211,179,.64);
  font-size:11px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
}

.account-summary-value{
  color:#fff;
  font-size:16px;
  line-height:1.35;
  font-weight:700;
}

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

/* ====================== AUTH MODAL ====================== */
.modal-card.auth-shell{
  width:min(408px, calc(var(--app-vw) - 24px));
  max-height:var(--modal-available-height);
  margin:0 auto;
  min-height:0;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,.1);
  border-radius:32px;
  background:rgba(26,26,26,.94);
  box-shadow:0 28px 70px rgba(0,0,0,.4);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
}

.modal-card.guest-picker-shell{
  width:min(380px, calc(var(--app-vw) - 24px));
}

.auth-card{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  gap:14px;
  padding:24px 20px 20px;
  color:#fff;
  overflow-y:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.auth-card::-webkit-scrollbar{
  display:none;
}
.auth-card--compact{
  padding-top:20px;
}
.auth-card--center{
  text-align:center;
}
.auth-card--center .auth-head{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
}
.auth-card--center .auth-step{
  align-self:center;
}
.auth-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.auth-title{
  font-size:28px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.05em;
  color:#fff;
}
.auth-step{
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
  color:#f3e1c1;
  border:1px solid rgba(229,211,179,.22);
  border-radius:999px;
  padding:7px 10px 6px;
  background:rgba(229,211,179,.12);
}
.auth-subtitle{
  color:rgba(255,255,255,.62);
  line-height:1.45;
  font-size:14px;
}
.auth-fields{
  display:grid;
  gap:12px;
}
.auth-field{
  display:grid;
  gap:10px;
  padding:14px 16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  font-size:12px;
  color:rgba(255,255,255,.62);
}
.auth-field > span{
  font-size:11px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  color:rgba(255,255,255,.46);
}
.auth-field input,
.auth-field select,
.auth-field textarea{
  width:100%;
  box-sizing:border-box;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  color:#fff;
  caret-color:#fff;
  -webkit-text-fill-color:#fff;
  font-size:16px;
  line-height:1.35;
  font-weight:600;
  outline:none;
  appearance:none;
}
.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:hover,
.auth-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
  transition: background-color 9999s ease-in-out 0s;
}
.auth-field input::placeholder{
  color:rgba(255,255,255,.09);
  opacity:1;
  transition:color .16s ease, opacity .16s ease;
}
.auth-field input.auth-code::placeholder{
  color:rgba(255,255,255,.11);
}
.auth-field textarea::placeholder{
  color:rgba(255,255,255,.09);
  opacity:1;
  transition:color .16s ease, opacity .16s ease;
}
.auth-field input.auth-code{
  text-align:center;
  letter-spacing:.24em;
  font-size:24px;
  font-weight:800;
}
.auth-field input:focus::placeholder,
.auth-field textarea:focus::placeholder{
  color:transparent;
  opacity:0;
}
.auth-field:focus-within{
  border-color:rgba(229,211,179,.28);
  box-shadow:0 0 0 4px rgba(229,211,179,.08);
}
.auth-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.auth-actions--single,
.auth-actions--stack{
  grid-template-columns:1fr;
}
.auth-actions .button{
  width:100%;
  min-height:48px;
  border-radius:16px;
  font-size:14px;
  font-weight:800;
}
.modal-card.auth-shell .button.primary{
  color:#1a1a1a;
  background:#e5d3b3;
  border:1px solid transparent;
  box-shadow:0 0 20px rgba(229,211,179,.16);
}
.modal-card.auth-shell .button.primary:hover{
  background:#d8c5a3;
}
.modal-card.auth-shell .button.ghost{
  color:#fff;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.1);
}
.modal-card.auth-shell .button.ghost:hover{
  background:rgba(255,255,255,.12);
}
.auth-error{
  background:rgba(239,68,68,.16);
  border:1px solid rgba(239,68,68,.34);
  color:#fecaca;
  padding:12px 14px;
  border-radius:18px;
  font-size:13px;
  line-height:1.45;
}
.auth-note{
  padding:13px 15px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.68);
  font-size:12px;
  line-height:1.55;
}
.auth-note--success{
  border-color:rgba(34,197,94,.28);
  background:rgba(34,197,94,.12);
  color:#d9fbe3;
}
.auth-badge{
  width:68px;
  height:68px;
  margin:0 auto 2px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:22px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  font-size:32px;
  font-weight:800;
}
.auth-badge--success{
  background:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.24);
  color:#4ade80;
}
.auth-scroll-panel{
  white-space:pre-wrap;
  max-height:55vh;
  overflow:auto;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:14px 16px;
  background:rgba(255,255,255,.04);
  font-size:13px;
  line-height:1.55;
  color:rgba(255,255,255,.82);
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.auth-scroll-panel::-webkit-scrollbar{
  display:none;
}
.auth-terms{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  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:rgba(255,255,255,.66);
  font-size:13px;
  line-height:1.45;
}
.auth-terms .auth-terms-link{
  color:#f3e1c1;
  text-decoration:none;
  cursor:pointer;
}
.auth-terms .auth-terms-link:hover{
  text-decoration:underline;
}

.auth-picker-grid{
  display:grid;
  gap:14px;
}
.auth-picker-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 144px;
  align-items:stretch;
  gap:14px;
  padding:16px 18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
}
.auth-picker-copy{
  min-width:0;
  display:grid;
  align-content:center;
  gap:6px;
  text-align:left;
}
.auth-picker-label{
  min-width:0;
  text-align:left;
  color:#fff;
  font-size:15px;
  font-weight:800;
  line-height:1.1;
}
.auth-picker-meta{
  color:rgba(255,255,255,.52);
  font-size:12px;
  line-height:1.3;
  text-align:left;
}
.auth-picker-field .bk-picker-trigger{
  min-height:100%;
  padding:0 16px;
  border-radius:18px;
  border-color:rgba(255,255,255,.08);
  background:rgba(12,16,22,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.auth-picker-field .bk-picker-trigger.is-empty{
  color:rgba(255,255,255,.44);
}
.auth-picker-field .bk-picker-value{
  font-size:24px;
  font-weight:800;
  letter-spacing:-0.04em;
}
.auth-picker-field .bk-picker-trigger.is-empty .bk-picker-value{
  color:rgba(255,255,255,.34);
}
.auth-rule-note{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  border-radius:20px;
  border:1px solid rgba(245,158,11,.24);
  background:rgba(245,158,11,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.auth-rule-icon{
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#facc15;
  color:#231300;
  font-size:15px;
  line-height:1;
  font-weight:900;
  box-shadow:0 10px 24px rgba(250,204,21,.18);
}
.auth-rule-text{
  color:#f8e8b9;
  font-size:13px;
  line-height:1.45;
  font-weight:700;
  text-align:left;
}
.auth-picker-select{
  width:104px;
  min-height:42px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:15px;
  font-weight:700;
  outline:none;
}
.auth-picker-select:focus{
  border-color:rgba(229,211,179,.3);
  box-shadow:0 0 0 4px rgba(229,211,179,.08);
}

.booking-item{
  padding:14px 16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:background .18s ease, transform .12s ease, border-color .18s ease;
}
.booking-item:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.12);
  transform:translateY(-1px);
}
.booking-item:active{ transform:scale(.99); }

.kv{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:8px 10px;
  padding:14px 16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}
.kv-k{
  color:rgba(255,255,255,.5);
  font-size:11px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
}

@media (max-width: 520px){
  .modal-card.auth-shell{
    width:min(400px, calc(100vw - 24px));
    border-radius:30px;
  }

  .auth-card{
    padding:20px 18px 18px;
  }

  .auth-title{
    font-size:24px;
  }

  .auth-picker-row{
    grid-template-columns:1fr;
  }

  .auth-picker-meta{
    text-align:left;
  }

  .auth-picker-field .bk-picker-trigger{
    min-height:54px;
  }

  .auth-picker-select{
    width:100%;
  }
}

/* ====================== TABBAR ====================== */
.tabbar{
  position:fixed;
  left:50%;
  bottom:calc(var(--tabbar-safe-bottom) + var(--tabbar-lift));
  width:min(calc(100% - 24px), 720px);
  transform:translateX(-50%);
  display:flex;
  gap:0;
  align-items:stretch;
  padding:4px 8px;
  background:rgba(26,26,26,.94);
  border:1px solid rgba(229,211,179,.12);
  border-radius:24px;
  box-shadow:0 24px 48px rgba(0,0,0,.32), 0 0 0 1px rgba(229,211,179,.04);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  z-index:1000;
}
.tabbar .tab{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:6px 4px 8px;
  border-radius:14px;
  color:rgba(229,211,179,.52);
  transition:color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tabbar .tab:hover{
  color:rgba(229,211,179,.88);
  background:rgba(229,211,179,.06);
}
.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;
  font-weight:700;
  line-height:1.1;
  white-space:nowrap;
  opacity:1;
  text-align:center;
}
.tabbar .tab.active{
  color:var(--accent-sand-text-dark);
  background:linear-gradient(180deg, var(--accent-sand) 0%, var(--accent-sand-strong) 100%);
  box-shadow:0 14px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.28);
}
.tabbar .tab.active:hover{
  color:var(--accent-sand-text-dark);
  background:linear-gradient(180deg, #ecddc1 0%, var(--accent-sand) 100%);
}
body.tab-transition .tg-app{transition:opacity .25s ease; opacity:.93;}

/* ====================== MODAL ====================== */
.modal{
  display:none; position:fixed; inset:0;
  background:var(--modal-overlay);
  z-index:5000; /* above tabbar/map UI */
  /* Single scroll container for modals (WebView-safe) */
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  min-height:var(--app-vh);
  padding:var(--modal-safe-top) 0 var(--modal-safe-bottom);
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}
.modal.show{display:flex;}
.modal.show.modal-animate-in{animation:modalOverlayIn var(--modal-overlay-enter-duration) var(--modal-enter-ease);}
.modal.is-tall{ align-items:flex-start; }
.modal.is-tall .modal-scroll{
  align-items:flex-start;
  padding-top:6px;
  padding-bottom:6px;
}
.modal.is-tall .modal-card.auth-shell{
  max-height:calc(var(--modal-available-height) - 12px);
}
.modal.is-tall #modalCard[data-view="booking-confirmation"],
.modal.is-tall #modalCard[data-view="booking-comment"]{
  max-height:calc(var(--modal-available-height) - 12px);
}
.modal.auth-modal{z-index:7200 !important;}
#modal{z-index:6500;}

.modal-scroll{
  width:100%;
  min-height:var(--modal-available-height);
  display:flex;
  align-items:inherit;
  justify-content:inherit;
  padding:0 12px;
  box-sizing:border-box;
}

.modal.show.modal-animate-in > .modal-card:not(.camp-detail-modal),
.modal.show.modal-animate-in > .modal-scroll > .modal-card:not(.camp-detail-modal),
.modal-card.modal-card-animate-in:not(.camp-detail-modal){
  animation:modalCardEnter var(--modal-card-enter-duration) var(--modal-enter-ease);
}

@keyframes modalOverlayIn{
  from{opacity:0}
  to{opacity:1}
}

.modal-card{
  background:var(--modal-bg);
  border:1px solid var(--modal-border); border-radius:20px;
  padding:20px;
  width:min(440px, calc(var(--app-vw) - 24px));
  max-height:var(--modal-available-height);
  overflow:visible;
  box-shadow:0 6px 25px rgba(0,0,0,.4);
  box-sizing:border-box;
  /* Prevent card from shrinking */
  flex-shrink:0;
  transform-origin:center bottom;
  will-change:transform, opacity;
}

@keyframes modalCardEnter{
  from{
    opacity:0;
    transform:translateY(28px) scale(.96);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.modal-card.modal-card-animate-in .accom-head,
.modal-card.modal-card-animate-in .auth-badge,
.modal-card.modal-card-animate-in .auth-head,
.modal-card.modal-card-animate-in .room-params-shell__header,
.modal-card.modal-card-animate-in .details-title,
.modal-card.modal-card-animate-in .details-desc,
.modal-card.modal-card-animate-in .room-detail-title{
  animation:modalSectionFadeUp .34s var(--modal-enter-ease) both;
}

.modal-card.modal-card-animate-in .auth-subtitle,
.modal-card.modal-card-animate-in .auth-note,
.modal-card.modal-card-animate-in .auth-scroll-panel,
.modal-card.modal-card-animate-in .accom-body,
.modal-card.modal-card-animate-in .room-params-shell__body,
.modal-card.modal-card-animate-in .details-body,
.modal-card.modal-card-animate-in .room-detail-body,
.modal-card.modal-card-animate-in .booking-card{
  animation:modalSectionFadeUp .38s var(--modal-enter-ease) both .05s;
}

.modal-card.modal-card-animate-in .auth-fields,
.modal-card.modal-card-animate-in .auth-picker-grid,
.modal-card.modal-card-animate-in .booking-item,
.modal-card.modal-card-animate-in .kv,
.modal-card.modal-card-animate-in .accom-actions,
.modal-card.modal-card-animate-in .room-params-shell__actions,
.modal-card.modal-card-animate-in .room-detail-actions,
.modal-card.modal-card-animate-in .actions,
.modal-card.modal-card-animate-in .auth-actions{
  animation:modalSectionFadeUp .42s var(--modal-enter-ease) both .1s;
}

@keyframes modalSectionFadeUp{
  from{
    opacity:0;
    transform:translateY(14px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Карточка «Подробнее»: всегда помещается в окно, кнопки видны без прокрутки */
.modal-card.details{
  width:min(520px, calc(var(--app-vw) - 24px));              /* меньше, чтобы точно входило в окно */
  max-height:var(--modal-available-height);
  display:grid;
  grid-template-rows: auto auto 1fr auto;
  gap:10px;
  padding:16px;
  overflow:hidden;                     /* scroll only inside .details-body */
  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;
}



/* ===== Figma details modal (camp) ===== */
.camp-detail-overlay{
  padding:16px;
  background:rgba(11,16,22,.52);
  backdrop-filter:blur(10px);
}

.camp-detail-shell{
  position:relative;
  width:min(720px, 100%);
}

.camp-detail-shell::before{
  content:"";
  position:absolute;
  inset:-24px;
  border-radius:48px;
  pointer-events:none;
  opacity:0;
}

.camp-detail-shell.is-vip::before{
  opacity:.95;
  background:radial-gradient(circle, rgba(var(--detail-rgb), .32) 0%, rgba(var(--detail-rgb), 0) 70%);
  filter:blur(30px);
  animation:camp-detail-vip-glow 4s ease-in-out infinite;
}

.camp-detail-modal{
  position:relative;
  width:min(720px, 100%);
  max-height:min(92vh, 920px);
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:none;
  border-radius:32px;
  background:linear-gradient(135deg, #f5ead1 0%, #ebe1cb 100%);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  animation:camp-detail-enter .48s cubic-bezier(.22,1,.36,1);
}

.camp-detail-shell.is-vip .camp-detail-modal{
  box-shadow:0 22px 60px rgba(var(--detail-rgb), .34), 0 10px 30px rgba(0,0,0,.18);
}

.camp-detail__close{
  position:absolute;
  top:18px;
  right:18px;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  padding:0;
  border:none;
  border-radius:999px;
  background:rgba(0,0,0,.42);
  color:#fff;
  box-shadow:0 12px 24px rgba(0,0,0,.18);
  backdrop-filter:blur(12px);
  cursor:pointer;
  transition:transform .18s ease, background .18s ease;
}

.camp-detail__close:hover{
  transform:scale(1.06) rotate(90deg);
  background:rgba(0,0,0,.58);
}

.camp-detail__close:active{
  transform:scale(.94);
}

.camp-detail__close svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.camp-detail__ornament{
  position:absolute;
  top:-36px;
  right:-32px;
  width:220px;
  height:220px;
  color:var(--detail-accent);
  opacity:.08;
  pointer-events:none;
}

.camp-detail__ornament svg{
  width:100%;
  height:100%;
  fill:currentColor;
}

.camp-detail__scroll{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  overflow:auto;
  padding:28px 28px 0;
}

.camp-detail__header{
  position:relative;
  padding:2px 72px 18px 0;
  animation:camp-detail-fade-up .42s ease both;
}

.camp-detail__title-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0 0 10px;
}

.camp-detail__title{
  margin:0;
  color:var(--detail-accent);
  font-size:clamp(36px, 7vw, 56px);
  line-height:.94;
  font-weight:900;
  letter-spacing:-.05em;
  text-wrap:balance;
}

.camp-detail__vip-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:38px;
  height:38px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  box-shadow:0 12px 22px rgba(217,119,6,.28);
  animation:camp-detail-pop .55s cubic-bezier(.22,1,.36,1) both .2s;
}

.camp-detail__vip-badge svg{
  width:18px;
  height:18px;
  fill:currentColor;
}

.camp-detail__desc{
  color:#5a5247;
  font-size:15px;
  line-height:1.6;
  text-wrap:pretty;
  animation:camp-detail-fade .42s ease both .08s;
}

.camp-detail__gallery{
  margin:0 0 24px;
  animation:camp-detail-fade-up .5s ease both .16s;
}

.camp-detail__gallery-frame{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  background:linear-gradient(145deg, #d4dde5 0%, #a4b2bd 100%);
  box-shadow:0 18px 32px rgba(0,0,0,.16);
}

.camp-detail__gallery-viewport{
  overflow:hidden;
  aspect-ratio:16/10;
}

.camp-detail__gallery-track{
  display:flex;
  width:100%;
  height:100%;
  transition:transform .34s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}

.camp-detail__gallery-slide{
  position:relative;
  min-width:100%;
  flex:0 0 100%;
  overflow:hidden;
}

.camp-detail__gallery-slide img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  cursor:zoom-in;
}

.camp-detail__gallery-empty{
  aspect-ratio:16/10;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f8f5ef;
  font-size:16px;
  font-weight:700;
  letter-spacing:.01em;
  background:linear-gradient(145deg, rgba(52,73,94,.55), rgba(22,33,44,.78));
}

.camp-detail__gallery-shine{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform:translateX(-200%);
  pointer-events:none;
  animation:camp-detail-image-shine 4s ease-in-out infinite 1s;
}

.camp-detail__arrow{
  position:absolute;
  top:50%;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  padding:0;
  border:none;
  border-radius:999px;
  color:#fff;
  background:rgba(0,0,0,.5);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  backdrop-filter:blur(12px);
  transform:translateY(-50%);
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, opacity .18s ease;
}

.camp-detail__arrow:hover{
  background:rgba(0,0,0,.68);
}

.camp-detail__arrow:active{
  transform:translateY(-50%) scale(.94);
}

.camp-detail__arrow:disabled{
  opacity:.28;
  pointer-events:none;
}

.camp-detail__arrow--prev{ left:14px; }
.camp-detail__arrow--next{ right:14px; }

.camp-detail__arrow svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.15;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.camp-detail__counter{
  position:absolute;
  left:50%;
  bottom:16px;
  z-index:3;
  min-width:76px;
  padding:8px 16px;
  border-radius:999px;
  color:#fff;
  background:rgba(0,0,0,.58);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  backdrop-filter:blur(12px);
  font-size:13px;
  font-weight:700;
  text-align:center;
  transform:translateX(-50%);
}

.camp-detail__dots{
  position:absolute;
  left:50%;
  bottom:58px;
  z-index:3;
  display:flex;
  gap:8px;
  transform:translateX(-50%);
}

.camp-detail__dot{
  width:8px;
  height:8px;
  padding:0;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.45);
  box-shadow:0 1px 8px rgba(0,0,0,.18);
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, opacity .18s ease;
}

.camp-detail__dot:hover{
  transform:scale(1.25);
}

.camp-detail__dot.is-active{
  background:var(--detail-accent);
  opacity:1;
}

.camp-detail__facts{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin:0 0 28px;
}

.camp-detail__facts-col{
  display:grid;
  gap:12px;
}

.camp-detail__fact{
  border-radius:20px;
  padding:14px 16px;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 12px 24px rgba(121,104,74,.07);
  backdrop-filter:blur(12px);
  animation:camp-detail-fade-up .5s ease both;
  animation-delay:var(--detail-delay, 0ms);
}

.camp-detail__fact-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.camp-detail__fact-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  flex:none;
  color:var(--detail-accent);
}

.camp-detail__fact-icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.camp-detail__fact-label{
  min-width:0;
  flex:1 1 auto;
  color:#2d2619;
  font-size:13px;
  font-weight:600;
  line-height:1.25;
}

.camp-detail__fact-value{
  flex:none;
  color:var(--detail-accent);
  font-size:15px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

.camp-detail__actions{
  display:flex;
  gap:14px;
  padding:0 28px 28px;
  animation:camp-detail-fade-up .5s ease both .28s;
}

.camp-detail__action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  padding:0 24px;
  border:none;
  border-radius:999px;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.02em;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.camp-detail__action:hover{
  transform:translateY(-1px);
}

.camp-detail__action:active{
  transform:translateY(0) scale(.98);
}

.camp-detail__action--book{
  flex:1 1 0;
  color:#fff;
  background:linear-gradient(135deg, #22c55e 0%, #059669 100%);
  box-shadow:0 16px 30px rgba(5,150,105,.28);
}

.camp-detail__action--housing{
  flex:1 1 0;
  color:#fff;
  background:linear-gradient(135deg, var(--detail-accent) 0%, rgba(var(--detail-rgb), .86) 100%);
  box-shadow:0 16px 30px rgba(var(--detail-rgb), .28);
}

.camp-detail__action--back{
  flex:0 0 auto;
  color:#2d2619;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(0,0,0,.08);
  backdrop-filter:blur(10px);
}

@keyframes camp-detail-enter{
  from{ opacity:0; transform:translateY(22px) scale(.95); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

@keyframes camp-detail-fade-up{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes camp-detail-fade{
  from{ opacity:0; }
  to{ opacity:1; }
}

@keyframes camp-detail-pop{
  from{ opacity:0; transform:scale(.3) rotate(-160deg); }
  to{ opacity:1; transform:scale(1) rotate(0deg); }
}

@keyframes camp-detail-vip-glow{
  0%,100%{ opacity:.84; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.03); }
}

@keyframes camp-detail-image-shine{
  0%,30%{ transform:translateX(-200%); }
  55%,100%{ transform:translateX(200%); }
}

@media (max-width: 640px){
  .camp-detail-overlay{
    padding:12px;
  }

  .camp-detail-modal{
    max-height:94vh;
    border-radius:28px;
  }

  .camp-detail__scroll{
    padding:24px 20px 0;
  }

  .camp-detail__header{
    padding-right:58px;
  }

  .camp-detail__ornament{
    width:180px;
    height:180px;
    top:-34px;
    right:-26px;
  }

  .camp-detail__facts{
    gap:10px;
  }

  .camp-detail__facts-col{
    gap:10px;
  }

  .camp-detail__fact{
    padding:12px 13px;
  }

  .camp-detail__fact-row{
    gap:10px;
  }

  .camp-detail__fact-label{
    font-size:12px;
  }

  .camp-detail__fact-value{
    font-size:14px;
  }

  .camp-detail__actions{
    flex-direction:column;
    gap:12px;
    padding:0 20px 20px;
  }

  .camp-detail__action{
    min-height:54px;
    font-size:15px;
  }

  .camp-detail__action--back{
    flex:1 1 auto;
  }
}

@media (max-width: 420px){
  .camp-detail__title{
    font-size:34px;
  }

  .camp-detail__desc{
    font-size:14px;
  }

  .camp-detail__close{
    top:14px;
    right:14px;
    width:46px;
    height:46px;
  }

  .camp-detail__arrow{
    width:42px;
    height:42px;
  }

  .camp-detail__counter{
    bottom:14px;
    padding:7px 14px;
  }

  .camp-detail__dots{
    bottom:54px;
    gap:7px;
  }
}

/* Полноэкранная галерея */
.fs-modal{
  position:fixed;
  inset:0;
  z-index:7600;
  display:flex;
  flex-direction:column;
  background:#000;
  opacity:0;
  transition:opacity .24s ease;
}

.fs-modal.is-open{
  opacity:1;
}

.fs-stage{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  display:flex;
}

.fs-viewport{
  position:relative;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.fs-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  width:100%;
  height:100%;
  transition:transform .32s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}

.fs-slide{
  width:100%;
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.fs-slide img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

.fs-arrow{
  position:absolute;
  top:50%;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  padding:12px;
  border:none;
  border-radius:16px;
  background:rgba(0,0,0,.4);
  color:#fff;
  backdrop-filter:blur(12px);
  cursor:pointer;
  transform:translateY(-50%);
  transition:background .18s ease, transform .18s ease;
}

.fs-arrow--prev{ left:16px; }
.fs-arrow--next{ right:16px; }

.fs-arrow:hover{
  background:rgba(0,0,0,.6);
}

.fs-arrow:active{
  transform:translateY(-50%) scale(.98);
}

.fs-arrow svg{
  width:32px;
  height:32px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.fs-footer{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  padding:80px 16px calc(env(safe-area-inset-bottom) + 32px);
  background:linear-gradient(to top, #000 0%, rgba(0,0,0,.8) 45%, rgba(0,0,0,0) 100%);
}

.fs-counter{
  color:rgba(255,255,255,.6);
  font-size:15px;
  font-weight:500;
  letter-spacing:.18em;
}

.fs-actions{
  display:flex;
  gap:12px;
  width:100%;
  max-width:400px;
}

.fs-actions .fs-action:only-child{
  flex:1 1 100%;
}

.fs-action{
  flex:1 1 0;
  min-height:44px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid transparent;
  font-size:14px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}

.fs-action:hover{
  transform:scale(1.02);
}

.fs-action:active{
  transform:scale(.98);
}

.fs-action--book{
  color:#1a1a1a;
  background:#e5d3b3;
  box-shadow:0 0 20px rgba(229,211,179,.2);
}

.fs-action--book:hover{
  background:#d8c5a3;
}

.fs-action--back{
  color:#fff;
  background:#000;
  border-color:rgba(255,255,255,.1);
}

.fs-action--back:hover{
  background:rgba(255,255,255,.05);
}

@media (min-width: 640px){
  .fs-footer{
    padding-left:32px;
    padding-right:32px;
  }
}

@media (max-width: 520px){
  .fs-action{
    min-height:42px;
    padding:13px 14px;
  }
}



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

/* ====================== MAP ====================== */
.map-wrap{
  position:relative;
  height:100%;
  margin:0;
  border-radius:28px;
  overflow:hidden;
  background:var(--map-frame-bg);
  box-shadow:
    0 28px 64px rgba(0,0,0,0.48),
    0 8px 24px rgba(0,0,0,0.18);
}
#map{
  position:absolute;
  inset:0;
  z-index:0;
  background:var(--map-frame-bg);
}
.map-ui{position:absolute; inset:0; pointer-events:none; z-index:500; transition:opacity .2s ease, transform .2s ease;}
.map-wrap.popup-open #map{z-index:0;}
.map-wrap.popup-open .map-ui{opacity:1; transform:none; pointer-events:none;}
.camp-popup-widget-host{position:absolute; inset:0; z-index:1100; pointer-events:none;}
.camp-popup-widget-host:empty{display:none;}
.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;
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  padding:0;
  border:1px solid var(--glass-border);
  border-radius:999px;
  background:var(--glass-bg);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  color:#fff;
  cursor:pointer;
  transition:transform .12s ease, background-color .18s ease, box-shadow .18s ease;
}
.map-btn.text-btn{
  bottom:auto;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,0.05);
  background:rgba(42,42,42,0.90);
}
.map-btn--filter{
  left:18px;
  bottom:18px;
  width:50px;
  height:50px;
}
.map-btn--geo{
  right:18px;
  bottom:18px;
  width:50px;
  height:50px;
}
.map-btn--refresh{
  top:16px;
  right:16px;
}
.map-btn:hover{background:var(--glass-bg-hover);}
.map-btn:not(.cart-btn):active{transform:scale(.96);}
.map-btn.filter-active{
  background:rgba(58,52,43,0.96);
  border-color:var(--accent-sand-border);
  box-shadow:
    0 0 0 8px rgba(229,211,179,0.14),
    var(--glass-shadow-soft);
  color:var(--accent-sand);
}
.map-btn__glyph{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}
.map-btn__glyph svg{
  width:23px;
  height:23px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2.15;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.map-btn--filter .map-btn__glyph svg{
  width:34px;
  height:34px;
}
.map-btn--geo .map-btn__glyph svg{
  width:36px;
  height:36px;
  transform:translateY(1px);
}
.map-btn.text-btn .map-btn__glyph svg{
  width:18px;
  height:18px;
}

/* Черновик бронирования — кнопка над календарём */
.map-btn.draft{bottom:18px;}
.map-btn.draft.cart-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  left:50%;
  transform:translate3d(-50%,0,0);
  transform-origin:center center;
  backface-visibility:hidden;
  bottom:14px;
  width:62px;
  height:62px;
  border-radius:50%;
  overflow:visible;
  background:var(--glass-bg);
  border:2px solid var(--accent-sand-border);
  box-shadow:var(--glass-shadow);
  /* No transform transition to prevent Android jump */
  transition:
    width .38s cubic-bezier(.2,.9,.2,1),
    height .38s cubic-bezier(.2,.9,.2,1),
    border-radius .38s cubic-bezier(.2,.9,.2,1),
    background-color .38s ease,
    border-color .38s ease,
    box-shadow .38s ease,
    opacity .22s ease;
  /* Force no transform changes */
  will-change:auto;
}
.map-btn.draft.cart-btn .map-btn__glyph{
  width:100%;
  height:100%;
}
.map-btn.draft.cart-btn .map-btn__glyph svg{
  width:34px;
  height:34px;
  transition:opacity .24s ease, transform .24s ease;
}
.map-btn.draft.cart-btn .draft-toast-text{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  white-space:nowrap;
  font-weight:800;
  font-size:12px;
  color:#fff;
  opacity:0;
  transition:opacity .24s ease;
  pointer-events:none;
}
.map-btn.draft.cart-btn.draft-toast{
  width:190px;
  height:38px;
  border-radius:20px;
  background:linear-gradient(180deg, var(--accent-sand) 0%, var(--accent-sand-strong) 100%);
  border:2px solid transparent;
  color:var(--accent-sand-text-dark);
  box-shadow:0 18px 36px rgba(0,0,0,0.28), 0 0 0 1px rgba(229,211,179,0.18);
}
.map-btn.draft.cart-btn.draft-toast .map-btn__glyph{
  opacity:0;
  transform:scale(0.9);
}
.map-btn.draft.cart-btn.draft-toast .map-badge{
  opacity:0;
  transition:opacity .18s ease;
}
.map-btn.draft.cart-btn.draft-toast .draft-toast-text{
  opacity:1;
  color:var(--accent-sand-text-dark);
}
/* Android needs very explicit active state without any transform except centering */
.map-btn.draft.cart-btn:active,
.map-btn.draft.cart-btn:focus,
.map-btn.draft.cart-btn:active:focus{
  /* Lock position - no scale, no movement */
  transform:translate3d(-50%,0,0) !important;
  opacity:0.85;
  /* Disable any inherited transforms */
  will-change:auto !important;
}
.map-btn.draft.cart-btn.is-pressed{
  transform:translate3d(-50%,0,0) !important;
  opacity:0.85;
}
.map-btn.draft.cart-btn:active .map-btn__glyph svg,
.map-btn.draft.cart-btn:focus .map-btn__glyph svg{
  transform:scale(0.92);
}
.map-btn.draft .map-badge{
  position:absolute;
  top:-2px;
  right:-2px;
  min-width:24px;
  height:24px;
  padding:0 6px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--accent-sand) 0%, var(--accent-sand-strong) 100%);
  color:var(--accent-sand-text-dark);
  font-size:12px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  box-shadow:0 10px 20px rgba(0,0,0,0.22);
  box-sizing:border-box;
}

/* Ошибка в полях бронирования/фильтра */
.bk-input.bk-error,
.bk-select.bk-error,
.bk-picker-trigger.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);
}
.bk-input.bk-attn{
  animation:bk-attn-pulse .9s ease-out 1;
}
@keyframes bk-attn-pulse{
  0%{transform:translateZ(0) scale(1);}
  35%{transform:translateZ(0) scale(1.02);}
  100%{transform:translateZ(0) scale(1);}
}

/* Кнопка автоподбора — голубая рамка (телеграм-стиль) */
.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;cursor:pointer;}
.compare-camp-title{font-weight:800;font-size:18px;line-height:1.2;text-align:center;}
.compare-camp-lake{text-align:center;margin-top:4px;}
.compare-camp-sub{margin-top:6px;}
.compare-variants{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.compare-variant-tabs{
  margin:10px 0 0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(0, 1fr));
  gap:8px;
  justify-content:center;
  align-items:stretch;
  padding:2px 2px 6px;
  overflow:hidden; /* без горизонтального скролла */
}
.compare-variant-tab{
  min-width:0;
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border-color);
  background:rgba(255,255,255,0.03);
  color:var(--tg-text);
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  text-align:center;
  font-weight:800;
  font-size:13px;
  line-height:1.1;
}
.compare-variant-tab .sub{
  display:block;
  margin-top:5px;
  font-weight:900;
  color:var(--tg-hint);
  font-size:12px;
}
.compare-variant-tab.active{
  border-color:var(--tg-button);
  box-shadow:0 0 0 2px rgba(48, 158, 248, .25);
}
.compare-variant-tab:active{transform:scale(.99);}
@media (max-width:420px){
  .compare-variant-tab{
    padding:9px 10px;
    border-radius:12px;
    font-size:12px;
  }
  .compare-variant-tab .sub{font-size:11px;}
}
.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:20000;
  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)}}
/* 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;}

@media (min-width: 768px){
  #tab-map{
    padding:24px 24px calc(104px + max(12px, env(safe-area-inset-bottom)));
  }

  .map-wrap{
    border-radius:32px;
  }

  .map-btn{
    width:68px;
    height:68px;
  }

  .map-btn--filter{left:24px; bottom:24px;}
  .map-btn--geo{right:24px; bottom:24px;}
  .map-btn--filter,
  .map-btn--geo{
    width:64px;
    height:64px;
  }

  .map-btn.text-btn{
    top:24px;
    right:24px;
    width:44px;
    height:44px;
  }

  .map-btn.text-btn .map-btn__glyph svg{
    width:20px;
    height:20px;
  }

  .map-btn--filter .map-btn__glyph svg,
  .map-btn--geo .map-btn__glyph svg{
    width:40px;
    height:40px;
  }

  .map-btn.draft{
    bottom:24px;
  }

  .map-btn.draft.cart-btn{
    bottom:18px;
    width:78px;
    height:78px;
  }

  .map-btn.draft.cart-btn .map-btn__glyph svg{
    width:38px;
    height:38px;
  }

  .map-btn.draft .map-badge{
    min-width:28px;
    height:28px;
    font-size:13px;
  }

  .tabbar{
    width:min(calc(100% - 48px), 720px);
    padding:6px 16px;
    border-radius:32px;
  }

  .tabbar .tab{
    gap:4px;
    padding:6px 8px 10px;
  }

  .tabbar .tab .icon{
    width:32px;
    height:32px;
  }

  .tabbar .tab .icon svg,
  .tabbar .tab .icon img{
    width:32px;
    height:32px;
  }

  .tabbar .tab .label{
    font-size:13px;
  }
}

@media (max-width: 420px){
  .tabbar .tab .label{
    font-size:11px;
    letter-spacing:-.02em;
  }

  .account-shell{
    padding:4px 14px 0;
  }

  .account-shell.is-guest{
    padding-top:0;
  }

  #accountTitle{
    width:calc(100% - 28px);
    margin:16px auto 6px;
  }
}

/* ====================== CLUSTERS & POPUPS ====================== */
.camp-popup{
  min-width:348px;
  text-align:left;
}
.leaflet-popup.camp-popup .leaflet-popup-content-wrapper{
  background:transparent;
  box-shadow:none;
  padding:0;
  border-radius:0;
  overflow:visible;
}
.leaflet-popup.camp-popup .leaflet-popup-content{
  margin:0;
  min-width:348px;
  width:auto !important;
  overflow:visible;
}
.leaflet-popup.camp-popup .leaflet-popup-tip-container{
  display:none;
}
.camp-popup-shell{
  --popup-surface:#ede3cd;
  position:relative;
  width:min(420px, 90vw);
  padding-bottom:16px;
  font-family:"Manrope","Segoe UI",system-ui,sans-serif;
  animation:camp-popup-enter .32s cubic-bezier(.22,1,.36,1) both;
}
.camp-popup-shell::before{
  content:"";
  position:absolute;
  inset:-18px -12px 24px;
  border-radius:40px;
  pointer-events:none;
  opacity:0;
}
.camp-popup-shell.is-vip::before{
  opacity:.95;
  background:radial-gradient(circle, rgba(var(--popup-rgb), 0.24) 0%, rgba(var(--popup-rgb), 0) 72%);
  filter:blur(24px);
  animation:camp-popup-vip-glow 3s ease-in-out infinite;
}
.camp-popup-card{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  background:linear-gradient(135deg, #f5ead1 0%, #ede3cd 100%);
  box-shadow:0 26px 80px rgba(0,0,0,0.16), 0 10px 24px rgba(0,0,0,0.1);
}
.camp-popup-shell.is-vip .camp-popup-card{
  box-shadow:0 28px 86px rgba(var(--popup-rgb), 0.32), 0 10px 24px rgba(0,0,0,0.12);
}
.camp-popup__media.popup-cover{
  height:256px;
  border:none;
  border-radius:28px 28px 0 0;
  background:linear-gradient(145deg, #cfd7df 0%, #9aa4af 100%);
}
.camp-popup__media .popup-emoji{
  z-index:1;
  background:linear-gradient(145deg, rgba(54,76,98,0.24), rgba(0,0,0,0.14));
  color:#fff7e5;
}
.camp-popup__media img{
  position:relative;
  z-index:2;
}
.camp-popup__cover-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  background:linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.2) 100%);
  pointer-events:none;
}
.camp-popup__cover-shine{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.24), transparent);
  transform:translateX(-200%);
  animation:camp-popup-image-shine 3.4s ease-in-out infinite 1s;
}
.camp-popup__type-row{
  position:absolute;
  top:16px;
  left:16px;
  z-index:5;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  max-width:calc(100% - 88px);
}
.camp-popup__type-badge,
.camp-popup__vip-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.01em;
  backdrop-filter:blur(14px);
  box-shadow:0 10px 24px rgba(0,0,0,0.14);
}
.camp-popup__type-badge{
  background:rgba(var(--popup-rgb), 0.86);
}
.camp-popup__type-dot{
  width:14px;
  height:14px;
  border-radius:999px;
  background:rgba(255,255,255,0.24);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}
.camp-popup__vip-pill{
  background:linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
}
.camp-popup__vip-star{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:999px;
  background:rgba(255,255,255,0.18);
  font-size:11px;
}
.camp-popup__body{
  position:relative;
  padding:24px;
  background:linear-gradient(135deg, #f5ead1 0%, #ede3cd 100%);
}
.camp-popup__title{
  margin:0 0 18px;
  color:var(--popup-accent);
  font-size:clamp(30px, 7.2vw, 44px);
  line-height:.96;
  font-weight:800;
  letter-spacing:-0.05em;
  text-wrap:balance;
}
.camp-popup__price-pill{
  position:relative;
  z-index:1;
  display:inline-flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  padding:18px 24px 16px;
  border-radius:999px;
  background:var(--popup-accent);
  color:#f5ead1;
  box-shadow:0 16px 34px rgba(var(--popup-rgb), 0.34);
  backdrop-filter:blur(8px);
}
.camp-popup__price-main{
  font-size:26px;
  line-height:1;
  font-weight:900;
  letter-spacing:-0.04em;
}
.camp-popup__price-sub{
  color:rgba(245,234,209,0.72);
  font-size:12px;
  line-height:1.1;
  font-weight:700;
}
.camp-popup__actions{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:20px;
}
.camp-popup__action{
  min-height:48px;
  border:none;
  border-radius:999px;
  font-size:16px;
  font-weight:800;
  letter-spacing:-0.02em;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.camp-popup__action--details{
  background:var(--popup-accent);
  color:#fff7e5;
  box-shadow:0 10px 22px rgba(var(--popup-rgb), 0.28);
}
.camp-popup__action--book{
  background:linear-gradient(135deg, #13c47a 0%, #07a866 100%);
  color:#fff;
  box-shadow:0 12px 24px rgba(10,185,129,0.28);
}
.camp-popup__pattern{
  position:absolute;
  right:-8px;
  bottom:-10px;
  width:132px;
  height:132px;
  pointer-events:none;
  opacity:.22;
}
.camp-popup__pattern::before,
.camp-popup__pattern::after{
  content:"";
  position:absolute;
  border-radius:999px;
  background:rgba(140,122,95,0.08);
}
.camp-popup__pattern::before{
  width:106px;
  height:106px;
  right:0;
  bottom:0;
}
.camp-popup__pattern::after{
  width:66px;
  height:66px;
  right:70px;
  bottom:54px;
}
.camp-popup__pointer{
  position:absolute;
  left:50%;
  bottom:1px;
  width:0;
  height:0;
  transform:translateX(-50%);
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-top:16px solid #ede3cd;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,0.12));
}
@keyframes camp-popup-enter{
  from{opacity:0; transform:translateY(10px) scale(.94);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes camp-popup-vip-glow{
  0%,100%{opacity:.85; transform:scale(1);}
  50%{opacity:1; transform:scale(1.04);}
}
@keyframes camp-popup-image-shine{
  0%,30%{transform:translateX(-200%);}
  55%,100%{transform:translateX(200%);}
}

/* === Leaflet popup close button === */
.leaflet-popup.camp-popup .leaflet-popup-close-button{
  display:flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  z-index:20;
  top:16px;
  right:16px;
  width:56px;
  height:56px;
  background:rgba(72,85,101,0.78);
  color:#fff;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 14px 28px rgba(0,0,0,0.18);
  backdrop-filter:blur(14px);
  opacity:1;
  line-height:1;
  text-align:center;
  font-weight:300;
  font-size:40px;
  text-indent:0;
  background-image:none;
  padding:0;
}
.leaflet-popup.camp-popup .leaflet-popup-close-button:hover{
  background:rgba(72,85,101,0.9);
  transform:scale(1.04) rotate(90deg);
}
.leaflet-popup.camp-popup .leaflet-popup-close-button:active{
  transform:scale(.96);
}
@media (hover:hover){
  .camp-popup__action:hover{
    transform:translateY(-2px);
  }
  .camp-popup__action--details:hover{
    box-shadow:0 16px 28px rgba(var(--popup-rgb), 0.38);
  }
  .camp-popup__action--book:hover{
    box-shadow:0 16px 30px rgba(10,185,129,0.34);
    filter:saturate(1.03);
  }
}
@media (max-width: 520px){
  .camp-popup{
    min-width:0;
  }
  .camp-popup-shell{
    width:min(420px, 90vw);
  }
  .camp-popup__media.popup-cover{
    height:256px;
  }
  .camp-popup__body{
    padding:24px 22px 24px;
  }
  .camp-popup__title{
    font-size:clamp(30px, 7.6vw, 40px);
    margin-bottom:18px;
  }
  .camp-popup__price-pill{
    min-width:0;
    width:auto;
  }
  .camp-popup__actions{
    grid-template-columns:1fr;
  }
}


.cl-marker{
  border-radius:999px;
  background:linear-gradient(180deg, rgba(52,87,70,0.18), rgba(52,87,70,0.08));
  border:1px solid rgba(52,87,70,0.26);
  box-shadow:0 18px 22px rgba(33,54,44,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
}
.cl-marker .cl-inner{
  color:#21392d;
  font-weight:900;
  font-size:16px;
  letter-spacing:-0.03em;
}
.cl-small{width:52px!important; height:52px!important;}
.cl-medium{width:60px!important; height:60px!important;}
.cl-large{width:68px!important; height:68px!important;}

@keyframes camp-marker-enter{
  from{opacity:0; transform:translateY(-10px) scale(.92);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes camp-marker-vip-glow{
  0%,100%{opacity:.16; transform:scale(1);}
  50%{opacity:.34; transform:scale(1.12);}
}
@keyframes camp-marker-shine{
  0%,35%{transform:translateX(-180%);}
  55%,100%{transform:translateX(180%);}
}
@keyframes camp-marker-ring{
  0%{opacity:.52; transform:translate(-50%, -50%) scale(.92);}
  75%,100%{opacity:0; transform:translate(-50%, -50%) scale(1.18);}
}

.camp-marker-icon{
  position:relative;
  background:transparent!important;
  border:none!important;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:visible!important;
}
.camp-marker-icon *{box-sizing:border-box;}
.camp-marker{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:92px;
  padding:0 0 12px;
  animation:camp-marker-enter .35s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--marker-delay, 0ms);
  transition:opacity .22s ease, transform .22s ease, filter .22s ease;
}
.camp-marker-icon.is-popup-hidden{
  pointer-events:none;
}
.camp-marker-icon.is-popup-hidden .camp-marker{
  animation:none;
  opacity:0;
  transform:translateY(10px) scale(.9);
  filter:blur(1px);
}
.camp-marker-icon.is-popup-hidden .camp-marker__tooltip,
.camp-marker-icon.is-popup-hidden .camp-marker__selection-ring,
.camp-marker-icon.is-popup-hidden .camp-marker__shadow{
  opacity:0!important;
}
.camp-marker__glow{
  position:absolute;
  inset:-12px -14px 10px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(var(--marker-rgb), 0.28) 0%, rgba(var(--marker-rgb), 0) 70%);
  filter:blur(14px);
  opacity:0;
  pointer-events:none;
}
.camp-marker-icon--vip .camp-marker__glow{
  opacity:.2;
  animation:camp-marker-vip-glow 2.8s ease-in-out infinite;
}
.camp-marker__tooltip{
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translate(-50%, 8px);
  opacity:0;
  pointer-events:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:10px;
  background:rgba(var(--marker-rgb), 0.88);
  box-shadow:0 4px 12px rgba(var(--marker-rgb), 0.4);
  backdrop-filter:blur(10px);
  white-space:nowrap;
  transition:opacity .2s ease, transform .2s ease;
}
.camp-marker__tooltip-icon{
  width:14px;
  height:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#f5ead1;
}
.camp-marker__tooltip-icon svg{
  width:14px;
  height:14px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.camp-marker__tooltip-label{
  color:#f5ead1;
  font-size:12px;
  font-weight:600;
  line-height:1;
}
.camp-marker__tooltip-vip{
  color:#fbbf24;
  font-size:11px;
  line-height:1;
}
.camp-marker__selection-ring{
  position:absolute;
  left:50%;
  top:20px;
  width:calc(100% + 22px);
  height:58px;
  border-radius:999px;
  border:2px solid rgba(96,165,250,0.88);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%, -50%) scale(.92);
}
.camp-marker__badge{
  position:relative;
  min-width:92px;
  height:40px;
  padding:0 18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--marker-color);
  color:#f5ead1;
  box-shadow:0 8px 20px rgba(var(--marker-rgb), 0.5);
  backdrop-filter:blur(8px);
  overflow:visible;
  isolation:isolate;
  transition:transform .22s ease, box-shadow .22s ease;
}
.camp-marker__price{
  position:relative;
  z-index:1;
  color:#f5ead1;
  font-size:16px;
  font-weight:700;
  letter-spacing:0.02em;
  line-height:1;
  white-space:nowrap;
}
.camp-marker__vip-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  z-index:2;
  width:20px;
  height:20px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, #fbbf24, #d97706);
  color:#fff;
  font-size:10px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(245,158,11,0.38);
  border:2px solid rgba(255,255,255,0.28);
}
.camp-marker__shine-wrap{
  position:absolute;
  inset:0;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none;
}
.camp-marker__shine{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform:translateX(-180%);
  opacity:.85;
  pointer-events:none;
  animation:camp-marker-shine 3s ease-in-out infinite;
}
.camp-marker__pointer{
  width:0;
  height:0;
  margin-top:1px;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:10px solid var(--marker-color);
  filter:drop-shadow(0 4px 6px rgba(var(--marker-rgb), 0.4));
  transition:transform .22s ease;
}
.camp-marker__shadow{
  position:absolute;
  bottom:0;
  left:50%;
  width:50px;
  height:8px;
  border-radius:999px;
  background:rgba(0,0,0,0.2);
  filter:blur(8px);
  transform:translateX(-50%);
  opacity:.2;
  pointer-events:none;
  transition:width .22s ease, opacity .22s ease;
}
.camp-marker-icon--vip .camp-marker__badge{
  box-shadow:0 8px 24px rgba(var(--marker-rgb), 0.6), 0 0 40px rgba(var(--marker-rgb), 0.3);
}
.camp-marker-icon.is-selected{
  z-index:1000!important;
}
.camp-marker-icon.is-selected .camp-marker__selection-ring{
  opacity:.7;
  animation:camp-marker-ring 1.8s ease-out infinite;
}
.camp-marker-icon.is-selected .camp-marker__badge{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 12px 28px rgba(var(--marker-rgb), 0.62);
}
.camp-marker-icon.is-selected.camp-marker-icon--vip .camp-marker__badge{
  box-shadow:0 12px 32px rgba(var(--marker-rgb), 0.72), 0 0 50px rgba(var(--marker-rgb), 0.36);
}
.camp-marker-icon.is-selected .camp-marker__pointer{
  transform:translateY(-2px);
}
.camp-marker-icon.is-selected .camp-marker__shadow{
  width:56px;
  opacity:.3;
}
@media (hover:hover){
  .camp-marker-icon:hover .camp-marker__tooltip{
    opacity:1;
    transform:translate(-50%, -8px);
  }
  .camp-marker-icon:hover .camp-marker__badge{
    transform:translateY(-4px);
    box-shadow:0 10px 28px rgba(var(--marker-rgb), 0.6);
  }
  .camp-marker-icon:hover.camp-marker-icon--vip .camp-marker__badge{
    box-shadow:0 12px 32px rgba(var(--marker-rgb), 0.7), 0 0 50px rgba(var(--marker-rgb), 0.34);
  }
  .camp-marker-icon:hover .camp-marker__pointer{
    transform:translateY(-2px);
  }
  .camp-marker-icon:hover .camp-marker__shadow{
    width:56px;
    opacity:.28;
  }
}


/* === Крышка в балуне: эмоджи до загрузки фото === */
.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 / CALENDAR ====================== */
@keyframes bookingGlassIn{
  0%{opacity:0; transform:translate3d(0,20px,0) scale(.92);}
  100%{opacity:1; transform:translate3d(0,0,0) scale(1);}
}
@keyframes bookingWheelIn{
  0%{opacity:0; transform:translate3d(0,10px,0) scale(.94);}
  100%{opacity:1; transform:translate3d(0,0,0) scale(1);}
}

.modal-card.booking-shell .booking-card,
.dp-card{
  font-family:"Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.modal-card.booking-shell .booking-card{
  width:min(360px, 92vw);
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:24px;
  color:#f5f7fb;
  background:rgba(26,26,26,.95);
  border:1px solid rgba(229,211,179,.14);
  border-radius:32px;
  box-shadow:0 28px 80px rgba(0,0,0,.46);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  animation:bookingGlassIn .34s cubic-bezier(.18,.9,.28,1) both;
}
.modal-card.booking-shell .booking-header{
  display:grid;
  gap:8px;
  text-align:center;
}
.modal-card.booking-shell .booking-title{
  margin:0;
  color:#fff;
  font-size:20px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-0.02em;
}
.modal-card.booking-shell .booking-hint{
  margin:0;
  color:rgba(229,211,179,.64);
  font-size:13px;
  line-height:1.45;
  font-weight:500;
}
.modal-card.booking-shell .booking-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px 12px;
}
.modal-card.booking-shell .bk-field{
  display:grid;
  gap:7px;
  min-width:0;
}
.modal-card.booking-shell .bk-field>span{
  padding-left:4px;
  color:rgba(229,211,179,.68);
  font-size:13px;
  line-height:1.2;
  font-weight:600;
}
.modal-card.booking-shell .bk-date,
.modal-card.booking-shell .bk-picker-field{
  position:relative;
}
.modal-card.booking-shell .bk-native,
.modal-card.booking-shell .bk-hidden-value{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  width:0;
  height:0;
}
.bk-input,
.bk-picker-trigger{
  width:100%;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:1px solid rgba(229,211,179,.12);
  border-radius:18px;
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:15px;
  line-height:1.15;
  font-weight:600;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .14s ease;
  -webkit-tap-highlight-color:transparent;
}
.bk-input:hover,
.bk-picker-trigger:hover,
.bk-input:focus-visible,
.bk-picker-trigger:focus-visible{
  outline:none;
  background:rgba(255,255,255,.08);
  border-color:var(--accent-sand-border);
  box-shadow:0 0 0 1px rgba(229,211,179,.12);
}
.bk-input:active,
.bk-picker-trigger:active{
  transform:scale(.98);
}
.bk-input.is-empty{
  color:rgba(255,255,255,.44);
}
.bk-input-inline{
  min-height:34px;
  padding:8px 12px;
  border-radius:14px;
  display:inline-flex;
  vertical-align:middle;
}
.confirm-dates-btn{
  width:min(328px, 100%);
  min-height:56px;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  gap:4px;
  margin:-2px auto 0;
  text-align:center;
  border-color:rgba(96,165,250,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(96,165,250,.10);
}
.confirm-dates-value{
  color:#fff;
  font-size:17px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.03em;
}
.confirm-dates-btn.is-empty .confirm-dates-value{
  color:rgba(255,255,255,.46);
}
.confirm-dates-hint{
  color:rgba(147,197,253,.76);
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.bk-select{
  width:100%;
  min-height:52px;
  padding:0 42px 0 16px;
  border:1px solid rgba(229,211,179,.12);
  border-radius:18px;
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:15px;
  line-height:1.15;
  font-weight:600;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.bk-select:focus{
  outline:none;
  background:rgba(255,255,255,.08);
  border-color:var(--accent-sand-border);
  box-shadow:0 0 0 1px rgba(229,211,179,.12);
}
.bk-select option{
  color:#0f1216;
  background:#ffffff;
}
.bk-picker-value{
  color:#fff;
  font-size:19px;
  line-height:1;
  font-weight:700;
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1, "lnum" 1;
}
.bk-picker-trigger[aria-expanded="true"]{
  background:rgba(255,255,255,.08);
  border-color:rgba(229,211,179,.34);
  box-shadow:0 0 0 1px rgba(229,211,179,.14), 0 18px 30px rgba(0,0,0,.20);
}
.bk-picker-chevron{
  width:18px;
  height:18px;
  flex:0 0 18px;
  display:block;
  stroke:rgba(229,211,179,.56);
}

.modal-card.booking-shell .bk-checkbox-wrapper{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:-2px;
  cursor:pointer;
  user-select:none;
}
.modal-card.booking-shell .bk-checkbox{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.modal-card.booking-shell .bk-checkbox-box{
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:1px;
  border-radius:10px;
  border:1px solid rgba(229,211,179,.16);
  background:rgba(255,255,255,.05);
  transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.modal-card.booking-shell .bk-checkbox-icon{
  width:14px;
  height:14px;
  display:block;
  opacity:0;
  transform:scale(.72);
  transition:opacity .18s ease, transform .18s ease;
  fill:none;
  stroke:var(--accent-sand-text-dark);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.modal-card.booking-shell .bk-checkbox-text{
  color:rgba(255,255,255,.82);
  font-size:14px;
  line-height:1.5;
  font-weight:500;
  transition:color .18s ease;
}
.modal-card.booking-shell .bk-checkbox-wrapper:hover .bk-checkbox-text{
  color:#fff;
}
.modal-card.booking-shell .bk-checkbox:checked + .bk-checkbox-box{
  background:linear-gradient(180deg, var(--accent-sand) 0%, var(--accent-sand-strong) 100%);
  border-color:transparent;
  box-shadow:0 14px 28px rgba(0,0,0,.18);
}
.modal-card.booking-shell .bk-checkbox:checked + .bk-checkbox-box .bk-checkbox-icon{
  opacity:1;
  transform:scale(1);
}

.modal-card.booking-shell .booking-actions,
.dp-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.bk-action,
.dp-action{
  min-width:0;
  min-height:54px;
  flex:1 1 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-radius:18px;
  border:1px solid rgba(229,211,179,.12);
  background:rgba(255,255,255,.03);
  color:#fff;
  font-size:14px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, opacity .18s ease, transform .14s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.bk-action:hover,
.dp-action:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(229,211,179,.18);
}
.bk-action:active,
.dp-action:active{
  transform:scale(.97);
}
.bk-action--primary,
.dp-action--primary{
  flex:1.2 1 0;
  border-color:transparent;
  background:linear-gradient(180deg, var(--accent-sand) 0%, var(--accent-sand-strong) 100%);
  color:var(--accent-sand-text-dark);
  box-shadow:0 18px 30px rgba(0,0,0,.18);
}
.bk-action--primary:hover,
.dp-action--primary:hover{
  background:linear-gradient(180deg, #ecddc1 0%, var(--accent-sand) 100%);
}
.bk-action--primary.is-disabled,
.bk-action--primary[aria-disabled="true"],
.dp-action--primary:disabled{
  opacity:.5;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}
.bk-action--primary.is-disabled:hover,
.dp-action--primary:disabled:hover{
  background:linear-gradient(180deg, var(--accent-sand) 0%, var(--accent-sand-strong) 100%);
}

.bk-wheel-overlay{
  position:fixed;
  inset:0;
  z-index:10120;
}
.bk-wheel-dismiss{
  position:absolute;
  inset:0;
}
.bk-wheel{
  position:absolute;
  width:min(248px, calc(100vw - 24px));
  height:144px;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(229,211,179,.14);
  background:rgba(26,26,26,.96);
  box-shadow:0 28px 60px rgba(0,0,0,.42);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  animation:bookingWheelIn .26s cubic-bezier(.18,.9,.28,1) both;
}
.bk-wheel-scroll{
  height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  padding:48px 0;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:none;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
}
.bk-wheel-scroll::-webkit-scrollbar{display:none;}
.bk-wheel-fade{
  position:absolute;
  left:0;
  right:0;
  height:48px;
  pointer-events:none;
  z-index:2;
}
.bk-wheel-fade--top{
  top:0;
  background:linear-gradient(180deg, rgba(26,26,26,1), rgba(26,26,26,0));
}
.bk-wheel-fade--bottom{
  bottom:0;
  background:linear-gradient(0deg, rgba(26,26,26,1), rgba(26,26,26,0));
}
.bk-wheel-indicator{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:48px;
  transform:translateY(-50%);
  border-top:1px solid rgba(229,211,179,.18);
  border-bottom:1px solid rgba(229,211,179,.18);
  background:rgba(229,211,179,.08);
  pointer-events:none;
  z-index:2;
}
.bk-wheel-item{
  width:100%;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  scroll-snap-align:center;
  color:rgba(156,163,175,.56);
  font-size:30px;
  line-height:1;
  font-weight:600;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1, "lnum" 1;
  opacity:.42;
  transform:scale(.90);
  transition:color .18s ease, opacity .18s ease, transform .18s ease;
}
.bk-wheel-item.is-active{
  color:var(--accent-sand);
  opacity:1;
  transform:scale(1.08);
}

.dp-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.60);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.dp-card{
  width:min(360px, 92vw);
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:24px;
  color:#f5f7fb;
  background:rgba(26,26,26,.95);
  border:1px solid rgba(229,211,179,.14);
  border-radius:32px;
  box-shadow:0 28px 80px rgba(0,0,0,.46);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  animation:bookingGlassIn .34s cubic-bezier(.18,.9,.28,1) both;
}
.dp-title{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  overflow:hidden;
  margin:0;
  color:#fff;
  text-align:center;
  font-size:20px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-0.02em;
}
.dp-title.is-animating{
  animation:dp-title-pulse .26s ease;
}
.dp-title__text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  text-align:center;
  will-change:transform, opacity, filter;
}
.dp-title__text--current{
  transform:translateY(0);
  opacity:1;
}
.dp-title__text--old{
  transform:translateY(0);
  opacity:1;
  filter:blur(0);
}
.dp-title__text--new{
  transform:translateY(18px) scale(.94);
  opacity:0;
  filter:blur(1.5px);
}
.dp-title.is-animating .dp-title__text--new{
  animation:dp-title-pop .46s cubic-bezier(.22,.98,.18,1) both;
}
.dp-title.is-animating .dp-title__text--old{
  animation:dp-title-away .34s cubic-bezier(.22,.86,.22,1) both;
}
@keyframes dp-title-pulse{
  0%{transform:translateY(0) scale(1);}
  40%{transform:translateY(-1px) scale(1.02);}
  100%{transform:translateY(0) scale(1);}
}
@keyframes dp-title-pop{
  0%{transform:translateY(14px) scale(.95); opacity:0; filter:blur(1.6px);}
  42%{transform:translateY(-6px) scale(1.055); opacity:1; filter:blur(0);}
  72%{transform:translateY(2px) scale(.992); opacity:1; filter:blur(0);}
  100%{transform:translateY(0) scale(1); opacity:1; filter:blur(0);}
}
@keyframes dp-title-away{
  0%{transform:translateY(0) scale(1); opacity:1; filter:blur(0);}
  100%{transform:translateY(-9px) scale(.975); opacity:0; filter:blur(.8px);}
}
.dp-top{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
}
.dp-nav{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(229,211,179,.14);
  border-radius:999px;
  background:rgba(229,211,179,.08);
  color:var(--accent-sand);
  cursor:pointer;
  transition:background-color .18s ease, transform .14s ease, border-color .18s ease;
}
.dp-nav:hover{
  background:rgba(229,211,179,.14);
  border-color:rgba(229,211,179,.24);
}
.dp-nav:active{transform:scale(.96);}
.dp-nav svg{
  width:18px;
  height:18px;
  display:block;
  stroke:currentColor;
  stroke-width:2.2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dp-selects{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0;
}
.dp-chip{
  position:relative;
  min-width:0;
}
.dp-chip-icon{
  position:absolute;
  right:14px;
  top:50%;
  width:16px;
  height:16px;
  transform:translateY(-50%);
  pointer-events:none;
  stroke:rgba(229,211,179,.56);
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dp-select{
  appearance:none;
  -webkit-appearance:none;
  min-width:0;
  height:42px;
  border-radius:16px;
  border:1px solid rgba(229,211,179,.12);
  background:rgba(255,255,255,.05);
  color:#fff;
  padding:0 38px 0 16px;
  font-size:15px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
}
.dp-select:focus{
  outline:none;
  border-color:var(--accent-sand-border);
  box-shadow:0 0 0 1px rgba(229,211,179,.12);
}
.dp-grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:6px 4px;
  justify-items:center;
}
.dp-dow{
  width:40px;
  text-align:center;
  color:rgba(229,211,179,.56);
  font-size:13px;
  line-height:1.2;
  font-weight:700;
  padding-bottom:4px;
}
.dp-empty{
  width:40px;
  height:40px;
}
.dp-day{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(229,211,179,.10);
  border-radius:14px;
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:14px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease, transform .14s ease;
}
.dp-day:hover{
  background:rgba(229,211,179,.12);
  border-color:rgba(229,211,179,.20);
}
.dp-day:active{transform:scale(.96);}
.dp-day.in-range:not(.selected){
  background:rgba(229,211,179,.16);
  border-color:rgba(229,211,179,.28);
  box-shadow:
    inset 0 0 0 1px rgba(229,211,179,.12),
    0 0 0 1px rgba(229,211,179,.06);
}
.dp-day.selected{
  border-color:transparent;
  background:linear-gradient(180deg, var(--accent-sand) 0%, var(--accent-sand-strong) 100%);
  color:var(--accent-sand-text-dark);
  box-shadow:
    0 16px 26px rgba(0,0,0,.18),
    0 0 0 1px rgba(229,211,179,.18),
    0 0 16px rgba(229,211,179,.10);
}
.dp-day.today{
  border-color:rgba(229,211,179,.24);
}
.dp-day.disabled{
  opacity:.26;
  cursor:not-allowed;
  box-shadow:none;
}
.dp-day.busy{
  background:rgba(239,68,68,.10);
  border-color:rgba(239,68,68,.20);
}

@media (max-width:420px){
  .modal-card.booking-shell .booking-card,
  .dp-card{
    padding:22px 18px 18px;
    border-radius:28px;
  }
  .modal-card.booking-shell .booking-grid{
    gap:12px 10px;
  }
  .modal-card.booking-shell .booking-actions,
  .dp-actions{
    gap:7px;
  }
  .bk-action,
  .dp-action{
    min-height:52px;
    padding:0 10px;
    font-size:13px;
  }
}

/* ====================== ACCOMMODATIONS LIST (BOOKING FLOW) ====================== */
.modal-card.accom-shell{
  width:min(400px, calc(var(--app-vw) - 24px));
  max-height:var(--modal-available-height);
  margin:0 auto;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,.1);
  border-radius:32px;
  background:rgba(26,26,26,.9);
  box-shadow:0 28px 70px rgba(0,0,0,.4);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
}

.accom-card{
  display:flex;
  flex-direction:column;
  min-height:0;
  gap:0;
  color:#fff;
}

.accom-head{
  display:grid;
  gap:6px;
  padding:24px 20px 16px;
  text-align:center;
}

.accom-title{
  margin:0;
  font-weight:800;
  font-size:28px;
  line-height:1;
  letter-spacing:-.05em;
  color:#fff;
}
.accom-sub{
  color:rgba(255,255,255,.58);
  font-size:14px;
  line-height:1.3;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.accom-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:0 20px 0;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.accom-body::-webkit-scrollbar{
  display:none;
}

.accom-hint{
  color:#fff;
  font-size:14px;
  line-height:1.35;
  padding:14px 16px;
  margin:0 0 14px;
  border:1px solid #ef4444;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  text-align:center;
}
/* Smaller font specifically for the "К выбору апартаментов" button */
#bkApply{font-size:11px;}
.accom-list{
  display:grid;
  gap:10px;
  padding-bottom:4px;
}
.accom-item{
  display:grid;
  grid-template-columns:72px 1fr auto;
  gap:14px;
  align-items:center;
  width:100%;
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;
  background:rgba(255,255,255,.05);
  padding:14px;
  cursor:pointer;
  color:#fff;
  text-align:left;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.accom-item:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.1);
  transform:translateY(-1px);
}
.accom-thumb{
  width:72px;
  height:64px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  object-fit:cover;
  background:rgba(255,255,255,.04);
}
.accom-thumb.ph{display:block;}
.accom-main{min-width:0; display:grid; gap:4px;}
.accom-name{
  font-weight:800;
  font-size:16px;
  line-height:1.1;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.accom-meta{
  color:rgba(255,255,255,.58);
  font-size:14px;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.accom-price{
  font-weight:800;
  font-size:16px;
  line-height:1;
  color:#fff;
  white-space:nowrap;
}
.accom-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:18px 20px 20px;
}
.accom-actions .button{
  height:44px;
  border-radius:16px;
  min-width:0;
  font-size:14px;
  font-weight:700;
}
.accom-actions #accomBack{
  color:#fff;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.1);
}
.accom-actions #accomBack:hover{
  background:rgba(255,255,255,.12);
}
.accom-actions #accomBooking,
.accom-actions #accomEdit{
  color:#1a1a1a;
  background:#e5d3b3;
  border-color:transparent;
  box-shadow:0 0 20px rgba(229,211,179,.16);
}
.accom-actions #accomBooking:hover,
.accom-actions #accomEdit:hover{
  background:#d8c5a3;
}

@media (max-width:520px){
  .modal-card.accom-shell{
    width:min(400px, calc(100vw - 24px));
    border-radius:30px;
  }

  .accom-head{
    padding:20px 18px 14px;
  }

  .accom-head--booking{
    padding:20px 18px 8px;
    gap:3px;
  }

  .accom-title{
    font-size:24px;
  }

  .confirm-sheet-camp{
    font-size:17px;
  }

  .accom-body{
    padding:0 18px 0;
  }

  .accom-item{
    grid-template-columns:68px 1fr auto;
    gap:12px;
    padding:12px;
    border-radius:18px;
  }

  .accom-thumb{
    width:68px;
    height:60px;
    border-radius:16px;
  }

  .accom-actions{
    gap:10px;
    padding:16px 18px 18px;
  }
}

/* ====================== GUEST ALLOCATION (MANUAL SPLIT) ====================== */
.alloc-card{display:grid; gap:12px; overflow-x:hidden; max-width:100%;}
.accom-head--booking{
  gap:4px;
  padding:22px 20px 8px;
}
.confirm-sheet-camp{
  justify-content:center;
  color:rgba(255,255,255,.76);
  font-size:18px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.02em;
  margin-top:-2px;
}
.alloc-hint{min-height:18px; font-size:13px; line-height:1.35; text-align:center;}
.alloc-hint--panel{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.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;
}

.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:18px;
  background:rgba(255,255,255,0.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  padding:14px 16px;
  display:grid;
  gap:10px;
}
.alloc-summary:empty{display:none;}
.alloc-row{display:flex; justify-content:space-between; gap:10px; align-items:center;}
.alloc-row--total{
  font-weight:700;
  font-size:16px;
}
.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%;}
.alloc-actions.is-row{grid-template-columns:1fr 1fr;}
.alloc-actions .alloc-cta,
.alloc-pick-actions .alloc-cta{
  height:54px;
}
.alloc-cta{
  min-height:54px;
  width:100%;
  border-radius:18px !important;
  font-weight:800 !important;
  letter-spacing:-.02em;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.alloc-cta:hover{
  transform:translateY(-1px);
}
.alloc-cta:active{
  transform:translateY(0) scale(.98);
}
.alloc-cta--ghost{
  border-color:rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.03) !important;
  color:#fff !important;
}
.alloc-cta--soft{
  border-color:rgba(96,165,250,.22) !important;
  background:rgba(59,130,246,.10) !important;
  color:rgba(219,234,254,.96) !important;
  box-shadow:0 0 0 1px rgba(96,165,250,.10), 0 16px 28px rgba(15,23,42,.12);
}
.alloc-cta--danger{
  border-color:rgba(248,113,113,.24) !important;
  background:rgba(127,29,29,.16) !important;
  color:#fecaca !important;
}
.alloc-cta--primary{
  border-color:#22c55e !important;
  background:linear-gradient(180deg, #2bcc6a 0%, #22c55e 100%) !important;
  color:#fff !important;
  box-shadow:0 18px 34px rgba(34,197,94,.22);
}
.alloc-cta.is-disabled,
.alloc-cta[aria-disabled="true"],
.alloc-cta:disabled{
  opacity:.55;
  box-shadow:none;
  transform:none;
}

.alloc-pick-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.alloc-pick-actions .pick-col{
  min-width:0;
  flex:0 0 auto;
  max-width:100%;
  overflow:hidden;
  transition:max-width .28s ease, opacity .22s ease, transform .28s ease;
}
.alloc-pick-actions .button{width:100%;}
.alloc-pick-actions.is-full{gap:0;}
.alloc-pick-actions.is-split{gap:10px;}
.alloc-pick-actions.is-full .pick-main{
  flex:1 1 0;
  max-width:100%;
}
.alloc-pick-actions.is-split .pick-col{
  flex:1 1 0;
}
.alloc-pick-actions.is-split .pick-main,
.alloc-pick-actions.is-split .pick-cancel{
  max-width:calc(50% - 5px);
}
.alloc-pick-actions.is-full .pick-cancel{
  max-width:0;
  opacity:0;
  transform:translateX(8px);
  pointer-events:none;
}
.alloc-pick-actions.is-split .pick-cancel{
  max-width:1000px;
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.alloc-pick-actions.is-full .pick-main{
  max-width:1000px;
}
.alloc-comment-input{
  width:100%;
  min-height:128px;
  resize:none;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--tg-text);
  padding:14px 16px;
  box-sizing:border-box;
  outline:none;
  font:inherit;
  line-height:1.5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.alloc-comment-input::placeholder{
  color:rgba(255,255,255,.34);
}
.alloc-comment-input:focus{
  border-color:rgba(96,165,250,.28);
  box-shadow:0 0 0 1px rgba(96,165,250,.14), inset 0 1px 0 rgba(255,255,255,.02);
}

/* Updated warm palette for booking cart screens */
#modalCard[data-view="booking-confirmation"],
#modalCard[data-view="booking-comment"]{
  --booking-fit-scale:1;
  width:min(408px, calc(var(--app-vw) - 24px));
  max-height:calc(var(--modal-available-height) - 8px);
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(26,26,26,.94);
  box-shadow:0 28px 70px rgba(0,0,0,.4);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  --alloc-theme-accent:#e5d3b3;
  --alloc-theme-accent-strong:#d8c5a3;
  --alloc-theme-accent-bg:rgba(229,211,179,.12);
  --alloc-theme-accent-border:rgba(229,211,179,.24);
  --alloc-theme-accent-shadow:0 18px 32px rgba(0,0,0,.16);
  --alloc-theme-surface:rgba(255,255,255,.05);
  --alloc-theme-surface-strong:rgba(255,255,255,.08);
  --alloc-theme-panel:#101317;
  --alloc-theme-panel-hover:#151a20;
  --alloc-theme-panel-border:rgba(229,211,179,.16);
  --alloc-theme-danger-bg:rgba(101,46,38,.24);
  --alloc-theme-danger-border:rgba(214,143,132,.22);
  --alloc-theme-danger-text:#f1c5bb;
}

#modalCard[data-view="booking-confirmation"].booking-fit-compact,
#modalCard[data-view="booking-comment"].booking-fit-compact{
  width:min(392px, calc(var(--app-vw) - 20px));
  border-radius:28px;
}

#modalCard[data-view="booking-confirmation"].booking-fit-tight,
#modalCard[data-view="booking-comment"].booking-fit-tight{
  width:min(372px, calc(var(--app-vw) - 18px));
  border-radius:24px;
}

#modalCard[data-view="booking-confirmation"] .alloc-card,
#modalCard[data-view="booking-comment"] .alloc-card{
  flex:1 1 auto;
  min-height:0;
  gap:calc(14px * var(--booking-fit-scale));
  padding:calc(24px * var(--booking-fit-scale)) calc(20px * var(--booking-fit-scale)) calc(20px * var(--booking-fit-scale));
  overflow:visible;
}

#modalCard[data-view="booking-confirmation"].booking-fit-compact .alloc-card,
#modalCard[data-view="booking-comment"].booking-fit-compact .alloc-card{
  gap:calc(10px * var(--booking-fit-scale));
  padding:calc(18px * var(--booking-fit-scale)) calc(16px * var(--booking-fit-scale)) calc(16px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"].booking-fit-tight .alloc-card,
#modalCard[data-view="booking-comment"].booking-fit-tight .alloc-card{
  gap:calc(8px * var(--booking-fit-scale));
  padding:calc(15px * var(--booking-fit-scale)) calc(14px * var(--booking-fit-scale)) calc(14px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"].booking-fit-scroll .alloc-card,
#modalCard[data-view="booking-comment"].booking-fit-scroll .alloc-card{
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

#modalCard[data-view="booking-confirmation"].booking-fit-scroll .alloc-card::-webkit-scrollbar,
#modalCard[data-view="booking-comment"].booking-fit-scroll .alloc-card::-webkit-scrollbar{
  display:none;
}

#modalCard[data-view="booking-confirmation"] .accom-head,
#modalCard[data-view="booking-comment"] .accom-head{
  gap:6px;
}

#modalCard[data-view="booking-confirmation"] .accom-title,
#modalCard[data-view="booking-comment"] .accom-title{
  font-size:calc(28px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"].booking-fit-compact .accom-title,
#modalCard[data-view="booking-comment"].booking-fit-compact .accom-title{
  font-size:calc(24px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"].booking-fit-tight .accom-title,
#modalCard[data-view="booking-comment"].booking-fit-tight .accom-title{
  font-size:calc(22px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"] .confirm-sheet-camp,
#modalCard[data-view="booking-comment"] .accom-sub{
  font-size:calc(18px * var(--booking-fit-scale));
  color:rgba(229,211,179,.84);
}

#modalCard[data-view="booking-confirmation"].booking-fit-compact .confirm-sheet-camp,
#modalCard[data-view="booking-comment"].booking-fit-compact .accom-sub{
  font-size:calc(15px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"].booking-fit-tight .confirm-sheet-camp,
#modalCard[data-view="booking-comment"].booking-fit-tight .accom-sub{
  font-size:calc(14px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"] .confirm-dates-btn{
  width:min(calc(328px * var(--booking-fit-scale)), 100%);
  min-height:calc(56px * var(--booking-fit-scale));
  gap:calc(4px * var(--booking-fit-scale));
  background:rgba(255,255,255,.06);
  border-color:var(--alloc-theme-accent-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(229,211,179,.08),
    0 18px 32px rgba(0,0,0,.14);
}

#modalCard[data-view="booking-confirmation"].booking-fit-compact .confirm-dates-btn{
  width:min(calc(304px * var(--booking-fit-scale)), 100%);
  min-height:calc(50px * var(--booking-fit-scale));
  padding:calc(11px * var(--booking-fit-scale)) calc(13px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"].booking-fit-tight .confirm-dates-btn{
  width:min(calc(284px * var(--booking-fit-scale)), 100%);
  min-height:calc(45px * var(--booking-fit-scale));
  padding:calc(10px * var(--booking-fit-scale)) calc(12px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"] .confirm-dates-btn:hover,
#modalCard[data-view="booking-confirmation"] .confirm-dates-btn:focus-visible{
  background:rgba(255,255,255,.08);
  border-color:rgba(229,211,179,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(229,211,179,.12),
    0 20px 36px rgba(0,0,0,.16);
}

#modalCard[data-view="booking-confirmation"] .confirm-dates-value{
  font-size:calc(17px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"] .confirm-dates-hint{
  font-size:calc(10px * var(--booking-fit-scale));
  color:rgba(229,211,179,.82);
}

#modalCard[data-view="booking-confirmation"] .alloc-hint--panel,
#modalCard[data-view="booking-confirmation"] .alloc-summary,
#modalCard[data-view="booking-comment"] .alloc-comment-input{
  padding:calc(14px * var(--booking-fit-scale)) calc(16px * var(--booking-fit-scale));
  border-radius:calc(18px * var(--booking-fit-scale));
  border-color:rgba(255,255,255,.08);
  background:var(--alloc-theme-surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

#modalCard[data-view="booking-comment"] .alloc-comment-input::placeholder{
  color:rgba(255,255,255,.28);
}

#modalCard[data-view="booking-comment"] .alloc-comment-input:focus{
  border-color:var(--alloc-theme-accent-border);
  box-shadow:
    0 0 0 1px rgba(229,211,179,.12),
    inset 0 1px 0 rgba(255,255,255,.02);
}

#modalCard[data-view="booking-confirmation"] .alloc-item-new{
  grid-template-columns:calc(88px * var(--booking-fit-scale)) minmax(0, 1fr);
  gap:calc(8px * var(--booking-fit-scale)) calc(14px * var(--booking-fit-scale));
  padding:calc(10px * var(--booking-fit-scale));
  border-radius:calc(20px * var(--booking-fit-scale));
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

#modalCard[data-view="booking-confirmation"].booking-fit-compact .alloc-item-new{
  grid-template-columns:calc(78px * var(--booking-fit-scale)) minmax(0, 1fr);
  gap:calc(7px * var(--booking-fit-scale)) calc(11px * var(--booking-fit-scale));
  padding:calc(9px * var(--booking-fit-scale));
  border-radius:calc(18px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"].booking-fit-tight .alloc-item-new{
  grid-template-columns:calc(70px * var(--booking-fit-scale)) minmax(0, 1fr);
  gap:calc(6px * var(--booking-fit-scale)) calc(9px * var(--booking-fit-scale));
  padding:calc(8px * var(--booking-fit-scale));
  border-radius:calc(16px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"] .alloc-photo-stack{
  gap:calc(8px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"].booking-fit-compact .alloc-photo-stack{
  gap:calc(6px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"] .alloc-photo-frame{
  border-radius:calc(16px * var(--booking-fit-scale));
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

#modalCard[data-view="booking-confirmation"].booking-fit-compact .alloc-photo-frame{
  border-radius:calc(13px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"] .alloc-main-new{
  gap:calc(6px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"] .alloc-name-text{
  font-size:calc(18px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"] .alloc-main-new .alloc-meta{
  font-size:calc(12px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"].booking-fit-compact .alloc-main-new .alloc-meta{
  font-size:calc(11px * var(--booking-fit-scale));
  line-height:1.24;
}

#modalCard[data-view="booking-confirmation"] .alloc-guest-btn{
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:calc(10px * var(--booking-fit-scale));
  padding:calc(9px * var(--booking-fit-scale)) calc(11px * var(--booking-fit-scale));
  min-height:calc(56px * var(--booking-fit-scale));
  border-radius:calc(18px * var(--booking-fit-scale));
  border-color:var(--alloc-theme-panel-border);
  background:var(--alloc-theme-panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

#modalCard[data-view="booking-confirmation"].booking-fit-compact .alloc-guest-btn{
  gap:calc(8px * var(--booking-fit-scale));
  min-height:calc(50px * var(--booking-fit-scale));
  padding:calc(8px * var(--booking-fit-scale)) calc(10px * var(--booking-fit-scale));
  border-radius:calc(16px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"].booking-fit-tight .alloc-guest-btn{
  gap:calc(7px * var(--booking-fit-scale));
  min-height:calc(46px * var(--booking-fit-scale));
  padding:calc(7px * var(--booking-fit-scale)) calc(9px * var(--booking-fit-scale));
  border-radius:calc(14px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"] .alloc-guest-btn:hover{
  background:var(--alloc-theme-panel-hover);
  border-color:rgba(229,211,179,.26);
  box-shadow:0 0 0 1px rgba(229,211,179,.08);
}

#modalCard[data-view="booking-confirmation"] .alloc-inline-hint,
#modalCard[data-view="booking-confirmation"] .alloc-action-btn{
  border-color:var(--alloc-theme-accent-border);
  background:var(--alloc-theme-accent-bg);
  color:var(--alloc-theme-accent);
}

#modalCard[data-view="booking-confirmation"] .alloc-inline-hint{
  padding:calc(5px * var(--booking-fit-scale)) calc(8px * var(--booking-fit-scale));
  font-size:calc(10px * var(--booking-fit-scale));
  justify-self:end;
  align-self:center;
  white-space:nowrap;
}

#modalCard[data-view="booking-confirmation"] .alloc-guest-btn__value{
  font-size:calc(15px * var(--booking-fit-scale));
  line-height:1.08;
}

#modalCard[data-view="booking-confirmation"] .alloc-card-actions{
  gap:calc(10px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"] .alloc-action-btn{
  min-height:calc(40px * var(--booking-fit-scale));
  padding:0 calc(10px * var(--booking-fit-scale));
  border-radius:calc(16px * var(--booking-fit-scale));
  font-size:calc(12px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"].booking-fit-compact .alloc-action-btn{
  min-height:calc(37px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"].booking-fit-tight .alloc-action-btn{
  min-height:calc(34px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"] .alloc-action-btn:hover{
  background:rgba(229,211,179,.18);
  border-color:rgba(229,211,179,.34);
  box-shadow:var(--alloc-theme-accent-shadow);
}

#modalCard[data-view="booking-confirmation"] .alloc-action-btn--danger{
  border-color:var(--alloc-theme-danger-border);
  background:var(--alloc-theme-danger-bg);
  color:var(--alloc-theme-danger-text);
}

#modalCard[data-view="booking-confirmation"] .alloc-action-btn--danger:hover{
  background:rgba(101,46,38,.34);
  border-color:rgba(214,143,132,.32);
}

#modalCard[data-view="booking-confirmation"] .alloc-cta--ghost,
#modalCard[data-view="booking-comment"] .alloc-cta--ghost{
  border-color:rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
}

#modalCard[data-view="booking-confirmation"] .alloc-cta--soft,
#modalCard[data-view="booking-comment"] .alloc-cta--soft{
  border-color:var(--alloc-theme-accent-border) !important;
  background:var(--alloc-theme-accent-bg) !important;
  color:var(--alloc-theme-accent) !important;
  box-shadow:0 0 0 1px rgba(229,211,179,.08), 0 16px 28px rgba(0,0,0,.12);
}

#modalCard[data-view="booking-confirmation"] .alloc-cta--danger{
  border-color:var(--alloc-theme-danger-border) !important;
  background:var(--alloc-theme-danger-bg) !important;
  color:var(--alloc-theme-danger-text) !important;
}

#modalCard[data-view="booking-confirmation"] .alloc-cta--primary,
#modalCard[data-view="booking-comment"] .alloc-cta--primary{
  border-color:transparent !important;
  background:var(--alloc-theme-accent) !important;
  color:#1a1a1a !important;
  box-shadow:0 0 20px rgba(229,211,179,.16);
}

#modalCard[data-view="booking-confirmation"] .alloc-row{
  gap:calc(10px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"] .alloc-row--total,
#modalCard[data-view="booking-confirmation"] .alloc-row--total .alloc-val{
  font-size:calc(16px * var(--booking-fit-scale));
  color:var(--alloc-theme-accent);
}

#modalCard[data-view="booking-confirmation"] .alloc-pick-actions{
  gap:calc(10px * var(--booking-fit-scale));
  margin-top:calc(12px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"] .alloc-actions{
  gap:calc(10px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"] .alloc-actions .alloc-cta{
  height:calc(54px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"] .alloc-pick-actions .alloc-cta{
  height:calc(44px * var(--booking-fit-scale));
  min-height:calc(44px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"] .alloc-cta{
  min-height:calc(54px * var(--booking-fit-scale));
  border-radius:calc(18px * var(--booking-fit-scale)) !important;
}

#modalCard[data-view="booking-confirmation"].booking-fit-compact .alloc-pick-actions .alloc-cta{
  height:calc(40px * var(--booking-fit-scale));
  min-height:calc(40px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"].booking-fit-tight .alloc-pick-actions .alloc-cta{
  height:calc(36px * var(--booking-fit-scale));
  min-height:calc(36px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"].booking-fit-compact .alloc-summary{
  gap:calc(8px * var(--booking-fit-scale));
}

#modalCard[data-view="booking-confirmation"].booking-fit-tight .alloc-actions,
#modalCard[data-view="booking-confirmation"].booking-fit-tight .alloc-pick-actions{
  gap:calc(8px * var(--booking-fit-scale));
}

@media (max-width: 340px){
  #modalCard[data-view="booking-confirmation"] .alloc-guest-btn{
    grid-template-columns:1fr;
    align-items:start;
    min-height:auto;
  }

  #modalCard[data-view="booking-confirmation"] .alloc-inline-hint{
    justify-self:end;
    align-self:end;
  }
}

/* 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 / ROOM PARAMS ====================== */
.modal-card.details.room-detail-shell{
  width:min(400px, calc(var(--app-vw) - 24px));
  max-height:var(--modal-available-height);
  padding:24px 24px 20px;
  gap:14px;
  grid-template-rows:auto minmax(0,1fr) auto;
}

.room-detail-title{
  grid-row:1;
  margin:0;
  color:#fff;
  font-size:24px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.05em;
  text-align:center;
  text-wrap:balance;
}

.room-detail-body{
  grid-row:2;
  overflow-y:auto;
  display:grid;
  gap:12px;
  padding-right:2px;
}

.room-detail-gallery{
  margin:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  background:#202020;
  box-shadow:0 18px 34px rgba(0,0,0,.22);
}

.room-detail-gallery .viewport{
  display:flex;
  width:100%;
  height:220px;
  min-height:220px;
  transition:transform .32s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}

.room-detail-gallery .viewport img{
  flex:0 0 auto;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:#181818;
  user-select:none;
  cursor:zoom-in;
}

.room-gal-arrow{
  position:absolute;
  top:50%;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:none;
  border-radius:16px;
  color:#fff;
  background:rgba(0,0,0,.4);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transform:translateY(-50%);
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, opacity .18s ease;
}

.room-gal-arrow:hover{
  background:rgba(0,0,0,.55);
}

.room-gal-arrow:active{
  transform:translateY(-50%) scale(.96);
}

.room-gal-arrow:disabled{
  opacity:.24;
  pointer-events:none;
}

.room-gal-arrow--prev{ left:16px; }
.room-gal-arrow--next{ right:16px; }

.room-gal-arrow svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.room-gal-counter{
  position:absolute;
  left:50%;
  bottom:18px;
  z-index:3;
  transform:translateX(-50%);
  min-width:56px;
  padding:6px 10px;
  border-radius:12px;
  background:rgba(15,15,18,.74);
  color:#fff;
  text-align:center;
  font-size:12px;
  line-height:1;
  font-weight:800;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.room-feature-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.room-feature{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  min-height:82px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}

.room-feature:hover{
  background:linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.16);
  transform:translateY(-1px);
}

.room-feature--wide{
  grid-column:1 / -1;
}

.room-feature__iconbox{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:14px;
  background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.05);
  color:#e5d3b3;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.05);
}

.room-feature__iconbox svg{
  width:18px;
  height:18px;
}

.room-feature__copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}

.room-feature__label{
  color:#a9a7b0;
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.room-feature__value{
  color:#fff;
  font-size:14px;
  line-height:1.05;
  font-weight:800;
  letter-spacing:-.03em;
  word-break:break-word;
}

.room-toggle-all{
  width:100%;
  min-height:56px;
  border-radius:16px;
}

.room-toggle-all.button.ghost{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:14px;
  font-weight:700;
  box-shadow:none;
}

.room-toggle-all.button.ghost:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.2);
}

.alloc-price-card--room-detail{
  max-width:none;
  margin:2px 0 0;
  padding:16px;
  border-radius:20px;
  border-color:rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  gap:16px;
}

.alloc-price-card--room-detail .price-item{
  align-items:center;
  gap:12px;
}

.alloc-price-card--room-detail .price-item.total{
  justify-content:center;
}

.alloc-price-card--room-detail .price-k{
  color:rgba(255,255,255,.62);
  font-size:14px;
  font-weight:500;
}

.alloc-price-card--room-detail .price-v{
  color:#e5d3b3;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.03em;
}

.room-detail-actions{
  grid-row:3;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:8px;
}

.room-detail-actions.is-view-only{
  grid-template-columns:1fr;
}

.room-detail-actions .button{
  min-width:0;
  min-height:56px;
  padding:0 16px;
  border-radius:16px;
  font-size:14px;
  font-weight:800;
  letter-spacing:-.02em;
}

.room-detail-choose.button.primary{
  border-color:#e5d3b3;
  background:#e5d3b3;
  color:#1a1a1a;
}

.room-detail-choose.button.primary:hover{
  background:#d8c5a3;
  border-color:#d8c5a3;
}

.room-detail-back.button.ghost{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
}

.room-detail-back.button.ghost:hover{
  background:rgba(255,255,255,.12);
}

.modal-card.room-params-shell{
  width:min(392px, calc(var(--app-vw) - 24px));
  max-height:min(760px, var(--modal-available-height));
  margin:0 auto;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,.1);
  border-radius:32px;
  background:rgba(26,26,26,.95);
  box-shadow:0 28px 70px rgba(0,0,0,.4);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
}

.room-params-overlay{
  padding:10px 0;
}

.room-params-shell__header{
  padding:18px 18px 8px;
  text-align:center;
}

.room-params-shell__title{
  color:#fff;
  font-size:20px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.05em;
}

.room-params-shell__subtitle{
  margin-top:6px;
  color:rgba(255,255,255,.6);
  font-size:14px;
  line-height:1.2;
  font-weight:500;
}

.room-params-shell__body{
  flex:1 1 auto;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0 16px 16px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.room-params-shell__body::-webkit-scrollbar{
  display:none;
}

.room-feature-grid--all .room-feature{
  min-height:68px;
  padding:9px 10px;
  gap:8px;
  border-radius:14px;
}

.room-feature-grid--all .room-feature__iconbox{
  width:34px;
  height:34px;
  border-radius:12px;
}

.room-feature-grid--all .room-feature__iconbox svg{
  width:16px;
  height:16px;
}

.room-feature-grid--all .room-feature__label{
  font-size:8px;
  letter-spacing:.08em;
}

.room-feature-grid--all .room-feature__value{
  font-size:11px;
  line-height:1.05;
}

.room-params-shell__actions{
  padding-top:4px;
}

.room-params-shell__actions .button.ghost{
  width:100%;
  min-height:48px;
  border-radius:14px;
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:13px;
  font-weight:800;
}

.room-params-shell__actions .button.ghost:hover{
  background:rgba(255,255,255,.12);
}

@media (max-width: 520px){
  .modal-card.details.room-detail-shell{
    width:min(400px, calc(100vw - 24px));
    padding:20px 20px 18px;
    gap:12px;
  }

  .room-detail-title{
    font-size:22px;
  }

  .room-detail-gallery .viewport{
    min-height:200px;
    height:200px;
  }

  .room-gal-arrow{
    width:40px;
    height:40px;
    border-radius:14px;
  }

  .room-gal-arrow svg{
    width:18px;
    height:18px;
  }

  .room-gal-counter{
    min-width:52px;
    padding:6px 9px;
    font-size:12px;
  }

  .room-feature{
    min-height:78px;
    padding:10px;
    gap:8px;
  }

  .room-feature__iconbox{
    width:38px;
    height:38px;
    border-radius:12px;
  }

  .room-feature__value{
    font-size:13px;
  }

  .room-toggle-all,
  .room-params-shell__actions .button.ghost,
  .room-detail-actions .button{
    min-height:52px;
    font-size:13px;
  }

  .alloc-price-card--room-detail{
    padding:14px 16px;
  }

  .alloc-price-card--room-detail .price-k{
    font-size:13px;
  }

  .alloc-price-card--room-detail .price-v{
    font-size:15px;
  }

  .room-params-shell__title{
    font-size:18px;
  }

  .room-params-shell__subtitle{
    font-size:13px;
  }
}

@media (max-height: 780px){
  .modal{
    padding:max(8px, env(safe-area-inset-top)) 0 max(8px, env(safe-area-inset-bottom));
  }

  .modal-card.accom-shell{
    border-radius:28px;
  }

  .modal-card.details.room-detail-shell{
    padding:16px 16px 14px;
    gap:10px;
    border-radius:28px;
  }

  .room-detail-title{
    font-size:20px;
  }

  .room-detail-gallery{
    border-radius:22px;
  }

  .room-detail-gallery .viewport{
    height:170px;
    min-height:170px;
  }

  .room-feature-grid{
    gap:8px;
  }

  .room-feature{
    min-height:68px;
    padding:9px;
    gap:8px;
    border-radius:14px;
  }

  .room-feature__iconbox{
    width:34px;
    height:34px;
    border-radius:12px;
  }

  .room-feature__iconbox svg{
    width:16px;
    height:16px;
  }

  .room-feature__label{
    font-size:8px;
  }

  .room-feature__value{
    font-size:12px;
  }

  .room-toggle-all{
    min-height:46px;
    border-radius:14px;
  }

  .room-toggle-all.button.ghost{
    font-size:12px;
  }

  .alloc-price-card--room-detail{
    padding:12px 14px;
    border-radius:16px;
    gap:10px;
  }

  .alloc-price-card--room-detail .price-k{
    font-size:12px;
  }

  .alloc-price-card--room-detail .price-v{
    font-size:14px;
  }

  .room-detail-actions{
    gap:10px;
    margin-top:4px;
  }

  .room-detail-actions .button{
    min-height:46px;
    border-radius:14px;
    font-size:12px;
  }

  .modal-card.room-params-shell{
    border-radius:28px;
  }

  .room-params-shell__header{
    padding:14px 14px 6px;
  }

  .room-params-shell__title{
    font-size:18px;
  }

  .room-params-shell__subtitle{
    font-size:12px;
  }

  .room-params-shell__body{
    gap:8px;
    padding:0 12px 12px;
  }

  .room-feature-grid--all{
    gap:8px;
  }

  .room-feature-grid--all .room-feature{
    min-height:60px;
    padding:8px;
    gap:7px;
    border-radius:12px;
  }

  .room-feature-grid--all .room-feature__iconbox{
    width:30px;
    height:30px;
    border-radius:10px;
  }

  .room-feature-grid--all .room-feature__iconbox svg{
    width:14px;
    height:14px;
  }

  .room-feature-grid--all .room-feature__label{
    font-size:7px;
  }

  .room-feature-grid--all .room-feature__value{
    font-size:10px;
  }

  .room-params-shell__actions .button.ghost{
    min-height:42px;
    border-radius:12px;
    font-size:12px;
  }
}

/* ====================== 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:minmax(88px, 28vw) minmax(0, 1fr);
  grid-template-areas:
    "photos main"
    "photos guests"
    "actions actions";
  gap:clamp(8px, 2.8vw, 14px);
  width:100%;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  background:rgba(255,255,255,0.04);
  padding:clamp(10px, 3.4vw, 14px);
  box-sizing:border-box;
  align-items:stretch;
}
.alloc-photo-stack{
  grid-area:photos;
  display:grid;
  grid-template-rows:repeat(var(--stack-count, 2), minmax(0, 1fr));
  gap:8px;
  align-self:stretch;
  height:100%;
  min-height:100%;
}
.alloc-photo-frame{
  position:relative;
  width:100%;
  min-height:0;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.alloc-photo-frame .alloc-thumb{
  width:100%;
  height:100%;
  border:none;
  border-radius:0;
}
.alloc-photo-frame--placeholder{
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(255,255,255,.03);
}
.alloc-name-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.alloc-main-new{
  grid-area:main;
  min-width:0;
  display:grid;
  align-content:start;
  gap:clamp(6px, 2vw, 8px);
}
.alloc-main-new .alloc-meta{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
.alloc-name-text{
  font-weight:800;
  font-size:clamp(16px, 5vw, 18px);
  line-height:1.1;
  color:#fff;
}
.alloc-card-actions{
  grid-area:actions;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.alloc-action-btn{
  min-height:clamp(42px, 12vw, 46px);
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border-radius:16px;
  border:1px solid rgba(96,165,250,.18);
  background:rgba(59,130,246,.10);
  color:rgba(191,219,254,.9);
  font-size:clamp(11px, 3.1vw, 12px);
  line-height:1;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.alloc-action-btn:hover{
  transform:translateY(-1px);
  background:rgba(59,130,246,.16);
  border-color:rgba(96,165,250,.30);
  box-shadow:0 10px 24px rgba(15,23,42,.14);
}
.alloc-action-btn--danger{
  border-color:rgba(248,113,113,.20);
  background:rgba(127,29,29,.16);
  color:#fecaca;
}
.alloc-action-btn--danger:hover{
  background:rgba(127,29,29,.26);
  border-color:rgba(248,113,113,.32);
}
.alloc-inline-hint{
  flex:none;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(96,165,250,.18);
  background:rgba(59,130,246,.10);
  color:rgba(191,219,254,.88);
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.alloc-guest-btn{
  grid-area:guests;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:12px;
  padding:clamp(12px, 3.6vw, 14px) clamp(12px, 4vw, 16px);
  min-height:clamp(68px, 20vw, 78px);
  border-radius:18px;
  border:1px solid rgba(96,165,250,.14);
  background:#0f1216;
  color:#e5e7eb;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  font-size:13px;
  transition:background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.alloc-guest-btn:hover{
  background:#121a24;
  border-color:rgba(96,165,250,.28);
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(96,165,250,.10);
}
.alloc-guest-btn__value{
  min-width:0;
  display:grid;
  gap:2px;
  color:#fff;
  font-size:clamp(14px, 4vw, 15px);
  line-height:1.18;
  font-weight:700;
}
.alloc-guest-line{
  display:block;
  white-space:nowrap;
}
.alloc-inline-hint{
  align-self:center;
}
.alloc-guest-btn:hover .alloc-inline-hint{
  background:rgba(59,130,246,.16);
  border-color:rgba(96,165,250,.26);
}

@media (max-width: 420px){
  .alloc-item-new{
    grid-template-columns:84px minmax(0, 1fr);
    gap:8px 10px;
    border-radius:18px;
  }

  .alloc-photo-stack{
    gap:6px;
  }

  .alloc-photo-frame{
    border-radius:14px;
  }

  .alloc-main-new .alloc-meta{
    font-size:11px;
    line-height:1.3;
  }

  .alloc-guest-btn{
    grid-template-columns:1fr;
    align-items:start;
    gap:8px;
    min-height:auto;
    padding:10px 12px;
    border-radius:16px;
  }

  .alloc-guest-btn__value{
    font-size:13px;
    line-height:1.16;
  }

  .alloc-inline-hint{
    justify-self:end;
    align-self:end;
  }

  .alloc-card-actions{
    gap:8px;
  }
}

@media (max-width: 360px){
  .alloc-item-new{
    grid-template-columns:76px minmax(0, 1fr);
  }

  .alloc-action-btn{
    border-radius:14px;
    letter-spacing:.05em;
  }

  .alloc-inline-hint{
    padding:5px 7px;
    font-size:9px;
  }
}

@media (min-width: 700px){
  #modalCard[data-view="booking-confirmation"]{
    width:min(432px, calc(var(--app-vw) - 32px));
  }

  #modalCard[data-view="booking-confirmation"] .alloc-card{
    gap:calc(12px * var(--booking-fit-scale));
    padding:calc(18px * var(--booking-fit-scale)) calc(18px * var(--booking-fit-scale)) calc(18px * var(--booking-fit-scale));
  }

  #modalCard[data-view="booking-confirmation"] .accom-head--booking{
    gap:2px;
    padding:calc(6px * var(--booking-fit-scale)) calc(4px * var(--booking-fit-scale)) 0;
  }

  #modalCard[data-view="booking-confirmation"] .accom-title{
    font-size:calc(26px * var(--booking-fit-scale));
  }

  #modalCard[data-view="booking-confirmation"] .confirm-sheet-camp{
    font-size:calc(16px * var(--booking-fit-scale));
  }

  #modalCard[data-view="booking-confirmation"] .confirm-dates-btn{
    width:min(calc(304px * var(--booking-fit-scale)), 100%);
    min-height:calc(50px * var(--booking-fit-scale));
    padding:calc(12px * var(--booking-fit-scale)) calc(14px * var(--booking-fit-scale));
    gap:calc(3px * var(--booking-fit-scale));
  }

  #modalCard[data-view="booking-confirmation"] .confirm-dates-value{
    font-size:calc(16px * var(--booking-fit-scale));
  }

  #modalCard[data-view="booking-confirmation"] .confirm-dates-hint{
    font-size:calc(9px * var(--booking-fit-scale));
  }

  #modalCard[data-view="booking-confirmation"] .alloc-hint--panel{
    padding:calc(12px * var(--booking-fit-scale)) calc(14px * var(--booking-fit-scale));
  }

  #modalCard[data-view="booking-confirmation"] .alloc-item-new{
    grid-template-columns:calc(112px * var(--booking-fit-scale)) minmax(0, 1fr);
    gap:calc(10px * var(--booking-fit-scale)) calc(14px * var(--booking-fit-scale));
    padding:calc(12px * var(--booking-fit-scale));
  }

  #modalCard[data-view="booking-confirmation"] .alloc-photo-frame{
    aspect-ratio:4 / 3;
    border-radius:calc(14px * var(--booking-fit-scale));
  }

  #modalCard[data-view="booking-confirmation"] .alloc-main-new{
    gap:calc(6px * var(--booking-fit-scale));
  }

  #modalCard[data-view="booking-confirmation"] .alloc-main-new .alloc-meta{
    font-size:calc(12px * var(--booking-fit-scale));
    line-height:1.3;
  }

  #modalCard[data-view="booking-confirmation"] .alloc-guest-btn{
    min-height:auto;
    padding:calc(9px * var(--booking-fit-scale)) calc(11px * var(--booking-fit-scale));
  }

  #modalCard[data-view="booking-confirmation"] .alloc-guest-btn__value{
    font-size:calc(14px * var(--booking-fit-scale));
    line-height:1.14;
  }

  #modalCard[data-view="booking-confirmation"] .alloc-inline-hint{
    padding:calc(6px * var(--booking-fit-scale)) calc(10px * var(--booking-fit-scale));
    font-size:calc(11px * var(--booking-fit-scale));
  }

  #modalCard[data-view="booking-confirmation"] .alloc-card-actions{
    gap:calc(8px * var(--booking-fit-scale));
  }

  #modalCard[data-view="booking-confirmation"] .alloc-action-btn{
    min-height:calc(38px * var(--booking-fit-scale));
    border-radius:calc(14px * var(--booking-fit-scale));
    font-size:calc(11px * var(--booking-fit-scale));
  }

  #modalCard[data-view="booking-confirmation"] .alloc-summary{
    gap:calc(8px * var(--booking-fit-scale));
    padding:calc(12px * var(--booking-fit-scale)) calc(14px * var(--booking-fit-scale));
  }

  #modalCard[data-view="booking-confirmation"] .alloc-row--total{
    font-size:calc(15px * var(--booking-fit-scale));
  }

  #modalCard[data-view="booking-confirmation"] .alloc-pick-actions{
    margin-top:calc(8px * var(--booking-fit-scale));
    gap:calc(8px * var(--booking-fit-scale));
  }

  #modalCard[data-view="booking-confirmation"] .alloc-actions .alloc-cta{
    height:calc(48px * var(--booking-fit-scale));
  }

  #modalCard[data-view="booking-confirmation"] .alloc-pick-actions .alloc-cta{
    height:calc(40px * var(--booking-fit-scale));
    min-height:calc(40px * var(--booking-fit-scale));
  }

  #modalCard[data-view="booking-confirmation"] .alloc-cta{
    min-height:calc(48px * var(--booking-fit-scale));
    border-radius:calc(16px * var(--booking-fit-scale)) !important;
  }
}

/* ===== Figma dark popup/detail overrides ===== */
.camp-detail-overlay{
  padding:16px;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(10px);
  overflow:hidden;
}

.camp-detail-overlay.is-closing{
  animation:campDetailOverlayOut .22s cubic-bezier(.22,.86,.22,1) both;
}

.camp-detail-shell{
  position:relative;
  width:min(400px, 100%);
}

.camp-detail-shell::before{
  content:"";
  position:absolute;
  inset:-24px;
  border-radius:48px;
  pointer-events:none;
  opacity:0;
}

.camp-detail-shell.is-vip::before{
  opacity:.18;
  background:radial-gradient(circle, rgba(var(--detail-rgb), .24) 0%, rgba(var(--detail-rgb), 0) 70%);
  filter:blur(26px);
}

.camp-detail-modal{
  position:relative;
  width:min(400px, 100%);
  max-height:95vh;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,.1);
  border-radius:32px;
  background:rgba(26,26,26,.9);
  box-shadow:0 28px 70px rgba(0,0,0,.4);
  backdrop-filter:blur(28px);
  animation:camp-detail-enter .42s cubic-bezier(.22,1,.36,1);
}

.camp-detail-shell.is-closing .camp-detail-modal{
  animation:camp-detail-exit .22s cubic-bezier(.22,.86,.22,1) both;
}

.camp-detail__close{
  position:absolute;
  top:16px;
  right:16px;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:none;
  border-radius:999px;
  background:rgba(0,0,0,.4);
  color:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  backdrop-filter:blur(12px);
  cursor:pointer;
  transition:transform .18s ease, background .18s ease;
}

.camp-detail__close:hover{
  transform:scale(1.05);
  background:rgba(0,0,0,.55);
}

.camp-detail__close:active{
  transform:scale(.95);
}

.camp-detail__close svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.camp-detail__ornament,
.camp-detail__vip-badge,
.camp-detail__desc,
.camp-detail__counter,
.camp-detail__fact-icon{
  display:none !important;
}

.camp-detail__scroll{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  overflow-y:auto;
  padding:20px 20px 0;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.camp-detail__scroll::-webkit-scrollbar{
  display:none;
}

.camp-detail__header{
  position:relative;
  padding:6px 0 18px;
}

.camp-detail__title{
  margin:0;
  color:#fff;
  font-size:28px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.05em;
  text-wrap:balance;
}

.camp-detail__gallery{
  margin:0 0 18px;
}

.camp-detail__gallery-frame{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  background:#202020;
  box-shadow:0 18px 34px rgba(0,0,0,.22);
}

.camp-detail__gallery-frame.is-interactive{
  cursor:pointer;
}

.camp-detail__gallery-viewport{
  width:100%;
  min-height:180px;
  max-height:min(48vh, 260px);
  aspect-ratio:16/10;
  overflow:hidden;
  background:#202020;
  transition:aspect-ratio .28s ease;
}

.camp-detail__gallery-track{
  display:flex;
  width:100%;
  height:100%;
  transition:transform .34s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}

.camp-detail__gallery-slide{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:100%;
  flex:0 0 100%;
  overflow:hidden;
  background:#202020;
}

.camp-detail__gallery-slide img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  cursor:zoom-in;
  transition:transform .5s ease;
}

.camp-detail__gallery-frame.is-interactive:hover .camp-detail__gallery-slide img{
  transform:scale(1.05);
}

.camp-detail__gallery-empty{
  min-height:180px;
  aspect-ratio:16/10;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f8f5ef;
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
  background:linear-gradient(145deg, rgba(52,52,52,.74), rgba(18,18,18,.86));
}

.camp-detail__gallery-shine{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform:translateX(-200%);
  pointer-events:none;
  animation:camp-detail-image-shine 4s ease-in-out infinite 1s;
}

.camp-detail__arrow{
  position:absolute;
  top:50%;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:none;
  border-radius:999px;
  color:#fff;
  background:rgba(0,0,0,.4);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  backdrop-filter:blur(12px);
  transform:translateY(-50%);
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, opacity .18s ease;
}

.camp-detail__arrow:hover{
  background:rgba(0,0,0,.55);
}

.camp-detail__arrow:active{
  transform:translateY(-50%) scale(.94);
}

.camp-detail__arrow:disabled{
  opacity:.25;
  pointer-events:none;
}

.camp-detail__arrow--prev{ left:12px; }
.camp-detail__arrow--next{ right:12px; }

.camp-detail__arrow svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.15;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.camp-detail__dots{
  position:absolute;
  left:50%;
  bottom:12px;
  z-index:3;
  display:flex;
  gap:8px;
  transform:translateX(-50%);
}

.camp-detail__dot{
  width:8px;
  height:8px;
  padding:0;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.34);
  box-shadow:0 1px 8px rgba(0,0,0,.18);
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, opacity .18s ease;
}

.camp-detail__dot:hover{
  transform:scale(1.25);
}

.camp-detail__dot.is-active{
  background:#e5d3b3;
  opacity:1;
}

.camp-detail__facts{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.camp-detail__facts-col{
  display:grid;
  gap:8px;
}

.camp-detail__fact{
  min-width:0;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.05);
  overflow:visible;
  transition:background .18s ease, border-color .18s ease;
  animation:camp-detail-fade-up .5s ease both;
  animation-delay:var(--detail-delay, 0ms);
}

.camp-detail__fact:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.1);
}

.camp-detail__fact-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}

.camp-detail__fact-label{
  min-width:0;
  color:rgba(255,255,255,.8);
  font-size:13px;
  line-height:1.15;
  font-weight:500;
  overflow:visible;
  text-overflow:clip;
}

.camp-detail__fact-value{
  flex:0 0 auto;
  color:#fff;
  font-size:13px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  overflow:visible;
  text-overflow:clip;
}

.camp-detail__actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  padding:16px 20px 20px;
}

.camp-detail__action{
  flex:1 1 0;
  min-height:44px;
  padding:14px 16px;
  border:none;
  border-radius:16px;
  font-size:14px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, filter .18s ease;
}

.camp-detail__action:hover{
  transform:translateY(-1px);
}

.camp-detail__action:active{
  transform:translateY(0) scale(.98);
}

.camp-detail__action--book{
  color:#1a1a1a;
  background:#e5d3b3;
}

.camp-detail__action--book:hover{
  background:#d8c5a3;
}

.camp-detail__action--housing{
  color:#fff;
  background:rgba(255,255,255,.1);
}

.camp-detail__action--housing:hover{
  background:rgba(255,255,255,.15);
}

.camp-detail__action--back{
  grid-column:1 / -1;
  color:#fff;
  background:rgba(255,255,255,.08);
}

.camp-detail__action--back:hover{
  background:rgba(255,255,255,.12);
}

@keyframes camp-detail-enter{
  from{opacity:0; transform:translateY(18px) scale(.94);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

@keyframes camp-detail-exit{
  from{opacity:1; transform:translateY(0) scale(1);}
  to{opacity:0; transform:translateY(14px) scale(.97);}
}

@keyframes camp-detail-fade-up{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}

@keyframes campDetailOverlayOut{
  from{opacity:1}
  to{opacity:0}
}

@keyframes camp-detail-image-shine{
  0%,35%{transform:translateX(-180%);}
  55%,100%{transform:translateX(180%);}
}

@media (max-width: 520px){
  .camp-detail-overlay{
    padding:12px;
  }

  .camp-detail-modal{
    border-radius:30px;
  }

  .camp-detail__scroll{
    padding:18px 18px 0;
  }

  .camp-detail__header{
    padding-right:0;
  }

  .camp-detail__title{
    font-size:28px;
  }

  .camp-detail__actions{
    padding:14px 18px 18px;
  }

  .camp-detail__action{
    min-height:42px;
    padding:13px 14px;
  }
}