.promo-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: fit-content;
  padding: 8px 8px;
  border: 1px solid #eee;
  border-radius: 12px;
  cursor: pointer;
  font-family: sans-serif;
  transition: background 0.2s ease;
  user-select: none;
}

.promo-text {
  margin-right: 10px;
}

.promo-text .promo-label {
  font-size: 14px;
  color: #888;
}
.promo-text .promo-code {
  font-size: 18px;
  font-weight: 600;
  color: var(--room-grid-title-color);
}

.promo-icon svg {
  width: 24px;
  height: 24px;
  background: #eaf2ff;
  border-radius: 6px;
  padding: 4px;
  transition: opacity 0.2s ease;
}

.hidden {
  display: none;
}
/* единая сетка для всех карточек */
.room-card .room-header{
  display:grid;
  grid-template-columns:
    44px                 /* rank */
    116px                /* logo */
    minmax(280px,1fr)    /* main */
    minmax(300px,1.1fr); /* offer */
  gap: clamp(12px,1.6vw,16px);
  align-items:center;
}

/* если .room-rank отсутствует, кладём невидимый grid-item в 1-ю колонку */
.room-card .room-header:not(:has(.room-rank))::before{
  content:"";
  grid-column:1;         /* занимает первую колонку */
  width:0; height:0;     /* ничего не рисует */
}

/* (опционально) когда ранг есть, можно прятать его круг без влияния на сетку */
.room-card .room-rank.is-empty{ visibility:hidden; }

/* мобильный коллапс */
@media (max-width: 960px){
  .room-card .room-header{ grid-template-columns:1fr; }
}
/* Пустой блок для выравнивания */
.room-rank.placeholder {
  visibility: hidden; /* чтобы он занимал место, но был невидим */
}

/* Мобильная версия — убираем фиктивный блок */
@media (max-width: 768px) {
  .room-rank.placeholder {
    display: none;
  }
}

