/* Inline message styles used by OTP resend UI */
.msg-success {
  color: #065f46; /* teal-800 */
  background: rgba(16, 185, 129, 0.08); /* green-ish subtle */
  border-left: 4px solid #10b981;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 600;
}

.msg-warning {
  color: #92400e; /* amber-800 */
  background: rgba(245, 158, 11, 0.06);
  border-left: 4px solid #f59e0b;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 600;
}

.msg-error {
  color: #7f1d1d; /* red-800 */
  background: rgba(239, 68, 68, 0.06);
  border-left: 4px solid #ef4444;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 600;
}


/* Loading state applied by form-submit-state.js while a form is
   submitting, so the button reads as busy and can't be double-tapped. */
button.is-submitting,
input.is-submitting {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
}


:root {
  --blue: #0B6FBF;
  --blue-dark: #002A5C;
  --orange: #FF8000;
  --bg: #f8fafc;
  --text: #0f172a;
  --card: #ffffff;
  --radius: 18px;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a {
  text-decoration: none;
  color: inherit;
}

.nav-container {
  max-width: 1200px;
  margin: auto;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 72px;
  width: auto;
  display: block;
}

/* tagline */
.brand-tagline {
  font-size: 0.55rem;
  font-weight: 600;
  opacity: 0.55;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-top: -6px;
  transform: translateY(-2px);
  animation: taglineIn 0.5s ease-out both;
}

.logo:hover .brand-tagline {
  opacity: 0.85;
  transform: translateY(-3px);
}

@keyframes taglineIn {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 0.55;
    transform: translateY(-2px);
  }
}

@media (max-width: 480px) {
  .brand-tagline {
    display: none;
  }
}

