/* user/assets/css/page/kamar.css */
/* Container konsisten */
.kamar__inner{ width:min(100%, var(--container-w, 1200px)); margin-inline:auto; padding-inline:16px; }

/* Header */
.kamar__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:8px 0 10px; }
.kamar__head h1{ font:800 clamp(20px,3vw,32px)/1.1 "Manrope",system-ui; margin:0 0 6px; }
.kamar__head .lead{ color:#64748b; margin:0; }
.kamar__head .count{ color:#334155; font-weight:600; }

.content{height:auto !important;}
/* Filters */
.kamar__filters{
  display:grid; grid-template-columns: 2fr 2fr 1fr 1fr auto;
  gap:12px; padding:10px; border:1px solid #e5e7eb; border-radius:12px; background:#fff;
  position:sticky; top:10px; z-index:5;
}
.kamar__filters .f label{ display:block; font:600 12px/1 system-ui; color:#475569; margin-bottom:6px; }
.kamar__filters input[type="search"],
.kamar__filters input[type="number"],
.kamar__filters select{
  width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; color:#0f172a;
}
.kamar__filters .price{ display:flex; align-items:center; gap:8px; }
.kamar__filters .btn{ height:42px; padding:0 14px; border-radius:10px; }
.kamar__filters .btn--primary{ background:#2563eb; color:#fff; border:none; }
.kamar__filters .btn--ghost{ background:#f1f5f9; color:#0f172a; border:1px solid #e2e8f0; }
.kamar__filters .btn--ghost:hover{ background:#e2e8f0; }

/* Grid */
.kamar__grid{
  display:grid; gap:16px; margin-top:14px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width:1024px){ .kamar__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){  .kamar__grid{ grid-template-columns: 1fr; } }

/* Card */
.room{ display:flex; flex-direction:column; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; background:#fff; }
.room__media{ position:relative; aspect-ratio:4/3; display:block; background:#f8fafc; }
.room__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.room__ph{ width:100%; height:100%; display:grid; place-items:center; color:#94a3b8; }
.room__ph svg{ width:48px; height:48px; }

.room__price{
  position:absolute; left:10px; bottom:10px;
  background:rgba(2,6,23,.78); color:#fff;
  padding:6px 10px; border-radius:10px; font-weight:700; font-size:14px;
  backdrop-filter: blur(6px);
}

.room__body{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.room__title{ margin:0; font:700 16px/1.2 "Manrope",system-ui; }
.room__title a{ color:#0f172a; text-decoration:none; }
.room__title a:hover{ text-decoration:underline; }
.room__meta{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ padding:.25rem .5rem; border:1px solid #e5e7eb; border-radius:999px; font:600 12px/1.1 system-ui; color:#334155; background:#f8fafc; }
.chip--ok{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }

.room__cta{ margin-top:auto; display:flex; gap:8px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:10px; text-decoration:none; border:1px solid #e5e7eb; }
.btn--primary{ background:#019408; color:#fff; border:none; }
.btn--primary:hover{ filter:brightness(.98); transform:translateY(-1px); box-shadow:0 6px 20px rgba(37,99,235,.18); }


.btn--ghost{ background:#f8fafc; color:#0f172a; }
.btn--ghost:hover{ background:#eef2f7; }
.btn--disabled {background:#ed482b ; color:#fff; border:none; }

/* Empty */
.kamar__empty{ padding:18px; border:1px dashed #e5e7eb; border-radius:12px; color:#475569; background:#fff; text-align:center; }

/* Pager */
.kamar__pager{ margin-top:14px; }
.pager__inner{ display:flex; align-items:center; justify-content:center; gap:12px; }
.pg{ padding:8px 12px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; color:#0f172a; text-decoration:none; }
.pg.is-disabled{ opacity:.45; pointer-events:none; }
.pg__info{ color:#475569; }

/* Dark mode harmony */
html[data-theme="light"] .kamar__filters{ background:#ffffff; border-color:#e5e7eb; }
html:not([data-theme="light"]) .kamar__filters{ background:rgba(15,23,42,.55); border-color:rgba(148,163,184,.25); }
html:not([data-theme="light"]) .kamar__filters input,
html:not([data-theme="light"]) .kamar__filters select{ background:#0b1324; color:#e6eefc; border-color:#334155; }
html:not([data-theme="light"]) .room{ background:#0b1324; border-color:#1e293b; }
html:not([data-theme="light"]) .room__title a{ color:#e6eefc; }
html:not([data-theme="light"]) .chip{ background:#0f172a; border-color:#334155; color:#cbd5e1; }