/* ===== Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', Arial, Helvetica, sans-serif; }
body { background: #f4f6f8; color: #222; }

/* Scroll anchoring off. Collapsing the search bar makes the page about 20px
   shorter, and the browser's anchoring would "helpfully" adjust scrollTop to
   keep the content visually still. That moved the bar's stick/unstick marker
   relative to the viewport, which flipped its state, which changed the height
   again — near the threshold the bar swapped between stuck and unstuck on every
   frame. The card grid uses fixed aspect ratios, so nothing here depends on
   anchoring to avoid jumping. */
html { overflow-anchor: none; }

/* ===== Header: logo left / nav right (mirrors CityUHK homepage) ===== */
.site-header {
  display: flex; justify-content: space-between; align-items: center;
  background: #fff; padding: 14px 32px;
  border-bottom: 3px solid #b8003d;   /* CityU red accent */
  position: sticky; top: 0; z-index: 100;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  /* Clickable: returns to the main page (data-goto="home" in index.html). */
  cursor: pointer;
  border-radius: 6px;
  transition: opacity 0.2s ease;
}

.logo:hover { opacity: 0.85; }

.logo:focus-visible {
  outline: 3px solid #b8003d;
  outline-offset: 3px;
}
.logo-img {
  display: block;
  width: 380px;
  max-width: calc(100vw - 90px);
  max-height: 100px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.logo-mark {
  background: #b8003d; color: #fff; font-weight: bold;
  padding: 6px 10px; border-radius: 4px;
}
.logo-text { font-size: 18px; font-weight: 600; }

/* ===== Navbar Wrap & Nav Buttons (mirrors CityU navbar-nav-wrap settings) ===== */
.main-nav,
.navbar-nav-wrap {
  display: flex;
  align-items: center;
  gap: min(1.6vw, 24px);
}

.nav-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Montserrat', Arial, 'Microsoft YaHei', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  color: #000;
  -webkit-text-fill-color: #000;
  padding: 10px min(1.2vw, 18px);
  border-radius: 4px;
  position: relative;
  transition: color 0.25s ease, background 0.25s ease;
  white-space: nowrap;
  outline: none;
}