.nav-links {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.burger {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 8px;
  color: #0f172a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease;
}

.burger:hover {
  background: rgba(15, 23, 42, 0.06);
}

.burger-bar {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translateX(-50%);
  transition:
    transform 0.25s ease,
    opacity 0.2s ease,
    top 0.25s ease;
}

.burger-bar:nth-child(1) {
  top: 14px;
}

.burger-bar:nth-child(2) {
  top: 19px;
}

.burger-bar:nth-child(3) {
  top: 24px;
}

.burger.active .burger-bar:nth-child(1) {
  top: 19px;
  transform: translateX(-50%) rotate(45deg);
}

.burger.active .burger-bar:nth-child(2) {
  opacity: 0;
}

.burger.active .burger-bar:nth-child(3) {
  top: 19px;
  transform: translateX(-50%) rotate(-45deg);
}

.trust-link {
  font-weight: 900;
  font-size: 0.78rem;
  color: var(--blue);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(11, 111, 191, 0.08);
  border: 1px solid rgba(11, 111, 191, 0.15);
}

.trust-link:hover {
  filter: brightness(0.98);
}

/* ================= LAYOUT ================= */

.container {
  max-width: 1200px;
  margin: auto;
  padding: 36px 20px;
}

.page-title {
  font-size: 2.2rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 1.2rem;
}

.nav-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

/* lock background scroll when menu open */
body.nav-open {
  overflow: hidden;
}

/* ================= SEARCH ================= */

.search-bar {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.search-bar input,
.search-bar select {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #ddd;
  min-width: 220px;
  background: #fff;
}

.search-bar button {
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* ✅ Browse helpers: chips + sort row */
.browse-tools {
  max-width: 1000px;
  margin: 0 auto 18px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.82rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  opacity: 0.95;
}

.chip:hover {
  transform: translateY(-1px);
}
.chip.is-active {
  background: rgba(255, 128, 0, 0.1);
  border-color: rgba(255, 128, 0, 0.28);
}

.sort-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.sort-wrap label {
  font-weight: 900;
  opacity: 0.75;
}

.sort-wrap select {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  min-width: 220px;
}.room-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  margin-top:20px;
}


@media (max-width: 1100px) {
  .room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .room-grid {
    grid-template-columns: 1fr;
  }
}
.image-slider::-webkit-scrollbar-thumb {
  background: transparent;
}

.slider-shell.has-multiple:hover .slider-btn {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 720px) {
  .slider-shell.has-multiple .slider-btn {
    opacity: 0.95;
    pointer-events: auto;
  }
}

.slider-btn:disabled {
  opacity: 0.35 !important;
  cursor: default;
  transform: translateY(-50%);
}

.badge {
  position: absolute;
  top: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(6px);
  z-index: 60;
}

.badge-popular {
  left: 10px;
  background: linear-gradient(135deg, var(--orange), #FF9E40);
  /* White-on-orange is ~2.5:1, well under WCAG AA's 4.5:1 - dark
     navy text against this gradient measures ~7:1. */
  color: #002A5C;
}
.badge-verified {
  right: 10px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  /* white-on-green measured ~2.3:1 (worse against the darker gradient
     stop); near-black passes ~5.4:1 against that same stop. */
  color: #0f172a;
}
.room-meta {
  font-size: 0.82rem;
  opacity: 0.7;
  margin: 0;
}

/* ✅ Detail sizing */
.room-detail-media .image-slider-detail {
  height: 420px;
}
.room-detail-media .image-slider-detail img {
  height: 420px;
}

@media (max-width: 900px) {
  .room-detail-media .image-slider-detail {
    height: 320px;
  }
  .room-detail-media .image-slider-detail img {
    height: 320px;
  }
}

@media (max-width: 520px) {
  .room-detail-media .image-slider-detail {
    height: 240px;
  }
  .room-detail-media .image-slider-detail img {
    height: 240px;
  }
}

/* ================= BUTTONS ================= */

.btn-secondary {
  padding: 12px 18px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: white;
  font-weight: 700;
  opacity: 0.9;
  cursor: pointer;
}

.btn-secondary:hover {
  opacity: 1;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border: none;
  border-radius: 12px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  box-shadow: 0 12px 25px rgba(11, 111, 191, 0.25);
  cursor: pointer;
}
.btn-primary:hover {
  transform: translateY(-1px);
}

/* ================= FORMS ================= */

.form-shell {
  max-width: 900px;
  margin: 0 auto;
}

.form-card {
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  opacity: 0.75;
  line-height: 1.35;
}

.empty-card p {
  margin: 0;
  opacity: 0.8;
}

/* ✅ Skeleton loading (AJAX browse) */
.skeleton {
  border-radius: 16px;
  background: linear-gradient(90deg, #f1f5f9, #e5e7eb, #f1f5f9);
  background-size: 200% 100%;
  animation: shimmer 1.1s infinite linear;
  height: 280px;
  box-shadow: var(--shadow);
}

@keyframes shimmer {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Pagination */
.pagination-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 32px 0 50px;
  flex-wrap: wrap;
}

.page-indicator {
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.pagination-btn {
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: white;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.pagination-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.pagination-next {
  background: linear-gradient(135deg, #0B6FBF, #002A5C);
  color: white;
  border: none;
}

.pagination-back {
  background: #f3f4f6;
  color: #111827;
}

/* ✅ Room detail CTA bar (mobile sticky) */
.detail-cta {
  position: sticky;
  bottom: 0;
  z-index: 50;
  padding: 12px;
  margin-top: 16px;
  background: rgba(248, 250, 252, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);
}

.detail-cta .cta-row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.detail-cta .cta-row a,
.detail-cta .cta-row button {
  flex: 1 1 160px;
}

/* ================= FOOTER ================= */

.site-footer {
  margin-top: 70px;
  padding: 30px;
  text-align: center;
  font-size: 0.9rem;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  color: #fff;
  opacity: 1;
}

.site-footer p {
  margin: 6px 0;
}

.footer-links {
  margin: 10px 0 6px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0.95;
}

.footer-links a {
  font-weight: 900;
  color: #fff;
  opacity: 0.95;
}

.footer-links a:hover {
  color: var(--orange);
}

.footer-small {
  max-width: 900px;
  margin: 10px auto 0;
  opacity: 0.85;
  line-height: 1.5;
}.nav-links a:hover {
  opacity: 1;
  color: var(--orange);
  color: #0B6FBF;
  transform: translateY(-1px);
}


/* ================= MOBILE NAV (PERFECT CLICKABLE) ================= */

@media (max-width: 860px) {

  .nav-links a:hover {
    background: rgba(11, 111, 191, 0.06);
  }

  .nav-links.show {
    display: flex;
  }
}

/* hard disable any blur/filter on the menu itself */
body.nav-open .nav-links,
body.nav-open .nav-links * {
  filter: none !important;
  backdrop-filter: none !important;
}

/* ================= IDLE MODAL ================= */

.idle-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
}

.idle-modal.show {
  display: flex;
}

.idle-card {
  width: 100%;
  max-width: 520px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 18px;
  margin: 0 auto;
  overflow: hidden;
}

.idle-title {
  margin: 0 0 8px;
  font-weight: 900;
}

.idle-text {
  margin: 0 0 14px;
  opacity: 0.82;
  line-height: 1.5;
}

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

.idle-actions .btn-secondary,
.idle-actions .btn-primary {
  flex: 1 1 160px;
  width: auto;
}

@media (max-width: 420px) {
  .idle-card {
    padding: 16px;
  }
}

/* ================= TOASTS: IN-FLOW (NO OVERLAY) ================= */

.toast-wrap {
  position: sticky;
  top: 10px;
  z-index: 40;
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 14px;
  padding: 0;
}

@media (max-width: 520px) {
  .toast-wrap {
    top: 8px;
    margin-bottom: 12px;
  }
}

.toast {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 12px 14px;
  font-weight: 800;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.hide {
  opacity: 0;
  transform: translateY(-8px);
}

.toast-success {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.08);
}
.toast-error,
.toast-danger {
  border-color: rgba(220, 38, 38, 0.32);
  background: rgba(220, 38, 38, 0.08);
}
.toast-warning {
  border-color: rgba(255, 128, 0, 0.35);
  background: rgba(255, 128, 0, 0.1);
}
.toast-info {
  border-color: rgba(11, 111, 191, 0.25);
  background: rgba(11, 111, 191, 0.08);
}

/* Optional helpers */
.greeting,
.message-card,
.alert-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 14px;
}

/* ================= BURGER MENU HARD FIX (PASTE AT VERY BOTTOM) ================= */

/* Backdrop must NEVER sit above the menu */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(15, 23, 42, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}.nav-links a {
  font-weight: 600;
  opacity: 0.9;
  transition:
    color 0.18s ease,
    opacity 0.18s ease;
  position: relative;
  transition: all .2s ease;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 2000;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e5e7eb;
  isolation: isolate;
  z-index: 1000;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
}


/* Mobile: force proper click stacking order */
@media (max-width: 860px) {
  .site-header {
    z-index: 3000 !important;
  }

  .nav-backdrop {
    z-index: 2500 !important; /* below menu */
  }

  .nav-links {
  position: fixed;
  top: 84px;
  right: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.98);
  flex-direction: column;
  padding: 14px;
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: none;
  gap: 10px;
  z-index: 2100;
  pointer-events: auto;
  position: fixed !important;
  z-index: 3500 !important;
  pointer-events: auto !important;
}

  .nav-links a {
  padding: 12px 12px;
  border-radius: 12px;
  font-weight: 900;
  display: block;
  width: 100%;
  pointer-events: auto !important;
}

  .burger {
  display: flex;
  z-index: 2200;
  position: relative;
  position: relative !important;
  z-index: 3600 !important;
}
}

/* ================= AUTH: FORCE PERFECT CENTERING ================= */

/* Auth shell takes available space and centers */
.auth-shell {
  flex: 1;
  min-height: auto !important; /* override previous calc if it breaks centering */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 14px;
}

/* ================= AUTH: PERFECT PROPORTIONS (FINAL POLISH) ================= */

/* Keep the auth card looking "designed" (like before) */
.auth-card {
  margin: 0 auto;
  width: 100%;
  max-width: 520px;
  padding: 22px;
  border-radius: 18px;
}

/* Form spacing */
.auth-form .field {
  margin-bottom: 14px;
}

/* Labels */
.auth-label {
  display: block;
  font-size: 0.92rem;
  font-weight: 900;
  margin-bottom: 7px;
  opacity: 0.9;
}

/* Inputs: consistent height + clean padding.
   Applied globally by .input class (not just inside .auth-form) so
   add_room / create_room / contact and every other form gets the same
   touch-friendly sizing, not just login/register. font-size is 1rem
   (16px) minimum to prevent iOS Safari auto-zooming on focus. */
input.input,
select.input,
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="tel"],
.auth-form select,
.auth-form textarea,
input[type="text"].input,
input[type="email"].input,
input[type="password"].input,
input[type="tel"].input,
input[type="number"].input,
input[type="date"].input {
  width: 100%;
  height: 46px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  font-size: 1rem;
  line-height: 1.2;
}

/* Textareas shouldn't be forced to 46px */
.auth-form textarea,
textarea.input {
  height: auto;
  min-height: 120px;
}

/* Focus: sharp and modern */
.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
  outline: none;
  border-color: rgba(11, 111, 191, 0.45);
  box-shadow: 0 0 0 4px rgba(11, 111, 191, 0.12);
}

/* Button: full width, same height as inputs */
.auth-btn,
.auth-form button.btn-primary,
.auth-form input[type="submit"].btn-primary {
  width: 100%;
  height: 46px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

/* Password toggle: aligned nicely */
.pw-wrap {
  position: relative;
}

.pw-input {
  padding-right: 54px !important;
}

.pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  font-weight: 900;
}

.auth-small {
  font-size: 0.84rem;
  line-height: 1.4;
}

/* Mobile: slightly tighter padding */
@media (max-width: 420px) {
  .auth-card {
    padding: 16px;
  }

  .auth-form input,
  .auth-form select,
  .auth-form button,
  .auth-btn {
    height: 44px;
  }
}

/* ================= AUTH: CENTER TITLE + LINKS ================= */

/* Center the heading text ("Login" / "Create account") */
.auth-title {
  margin: 0 0 16px;
  font-size: 1.35rem;
  line-height: 1.2;
  text-align: center;
}

/* Keep the blue link looking nice when centered */
.auth-hint .auth-link {
  display: inline-block; /* prevents weird inline spacing issues */
}

.auth-hint {
  margin-top: 14px;
  font-size: 0.95rem;
  text-align: center;
  margin: 12px 0 0;
}

/* Center title + hint lines */
body.auth-page .auth-title,
body.auth-page .auth-hint {
  text-align: center;
}

/* ===================================================================== */
/* 1) AUTH CSS MUST NOT AFFECT OTHER PAGES (dashboard, counters, etc.)    */
/*    We scope auth styling to body.auth-page ONLY                        */
/* ===================================================================== */

/* Cancel any previous unscoped auth rules (safety override) */
body:not(.auth-page) .auth-shell,
body:not(.auth-page) .auth-card,
body:not(.auth-page) .auth-form,
body:not(.auth-page) .auth-title,
body:not(.auth-page) .auth-hint {
  all: revert; /* stops auth styles from leaking into dashboard layouts */
}

/* Auth-only layout */
body.auth-page main.container {
  min-height: calc(100vh - 220px);
  display: flex;
  flex-direction: column;
}

body.auth-page .auth-shell {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 28px 14px;
}

body.auth-page .auth-card {
  width: 100%;
  max-width: 520px;
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 22px;
  margin: 0 auto;
}

body.auth-page .auth-title {
  margin: 0 0 16px;
  font-size: 1.35rem;
  line-height: 1.2;
  font-weight: 900;
  text-align: center;
}

body.auth-page .auth-form .field {
  margin-bottom: 14px;
}

body.auth-page .auth-label {
  display: block;
  font-size: 0.92rem;
  font-weight: 900;
  margin-bottom: 7px;
  opacity: 0.9;
}

body.auth-page .auth-form input.input,
body.auth-page .auth-form input[type="text"],
body.auth-page .auth-form input[type="email"],
body.auth-page .auth-form input[type="password"],
body.auth-page .auth-form input[type="tel"],
body.auth-page .auth-form select,
body.auth-page .auth-form textarea {
  width: 100%;
  height: 46px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  font-size: 1rem;
  line-height: 1.2;
}

body.auth-page .auth-form textarea {
  height: auto;
  min-height: 120px;
}

body.auth-page .auth-form input:focus,
body.auth-page .auth-form select:focus,
body.auth-page .auth-form textarea:focus {
  outline: none;
  border-color: rgba(11, 111, 191, 0.45);
  box-shadow: 0 0 0 4px rgba(11, 111, 191, 0.12);
}

body.auth-page .auth-btn,
body.auth-page .auth-form button.btn-primary,
body.auth-page .auth-form input[type="submit"].btn-primary {
  width: 100%;
  height: 46px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

body.auth-page .pw-wrap {
  position: relative;
}

body.auth-page .pw-input {
  padding-right: 54px !important;
}

body.auth-page .pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  font-weight: 900;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(15, 23, 42, 0.04);
  cursor: pointer;
}

body.auth-page .auth-hint {
  margin: 12px 0 0;
  font-size: 0.95rem;
  text-align: center;
}

body.auth-page .auth-link {
  font-weight: 900;
  color: var(--blue);
  display: inline-block;
}

body.auth-page .auth-link:hover {
  text-decoration: underline;
}

@media (max-width: 420px) {
  body.auth-page .auth-card {
    padding: 16px;
  }
  body.auth-page .auth-form input,
  body.auth-page .auth-form select,
  body.auth-page .auth-form button,
  body.auth-page .auth-btn {
    height: 44px;
  }
}

/* ===================================================================== */
/* 2) DASHBOARD: STAT/COUNTERS + ROOM ROWS (RESTORE THE BEAUTY)           */
/*    Safe: only applies if your dashboard template uses these classes.   */
/* ===================================================================== */

/* --- Stats / counters (top cards) --- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 22px;
}

@media (max-width: 900px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

.stat-label {
  font-weight: 900;
  opacity: 0.7;
  letter-spacing: 0.01em;
}

.stat-value {
  font-weight: 1000;
  font-size: 1.6rem;
  color: var(--blue);
  line-height: 1;
}


.room-row h3,
.room-row .room-row-title {
  margin: 0;
  font-weight: 1000;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: 1rem;
}

.room-row .room-row-meta {
  margin: 4px 0 0;
  font-size: 0.9rem;
  opacity: 0.75;
}

.room-row .room-row-stats {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.room-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.82rem;
  background: rgba(11, 111, 191, 0.08);
  border: 1px solid rgba(11, 111, 191, 0.15);
  color: var(--blue-dark);
}

.room-pill--muted {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(0, 0, 0, 0.06);
  color: rgba(15, 23, 42, 0.75);
}

/* Actions: Images | Edit | Delete */
.room-row .room-row-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .room-row .room-row-actions {
    justify-content: flex-start;
  }
}

.room-action {
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 900;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.room-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.room-action--primary {
  border: none;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
}

.room-action--danger {
  border: 1px solid rgba(220, 38, 38, 0.22);
  background: rgba(220, 38, 38, 0.08);
  color: rgba(220, 38, 38, 0.95);
}


/* optional: makes them feel like “tiles” */
.dashboard-grid .stat-link {
  cursor: pointer;
}


.room-actions a + * {
  margin: 0;
}

/* ------------------------------ */
/* 1) TRUST STRIP: NO FLICKER     */
/* ------------------------------ */
/*
  Your freeze/flicker is coming from max-height transitions (layout reflow)
  while scroll handler toggles class rapidly.

  This override removes layout collapse and uses transform only (GPU friendly).
*/
.trust-strip {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(248, 250, 252, 0.7);
  overflow: hidden;
  max-height: 90px;
  opacity: 1;
  transition:
    max-height 0.22s ease,
    opacity 0.18s ease;
  will-change: max-height, opacity;
  max-height: none !important;
  height: 48px;
  transform: translateY(0);
  transition:
    transform 0.22s ease,
    opacity 0.18s ease;
  will-change: transform, opacity;
}

/* Hide using transform only */
body.scroll-down .trust-strip {
  max-height: 0;
  opacity: 0;
  border-top: 0;
  pointer-events: none;
  transform: translateY(-110%);
}

/* Ensure inner aligns nicely inside fixed height */
.trust-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  height: 48px;
  padding: 0 20px;
}

/* ------------------------------ */
/* 2) STATS / COUNTERS CONSISTENT */
/* ------------------------------ */

/* SERVICES counters grid */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 900px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }
}

