:root{
  /* Светлая тема */
  --bg:#ffffff;
  --card:#ffffff;
  --muted:#5f6b7a;
  --accent:#1a73e8;
  --text:#0f172a;
  --sub:#334155;
  --ok:#147d43;
  --warn:#c26b00;
  --bad:#b42318;
  --shadow:0 8px 24px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.06);
  --radius:16px;
  --line:rgba(2,6,23,0.08);
  --soft:#f5f7fb;
}
*{box-sizing:border-box}

.wrap{max-width:1100px; margin:32px auto 64px; padding:0 16px;}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow)
}
.search{padding:18px}
.row{display:flex; gap:16px; flex-wrap:wrap}
.field{flex:1 1 240px; display:flex; flex-direction:column; gap:8px}
label{font-size:13px; color:var(--muted)}
.fake-input{
  display:flex; align-items:center; gap:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px; padding:12px 14px; cursor:default
}
.pill{
  display:inline-block; padding:6px 10px; border-radius:999px;
  font-size:12px; border:1px solid var(--line); color:var(--muted); background:#fff
}
.btn{
  appearance:none; border:0; background:var(--accent); color:white;
  padding:12px 16px; border-radius:12px; cursor:pointer; font-weight:600; box-shadow:var(--shadow)
}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* Calendar */
.calendar{margin-top:12px; border-top:1px dashed var(--line); padding-top:14px}
.cal-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px
}
.cal-header .nav{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  width:40px; height:40px; cursor:pointer; font-size:22px; line-height:40px
}
.cal-header-title{display:flex; gap:16px; align-items:center; font-weight:700}
.cal-viewport{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.month{background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px}
.dow-row{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; color:var(--muted); font-size:12px; margin-bottom:6px; text-align:center}
.grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; font-size:13px}
.day{
  aspect-ratio:1/1; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:#fff; border:1px solid var(--line)
}
.day.disabled{opacity:.45; cursor:not-allowed; text-decoration:line-through}
.day.in-range{background:var(--soft); border-color:#d9e2f1}
.day.start, .day.end{background:var(--accent); color:#fff; border-color:var(--accent)}

/* Rooms */
.rooms{margin-top:22px; overflow:auto}
table{width:100%; border-collapse:separate; border-spacing:0 10px}
thead th{font-size:13px; color:var(--muted); text-align:left; padding:0 12px}
tbody tr{background:#fff; border:1px solid var(--line)}
tbody tr td{padding:16px 12px; vertical-align:middle}
tbody tr td:first-child{border-top-left-radius:12px; border-bottom-left-radius:12px}
tbody tr td:last-child{border-top-right-radius:12px; border-bottom-right-radius:12px}
.room-name{font-weight:700; color:#0b57d0; cursor:pointer; text-decoration:underline}
.cap{color:var(--muted); font-size:13px}
.price{font-weight:800}
.avail.bad{color:var(--bad)}
.avail.ok{color:var(--ok)}
.footer-note{margin-top:10px; font-size:12px; color:var(--muted)}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(15,23,42,.55); display:none; align-items:center; justify-content:center; padding:20px; z-index:50}
.modal.active{display:flex}
.modal .box{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  width:min(980px,100%); max-height:90vh; overflow:auto; box-shadow:var(--shadow)
}
.modal header{padding:16px 18px; border-bottom:1px solid var(--line)}
.modal .content{padding:16px 18px}
.g{display:grid; grid-template-columns:1.5fr 1fr; gap:14px}
.g img{width:100%; height:320px; object-fit:cover; border-radius:12px; background:#f2f4f8}
.thumbs{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px}
.thumbs img{height:70px; border:1px solid var(--line); border-radius:10px; background:#f2f4f8}
.x{margin-left:auto; background:transparent; border:0; color:var(--text); font-size:20px; cursor:pointer}
.amen{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.amen .pill{background:#fff}

/* Rules */
.rules{margin-top:24px; padding:18px}
.rules h2{margin:0 0 6px 0}
.rules .rules-header{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.rules .rule-card{display:flex; gap:14px; padding:14px; background:var(--soft); border:1px solid var(--line); border-radius:14px}
.rules .rule-title{font-weight:700}
.rules .rule-text{color:var(--text)}
.rules .muted{color:var(--muted)}
.rules hr{border:0; border-top:1px dashed var(--line); margin:14px 0}
.rules .icon{width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:12px}
.rules .section{display:grid; grid-template-columns:1fr; gap:12px}
.rules .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px}
.rules .pay-logos picture{display:inline-block; margin-right:8px}

@media (max-width:900px){
  .g{grid-template-columns:1fr}
  .cal-viewport{grid-template-columns:1fr}
}


/* ================== Rooms Table — base tweaks (desktop) ================== */
.rooms table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;             /* белый фон по требованию */
  border: 1px solid #e8e8ee;
  border-radius: 14px;
  overflow: hidden;              /* скругление углов для всей таблицы */
}
.rooms thead th {
  font-weight: 700;
  text-align: left;
  padding: 14px 16px;
  font-size: 14px;
  background: #fafafc;
  border-bottom: 1px solid #e8e8ee;
  color: #111827;
}
.rooms tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f5;
  vertical-align: top;
}
.rooms tbody tr:last-child td { border-bottom: 0; }

.rooms .room-name {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 4px;
  cursor: pointer;
  word-break: break-word;
}
.rooms .cap {
  color: #4b5563;
  font-size: 13px;
}
.rooms .price {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  margin-bottom: 4px;
}
.rooms .btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  background: #1a73e8;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow .15s ease, transform .06s ease;
  box-shadow: 0 2px 10px rgba(26,115,232,.18);
}
.rooms .btn[aria-disabled="true"] {
  background: #cbd5e1;
  pointer-events: none;
  box-shadow: none;
}
.rooms .btn:active { transform: translateY(1px); }

/* немного уплотним 3-й столбец на десктопе */
@media (min-width: 934px) {
  .rooms table { table-layout: fixed; }
  .rooms thead th:nth-child(1),
  .rooms tbody td:nth-child(1) { width: 42%; }
  .rooms thead th:nth-child(2),
  .rooms tbody td:nth-child(2) { width: 18%; }
  .rooms thead th:nth-child(3),
  .rooms tbody td:nth-child(3) { width: 20%; }
  .rooms thead th:nth-child(4),
  .rooms tbody td:nth-child(4) { width: 20%; text-align: right; }
  .rooms tbody td:nth-child(4) { text-align: right; }
}

/* ================== Mobile Cards (<=933px) ================== */
@media (max-width: 933px) {
  .rooms table {
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .rooms thead {
    /* скрываем визуально, оставляем для скринридеров */
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0);
  }
  .rooms tbody,
  .rooms tr,
  .rooms td,
  .rooms th {
    display: block;
    width: 100%;
  }
  .rooms tbody tr {
    background: #fff;
    border: 1px solid #e8e8ee;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    padding: 12px 12px 10px;
    margin: 14px 0;
  }
  .rooms tbody td {
    border: 0 !important;
    padding: 10px 0 !important;
    position: relative;
  }

  /* подписи к полям (без изменения HTML/JS) */
  .rooms tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 6px;
  }
  /* fallback подписи, если data-label не добавлены из JS */
  .rooms tbody td:nth-child(1)::before { content: "Room type"; }
  .rooms tbody td:nth-child(2)::before { content: "Occupancy"; }
  .rooms tbody td:nth-child(3)::before { content: "Price"; }
  .rooms tbody td:nth-child(4)::before { content: "Action"; }

  /* контент внутри карточки */
  .rooms .room-name { font-size: 16px; margin-bottom: 4px; }
  .rooms .cap { font-size: 13px; }
  .rooms .price { font-size: 18px; }

  /* кнопка — на всю ширину карточки */
  .rooms tbody td:nth-child(4) { padding-top: 6px !important; }
  .rooms .btn {
    width: 100%;
    text-align: center;
    padding: 12px 14px;
    border-radius: 12px;
  }

  /* мини-правки типографики для длинных названий */
  .rooms .room-name,
  .rooms .cap { word-break: break-word; }
}

/* очень узкие экраны — лёгкая ужимка */
@media (max-width: 420px) {
  .rooms tbody tr { padding: 12px; }
  .rooms .room-name { font-size: 15px; }
  .rooms .price { font-size: 17px; }
  .rooms .btn { padding: 11px 12px; }
}

/* ================== Footer note ================== */
.rooms .footer-note {
  margin-top: 10px;
  font-size: 12px;
  color: #6b7280;
}