/* Hover on all buttons (including current active page): linear gradient */
.nav-btn:hover,
.nav-btn:focus-visible {
  background-image: linear-gradient(to right,
    #DF7433 0%, #DA562B 35%, #CC103C 80%, #9F0D43 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #9F0D43 !important;
  outline: none;
}

/* Resting state (when not hovered): active button stays solid black without linear color */
.nav-btn.active:not(:hover) {
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #000 !important;
  color: #000 !important;
  font-weight: 700;
}

/* ===== CityU Standard Webpage Buttons ===== */
.button, .btn {
  background-image: linear-gradient(to right, #DF7433 0%, #DA562B 35%, #CC103C 80%, #9F0D43 100%);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-decoration: none;
  cursor: pointer;
  min-width: 120px;
  overflow: hidden;
  padding: 12px 20px;
  position: relative;
  z-index: 1;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.button::before, .btn::before {
  background-image: linear-gradient(to right, #DA562B 0%, #CC103C 25%, #9F0D43 100%);
  content: '';
  inset: 0;
  opacity: 0;
  position: absolute;
  z-index: -1;
  border-radius: 6px;
  transition: opacity 0.3s linear;
}
.button:hover::before, .button:focus::before,
.btn:hover::before, .btn:focus::before {
  opacity: 1;
}
.button-light {
  background-color: #fff;
  border: 1px solid #DADADA;
  border-radius: 6px;
  color: #9F0D43;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-decoration: none;
  cursor: pointer;
  min-width: 120px;
  overflow: hidden;
  padding: 12px 20px;
  position: relative;
  z-index: 1;
  transition: all 0.2s linear;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.button-light span {
  background-image: linear-gradient(to right, #DF7433 0%, #DA562B 35%, #CC103C 80%, #9F0D43 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.button-light:hover, .button-light:focus {
  background-color: #DBDBDB;
}

/* ===== CityU Style Navbar Toggler & Offcanvas ===== */
.navbar-toggler {
  display: none;
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
  outline: none;
}
.navbar-toggler:focus {
  outline: none;
}
.navbar-toggler-icon {
  display: block;
  width: 26px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Cpath stroke='%23272727' stroke-linecap='round' stroke-width='2.5' d='M1 2h24M1 10h24M1 18h24'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.offcanvas-header {
  display: none;
}
.btn-close {
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  color: #272727;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s ease;
}
.btn-close:hover {
  color: #b8003d;
}
.offcanvas-backdrop {
  display: none;
}

/* ===== Pages ===== */
main { max-width: 1100px; margin: 0 auto; padding: 32px 20px; }
.page { display: none; }
.page.active { display: block; }

/* ===== Home: full-bleed hero, project intro, team ===== */

/* The home page manages its own width so the hero can run edge to edge. */
body.home-active main {
  max-width: none;
  padding: 0;
}

.home-page { padding-bottom: 0; }

.home-hero {
  --skew-angle: 3deg;
  --skew-lift: 2.6vw;
  --skew-radius: 80px;

  position: relative;
  min-height: min(78vh, 720px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;      /* clips the skewed layer to the hero box */
  isolation: isolate;    /* keeps the z-index:-1 layer inside this section */
  /* No background here - the cut below the photo shows the page behind it. */
}

.hero-media {
  position: absolute;
  left: 0;
  top: calc(-1 * (var(--skew-lift) + 1vw));
  height: calc(100% + 1vw);
  width: 100%;
  overflow: hidden;      /* keeps the photo inside the rounded corner */
  z-index: -1;
  /* Shows through whenever cityu.png is absent. */
  background: linear-gradient(135deg, #DF7433 0%, #CC103C 55%, #9F0D43 100%);
  transform: skew(0deg, calc(-1 * var(--skew-angle)));
  border-radius: 0 0 var(--skew-radius) 0;
}

.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* cityu.png is 3:2 with sky at the top and plaza at the bottom, so bias the
     crop slightly low to keep the buildings in frame. */
  object-position: center 55%;
  display: block;
  filter: saturate(0.94) contrast(1.03);
}

/* Set by app.js when the photo fails to load. */
.hero-photo.is-missing { display: none; }

/* Inside .hero-media, so it is shaped by the same skew and cut. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(18, 4, 11, 0.88) 0%,
    rgba(18, 4, 11, 0.52) 40%,
    rgba(18, 4, 11, 0.16) 72%,
    rgba(159, 13, 67, 0.30) 100%);
}

.hero-content {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px 96px;
  color: #fff;
  animation: heroRise 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.2s;
}

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

.hero-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFD9C2;
  margin-bottom: 16px;
}

.hero-title {
  font-size: clamp(38px, 6vw, 72px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.4);
}

.hero-lede {
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.6;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.93);
  /* No margin below - the hero CTAs were removed, so the copy is the last
     element and the hero's own bottom padding sets the spacing. */
  margin-bottom: 0;
}

/* --- Shared section shell --- */
.home-section { padding: 90px 0; scroll-margin-top: 120px; }
.home-team { background: #fff; border-top: 1px solid #ececec; }

.home-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
}

.section-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background-image: linear-gradient(to right, #DF7433 0%, #CC103C 80%, #9F0D43 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #1a1a1a;
  margin-bottom: 16px;
}

.section-lede {
  font-size: 16px;
  line-height: 1.7;
  color: #5a5a5a;
  max-width: 720px;
  margin-bottom: 48px;
}

/* --- Stat callouts (mirrors CityUHK's "at a glance") --- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #e4e4e4;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 64px;
}

.stat {
  background: #f4f6f8;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.home-team .stat { background: #fff; }

.stat-num {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  background-image: linear-gradient(to bottom right, #DF7433, #CC103C 60%, #9F0D43);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  font-size: 13px;
  font-weight: 600;
  color: #666;
  line-height: 1.4;
}

/* --- Feature cards (mirrors CityUHK's Spotlight grid) --- */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.feature-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.feature-card:hover,
.feature-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.16);
  outline: none;
}

.feature-card:focus-visible { box-shadow: 0 0 0 3px #b8003d, 0 18px 38px rgba(0, 0, 0, 0.16); }

.feature-media { aspect-ratio: 4 / 3; overflow: hidden; background: #e8ecef; }

.feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-card:hover .feature-media img { transform: scale(1.06); }

.feature-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.feature-body h3 { font-size: 19px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; }
.feature-body p { font-size: 14px; line-height: 1.65; color: #5f5f5f; flex: 1; }

.feature-link {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 700;
  color: #9F0D43;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.feature-card:hover .feature-link { text-decoration: underline; }

/* --- Team (mirrors CityUHK's "MEET OUR PEOPLE", text only) --- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.team-card {
  position: relative;
  background: #f7f8fa;
  border-radius: 10px;
  padding: 26px 22px 28px;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/* Brand rule along the top edge of each card */
.team-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background-image: linear-gradient(to right, #DF7433 0%, #CC103C 60%, #9F0D43 100%);
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.10);
}

.team-name { font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px; }

.team-role {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9F0D43;
}

/* --- Scroll reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-content { animation: none; }
  .feature-card:hover, .team-card:hover { transform: none; }
}

@media (max-width: 980px) {
  .feature-cards { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-content { padding: 0 28px 88px; }
  .home-inner { padding: 0 28px; }
}

@media (max-width: 560px) {
  /* 80px is a fifth of a phone's width, so shrink the corner with the screen.
     The angle and lift stay paired - do not change one without the other. */
  .home-hero { --skew-radius: 40px; }
  .stat-row { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .home-section { padding: 64px 0; }
}

/* ===== Housing (Listing Structure & Aesthetics) ===== */
body.housing-active main { 
  max-width: 1380px;
  padding: 24px 28px 80px;
}

.housing-page {
  animation: fadeIn 0.25s ease;
}

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

/* --- Listing Search Capsule Bar --- */
.listing-search-container {
  display: flex;
  justify-content: center;
  margin: 10px 0 24px;
  /* Pins just below the sticky site header; --header-h is set from app.js. */
  position: sticky;
  top: var(--header-h, 96px);
  z-index: 90;
  transition: margin 0.2s ease, padding 0.2s ease;
}

/* Zero-height marker above the search bar. The bar is `position: sticky`, and
   its own rect is what the scroll handler used to read — but collapsing the bar
   changes its height, so the measurement changed the thing it measured: the
   page height shifted on every toggle, which fired more scroll events, which
   re-ran the handler. On a short filtered list (a short lease cuts 32 listings
   to 3) that showed up as the page scrolling by itself. This marker sits before
   the bar, so its position is unaffected by the bar's height. */
.search-stick-sentinel {
  height: 0;
}

/* Collapsed pill once the bar reaches the header */
.listing-search-container.is-stuck {
  padding: 10px 0 12px;
  margin: 0 0 12px;
  background: linear-gradient(to bottom, #f4f6f8 76%, rgba(244, 246, 248, 0));
}

.listing-search-container.is-stuck .listing-search-bar {
  max-width: 460px;
  /* Vertical padding held at 8px, matching the expanded state: changing it here
     would be a second source of height change at the stick threshold. */
  padding: 8px 8px 8px 12px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

.listing-search-container.is-stuck .search-segment,
.listing-search-container.is-stuck .search-divider {
  display: none;
}

.listing-search-container.is-stuck .search-compact-summary {
  display: flex;
  /* Roughly the height of the segment row this replaces, so collapsing the bar
     barely changes the page height. Approximate on purpose — it only needs to
     be close, and correctness does not depend on it. */
  min-height: 38px;
}

.listing-search-container.is-stuck .search-submit-btn {
  width: 38px;
  height: 38px;
  margin-left: 0;
}

/* Collapsed summary pill contents (hidden until the bar sticks) */
.search-compact-summary {
  display: none;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 0 4px 0 10px;
}

.compact-icon {
  font-size: 15px;
  line-height: 1;
}

.compact-text {
  font-size: 14px;
  font-weight: 700;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-search-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #dddddd;
  border-radius: 40px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  padding: 8px 10px 8px 18px;
  max-width: 860px;
  width: 100%;
  position: relative;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.listing-search-bar:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.search-segment {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 4px 14px;
  border-radius: 28px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
}

.search-segment:hover {
  background: #f7f7f7;
}

.search-segment-who {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-right: 4px;
}

.segment-text {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.search-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #222;
  margin-bottom: 2px;
}

.search-input {
  border: none;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  color: #222;
  font-weight: 500;
  outline: none;
  width: 100%;
  padding: 0;
}

.search-input::placeholder {
  color: #717171;
  font-weight: 400;
}

.search-select {
  border: none;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
  color: #484848;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  padding: 0;
}

.search-divider {
  width: 1px;
  height: 32px;
  background: #e0e0e0;
  margin: 0 2px;
  flex-shrink: 0;
}

.search-submit-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #FF385C 0%, #E00B41 50%, #D70466 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 8px;
  transition: transform 0.15s ease, opacity 0.15s ease;
  box-shadow: 0 2px 8px rgba(224, 11, 65, 0.35);
}

.search-submit-btn:hover {
  transform: scale(1.04);
  opacity: 0.95;
}

.search-icon {
  width: 16px;
  height: 16px;
}

/* Quick destination dropdown */
.search-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  width: 360px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  border: 1px solid #ebebeb;
  padding: 16px;
  z-index: 200;
  display: none;
}

.search-dropdown.show {
  display: block;
  animation: dropdownPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownPop {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dropdown-heading {
  font-size: 12px;
  font-weight: 700;
  color: #717171;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 12px 10px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.dropdown-item:hover {
  background: #f7f7f7;
}

.dropdown-icon {
  font-size: 20px;
  background: #f0f2f5;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
}

.dropdown-title {
  font-size: 14px;
  font-weight: 600;
  color: #222;
}

.dropdown-sub {
  font-size: 12px;
  color: #717171;
}

/* --- Category Horizontal Bar --- */
.listing-category-bar-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 20px;
  position: relative;
}

.cat-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  color: #222;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.cat-nav-btn:hover {
  border-color: #222;
  transform: scale(1.05);
}

.listing-category-bar {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE */
  padding: 4px 2px;
  flex: 1;
}

.listing-category-bar::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 4px 12px;
  cursor: pointer;
  opacity: 0.65;
  white-space: nowrap;
  font-family: inherit;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.cat-item:hover {
  opacity: 1;
  border-bottom-color: #ddd;
}

.cat-item.active {
  opacity: 1;
  border-bottom: 2px solid #222;
}

.cat-icon {
  font-size: 22px;
  line-height: 1;
}

.cat-label {
  font-size: 12px;
  font-weight: 600;
  color: #222;
}

.listing-filter-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 24px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: #222;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.listing-filter-btn:hover {
  border-color: #000;
}

.filter-svg {
  width: 15px;
  height: 15px;
}

.filter-badge {
  background: #222;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 12px;
  padding: 2px 7px;
  line-height: 1.2;
}

/* --- Subbar: Results Count & Utilities Switch --- */
.listing-subbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebebeb;
}

.results-count {
  font-size: 14px;
  font-weight: 600;
  color: #484848;
}

.price-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  padding: 8px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 30px;
}

.toggle-label {
  font-size: 13px;
  font-weight: 600;
  color: #222;
}

/* Toggle switch styling */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #b0b0b0;
  transition: 0.25s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.25s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

input:checked + .slider {
  background-color: #222222;
}

input:checked + .slider:before {
  transform: translateX(20px);
}

/* --- Listing Cards Grid --- */
.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 36px 24px;
  margin-bottom: 60px;
}

.listing-card {
  background: transparent;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.15s ease;
  display: flex;
  flex-direction: column;
}

.card-media-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 20 / 19;
  border-radius: 14px;
  overflow: hidden;
  background: #e8ecef;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s ease, transform 0.3s ease;
}

.listing-card:hover .card-image {
  transform: scale(1.02);
}

/* Badges */
.card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.95);
  color: #222;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  z-index: 2;
}

.badge-guest-fav {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
}

.badge-laurel {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: #222;
}

/* Wishlist heart */
.wishlist-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 3;
  outline: none;
  transition: transform 0.15s ease;
}

.wishlist-btn:hover {
  transform: scale(1.15);
}

.heart-svg {
  width: 24px;
  height: 24px;
  fill: rgba(0, 0, 0, 0.4);
  stroke: #fff;
  stroke-width: 2.2;
  transition: fill 0.2s ease, stroke 0.2s ease;
}

.wishlist-btn.saved .heart-svg {
  fill: #FF385C;
  stroke: #FF385C;
}

.heart-bounce {
  animation: heartPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes heartPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Carousel Prev/Next Chevrons */
.card-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 50%;
  color: #222;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.15s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.listing-card:hover .card-nav-arrow {
  opacity: 1;
}

.card-arrow-prev { left: 8px; }
.card-arrow-next { right: 8px; }

.card-nav-arrow:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.08);
}