/* SERVICES stat cards: footer-blue background + white numbers */
.stat-grid .stat-card {
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--shadow);
  border-radius: 18px;
  padding: 16px;
}

.stat-grid .stat-number {
  color: #ffffff;
  font-weight: 1000;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-grid .stat-label {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 900;
  opacity: 0.95;
  margin-top: 6px;
}

/* DASHBOARD cards: footer-blue background, BUT numbers must be black */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 12px 0 22px;
}

@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

.dashboard-grid .stat-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  text-align: left;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.dashboard-grid .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

/* dashboard number BLACK */
.dashboard-grid .stat-number {
  font-weight: 1000;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--blue);
  letter-spacing: -0.02em;
  color: #0f172a;
  font-size: 1.9rem;
}

/* dashboard label white */
.dashboard-grid .stat-label {
  font-weight: 900;
  opacity: 0.7;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  opacity: 0.95;
}

/* ------------------------------ */
/* DASHBOARD ROOM ROWS (CLEAN)    */
/* ------------------------------ */
.dashboard-rooms {
  margin-top: 6px;
}

.room-row {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 16px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.room-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

@media (max-width: 720px) {
  .room-row {
  grid-template-columns: 1fr;
  gap: 10px;
}
}

.room-row strong {
  display: block;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1rem;
}

/* Actions become buttons */
.room-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  font-weight: 900;
  opacity: 0.95;
  gap: 8px;
}