/* Десктоп: добавляем заполнитель ТОЛЬКО когда .room-rank нет среди прямых детей */
.room-card .room-header:not(:has(> .room-rank))::before{
  content: "";
  grid-column: 1 / 2;   /* занимаем 1-ю колонку, чтобы logo/main/offer не съезжали */
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Мобилка/планшеты: убираем заполнитель полностью */
@media (max-width: 1024px){
  .room-card .room-header::before{
    content: none !important;
  }
}



.room-logo-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
  object-fit: cover;
  display: block;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* ===== LOGO + RANK MOBILE FIX ===== */
@media screen and (max-width: 900px)  {
  .room-logo-img {
    width: 60px !important;
    height: 60px !important;
    position: relative;
    z-index: 1;
  }

  .room-rank {
    width: 20px;
    height: 20px;
    font-size: 11px;
    top: 0;
    left: 0;
    transform: translate(-25%, -25%);
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
  }

  .room-header {
    position: relative;
  }
}


/* ===== базовые ссылки на твои переменные ===== 
:root{
  --_text: var(--switch-text-color, var(--foreground-color));
  --_text-secondary: var(--foreground-secondary-color, rgba(0,0,0,.56));
  --_card-bg: var(--background-card-color, #fff);
  --_border: rgba(0,0,0,.06);
  --_shadow: var(--switch-box-shadow-grey, rgba(0,0,0,.1));
}

/* ===== LIGHT (обычная карточка) ===== */

  .room-review-link {
  position: absolute;
  bottom: 12px;
  right: 16px;
}

.room-review-link a {
  color: var(--room-grid-title-color) !important;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.room-review-link a:hover {
  color: #00ff8a;
}
</style>

.room-header{display:flex;align-items:center;gap:16px;padding: clamp(14px,2vw,20px);}
.room-rank{background:linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);color:#fff;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-weight:700;}
.room-logo{width:60px;height:60px;border-radius:50%;}
.room-main-info{flex:1;min-width:180px;}
.room-name{margin:0 0 4px 0;font-size:clamp(16px,2vw,20px); color: var(--room-grid-title-color)!important; font-weight: 700;}
a.room-name:hover{color: var(--room-grid-title-color)}
.room-established,.room-rating{margin:0;color:var(--_text-secondary);font-size:clamp(12px,1.6vw,14px);}
.room-offer{flex:2;min-width:220px;font-weight:700;}
.bonus-text{margin:0 0 6px 0!important;
  font-size:clamp(14px,2vw,18px); 
font-weight:500;
color:var(--room-grid-title-color) !important;
}
.bonus-desc{margin:0 0 6px 0!important;font-size:clamp(18px,2vw,18px);}
.room-stats{list-style:none;padding:0;margin:6px 0 0 0;}
.room-stats li{margin:0 0 4px 0;font-size:clamp(13px,1.8vw,15px);}
.room-actions{display:flex;flex-direction:column;gap:8px;min-width:220px;}
.btn-liquid{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  width:80%; min-height:48px; padding:0 18px;
  background: linear-gradient(180deg,#1677ff,#0e5fff);
  color:#fff !important; border-radius:12px; text-decoration:none; font-weight:700;
  letter-spacing:.2px;   transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 16px rgba(14,95,255,.25);
   --room-box-shadow-light: 0 4px 16px rgba(0,0,0,.12);
  font-size: 18px;
}
.btn-liquid:hover{filter:brightness(1.06); transform: translateY(-1px);}
.btn-icon{width:20px;height:20px;fill:#fff;flex:0 0 20px;}
/*
.btn-glass{
  width:100%; min-height:42px; padding:0 14px;
  background: rgba(0,0,0,.05);
  border:1px solid #fff;
  color:var(--_text) !important; border-radius:12px; cursor:pointer;
  font-weight:600; font-size:clamp(13px,1.8vw,15px);
} */

.btn-glass {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  background: var(--btn-glass-bg);
  border: 1px solid var(--btn-glass-border);
  color: var(--btn-glass-color) !important;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: clamp(13px, 1.8vw, 15px);
  transition: all .2s ease-in-out;
}
.btn-glass:hover {
  filter: brightness(0.95);
}

.room-details{
  display:none;
  grid-template-columns: repeat(4, minmax(180px,1fr));
  gap:16px;
  padding: clamp(14px,2vw,20px);
  border-top:1px solid var(--_border);
}
.room-card.active .room-details{display:grid;}
.detail-block span{margin:0 0 6px 0;font-size:14px;font-weight:700;}
.icons .pay,.icons .prov{height:24px;margin-right:6px}

/* ===== DARK (Liquid) — включается только внутри html.dark ===== */
.room-card {
/*  background:
    linear-gradient(135deg, rgba(40,40,40,.92), rgba(20,20,20,.92)),
    var(--_card-bg); */
    background: var(--room-background-style);
  color: var(--_text) !important;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: var(--room-box-shadow-light);
  margin-bottom: 20px;
  text-decoration: none !important;
  -webkit-text-decoration: none!important;


/* --- фикс раскладки: grid вместо flex в .room-header --- */
.room-header{
  display: grid;
  grid-template-columns:
    auto           /* rank */
    auto           /* logo */
    minmax(180px, 1fr)  /* main info */
    minmax(260px, 1.2fr)/* offer */
    260px;              /* actions (фикс ширина) */
  align-items: center;
  gap: clamp(12px, 1.6vw, 16px);
  padding: clamp(14px, 2vw, 20px);
}

/* правая колонка — не даём ей вылезать */
.room-actions{
  justify-self: end;
  width: 100%;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* кнопкам запрещаем перерастать контейнер */
.btn-liquid,
.btn-glass{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* если вдруг где-то стояли min-width — обнуляем */
.room-main-info,
.room-offer{ min-width: 0; }

/* --- мобилка: одна колонка, кнопки на всю ширину --- */
@media (max-width: 900px){
  .room-header{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "rank logo"
      "main main"
      "offer offer"
      "actions actions";
  }
  .room-rank{ grid-area: rank; }
  .room-logo{ grid-area: logo; }
  .room-main-info{ grid-area: main; }
  .room-offer{ grid-area: offer; }
  .room-actions{
    grid-area: actions;
    justify-self: stretch;
    max-width: none;
    flex-direction: row;
    gap: 10px;
  }
}


/* ====== MOBILE LAYOUT LIKE THE SCREENSHOT ====== */
@media (max-width: 560px){

  /* карточка — больше радиус и внутренние отступы */
  .room-card{
    border-radius: 22px;
  }

  /* перестраиваем header в grid 2 колонки: [логотип/ранк] + [текст] */
  .room-header{
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-auto-rows: min-content;
    column-gap: 12px;
    row-gap: 6px;
    padding: 16px;
  }

  /* ранг накладываем на логотип слева сверху */
  .room-rank{
    grid-column: 1; grid-row: 1;
    z-index: 2;
    width: 28px; height: 28px;
    font-size: 13px;
    transform: translate(-6px, -6px);
    box-shadow: 0 4px 10px rgba(0,0,0,.25);
  }

  /* логотип под рангом */
  .room-logo{
    grid-column: 1; grid-row: 1 / span 2;
    width: 56px; height: 56px;
  }

  /* блок с названием */
  .room-main-info{
    grid-column: 2; grid-row: 1 / span 2;
    min-width: 0;
  }
  .room-name{
    font-size: 20px;
    line-height: 1.15;
    margin: 0 0 2px 0;
  }
  .room-established,.room-rating{
    font-size: 13px;
    line-height: 1.25;
  }

  /* оффер уходит отдельным блоком ниже хедера */
  .room-offer{
    grid-column: 1 / -1; grid-row: 3;
    margin-top: 6px;
    font-weight: 800;
  }
  .bonus-text{ 
    font-size: 15px; 
    line-height: 1.25;
     }

  /* чек-список — крупнее и с интервалами */
  .room-stats{ margin-top: 10px; }
  .room-stats li{
    font-size: 15px;
    display: flex; align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  /* блок кнопок — строго вниз и на всю ширину */
  .room-actions{
      display: flex;
  flex-direction: column;
    grid-column: 1 / -1; grid-row: 4;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    margin-top: 10px;
  }


  /* серый More info — как вторичная */
  .btn-glass{
    width: 100%;
    min-height: 48px;
    margin-top: 10px;
    border-radius: 14px;
        font-weight: 700;
    font-size: 16px;
  }

  /* границы деталей под мобилку (если раскрыты) */
  .room-details{
    grid-template-columns: 1fr;
    padding: 16px;
  }
}

  
  .term-bubbles {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 24px;
}
.term-bubbles a {
background: var(--payments-background-color);
border-radius: 10px;
padding: 4px 8px 4px 8px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 8px 8px 0;
font-weight: 600;
}

.term-bubbles a p {
/* font-size: .875rem;
line-height: 1.625rem; */
color: var(--switch-text-color);
margin-bottom: 0;
margin: 0!important;
font-weight: 00;
}
.term-bubbles a .term-bubbles__icon-wrapper {
width: 24px;
height: 24px;
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-right: 10px;
}
.term-bubbles a .term-bubbles__icon-wrapper img {
margin-right: 0;
width: 20px;
height: 20px;
}
/* сам список */
.pros-list{ margin:0; padding:0; list-style:none; }

/* пункт */
.pros-list li{
  position: relative;
  padding: 8px 0 8px 36px;   /* место под иконку слева */
  font-weight: 600;
  margin: 0!important;
}

/* галочка */
.pros-list li::before{
  content:"";
  position:absolute;
  left:1px;                 /* сдвиг иконки от левого края */
  top:50%;
  width:14px; height:15px;   /* явный размер иконки */
  transform:translateY(-50%);
  background: url(/images/checkmark-green.svg) no-repeat center / contain;

  .room-review-link {
  position: absolute;
  bottom: 12px;
  right: 16px;
}

.room-review-link a {
  color: var(--room-grid-title-color) !important;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.room-review-link a:hover {
  color: #00ff8a;
}