/* Card Dots */
.card-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 2;
}

.card-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.card-dot.active {
  background: #fff;
  transform: scale(1.2);
}

/* Card Body text */
.card-body {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.card-location {
  font-size: 15px;
  font-weight: 700;
  color: #222;
}

.card-rating {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  display: flex;
  align-items: center;
  gap: 2px;
}

.card-reviews-count {
  color: #717171;
  font-weight: 400;
  font-size: 13px;
}

.card-subtext {
  font-size: 14px;
  color: #717171;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.commute-info {
  color: #484848;
  font-weight: 500;
}

.card-price-row {
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.card-price {
  font-size: 15px;
  font-weight: 700;
  color: #222;
}

.card-period {
  font-size: 14px;
  color: #717171;
}

.zero-fee-pill {
  font-size: 11px;
  font-weight: 700;
  background: #e6f4ea;
  color: #137333;
  padding: 1px 8px;
  border-radius: 10px;
  margin-left: auto;
}

/* "Total" line, revealed on hover as the amount due before taxes.
   Space is always reserved so the grid never reflows on hover. */
.card-total-line {
  font-size: 13px;
  font-weight: 600;
  color: #717171;
  text-decoration: underline;
  margin-top: 3px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.listing-card:hover .card-total-line,
.listing-card:focus-within .card-total-line {
  opacity: 1;
  transform: translateY(0);
}

/* --- Empty state --- */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.empty-state h3 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #222;
}

.empty-state p {
  color: #717171;
  font-size: 15px;
  max-width: 440px;
  margin: 0 auto 20px;
}

/* --- Floating "Show map / Show list" button --- */
.floating-map-btn-wrap {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
}

.floating-map-btn {
  background: #222;
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  transition: transform 0.15s ease, background 0.15s ease;
}

.floating-map-btn:hover {
  transform: scale(1.05);
  background: #000;
}

.floating-map-icon {
  font-size: 16px;
}

/* --- Interactive Map View --- */
.listing-map-view {
  margin-bottom: 70px;
}

.map-view-container {
  display: grid;
  grid-template-columns: 550px 1fr;
  gap: 24px;
  min-height: 650px;
}

.map-view-listings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding-right: 12px;
}

.map-view-canvas {
  position: sticky;
  top: 100px;
  height: calc(100vh - 180px);
  min-height: 520px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.svg-map-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.vector-campus-map {
  width: 100%;
  height: 100%;
  display: block;
}

.map-pins-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.map-price-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  background: #fff;
  color: #222;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 20px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.22);
  border: 1px solid rgba(0,0,0,0.08);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  user-select: none;
}

.map-price-pin:hover,
.map-price-pin.active {
  background: #222;
  color: #fff;
  transform: translate(-50%, -50%) scale(1.12);
  z-index: 10;
}

.listing-card.map-highlight {
  outline: 2px solid #222;
  border-radius: 16px;
}

/* --- Modals Shared Styling --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  padding: 20px;
}

.modal-backdrop.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222;
  transition: background 0.15s ease;
}

.modal-close-btn:hover {
  background: #f0f0f0;
}

/* --- Filter Modal --- */
.listing-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 620px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
  transform: translateY(20px);
  transition: transform 0.25s ease;
  overflow: hidden;
}