@media (max-width: 720px) {
  .room-actions {
    justify-content: flex-start;
  }
}

.room-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
  font-weight: 900;
}

.room-actions a:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  opacity: 1;
}

/* Images/Edit primary */
.room-actions a[href*="upload_room_images"],
.room-actions a[href*="edit_room"] {
  border: none;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
}

/* Delete danger */
.room-actions a[href*="delete_room"] {
  border: 1px solid rgba(220, 38, 38, 0.22);
  background: rgba(220, 38, 38, 0.08);
  color: rgba(220, 38, 38, 0.95);
}

/* ------------------------------ */
/* 3) AUTH LINK (blue)            */
/* ------------------------------ */
/* Even before we scope auth fully, make sure auth links look correct */
.auth-link {
  color: var(--blue);
  font-weight: 900;
}

.auth-link:hover {
  text-decoration: underline;
}

/* =========================================================
   ADD ROOM PAGE (Create Room) — SAFE, SCOPED STYLES ONLY
   ========================================================= */

/* --- Guide box (tabs) --- */
.guide-box {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 16px;
  margin-bottom: 16px;
}

.guide-head {
  margin-bottom: 12px;
}

.guide-title {
  margin: 0;
  font-weight: 1000;
  letter-spacing: 0.01em;
}

.guide-sub {
  margin: 6px 0 0;
  opacity: 0.75;
  line-height: 1.45;
}

.guide-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 10px;
}

.guide-tab {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  opacity: 0.95;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.guide-tab:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  opacity: 1;
}

.guide-tab.is-active {
  border: 1px solid rgba(11, 111, 191, 0.25);
  background: rgba(11, 111, 191, 0.08);
  color: var(--blue-dark);
}

.guide-panels {
  margin-top: 10px;
}

.guide-panel {
  display: none;
}

.guide-panel.is-active {
  display: block;
}

.guide-card {
  background: rgba(248, 250, 252, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 14px;
}

.guide-label {
  font-weight: 1000;
  margin-bottom: 6px;
}

.guide-text {
  opacity: 0.82;
  line-height: 1.5;
}

.guide-mini {
  margin-top: 10px;
  font-weight: 800;
  opacity: 0.9;
}

.guide-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  margin-right: 8px;
}