.modal-backdrop.show .listing-modal {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid #ebebeb;
}

.modal-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #222;
}

.modal-content {
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.filter-section h4 {
  font-size: 17px;
  font-weight: 700;
  color: #222;
  margin-bottom: 6px;
}

.filter-sub {
  font-size: 13px;
  color: #717171;
  margin-bottom: 14px;
}

.price-slider-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.price-dash {
  color: #888;
  font-size: 20px;
}

.price-input-box {
  flex: 1;
  border: 1px solid #b0b0b0;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
}

.price-input-box label {
  font-size: 11px;
  color: #717171;
  font-weight: 600;
}

.price-input-box span {
  font-size: 15px;
  font-weight: 600;
  color: #222;
  margin-top: 2px;
}

.price-input-box input {
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #222;
  width: 70%;
}

.filter-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-chip {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 24px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #222;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-chip:hover {
  border-color: #222;
}

.filter-chip.active {
  background: #222;
  color: #fff;
  border-color: #222;
}

.property-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.prop-type-option {
  cursor: pointer;
  position: relative;
}

.prop-type-option input {
  position: absolute;
  opacity: 0;
}

.prop-box {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border: 1px solid #ddd;
  border-radius: 12px;
  transition: all 0.15s ease;
}

.prop-type-option input:checked + .prop-box {
  border: 2px solid #222;
  background: #fcfcfc;
}

.prop-title {
  font-size: 14px;
  font-weight: 700;
  color: #222;
}

.prop-desc {
  font-size: 12px;
  color: #717171;
  margin-top: 2px;
}

.amenities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.amenity-cb-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #222;
  cursor: pointer;
}

.amenity-cb-label input {
  width: 18px;
  height: 18px;
  accent-color: #222;
  cursor: pointer;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-top: 1px solid #ebebeb;
}

.btn-clear-filters {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  color: #222;
  cursor: pointer;
  font-family: inherit;
}

.btn-apply-filters {
  background: #222;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-apply-filters:hover {
  background: #000;
}

/* --- Listing Detail Modal ---
   Presented as a full page rather than a card in the middle of the screen, the
   way a room-rental detail page does: the five-photo gallery needs the full width to
   read as a gallery, and the booking widget can then stick alongside the copy.
   The scroll container stays the modal itself, so the widget's `position:
   sticky` still resolves against it. */
#detailModalBackdrop {
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
}

.listing-detail-modal {
  background: #fff;
  border-radius: 0;
  width: 100%;
  max-width: none;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  box-shadow: none;
  /* Centres the content at a comfortable reading width on large screens
     without needing an extra wrapper element. The header bar reuses
     --detail-gutter as a negative margin so it can bleed to the window edges
     while its contents stay aligned with the page. */
  --detail-gutter: max(24px, calc((100vw - 1200px) / 2));
  padding: 0 var(--detail-gutter) 72px;
  position: relative;
}

.modal-backdrop.show .listing-detail-modal {
  transform: none;
}

/* Stays put while the page scrolls, so the close button is always reachable.
   It is transparent at the top of the page — the gallery should read as the
   top of the page, not sit under a chrome band — and gains a solid background
   and hairline divider as soon as you scroll, which is when content would
   otherwise start passing underneath it. app.js toggles .is-scrolled. */
.detail-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 5;
  /* Negative gutter margin + matching padding = full-window-width bar whose
     contents still line up with the rest of the page. */
  margin: 0 calc(-1 * var(--detail-gutter)) 12px;
  padding: 14px var(--detail-gutter);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.2s ease, border-bottom-color 0.2s ease;
}

.listing-detail-modal.is-scrolled .detail-header-bar {
  background: #fff;
  border-bottom-color: #ececec;
}

.detail-top-actions {
  display: flex;
  gap: 12px;
}

.detail-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  font-family: inherit;
}

.detail-action-btn:hover {
  background: #f7f7f7;
}

.detail-action-btn.saved {
  color: #FF385C;
}

.detail-action-btn.saved .heart-svg {
  fill: #FF385C;
  stroke: #FF385C;
}

.detail-svg {
  width: 16px;
  height: 16px;
}

.detail-title-section h2 {
  font-size: 24px;
  font-weight: 700;
  color: #222;
  margin-bottom: 6px;
}

.detail-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  color: #222;
  margin-bottom: 18px;
}

/* Rental facts in the detail modal. The grid auto-fits, so the cells reflow
   from one row down to a two-up stack on narrow screens with no media query.
   Cells are omitted per listing (gross area, street address), so the track
   count varies. */
.detail-spec-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid #ececec;
  border-radius: 12px;
  background: #faf7f8;
}

.spec-cell { display: flex; flex-direction: column; gap: 3px; }

.spec-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9F0D43;
}

.spec-value {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  line-height: 1.35;
}

/* Floor plan. The SVG is drawn in feet and scaled to a fixed viewBox, so the
   frame only has to keep it centred and give the drawing room to breathe. */
.floorplan-frame {
  display: flex;
  justify-content: center;
  padding: 18px;
  border: 1px solid #ececec;
  border-radius: 12px;
  background: #fcfcfc;
}

.floorplan-svg {
  width: 100%;
  max-width: 560px;
  height: auto;
}

/* 28hse's estate plans are tall architectural drawings, so let them use the
   full column width and be readable rather than cropped to a card shape. */
.floorplan-img {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
  border-radius: 6px;
}

.floorplan-note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #767676;
}

.detail-link {
  color: #222;
  font-weight: 600;
  text-decoration: underline;
}

/* 5-Photo Mosaic Gallery */
.detail-photo-gallery {
  display: grid;
  grid-template-columns: 2fr 1.2fr;
  gap: 8px;
  border-radius: 16px;
  overflow: hidden;
  height: 460px;
  margin-bottom: 30px;
  position: relative;
}

/* The tiles crop to fill the grid, so the whole photo is only reachable
   through the lightbox — make that affordance obvious. */
.detail-photo-gallery img { cursor: zoom-in; }

/* "Show all photos" control. Absolutely positioned so it does not
   become a third grid child and break the mosaic. */
.gallery-show-all {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid #222;
  border-radius: 8px;
  background: #fff;
  color: #222;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: background 0.15s ease;
}

.gallery-show-all:hover { background: #f7f7f7; }

.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  height: 100%;
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Full-screen photo lightbox ---
   The mosaic tiles use object-fit: cover, so they crop. This shows the photo
   whole (object-fit: contain) and pages through the set with arrows, the
   keyboard, or a click on the backdrop. Sits above the detail modal (1100). */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
}

.photo-lightbox.show { display: flex; }

.lightbox-image {
  max-width: 94vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 6px;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: 50%;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.3); }

.lightbox-close {
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  font-size: 26px;
}

.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 30px;
  padding-bottom: 4px;
}

.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }

.lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* Detail Split Columns */
.detail-columns {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
}

.detail-host-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-host-row h3 {
  font-size: 19px;
  font-weight: 700;
  color: #222;
}

.detail-host-row p {
  color: #717171;
  font-size: 14px;
  margin-top: 4px;
}

/* Host avatars are Irasutoya illustrations — a full figure on a transparent
   background, not a photograph. `contain` plus a little padding keeps the whole
   character inside the circle; `cover` would zoom in and cut off the head. */
.host-avatar-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: contain;
  background: #f6f3f4;
  padding: 3px;
}

.detail-divider {
  height: 1px;
  background: #ebebeb;
  margin: 24px 0;
}

.highlights-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.highlight-item {
  display: flex;
  gap: 16px;
}

.hl-icon {
  font-size: 24px;
  line-height: 1.2;
}

.hl-title {
  font-size: 15px;
  font-weight: 700;
  color: #222;
}

.hl-desc {
  font-size: 13px;
  color: #717171;
  margin-top: 2px;
}

.detail-section h3 {
  font-size: 18px;
  font-weight: 700;
  color: #222;
  margin-bottom: 12px;
}

.description-text {
  font-size: 14px;
  line-height: 1.65;
  color: #333;
}

.student-tips-callout {
  margin-top: 14px;
  background: #fcf4e8;
  border-left: 4px solid #DF7433;
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.5;
  color: #5d3b00;
}

.amenities-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.amenity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #333;
}

.amenity-item.unavailable {
  opacity: 0.4;
  text-decoration: line-through;
}

.sub-gray {
  color: #717171;
  font-size: 13px;
}

/* Sticky Booking Widget */
.detail-right {
  position: relative;
}

.booking-widget-card {
  position: sticky;
  top: 20px;
  border: 1px solid #ddd;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  background: #fff;
}

.booking-price-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
}

.big-price {
  font-size: 22px;
  font-weight: 800;
  color: #222;
}

.price-unit {
  font-size: 14px;
  color: #717171;
}