.guide-pill.bad {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.18);
}

/* --- Form layout grid --- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 860px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Each field block */
.form-field label {
  display: block;
  font-weight: 900;
  margin: 0 0 7px;
  opacity: 0.92;
}

/* Make Django widgets look consistent even without custom classes */
.form-card input[type="text"],
.form-card input[type="number"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card input[type="date"],
.form-card input[type="url"],
.form-card input[type="password"],
.form-card select,
.form-card textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  font-size: 0.98rem;
  line-height: 1.2;
}

.form-card textarea {
  min-height: 140px;
  resize: vertical;
}

/* Focus */
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  outline: none;
  border-color: rgba(11, 111, 191, 0.45);
  box-shadow: 0 0 0 4px rgba(11, 111, 191, 0.12);
}

/* Full-width fields */
.form-field.full {
  grid-column: 1 / -1;
}

/* Checkbox field */
.form-field.inline {
  grid-column: 1 / -1;
}

.checkbox-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 12px 12px;
  border-radius: 14px;
}

.checkbox-wrap input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

/* Errors + alerts */
.form-alert {
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-weight: 800;
  line-height: 1.4;
}

.form-alert-error {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.2);
  color: rgba(220, 38, 38, 0.95);
}

.field-error {
  margin-top: 8px;
  font-weight: 800;
  font-size: 0.9rem;
  color: rgba(220, 38, 38, 0.95);
}

.help-text {
  margin: 8px 0 0;
  opacity: 0.75;
}

/* File input */
.file-input {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  background: rgba(248, 250, 252, 0.8);
}.img-preview-grid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  display:grid;
  grid-template-columns:
    repeat(auto-fill,minmax(140px,1fr));
  gap:12px;
  margin-top:15px;
}


@media (max-width: 900px) {
  .img-preview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .img-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* show arrows only on hover */

.slider-shell:hover .slider-btn {
  opacity: 1;
}/* ================= ARROWS ================= */

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  z-index: 50;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(15, 23, 42, 0.45);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    background 0.2s ease;
  backdrop-filter: blur(8px);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  font-size: 22px;
  line-height: 1;
  display: flex;
  transition: opacity 0.2s ease;
  pointer-events: auto;
  z-index: 100;
  z-index: 5;
  width: 42px;
  height: 42px;
  font-size: 20px;
}


/* mobile devices always show */

@media (hover: none) {
  .slider-btn {
    opacity: 1;
  }
}

/* ===== DOT INDICATORS ===== */

.slider-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  gap: 6px;
}

.slider-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.slider-dot.active {
  background: #fff;
  transform: scale(1.3);
}

.map-shell {
  max-width: 1100px;
  margin: 0 auto 24px;
}

#roomsMap {
  height: 420px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.price-marker {
  background: white;
  color: #111;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.price-marker:hover {
  background: #111;
  color: white;
}

.mobile-contact-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  display: none;
  justify-content: space-between;

  padding: 10px;
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.08);

  z-index: 999;
}

.contact-btn {
  flex: 1;
  text-align: center;
  padding: 12px;
  margin: 0 5px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  color: white;
}

.contact-btn.call {
  background: #0B6FBF;
}

.contact-btn.whatsapp {
  background: #25d366;
}

.contact-btn.email {
  background: #111;
}

/* Navbar */
.navbar {
  display: flex;
  align-items: center;
  height: 70px;
}

/* Logo wrapper */
.navbar-logo {
  height: 100%;
  display: flex;
  align-items: center;
}

/* Hover effect */
.navbar-logo:hover img {
  transform: scale(1.05);
}.navbar-logo img {
  height: 80%;
  width: auto;
  display: block;
  object-fit: contain;
  transition: transform 0.2s ease;
  height: 60px;
  height: 52px;
}


/* Mobile */
@media (max-width: 768px) {
  .navbar {
    height: 60px;
  }

  /* Fixed px, not a percentage: .navbar-logo img's real ancestor in the
     header markup is .brand, which has no explicit height, so a
     percentage here resolves to nothing and the image renders at its
     native intrinsic size instead - the "logo fills the page" bug. */
  .navbar-logo img {
    height: 44px;
  }
}

/* =========================
   MEMBERSHIP TIER BUTTONS
========================= */