/* Area and per-sq-ft rate directly under the price — the two figures Hong
   Kong renters compare before anything else. A block, so it wraps onto its
   own line inside the price column instead of stretching the flex row. */
.widget-area-note {
  font-size: 12px;
  color: #717171;
  margin-top: 3px;
}

.widget-rating {
  font-size: 13px;
}

.booking-form-box {
  border: 1px solid #b0b0b0;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}

.form-row-double {
  display: flex;
  border-bottom: 1px solid #b0b0b0;
}

.form-cell {
  flex: 1;
  padding: 8px 12px;
}

.form-cell:first-child {
  border-right: 1px solid #b0b0b0;
}

.form-row-single {
  padding: 8px 12px;
}

.form-cell label, .form-row-single label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #222;
  display: block;
  margin-bottom: 2px;
}

.booking-input, .booking-select {
  border: none;
  background: transparent;
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  color: #222;
  outline: none;
  font-weight: 500;
}

.booking-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, #FF385C 0%, #E00B41 50%, #D70466 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 4px 12px rgba(224, 11, 65, 0.3);
}

.booking-submit-btn:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

.no-charge-text {
  text-align: center;
  font-size: 12px;
  color: #717171;
  margin: 12px 0 16px;
}

.price-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.breakdown-line {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #484848;
}

.discount-green {
  color: #137333;
  font-weight: 600;
}

.breakdown-divider {
  height: 1px;
  background: #ebebeb;
  margin: 6px 0;
}

.breakdown-total {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 700;
  color: #222;
}

.breakdown-note {
  font-size: 12px;
  color: #717171;
  margin-top: 8px;
}

/* --- Toast Notification --- */
.toast-notification {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: #222;
  color: #fff;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 2000;
  transform: translateY(100px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  max-width: 380px;
}

.toast-notification.show {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.toast-icon {
  font-size: 24px;
}

.toast-text strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}

.toast-text p {
  font-size: 12px;
  color: #ccc;
  margin: 0;
}

/* Responsive adjustments for housing */
@media (max-width: 980px) {
  .map-view-container {
    grid-template-columns: 1fr;
  }
  .map-view-canvas {
    display: none;
  }
  .detail-columns {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .detail-photo-gallery {
    grid-template-columns: 1fr;
    height: 320px;
  }
  /* Only the main tile is shown at this width, so the gallery is really a
     one-photo teaser — the "show all" button is the way through to the rest. */
  .gallery-grid {
    display: none;
  }
  .lightbox-nav {
    width: 42px;
    height: 42px;
    font-size: 24px;
  }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-close { top: 12px; right: 12px; }
}

@media (max-width: 768px) {
  .listing-search-bar {
    flex-direction: column;
    border-radius: 20px;
    padding: 12px;
    gap: 10px;
  }
  .search-divider {
    display: none;
  }
  .search-segment {
    width: 100%;
    padding: 6px 10px;
  }
  .search-submit-btn {
    width: 100%;
    border-radius: 10px;
    height: 40px;
    margin-left: 0;
    margin-top: 6px;
  }
  .listing-grid {
    grid-template-columns: 1fr;
  }
  .listing-detail-modal {
    /* Top padding is 0 so the sticky bar sits flush with the viewport edge;
       the bar's own padding supplies the spacing. */
    --detail-gutter: 18px;
    padding: 0 var(--detail-gutter) 30px;
  }
  .price-slider-row {
    flex-direction: column;
  }
  .amenities-grid, .property-type-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Map ===== */
.map-layout { display: grid; grid-template-columns: 260px 1fr; gap: 20px; margin-top: 18px; }
.map-sidebar { background: #fff; border-radius: 8px; padding: 16px; }
.map-sidebar label { display: block; margin: 8px 0; cursor: pointer; }
#facilityList { list-style: none; margin-top: 12px; }
#facilityList li { padding: 8px; border-bottom: 1px solid #eee; font-size: 14px; cursor: pointer; }
#facilityList li:hover { background: #f7f7f7; }
.map-canvas {
  background: #dfe5ea; border-radius: 8px; min-height: 480px;
  display: flex; align-items: center; justify-content: center; color: #667;
}

/* ===== Guide ===== */
.guide-item { background: #fff; border-radius: 8px; margin-bottom: 12px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.guide-item h3 {
  padding: 16px 20px; cursor: pointer; display: flex; justify-content: space-between;
  user-select: none;
}
.guide-item h3::after { content: '+'; font-size: 20px; color: #b8003d; }
.guide-item.open h3::after { content: '−'; }
.guide-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.guide-body p { padding: 0 20px 16px; line-height: 1.6; }

footer { text-align: center; padding: 20px; color: #888; font-size: 13px; }





/* ===== Responsive ===== */
/* ===== Responsive / Smaller Screens (CityU Offcanvas Drawer) ===== */
@media (max-width: 1250px) {
  .navbar-toggler {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Offcanvas container */
  #navbarContent.offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    background: #fff;
    z-index: 1050;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  #navbarContent.offcanvas.show {
    transform: translateX(0);
    visibility: visible;
  }

  .offcanvas-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
  }

  #navbarContent .navbar-nav-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    overflow-y: auto;
    padding: 8px 0 30px;
    gap: 0;
  }

  #navbarContent .nav-btn {
    width: 100%;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    padding: 15px 24px;
    text-align: left;
    border-bottom: 1px solid #f2f2f2;
    border-radius: 0;
    background-image: none;
    -webkit-text-fill-color: #000;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  #navbarContent .nav-btn:last-child {
    border-bottom: none;
  }

  #navbarContent .nav-btn:hover,
  #navbarContent .nav-btn:focus-visible {
    background-image: linear-gradient(to right,
      #DF7433 0%, #DA562B 35%, #CC103C 80%, #9F0D43 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #9F0D43 !important;
    background-color: #fafafa;
  }

  #navbarContent .nav-btn.active:not(:hover) {
    background-color: #f0f2f5 !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #000 !important;
    color: #000 !important;
    font-weight: 700 !important;
  }

  /* Offcanvas backdrop */
  .offcanvas-backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .offcanvas-backdrop.show {
    opacity: 1;
    visibility: visible;
  }

  .site-header {
    padding: 14px 24px;
  }
}

@media (max-width: 768px) {
  .map-layout { grid-template-columns: 1fr; }
}

/* ===== Account controls, admin entry and embedded campus navigation ===== */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 20px;
  flex-shrink: 0;
}

/* The navigation guide is a full-bleed workspace, unlike the editorial pages. */
body.navigation-active main { max-width: none; padding: 0; }
.navigation-page { padding: 0; }
.campus-nav-embed {
  width: 100%;
  min-height: calc(100vh - 82px);
  background: #f8f9fc;
}
.campus-nav-embed iframe {
  display: block;
  width: 100%;
  height: calc(100vh - 82px);
  border: 0;
}
.campus-nav-noscript { padding: 24px 32px; }

@media (min-width: 1251px) {
  /* Push the nav and account control to the right edge, with the account
     button as the last item in the header. */
  #navbarContent { margin-left: auto; }
}

@media (max-width: 1250px) {
  .header-actions { gap: 8px; margin-left: 12px; }
}

@media (max-width: 768px) {
  .logo-img { max-width: calc(100vw - 190px); }
  .site-header .cityu-auth-trigger {
    min-height: 38px;
    padding: 7px 12px;
    font-size: 12px;
  }
  .campus-nav-embed {
    min-height: calc(100vh - 74px);
  }
  .campus-nav-embed iframe {
    height: calc(100vh - 74px);
  }
}

/* ===== Student reviews in the listing detail view ===== */
.reviews-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.review-write-btn {
  min-height: 40px;
  padding: 8px 16px;
  border: 1.5px solid #b8003d;
  border-radius: 999px;
  background: #fff;
  color: #b8003d;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.review-write-btn:hover,
.review-write-btn:focus-visible { background: #b8003d; color: #fff; outline: none; }
.review-write-btn[hidden] { display: none !important; }

.house-reviews-list { display: flex; flex-direction: column; gap: 10px; }
.house-review {
  padding: 12px 14px;
  border: 1px solid #e8e8ed;
  border-radius: 10px;
  background: #fafafb;
}
.house-review-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.house-review-head strong { color: #222; font-size: 14px; }
.house-review-head span { color: #7a7f8c; font-size: 12px; white-space: nowrap; }
.house-review p { color: #4a505f; font-size: 14px; line-height: 1.55; }

.review-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #ecd3da;
  border-radius: 12px;
  background: #fdf8f9;
}
.review-form[hidden] { display: none !important; }
.review-field { display: flex; flex-direction: column; gap: 6px; color: #4a505f; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.review-field select,
.review-field textarea {
  padding: 10px 12px;
  border: 1.5px solid #d8dbe3;
  border-radius: 9px;
  background: #fff;
  color: #222;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.review-field textarea { resize: vertical; min-height: 84px; }
.review-field select:focus,
.review-field textarea:focus { border-color: #b8003d; outline: none; box-shadow: 0 0 0 3px rgba(184, 0, 61, 0.12); }
.review-form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.review-form-actions button {
  min-height: 42px;
  padding: 9px 20px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
#submitReviewBtn { border: 0; background: #b8003d; color: #fff; }
#submitReviewBtn:disabled { opacity: 0.6; cursor: wait; }
#cancelReviewBtn { border: 1.5px solid #d8dbe3; background: #fff; color: #4a505f; }
.review-form-note { margin: 0; color: #a51b3e; font-size: 13px; font-weight: 600; }
.review-form-note[hidden] { display: none !important; }

/* The account control shares the header with four long nav labels. At this
   width the full-size logo no longer fits, so tighten both rather than let
   the last label run off the right edge. */
@media (min-width: 1251px) and (max-width: 1600px) {
  .logo-img { width: 320px; }
  .nav-btn { font-size: 16px; padding: 10px 12px; }
  .main-nav,
  .navbar-nav-wrap { gap: 12px; }
}

/* Just above the offcanvas breakpoint the header is tightest; shrink it a
   little further so the far-right account button never overflows. */
@media (min-width: 1251px) and (max-width: 1320px) {
  .logo-img { width: 260px; }
  .nav-btn { font-size: 14px; padding: 9px 8px; }
  .main-nav,
  .navbar-nav-wrap { gap: 6px; }
  .header-actions { margin-left: 8px; }
}

/* ===== Housing admin: manage rooms control ===== */
.subbar-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.manage-listings-btn {
  min-height: 40px;
  padding: 8px 16px;
  border: 1.5px solid #b8003d;
  border-radius: 999px;
  background: #fff;
  color: #b8003d;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.manage-listings-btn:hover,
.manage-listings-btn:focus-visible {
  background: #b8003d;
  color: #fff;
  outline: none;
}
.manage-listings-btn[hidden] { display: none !important; }

@media (max-width: 640px) {
  .subbar-actions { width: 100%; justify-content: space-between; }
}

/* ===== Freshman guide categories and source note ===== */
.guide-category {
  margin: 30px 0 12px;
  color: #b8003d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.guide-category:first-child { margin-top: 0; }
.guide-body a {
  color: #b8003d;
  text-decoration: underline;
  overflow-wrap: anywhere;
}
.guide-body a:hover { color: #8f0030; }

/* ===== Language switcher ===== */
.language-switch { position: relative; display: flex; align-items: center; }
.language-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 7px 12px;
  border: 1.5px solid #d8dbe3;
  border-radius: 999px;
  background: #fff;
  color: #3c4252;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.language-trigger:hover,
.language-trigger:focus-visible {
  border-color: #b8003d;
  color: #b8003d;
  outline: none;
}
.language-globe { width: 18px; height: 18px; }
.language-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1200;
  min-width: 160px;
  padding: 6px;
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(20, 20, 30, 0.16);
}
.language-menu[hidden] { display: none !important; }
.language-menu button {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #2f3340;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.language-menu button:hover,
.language-menu button[aria-selected="true"] { background: #fdf0f5; color: #b8003d; }
.language-menu button:focus-visible { outline: 2px solid #b8003d; outline-offset: -2px; }

@media (max-width: 768px) {
  .language-trigger span { display: none; }
  .language-trigger { min-width: 40px; padding: 7px 10px; justify-content: center; }
  .logo-img { max-width: calc(100vw - 220px); }
}


/* =====================================
   FRESHMAN SURVIVAL GUIDE - CARD STYLE
   ===================================== */

/* Keep original website background */
#guide {
  background: transparent;
}

/* Search bar */
#guide .guide-search-wrap {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px;
  margin: 20px 0 26px;
}

#guide .guide-search-row input:focus {
  outline: 2px solid #b8003d;
  outline-offset: 1px;
}

#guide .guide-clear-btn {
  background: #b8003d;
  color: white;
}

/* 3 columns */
#guide .guide-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* White quick-link cards */
#guide .guide-category-card {
  appearance: none;
  width: 100%;
  min-height: 190px;
  padding: 28px 20px;
  background: #ffffff;
  border: 1px solid #eceef1;
  border-radius: 14px;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;

  text-align: center;
  font: inherit;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

#guide .guide-category-card:hover {
  transform: translateY(-4px);
  border-color: #b8003d;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

#guide .guide-category-card:focus-visible {
  outline: 3px solid #b8003d;
  outline-offset: 3px;
}

/* Last card spans entire row */
#guide .guide-card-wide {
  grid-column: 1 / -1;
  min-height: 155px;
}

/* CityU red icons */
#guide .guide-card-icon-wrap {
  color: #b8003d;
}

#guide .guide-card-icon {
  display: block;
  width: 36px;
  height: 36px;
  color: #b8003d;
}

/* Card title */
#guide .guide-category-card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: #252525;
}

/* Card description */
#guide .guide-category-card p {
  margin: 0;
  max-width: 310px;
  font-size: 13px;
  line-height: 1.6;
  color: #777777;
}

/* Back button */
#guide .guide-back-btn {
  background: transparent;
  color: #b8003d;
  border: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 0;
  margin-bottom: 20px;
}

/* Selected category heading */
#guide .guide-selected-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

#guide .guide-selected-heading h3 {
  font-size: 23px;
  color: #252525;
  margin: 0;
}

/* Article cards */
#guide .guide-article-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

#guide .guide-article-card summary {
  padding: 20px;
  cursor: pointer;
  font-weight: 600;
  color: #262626;
}

#guide .guide-article-card[open] summary {
  color: #b8003d;
  border-bottom: 1px solid #eeeeee;
}

#guide .guide-article-content {
  padding: 20px;
  color: #444444;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

#guide .guide-article-content a {
  color: #b8003d;
}