/* Bronze */
.tier-bronze-btn {
  background: linear-gradient(135deg, #8b5e3c, #6b4226);
  color: #fff;
  border: none;
}

.tier-bronze-btn:hover {
  background: linear-gradient(135deg, #6b4226, #5a371f);
  transform: translateY(-2px);
}

/* Silver */
.tier-silver-btn {
  background: linear-gradient(135deg, #d1d5db, #9ca3af);
  color: #111;
  border: none;
}

.tier-silver-btn:hover {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  transform: translateY(-2px);
}

/* Gold */
.tier-gold-btn {
  background: linear-gradient(135deg, #facc15, #eab308);
  color: #111;
  border: none;
  font-weight: 700;
}

.tier-gold-btn:hover {
  background: linear-gradient(135deg, #eab308, #ca8a04);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .form-card > div[style*="grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* =========================
   SIDEBAR (TOGGLE DRAWER)
   ========================= */

.sidebar {
  position: fixed;
  top: 70px;
  left: -200px; /* thinner hidden offset */

  width: 200px; /* 🔥 thinner sidebar */
  height: calc(100vh - 70px);

  /* 🌊 glassmorphism effect */
  background: rgba(219, 234, 254, 0.55); /* light blue transparent */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-right: 1px solid rgba(11, 111, 191, 0.25);

  padding: 16px;
  overflow-y: auto;

  transition: left 0.3s ease;

  z-index: 2500;
}

/* Open state */
.sidebar.open {
  left: 0;
}

/* =========================
   FLOATING ARROW TAB
   ========================= */

.sidebar-tab {
  position: fixed;
  top: 50%;
  left: 0;

  transform: translateY(-50%);

  width: 20px;
  height: 70px;

  background: linear-gradient(135deg, #0B6FBF, #002A5C);
  color: white;

  border: none;
  border-radius: 0 12px 12px 0;

  cursor: pointer;

  z-index: 3000; /* above sidebar */

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

  transition: all 0.25s ease;
}

/* Hover effect */
.sidebar-tab:hover {
  width: 48px;
}

/* =========================
   OVERLAY (optional subtle dim)
   ========================= */

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.25);

  opacity: 0;
  pointer-events: none;

  z-index: 2400;

  transition: opacity 0.2s ease;
}

.sidebar-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   MOBILE BEHAVIOR
   ========================= */

@media (max-width: 768px) {
  .sidebar {
    top: 70px;
    height: calc(100vh - 70px);
  }
}

.sidebar a {
  display: block;
  padding: 10px 12px;
  margin-bottom: 8px;

  border-radius: 10px;

  color: #1e3a8a;
  font-weight: 700;
  text-decoration: none;

  background: rgba(255, 255, 255, 0.35); /* transparent card feel */

  backdrop-filter: blur(6px);

  transition: all 0.2s ease;
}

.sidebar a:hover {
  background: rgba(255, 255, 255, 0.65);
  transform: translateX(3px);
  color: #0B6FBF;
}

.sidebar.open ~ .sidebar-tab {
  left: 260px;
  left: 200px;
}

.auth-box h2 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #0f172a;
}

.auth-option {
  width: 100%;
  border: none;
  padding: 14px;
  margin-top: 10px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: #f8fafc;
  transition: 0.2s;
}

.auth-option:hover {
  background: #eef2ff;
  transform: translateY(-2px);
}

.auth-option.driver {
  background: #FF8000;
  color: #002A5C;
}

.auth-option.driver:hover {
  background: #CC6D00;
}

@keyframes pop {
  from {
    transform: scale(0.92);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.auth-avatar-btn {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 8px 12px;

  background: white;
  border: 1px solid #ddd;
  border-radius: 999px;

  cursor: pointer;

  transition: 0.25s;
}

.auth-avatar-btn:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.auth-avatar-btn .avatar {
  width: 32px;
  height: 32px;

  border-radius: 50%;

  background: #FF8000;
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
}

/* hidden always wins */
.hidden {
  display: none !important;
}

/* modal */
.auth-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn 0.2s ease;
}

.auth-box {
  width: 320px;
  background: white;
  border-radius: 24px;
  padding: 32px 24px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
  animation: pop 0.25s ease;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ================= COMING SOON PAGES ================= */

.coming-soon-page {
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.coming-card {
  max-width: 900px;
  width: 100%;
  background: white;
  border-radius: 24px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.coming-badge {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(255, 128, 0, 0.12);
  color: #FF8000;
  font-weight: 900;
  margin-bottom: 20px;
}

.coming-card h1 {
  font-size: 3rem;
  margin-bottom: 10px;
  color: #0B6FBF;
}

.subtitle {
  font-size: 1.15rem;
  opacity: 0.75;
  margin-bottom: 40px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  text-align: left;
}

.feature {
  padding: 22px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.feature h3 {
  margin-top: 0;
  color: #002A5C;
}

.launch-note {
  margin-top: 35px;
  font-weight: 800;
  color: #FF8000;
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  .coming-card {
    padding: 24px;
  }

  .coming-card h1 {
    font-size: 2rem;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }
}

.beta-badge {
  background: #FF8000;
  color: #002A5C;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.scam-warning {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
  padding: 6px 10px;
  border-radius: 6px;
  margin: 0 auto 12px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  max-width: 420px;
}

/* THIS IS THE CRITICAL PART */
[data-slider-track] {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100%;
  height: 100%;
  transition: transform 0.35s ease-in-out;
}

/* EACH IMAGE MUST BE FULL SLIDE WIDTH */
[data-slider-track] img {
  flex: 0 0 100%;
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}
.slider-prev {
  left: 12px;
  left: 10px;
}

.slider-next {
  right: 12px;
  right: 10px;
}

.slider-btn:hover {
  background: rgba(15, 23, 42, 0.65);
  transform: translateY(-50%) scale(1.06);
  background: rgba(0, 0, 0, 0.75);
}.slider-shell {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 2;
  height: 320px;
  border-radius: 12px;
  aspect-ratio: 4 / 3;
  background: #f1f5f9;
}


/* ================= MOBILE SAFETY ================= */

@media (max-width: 768px) {
  .slider-shell {
    height: 240px;
  }

  [data-slider-track] img {
    height: 240px;
  }
}

.driver-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.driver-card {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transition: 0.25s;
}

.driver-card:hover {
  transform: translateY(-4px);
}

.driver-top {
  display: flex;
  gap: 16px;
  align-items: center;
}

.driver-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.driver-badge {
  background: #16a34a;
  color: white;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.driver-meta {
  margin-top: 18px;
  line-height: 1.8;
  color: #374151;
}

.driver-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.btn-whatsapp,
.btn-call {
  flex: 1;
  text-align: center;
  padding: 12px;
  border-radius: 10px;
  text-decoration: none;
  color: white;
  font-weight: 700;
}

.btn-whatsapp {
  background: #22c55e;
}

.btn-call {
  background: #0B6FBF;
}

.view-profile {
  display: block;
  margin-top: 16px;
  text-align: center;
  text-decoration: none;
  color: #FF8000;
  font-weight: 700;
}

.room-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: 0.25s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  display: block;
  height: auto;
  background: #fff;
  border-radius: 22px;
  border: 1px solid #e5e7eb;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  position: relative;
}

.room-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  border-color: #dbeafe;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}

/*-----INFO SECTION-----*/
.room-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.room-info {
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  display: block;
  gap: 0;
  padding: 18px;
}

.room-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.room-title {
  font-weight: 800;
  font-size: 1rem;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #0f172a;
}

.room-price {
  font-weight: 900;
  color: var(--blue);
  margin-top: 4px;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 800;
  color: #0B6FBF;
  white-space: nowrap;
  margin: 0;
}

.room-price span {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
}

.room-location {
  margin-top: 10px;
  color: #475569;
  font-size: 14px;
}

.room-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  gap: 12px;
}

.room-posted {
  margin-top: 14px;
  font-size: 13px;
  color: #94a3b8;
}

.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.82rem;
  color: #0f172a;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  width: fit-content;
  margin: 6px 0 0;
  opacity: 0.85;
  padding: 6px 10px;
  background: #ecfdf5;
  color: #047857;
  font-size: 12px;
  font-weight: 700;
}

.rating {
  color: #facc15;
  font-size: 0.85rem;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #f59e0b;
}


/*-----MOBILE IMPROVEMENT------*/
@media (max-width: 640px) {

  .room-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .room-info {
    padding: 16px;
  }

  .room-title {
    font-size: 16px;
  }

  .room-price {
    font-size: 16px;
  }

  .slider-shell {
    aspect-ratio: 16 / 12;
  }

}

/*-----IMAGE AREA-----*/
.room-media {
  position: relative;
  width: 100%;
  background: #f1f5f9;
  overflow: hidden;
}
.image-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: 170px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.image-slider::-webkit-scrollbar {
  height: 0px;
  display: none;
}

.image-slider img {
  flex: 0 0 100%;
  width: 100%;
  height: 170px;
  object-fit: cover;
  object-position: center;
  scroll-snap-align: start;
  display: block;
  background: #e5e7eb;
  min-width: 100%;
  height: 220px;
  pointer-events: none;
  flex-shrink: 0;
}

/*-----DETAIL PAGE LAYOUT-----*/
.room-detail-page {
  max-width: 1200px;
  margin: 0 auto;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.detail-title {
  margin-bottom: 8px;
}

.detail-location {
  color: #64748b;
  font-size: 15px;
}

.detail-price-wrap {
  text-align: right;
}

.detail-price {
  font-size: 34px;
  font-weight: 800;
  color: #0B6FBF;
  line-height: 1;
}

.detail-price-wrap span {
  color: #64748b;
  font-size: 14px;
}

.room-detail-card {
  background: #fff;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.06);
}

.room-detail-media {
  width: 100%;
}

.slider-shell-detail {
  aspect-ratio: 16 / 9;
  background: #f1f5f9;
}

.image-slider-detail img {
  width: 100%;
  object-fit: cover;
}

.detail-content {
  padding: 28px;
}

.detail-section {
  margin-top: 32px;
}

.detail-section h3 {
  margin-bottom: 16px;
  font-size: 20px;
}

.detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.meta-card {
  padding: 16px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.meta-label {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 6px;
}

.detail-description {
  line-height: 1.8;
  color: #334155;
}

.landlord-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.landlord-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #111827, #374151);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
}

.landlord-status {
  color: #16a34a;
  font-size: 14px;
  margin-top: 4px;
}

.detail-actions,
.contact-actions,
.auth-actions,
.report-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.contact-actions {
  margin-bottom: 24px;
}

.message-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.textarea {
  width: 100%;
  min-height: 130px;
  resize: vertical;
}

.empty-card {
  background: white;
  border-radius: 18px;
  box-shadow: var(--shadow);
  border: 1px solid #e5e7eb;
  padding: 18px;
  text-align: center;
  padding: 24px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
}


@media (max-width: 768px) {

  .detail-content {
    padding: 18px;
  }

  .detail-price {
    font-size: 28px;
  }

  .detail-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .slider-shell-detail {
    aspect-ratio: 4 / 3;
  }

}

.stat-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: white;
  padding: 22px;
  text-align: center;
  transition: 0.2s ease;
}

.dashboard-link-card{
  text-decoration:none;
  color:inherit;
  display:block;
}

.inbox-preview-card{
  margin-top:20px;
}

.inbox-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}

.inbox-header h3{
  margin:0;
}

.inbox-header p{
  margin:4px 0 0;
  opacity:.7;
  font-size:.9rem;
}

.inbox-count{
  opacity:.6;
  font-size:.85rem;
  font-weight:700;
}

.inbox-preview-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.inbox-item{
  display:flex;
  gap:14px;
  padding-top:14px;
  border-top:1px solid #eee;
}

.inbox-avatar{
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  background:#f3f4f6;
  flex-shrink:0;
}

.inbox-body{
  flex:1;
  min-width:0;
}

.inbox-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.inbox-room{
  opacity:.65;
  font-size:.85rem;
  margin-top:2px;
}

.inbox-message{
  margin-top:6px;
  line-height:1.5;
}

.inbox-footer{
  margin-top:14px;
  text-align:center;
  opacity:.6;
  font-size:.85rem;
}

.membership-card{
  margin-bottom:20px;
  border-left:4px solid #f59e0b;
}

.membership-content{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  flex-wrap:wrap;
}

.membership-content h3{
  margin-top:0;
}

.membership-id{
  margin-top:12px;
  font-weight:700;
}

.favorite-toast{
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    background:#111827;
    color:white;
    padding:12px 20px;
    border-radius:999px;
    font-weight:600;
    z-index:9999;

    opacity:0;
    visibility:hidden;

    transition:.25s ease;
}

.favorite-toast.show{
    opacity:1;
    visibility:visible;
}

@media (max-width: 768px){

  .dashboard-grid{
    grid-template-columns:1fr;
  }

  .services-grid{
    grid-template-columns:1fr;
  }

  .trust-grid{
    grid-template-columns:1fr;
  }

  .page-title{
    font-size:2rem !important;
  }

  .btn-primary,
  .btn-secondary{
    width:100%;
    text-align:center;
  }

}
.img-preview-item{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
  background: #fff;
  position:relative;
}

.img-preview-item img{
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  width:100%;
  height:140px;
  object-fit:cover;
  border-radius:10px;
}

.remove-image-btn{
    position:absolute;
    top:6px;
    right:6px;
    border:none;
    cursor:pointer;
    width:28px;
    height:28px;
    border-radius:50%;
    background:#fff;
    font-weight:bold;
}

.image-counter{
    grid-column:1/-1;
    margin-bottom:10px;
    font-size:14px;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
}
.trust-pill {
  font-weight: 800;
  font-size: 0.78rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  opacity: 0.92;
  background: #eff6ff;
  color: #0B6FBF;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}.nav-links a::after {
content: "";

position: absolute;
left: 0;
bottom: -4px;

width: 0;
height: 2px;

background: #0B6FBF;

transition: width .25s ease;
}

.nav-links a:hover::after {
width: 100%;
}

.dashboard-btn {
background: #0B6FBF;
color: white !important;

padding: 10px 16px;
border-radius: 12px;

font-weight: 700;
}

.dashboard-btn:hover {
background: #002A5C;
transform: translateY(-1px);
}

.dashboard-btn::after {
display: none;
}

@media (max-width: 768px) {

.trust-pill {
display: none;
}

}

.site-footer .fab {
  transition: all .2s ease;
}

.site-footer a:hover .fab {
  transform: translateY(-2px) scale(1.08);
  opacity: .8;
}

.sidebar-divider{
    border:0;
    border-top:1px solid rgba(0,0,0,.08);
    margin:18px 0;
}

.search-toolbar-wrapper.scrolled{

    box-shadow:0 8px 24px rgba(0,0,0,.12);

    /* Compact mode: once the page has scrolled, tighten the toolbar's
       own spacing so it takes up less vertical real estate and stops
       competing with the room cards for screen space. Input/button
       sizes are untouched here on purpose — this only trims the
       wrapper's padding and the gap below it, so tap targets stay
       full-size and accessible. */
    padding: 6px 0;

}

.search-toolbar-wrapper.scrolled .search-toolbar{

    margin-bottom: 0;

}.search-toolbar-wrapper{
    position:sticky;
    top:70px;              /* adjust to your navbar height */
    z-index:1000;

    background:#ffffff;

    padding:12px 0;

    border-bottom:1px solid #e5e7eb;

    box-shadow:0 4px 18px rgba(0,0,0,.06);
    transform: translateY(0);
    transition: transform 0.25s ease, box-shadow 0.2s ease, padding 0.2s ease;
    will-change: transform;
}


@media (max-width:768px){

.search-toolbar-wrapper{

    top:60px;

    padding:10px 0;

}

.search-toolbar-wrapper.scrolled{

    padding: 4px 0;

}

}/* Hidden while scrolling down (mobile-app style, like Booking.com/Airbnb) —
   slides fully out of view above the sticky header, and slides back in
   the instant the user scrolls up or reaches the top of the page.
   Direction detection lives in room_list.html's scroll listener. */
.search-toolbar-wrapper.toolbar-hidden {
    transform: translateY(-110%);
}

.search-toolbar{

    max-width:1100px;

    margin:0 auto;

    padding:0 16px;

}
/* Used across home.html, membership.html, payment_page.html - was
   referenced everywhere but never actually defined until now. */
.text-muted {
  color: #64748b;
}


/* =====================================================================
   FOOTER — professional multi-column layout (Company / Platform /
   Legal / Support / Contact), replacing the old single-row link lists.
===================================================================== */
.footer-columns {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 30px auto;
  text-align: left;
}

@media (max-width: 900px) {
  .footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .footer-columns {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.footer-col h4 {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

.footer-col a,
.footer-col .footer-soon {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 11px;
  transition: opacity 0.2s ease;
}

.footer-col a:hover {
  opacity: 1;
  text-decoration: underline;
}

.footer-col .footer-soon {
  opacity: 0.5;
  cursor: default;
}

.footer-divider {
  max-width: 1100px;
  margin: 10px auto 20px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
/* =====================================================================
   MINIMAL SPACING UTILITIES
   9 templates already use these Bootstrap-style class names (py-5,
   mt-3/4/5, mb-5) expecting spacing utilities, but none were ever
   defined anywhere in the project - completely dead classes. Adding
   only the exact set actually used, not a full utility framework.
===================================================================== */
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mb-5 { margin-bottom: 3rem; }

@media (max-width: 600px) {
  .py-5 { padding-top: 1.75rem; padding-bottom: 1.75rem; }
  .mt-5 { margin-top: 1.75rem; }
  .mb-5 { margin-bottom: 1.75rem; }
}

/* =====================================================================
   CREATE-ROOM FORM — section grouping
   The form has 19 fields with no visual grouping (one long flat list).
   These classes break it into clear sections and give the multi-unit-
   specific fields a native <details> disclosure so a landlord listing
   one available room (the common case, and already the model's
   default) sees a short form, not a wall of fields. No JS added -
   <details>/<summary> is native HTML, and the existing availability
   JS in create_room.html targets field IDs, which don't move.
===================================================================== */
.form-section-title {
  grid-column: 1 / -1;
  margin: 18px 0 2px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.form-grid > .form-section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.form-section-details {
  grid-column: 1 / -1;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 4px 16px;
  background: #f8fafc;
}

.form-section-details summary {
  cursor: pointer;
  padding: 12px 0;
  font-weight: 700;
  color: #1e293b;
  list-style: none;
}

.form-section-details summary::-webkit-details-marker {
  display: none;
}

.form-section-details summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s ease;
  color: #0B6FBF;
}

.form-section-details[open] summary::before {
  transform: rotate(90deg);
}

.form-section-details .form-grid {
  padding-bottom: 16px;
}

/* =====================================================================
   AVAILABILITY STATE — color-coded badges so vacant vs occupied is
   obvious at a glance on room cards and the landlord's room list,
   instead of relying purely on reading the text.
===================================================================== */
.availability-badge.available {
  background: #dcfce7;
  color: #15803d;
}

.availability-badge.occupied {
  background: #fee2e2;
  color: #b91c1c;
}

.availability-badge.upcoming {
  background: #fef3c7;
  color: #92400e;
}

/* Quick vacancy toggle on the landlord's room list */
.vacancy-toggle-form {
  display: inline-block;
}

.vacancy-toggle-btn {
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.vacancy-toggle-btn.mark-occupied {
  color: #b91c1c;
  border-color: #fecaca;
}

.vacancy-toggle-btn.mark-occupied:hover {
  background: #fef2f2;
}

.vacancy-toggle-btn.mark-available {
  color: #15803d;
  border-color: #bbf7d0;
}

.vacancy-toggle-btn.mark-available:hover {
  background: #f0fdf4;
}