/* No results */
#guide .guide-empty {
  padding: 25px;
  text-align: center;
  color: #777777;
}

/* Tablet */
@media (max-width: 900px) {
  #guide .guide-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  #guide .guide-card-wide {
    grid-column: 1 / -1;
  }
}

/* Mobile */
@media (max-width: 560px) {
  #guide .guide-card-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #guide .guide-category-card {
    min-height: 155px;
  }

  #guide .guide-card-wide {
    grid-column: auto;
  }
}


/* ==================================
   Guide UI Improvements
   ================================== */

/* Keep all 7 cards the same size */
#guide .guide-card-wide {
  grid-column: auto;
  min-height: 190px;
}

#guide .guide-category-card {
  min-height: 190px;
  border-radius: 16px;
}

/* Smoother search container */
#guide .guide-search-wrap {
  background: transparent;
  border: none;
  padding: 0;
  margin: 24px 0 30px;
}

/* Smooth rounded search bar */
#guide .guide-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

#guide .guide-search-row input {
  flex: 1;
  min-width: 0;
  width: 100%;

  padding: 16px 20px;
  background: #ffffff;

  border: 1px solid #e1e4e9;
  border-radius: 24px;

  font-size: 15px;
  color: #252525;

  outline: none;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.035);

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

#guide .guide-search-row input::placeholder {
  color: #9a9da6;
}

/* Soft focus effect */
#guide .guide-search-row input:focus {
  border-color: #b8003d;
  outline: none;
  box-shadow:
    0 0 0 4px rgba(184, 0, 61, 0.09),
    0 5px 16px rgba(0, 0, 0, 0.045);
}

/* Rounded Clear button */
#guide .guide-clear-btn {
  padding: 15px 24px;
  background: #b8003d;
  color: #ffffff;
  border: none;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;

  transition:
    background 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.25s ease;
}

#guide .guide-clear-btn:hover {
  background: #990033;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(184, 0, 61, 0.18);
}

/* Search status */
#guide .guide-search-status {
  margin-top: 10px;
  padding-left: 8px;
  color: #777777;
  font-size: 13px;
}

/* Mobile adjustments */
@media (max-width: 560px) {
  #guide .guide-search-row {
    gap: 8px;
  }

  #guide .guide-search-row input {
    padding: 13px 15px;
    border-radius: 18px;
  }

  #guide .guide-clear-btn {
    padding: 13px 16px;
    border-radius: 18px;
  }
}


/* Center Useful Contacts on the last row */
@media (min-width: 901px) {
  #guide .guide-category-card:last-child {
    grid-column: 2;
  }
}

/* Keep all cards the same size */
#guide .guide-card-wide {
  grid-column: auto;
  min-height: 190px;
}