/* Restyle Houzez 4.2.6 to the KoolRooms design.
   Selectors were verified against the live site's markup, not guessed.
   ------------------------------------------------------------------

   !important policy: Houzez writes a large inline <style> block from its
   styling options on every page, which loads after this file. Rules tagged
   "inline" below fight that block and are the only place !important is
   used. Setting the Houzez primary colour to #5E7A3A (see README) removes
   most of them.
   ------------------------------------------------------------------ */

/* ---- Ground and type ---- */

body.kr {
  background: var(--kr-bg);
  color: var(--kr-ink);
  font-family: var(--kr-font);
  -webkit-font-smoothing: antialiased;
}

/* These two rules restyle Houzez's own markup. They must not reach inside
   KoolRooms components: they are element-plus-class selectors, so they would
   outrank the component classes in components.css and repaint, for example, a
   card price or a heading sitting on the green section. Anything carrying a
   kr- class is therefore excluded. */
body.kr :is(h1, h2, h3, h4, .item-title, .page-title):not([class*="kr-"]),
body.kr .property-title-wrap h1:not([class*="kr-"]) {
  font-family: var(--kr-font-display);
  letter-spacing: var(--kr-ls-sm);
  color: var(--kr-ink);
}

body.kr a:not([class*="kr-"]) { color: var(--kr-accent-deep); }
body.kr a:not([class*="kr-"]):hover { color: var(--kr-accent); }
body.kr ::selection { background: var(--kr-accent-tint); }

/* Visible focus everywhere - Houzez removes it in places. */
body.kr :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--kr-accent);
  outline-offset: 2px;
}

/* ---- Header ---- */

body.kr .header-v1,
body.kr .header-v2,
body.kr .header-v3,
body.kr .header-v4,
body.kr .navbar-toggle-wrap,
body.kr .main-nav {
  background: var(--kr-glass);
  backdrop-filter: blur(12px);
  border-bottom: var(--kr-bw) solid var(--kr-line-strong);
}

body.kr .houzez-nav-menu-main-desktop-wrap .nav-link,
body.kr .navbar-nav > li > a {
  font-family: var(--kr-font);
  font-size: var(--kr-fs-15);
  font-weight: 600;
  color: var(--kr-ink);
  border-radius: var(--kr-r-control);
  padding: var(--kr-sp-3) var(--kr-sp-5);
}

body.kr .houzez-nav-menu-main-desktop-wrap .nav-link:hover,
body.kr .navbar-nav > li > a:hover { background: var(--kr-hover-bg); color: var(--kr-ink); }

body.kr .navbar-nav > li.current-menu-item > a,
body.kr .houzez-nav-menu-main-desktop-wrap .current-menu-item > .nav-link { color: var(--kr-accent); }

/* The "Request a room" menu item: add class kr-cta to it in Appearance -> Menus. */
body.kr .menu-item.kr-cta > a {
  background: var(--kr-accent);
  color: var(--kr-accent-on);
  font-weight: 700;
  padding: 11px 18px;
  border-radius: var(--kr-r-control);
}

body.kr .menu-item.kr-cta > a:hover { background: var(--kr-accent-hover); color: var(--kr-accent-on); }

/* Mobile nav: the design's full-width panel with large display type. */
@media (max-width: 840px) {
  body.kr .houzez-nav-menu-main-mobile-wrap .nav-link,
  body.kr .navbar-nav-mobile > li > a {
    font-family: var(--kr-font-display);
    font-size: var(--kr-fs-24);
    font-weight: 700;
    letter-spacing: var(--kr-ls-sm);
    padding: var(--kr-sp-5) var(--kr-sp-3);
  }
}

/* ---- WPML language switcher as the design's EN/FR pill ---- */

body.kr .wpml-ls-legacy-horizontal-list {
  display: inline-flex;
  border: var(--kr-bw-mid) solid var(--kr-ink);
  border-radius: var(--kr-r-control);
  padding: 3px;
  gap: 2px;
  background: transparent;
}

body.kr .wpml-ls-legacy-horizontal-list .wpml-ls-item { margin: 0; border: 0; }

body.kr .wpml-ls-legacy-horizontal-list a {
  border: 0;
  border-radius: var(--kr-r-control);
  padding: 5px 10px;
  font-size: var(--kr-fs-12);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kr-ink);
  background: transparent;
}

body.kr .wpml-ls-legacy-horizontal-list .wpml-ls-current-language > a {
  background: var(--kr-ink);
  color: var(--kr-bg);
}

/* Houzez/WPML hide the flag and the long name; the design shows only EN / FR. */
body.kr .wpml-ls-legacy-horizontal-list .wpml-ls-flag { display: none; }

/* ---- Buttons ---- */

body.kr .btn {
  font-family: var(--kr-font);
  font-weight: 700;
  border-radius: var(--kr-r-control);
  padding: 12px 20px;
  border-width: var(--kr-bw-mid);
  transition: background-color var(--kr-t-fast), color var(--kr-t-fast);
}

body.kr .btn-primary,
body.kr .btn-primary-outlined:hover,
body.kr .btn-item {
  background-color: var(--kr-accent) !important; /* inline */
  border-color: var(--kr-accent) !important;     /* inline */
  color: var(--kr-accent-on) !important;               /* inline */
}

body.kr .btn-primary:hover,
body.kr .btn-item:hover {
  background-color: var(--kr-accent-hover) !important; /* inline */
  border-color: var(--kr-accent-hover) !important;     /* inline */
}

body.kr .btn-secondary {
  background: transparent;
  border-color: var(--kr-ink);
  color: var(--kr-ink);
}

/* ---- Listing cards (listing-v1 / item-wrap-v1) ---- */

body.kr .item-listing-wrap.item-wrap-v1 .item-wrap {
  background: var(--kr-surface);
  border: var(--kr-bw) solid var(--kr-line);
  border-radius: var(--kr-r-surface);
  overflow: hidden;
  box-shadow: none;
  transition: transform var(--kr-t-fast), box-shadow var(--kr-t-fast);
}

body.kr .item-listing-wrap.item-wrap-v1:hover .item-wrap {
  transform: translateY(-3px);
  box-shadow: var(--kr-shadow-card-hover);
}

@media (prefers-reduced-motion: reduce) {
  body.kr .item-listing-wrap.item-wrap-v1 .item-wrap { transition: none; }
  body.kr .item-listing-wrap.item-wrap-v1:hover .item-wrap { transform: none; }
}

body.kr .item-header { position: relative; }
body.kr .listing-thumb, body.kr .listing-image-wrap { border-radius: 0; overflow: hidden; }
body.kr .listing-thumb img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }

body.kr .item-body { padding: var(--kr-sp-7) var(--kr-sp-8) var(--kr-sp-8); }

body.kr .item-title {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-fs-21);
  letter-spacing: var(--kr-ls-sm);
  margin-bottom: var(--kr-sp-2);
}

body.kr .item-title a { color: var(--kr-ink); text-decoration: none; }
body.kr .item-title a:hover { color: var(--kr-accent-deep); }

body.kr .item-address { color: var(--kr-muted); font-size: var(--kr-fs-14); font-style: normal; }
body.kr .item-amenities { color: var(--kr-muted); font-size: var(--kr-fs-14); }

/* Price: the design writes "750 €/mo", Houzez writes "Monthly 750€".
   The prefix is hidden here and re-expressed as a /mo suffix; the
   template-part override changes the markup properly where it can. */
/* Houzez's price list is a full-width <ul>; pin it to the corner and let it
   shrink to its content instead of stretching across the card. */
body.kr .item-price-wrap {
  position: absolute;
  right: 12px;
  top: 12px;
  left: auto;
  width: auto;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 0;
  z-index: 2;
}

body.kr .item-price {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-fs-16);
  background: var(--kr-glass-2);
  color: var(--kr-ink);
  border-radius: var(--kr-r-control);
  padding: 5px 10px;
  list-style: none;
}

body.kr .item-price .price-prefix { display: none; }

body.kr .item-price .price::after {
  content: "/mo";
  font-family: var(--kr-font);
  font-size: var(--kr-fs-12);
  font-weight: 500;
  color: var(--kr-muted);
}

/* Labels: property_status is availability, so it gets the availability palette. */
/* Status labels sit bottom-left and wrap rather than colliding when a listing
   carries more than one. */
body.kr .labels-wrap {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  top: auto;
  width: auto;
  z-index: 2;
  flex-wrap: wrap;
  gap: 4px;
}

body.kr .label-status,
body.kr .label-featured {
  font-family: var(--kr-font);
  font-size: var(--kr-fs-12);
  font-weight: 700;
  padding: 5px 9px;
  border-radius: var(--kr-r-control);
  text-transform: none;
  letter-spacing: 0;
}

body.kr .label-status {
  background-color: var(--kr-bg) !important; /* inline: status-color-NNN */
  color: var(--kr-ink) !important;           /* inline */
}

body.kr .label-featured {
  background-color: var(--kr-ink) !important; /* inline */
  color: var(--kr-bg) !important;             /* inline */
  position: absolute;
  left: 12px;
  top: 12px;
  bottom: auto;
}

body.kr .item-tools { display: none; } /* the design has no hover tool row */

/* ---- Listing archive chrome ---- */

body.kr .listing-tools-wrap {
  background: var(--kr-surface);
  border: var(--kr-bw) solid var(--kr-line);
  border-radius: var(--kr-r-surface);
  padding: var(--kr-sp-8) var(--kr-sp-9);
}

body.kr .listings-count { color: var(--kr-muted); font-size: var(--kr-fs-18); }

body.kr .sort-by select,
body.kr .form-control,
body.kr select.form-select {
  border: var(--kr-bw-mid) solid var(--kr-line-input);
  border-radius: var(--kr-r-control);
  background: var(--kr-bg);
  color: var(--kr-ink);
  font-weight: 600;
  font-size: var(--kr-fs-14);
  padding: 9px 12px;
  box-shadow: none;
}

body.kr .form-control:focus { border-color: var(--kr-ink); box-shadow: none; }

/* ---- Pagination ---- */

body.kr .page-link {
  border: var(--kr-bw-mid) solid var(--kr-line-input);
  border-radius: var(--kr-r-control);
  color: var(--kr-ink);
  font-weight: 600;
  margin: 0 3px;
}

body.kr .page-item.active .page-link {
  background-color: var(--kr-ink) !important; /* inline */
  border-color: var(--kr-ink) !important;     /* inline */
  color: var(--kr-bg) !important;             /* inline */
}

/* ---- Single property (property-detail-v2) ---- */

body.kr-room .page-title-wrap { background: transparent; padding-bottom: 0; }

body.kr-room .property-title-wrap h1,
body.kr-room .page-title {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-h1-room);
  letter-spacing: var(--kr-ls-h1);
  line-height: var(--kr-lh-1);
  margin: var(--kr-sp-6) 0 0;
}

body.kr-room .page-title-wrap .item-address { font-size: var(--kr-fs-16); color: var(--kr-body); margin-top: var(--kr-sp-5); }

body.kr-room .page-title-wrap .item-price,
body.kr-room .property-price {
  position: static;
  background: transparent;
  padding: 0;
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-fs-44);
  letter-spacing: -.03em;
  line-height: var(--kr-lh-1);
}

body.kr-room .page-title-wrap .item-price .price::after { font-size: var(--kr-fs-16); }

/* Gallery shell */
body.kr-room .top-gallery-section,
body.kr-room #property-gallery-js { border-radius: var(--kr-r-surface); overflow: hidden; background: var(--kr-line-strong); }

body.kr-room .top-gallery-section .slick-prev,
body.kr-room .top-gallery-section .slick-next {
  width: 44px;
  height: 44px;
  border-radius: var(--kr-r-control);
  background: var(--kr-glass);
  color: var(--kr-ink);
  border: 0;
}

/* Content blocks */
body.kr-room .block-wrap {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: var(--kr-sp-15);
  box-shadow: none;
}

body.kr-room .block-title-wrap h2,
body.kr-room .block-title-wrap h3 {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-fs-28);
  letter-spacing: var(--kr-ls-sm);
  margin: 0 0 var(--kr-sp-7);
}

body.kr-room .block-content-wrap { font-size: var(--kr-fs-17); line-height: var(--kr-lh-long); color: var(--kr-body); }

/* Detail fact rows */
body.kr-room .detail-wrap li,
body.kr-room .property-overview-wrap li {
  border-bottom: var(--kr-bw) solid var(--kr-line);
  padding: var(--kr-sp-5) 0;
  font-size: var(--kr-fs-16);
  color: var(--kr-body);
}

/* Sidebar / agent box */
body.kr-room .agent-content-wrap,
body.kr-room .property-schedule-tour-form-wrap,
body.kr-room .sidebar-widget-wrap,
body.kr-room .widget {
  background: var(--kr-surface);
  border: var(--kr-bw) solid var(--kr-line);
  border-radius: var(--kr-r-surface);
  box-shadow: none;
}

body.kr-room .property-section-wrap .nav-pills .nav-link {
  border-radius: var(--kr-r-control);
  font-weight: 600;
  color: var(--kr-ink);
}

body.kr-room .property-section-wrap .nav-pills .nav-link.active {
  background-color: var(--kr-ink) !important; /* inline */
  color: var(--kr-bg) !important;             /* inline */
}

/* ---- Forms, incl. the WPForms block on the listing page ---- */

body.kr .wpforms-field-label,
body.kr label,
body.kr .form-group label {
  font-family: var(--kr-font);
  font-weight: 700;
  font-size: var(--kr-fs-15);
  color: var(--kr-ink);
}

body.kr .wpforms-form input[type="text"],
body.kr .wpforms-form input[type="email"],
body.kr .wpforms-form input[type="tel"],
body.kr .wpforms-form input[type="date"],
body.kr .wpforms-form select,
body.kr .wpforms-form textarea {
  border: var(--kr-bw-mid) solid var(--kr-line-input);
  border-radius: var(--kr-r-control);
  background: var(--kr-bg);
  color: var(--kr-ink);
  font-family: var(--kr-font);
  font-size: var(--kr-fs-15);
  font-weight: 500;
  padding: 12px 14px;
  box-shadow: none;
}

body.kr .wpforms-form button[type="submit"] {
  background: var(--kr-accent);
  border: 0;
  border-radius: var(--kr-r-control);
  color: var(--kr-accent-on);
  font-family: var(--kr-font);
  font-weight: 700;
  font-size: var(--kr-fs-16);
  padding: 14px 22px;
}

body.kr .wpforms-form button[type="submit"]:hover { background: var(--kr-accent-hover); }
body.kr .is-invalid,
body.kr .wpforms-error { border-color: var(--kr-error) !important; }

/* WPForms' own validation output, so the wizard matches the theme's forms. */
body.kr .wpforms-form label.wpforms-error,
body.kr .wpforms-form em.wpforms-error {
  color: var(--kr-error);
  font-size: var(--kr-fs-13);
  font-weight: 500;
}

body.kr .wpforms-form input.wpforms-error,
body.kr .wpforms-form select.wpforms-error,
body.kr .wpforms-form textarea.wpforms-error {
  background-color: var(--kr-error-tint);
  box-shadow: 0 0 0 3px rgba(185, 62, 40, .14);
}

/* ---- Login / register / forgot modals ---- */

body.kr .modal-content { border: 0; border-radius: var(--kr-r-surface); background: var(--kr-surface); }

body.kr .login-register-form .modal-header {
  background-color: var(--kr-green) !important; /* inline */
  color: var(--kr-bg);
  border: 0;
  border-radius: var(--kr-r-surface) var(--kr-r-surface) 0 0;
}

body.kr .modal-header .modal-title { font-family: var(--kr-font-display); font-weight: 700; letter-spacing: var(--kr-ls-sm); }

/* ---- Blog ----
   Class names read off the live archive and single post:
   .blog-wrap > .article-wrap > .post-wrap > .post-inner-wrap with
   .post-thumbnail-wrap / .post-title-wrap / .post-excerpt-wrap /
   .post-footer-wrap, and .single-article-wrap / .post-header-wrap /
   .post-content-wrap / .author-meta on the single. */

/* .blog-wrap is the whole section (Bootstrap container > row > 8-col content
   + 4-col sidebar), so it must stay a block. The post list is .bt-content-wrap
   and each post is .article-wrap > article.post-wrap.

   Scoped to .blog / .archive / .search because Houzez reuses .bt-content-wrap
   on ordinary pages and single posts, where it holds one .article-wrap with the
   whole page inside. Unscoped, the grid gave that single child a ~390px track,
   which is why the privacy and cookie pages rendered in a narrow column. */

body.kr:is(.blog, .archive, .search) .bt-content-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--kr-sp-9);
  align-items: start;
}

body.kr:is(.blog, .archive, .search) .bt-content-wrap > .article-wrap {
  background: var(--kr-surface);
  border: var(--kr-bw) solid var(--kr-line);
  border-radius: var(--kr-r-surface);
  overflow: hidden;
  height: 100%;
  margin: 0;
  transition: transform var(--kr-t-fast), box-shadow var(--kr-t-fast);
}

body.kr:is(.blog, .archive, .search) .bt-content-wrap > .article-wrap:hover {
  transform: translateY(-3px);
  box-shadow: var(--kr-shadow-card-hover);
}

@media (prefers-reduced-motion: reduce) {
  body.kr:is(.blog, .archive, .search) .bt-content-wrap > .article-wrap { transition: none; }
  body.kr:is(.blog, .archive, .search) .bt-content-wrap > .article-wrap:hover { transform: none; }
}

body.kr:is(.blog, .archive, .search) .bt-content-wrap .post-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: none;
  border: 0;
  margin: 0;
}

body.kr:is(.blog, .archive, .search) .bt-content-wrap .post-thumbnail-wrap { margin: 0; }

body.kr:is(.blog, .archive, .search) .bt-content-wrap .post-thumbnail-wrap img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

body.kr:is(.blog, .archive, .search) .bt-content-wrap .post-inner-wrap {
  padding: var(--kr-sp-7) var(--kr-sp-8) var(--kr-sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--kr-sp-4);
  flex: 1;
}

body.kr:is(.blog, .archive, .search) .bt-content-wrap .post-title-wrap h2,
body.kr:is(.blog, .archive, .search) .bt-content-wrap .post-title-wrap h3 {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-fs-21);
  letter-spacing: var(--kr-ls-sm);
  line-height: 1.2;
  margin: 0;
}

body.kr:is(.blog, .archive, .search) .bt-content-wrap .post-title-wrap a { color: var(--kr-ink); text-decoration: none; }
body.kr:is(.blog, .archive, .search) .bt-content-wrap .post-title-wrap a:hover { color: var(--kr-accent-deep); }

body.kr:is(.blog, .archive, .search) .bt-content-wrap .post-excerpt-wrap {
  font-size: var(--kr-fs-15);
  line-height: var(--kr-lh-copy);
  color: var(--kr-body);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The sidebar keeps Houzez's column; only the surface is restyled. */
body.kr .bt-sidebar-wrap .sidebar-wrap {
  background: var(--kr-surface);
  border: var(--kr-bw) solid var(--kr-line);
  border-radius: var(--kr-r-surface);
  padding: var(--kr-sp-8);
}

body.kr:is(.blog, .archive, .search) .bt-content-wrap .post-footer-wrap {
  margin-top: auto;
  padding-top: var(--kr-sp-5);
  border-top: var(--kr-bw) solid var(--kr-line);
  font-size: var(--kr-fs-13);
  color: var(--kr-muted);
  display: flex;
  align-items: center;
  gap: var(--kr-sp-4);
}

body.kr:is(.blog, .archive, .search) .bt-content-wrap .author-meta { margin: 0; flex: 1; }
body.kr:is(.blog, .archive, .search) .bt-content-wrap .post-footer-wrap .btn { padding: 9px 16px; font-size: var(--kr-fs-14); white-space: nowrap; }

body.kr .post-tag {
  background-color: var(--kr-accent-tint) !important; /* inline */
  color: var(--kr-accent-ink) !important;             /* inline */
  border-radius: var(--kr-r-control);
  font-size: var(--kr-fs-12);
  font-weight: 700;
  padding: 4px 10px;
}

/* Single post: the same boxed width as the rest of the design (the template is
   col-lg-12, so there is no sidebar to leave room for). */
body.kr.single-post .single-article-wrap,
body.kr.single-post .post-header-wrap,
body.kr.single-post .post-content-wrap { max-width: none; margin-inline: 0; }

/* Back to the archive, in the design's back-link style. */
.kr-back {
  display: inline-flex;
  align-items: center;
  gap: var(--kr-sp-3);
  background: none;
  border: 0;
  padding: var(--kr-sp-2) 0;
  font-family: var(--kr-font);
  font-size: var(--kr-fs-15);
  font-weight: 600;
  text-decoration: none;
  margin-bottom: var(--kr-sp-5);
}

body.kr .kr-back { color: var(--kr-body); }
body.kr .kr-back:hover { color: var(--kr-accent); }

body.kr.single-post .post-title-wrap h1,
body.kr.single-post .page-title {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 60px);
  letter-spacing: var(--kr-ls-h2);
  line-height: 1.02;
  margin: 0 0 var(--kr-sp-5);
  text-wrap: balance;
}

body.kr.single-post .author-meta,
body.kr.single-post .post-footer-wrap { font-size: var(--kr-fs-14); color: var(--kr-muted); }

body.kr.single-post .post-thumbnail-wrap img {
  width: 100%;
  border-radius: var(--kr-r-surface);
  margin-bottom: var(--kr-sp-11);
}

body.kr.single-post .post-content-wrap {
  font-size: var(--kr-fs-18);
  line-height: var(--kr-lh-long);
  color: var(--kr-body);
}

body.kr.single-post .post-content-wrap :is(h2, h3, h4) {
  font-family: var(--kr-font-display);
  font-weight: 700;
  letter-spacing: var(--kr-ls-sm);
  color: var(--kr-ink);
  margin: var(--kr-sp-13) 0 var(--kr-sp-5);
}

body.kr.single-post .post-content-wrap h2 { font-size: var(--kr-fs-28); }
body.kr.single-post .post-content-wrap h3 { font-size: var(--kr-fs-22); }
body.kr.single-post .post-content-wrap p { margin: 0 0 var(--kr-sp-8); }
body.kr.single-post .post-content-wrap img { border-radius: var(--kr-r-surface); }

body.kr.single-post .post-content-wrap blockquote {
  margin: var(--kr-sp-11) 0;
  padding: var(--kr-sp-2) 0 var(--kr-sp-2) var(--kr-sp-9);
  border-left: var(--kr-bw-thick) solid var(--kr-accent);
  font-family: var(--kr-font-display);
  font-size: var(--kr-fs-20);
  line-height: var(--kr-lh-quote);
  color: var(--kr-ink);
}

body.kr.single-post .post-content-wrap :is(ul, ol) { margin: 0 0 var(--kr-sp-8); padding-left: var(--kr-sp-9); }
body.kr.single-post .post-content-wrap li { margin-bottom: var(--kr-sp-2); }

/* ---- Footer ---- */

body.kr .footer-wrap,
body.kr footer.footer { background: var(--kr-footer-bg); color: var(--kr-footer-fg); }
body.kr .footer-wrap a { color: var(--kr-footer-fg); }
body.kr .footer-wrap a:hover { color: var(--kr-accent); }
body.kr .footer-copyright-wrap { color: var(--kr-muted-3); font-size: var(--kr-fs-13); border-top: 0; }

/* The WhatsApp widget (click-to-chat plugin) is deliberately left alone -
   no recolouring, no repositioning. */

/* ---- Houzez utilities the design does not want ---- */

body.kr .back-to-top-wrap { border-radius: var(--kr-r-control); }
body.kr .breadcrumb { font-size: var(--kr-fs-13); color: var(--kr-muted); }
body.kr .breadcrumb a { color: var(--kr-muted); }

/* Houzez sets a hard container width; the design uses 1200px + 24px gutters. */
body.kr .container,
body.kr .container-fluid.container-fluid-large {
  max-width: var(--kr-container);
  padding-left: var(--kr-gutter);
  padding-right: var(--kr-gutter);
}

/* Screen-reader-only helper used by the child templates. */
body.kr .screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal;
}

/* Pages the design owns open with their own headline, so Houzez's title
   banner and breadcrumb are suppressed there (and only there). */
body.kr-plain .page-title-wrap,
body.kr-plain .breadcrumb-wrap,
body.kr-plain .page-title,
body.kr-plain .main-banner-wrap { display: none; }

/* Those pages also want the full width the design uses, not Houzez's
   content column with its sidebar gutter. */
body.kr-plain .content-wrap,
body.kr-plain .page-wrap { padding-top: 0; }

/* The design's room screen opens with its own header and a 16:9 gallery, so
   Houzez's full-bleed v2 banner (and the title overlaid on it) is suppressed.
   The replacement is rendered at the top of the content by
   koolrooms_room_header(). */
body.kr-room .property-top-wrap,
body.kr-room .property-banner,
body.kr-room .page-title-wrap,
body.kr-room .breadcrumb-wrap { display: none; }

/* Room page: strip the Houzez chrome the design does not have.
   - .property-navigation-wrap is the sticky in-page anchor bar ("Video",
     "Description"); the design has no such menu.
   - .property-gallery-grid is Houzez's second copy of the photos. The design
     shows one gallery, which koolrooms_render_room_top() renders at the top,
     so this duplicate and its lightbox go.
   - .block-title-wrap holds the "Description" / "Video" section headings. The
     design runs the copy without a "Description" label. */
body.kr-room .property-navigation-wrap,
body.kr-room .sticky-nav-area,
body.kr-room .property-gallery-grid,
body.kr-room .property-lightbox,
body.kr-room .block-title-wrap { display: none; }

/* Prev / next room links under the property page.
   Houzez markup: .property-nav-wrap > .container > .d-flex >
   .prev-property | .next-property, each an <img> plus a .property-nav-link. */

body.kr-room .property-nav-wrap {
  max-width: var(--kr-container);
  margin: var(--kr-sp-16) auto var(--kr-sp-14);
  padding: var(--kr-sp-14) var(--kr-gutter) 0;
  border-top: var(--kr-bw-mid) solid var(--kr-ink);
}

body.kr-room .property-nav-wrap .container { padding: 0; max-width: none; }

body.kr-room .property-nav-wrap .d-flex { gap: var(--kr-sp-5); align-items: stretch; }

body.kr-room .prev-property,
body.kr-room .next-property {
  flex: 1 1 0;
  min-width: 0;
  background: var(--kr-surface);
  border: var(--kr-bw) solid var(--kr-line);
  border-radius: var(--kr-r-surface);
  padding: var(--kr-sp-5);
  gap: var(--kr-sp-6) !important; /* inline: Bootstrap gap-4 utility */
  transition: transform var(--kr-t-fast), box-shadow var(--kr-t-fast), border-color var(--kr-t-fast);
}

body.kr-room .next-property { justify-content: flex-end; text-align: right; }

body.kr-room .prev-property:hover,
body.kr-room .next-property:hover {
  transform: translateY(-2px);
  box-shadow: var(--kr-shadow-card-hover);
  border-color: var(--kr-line-input);
}

@media (prefers-reduced-motion: reduce) {
  body.kr-room .prev-property,
  body.kr-room .next-property { transition: none; }
  body.kr-room .prev-property:hover,
  body.kr-room .next-property:hover { transform: none; }
}

body.kr-room .property-nav-wrap img {
  width: 64px;
  height: 64px;
  flex: none;
  object-fit: cover;
  border-radius: var(--kr-r-control);
  background: var(--kr-line-strong);
}

body.kr-room .property-nav-link {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-fs-18);
  letter-spacing: var(--kr-ls-sm);
  color: var(--kr-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--kr-sp-3);
  min-width: 0;
}

body.kr-room .property-nav-link:hover { color: var(--kr-accent-deep); }

/* The design's directional arrows; Houzez only prints "Prev" / "Next". */
body.kr-room .prev-property .property-nav-link::before { content: "←"; color: var(--kr-accent); font-weight: 700; }
body.kr-room .next-property .property-nav-link::after  { content: "→"; color: var(--kr-accent); font-weight: 700; }

@media (max-width: 840px) {
  body.kr-room .property-nav-wrap .d-flex { flex-direction: column; }
  body.kr-room .next-property { justify-content: flex-start; text-align: left; flex-direction: row !important; } /* inline: Bootstrap flex utility */
}

/* Blog card footer: Houzez nests a .d-flex wrapper inside .post-footer-wrap,
   so the meta and the button need aligning on that wrapper, not the parent. */
body.kr:is(.blog, .archive, .search) .bt-content-wrap .post-footer-wrap > .d-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--kr-sp-4);
}

body.kr:is(.blog, .archive, .search) .bt-content-wrap .post-footer-wrap .btn {
  margin-left: auto;
  align-self: center;
  flex: none;
}

/* ---- Cookie consent (Complianz) ----------------------------------------- *
 * The banner's palette, radii and type sizes are set in Complianz → Cookie
 * banner → Look & feel, so they stay editable there and are not repeated here.
 * These are the few things its settings do not expose: two colours hard-coded
 * in the plugin's own stylesheet, the display face for the title, and clearance
 * for the WhatsApp widget, which sits bottom-right exactly where the banner
 * does and covered the buttons.
 * ------------------------------------------------------------------------- */

/* The plugin hard-codes a blue focus ring on the category toggles. */
body.kr .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox
  input.cmplz-consent-checkbox:focus + .cmplz-label:before {
  box-shadow: 0 0 0 2px var(--kr-accent);
}

/* And the literal keyword `green` for the "Always active" label. */
body.kr .cmplz-cookiebanner .cmplz-category-header .cmplz-always-active {
  color: var(--kr-free-fg);
}

/* Title in the design's display face, like every other panel heading. */
body.kr .cmplz-cookiebanner .cmplz-title {
  font-family: var(--kr-font-display);
  font-weight: 600;
  color: var(--kr-ink);
}

/* Category rows on the design's inset ground rather than a flat grey. */
body.kr .cmplz-cookiebanner .cmplz-categories .cmplz-category {
  background-color: var(--kr-bg);
  border-radius: var(--kr-r-control);
}

/* Buttons: the design's weight, and a hover that darkens rather than nothing. */
body.kr .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { font-weight: 700; }
body.kr .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
  background-color: var(--kr-accent-hover);
  border-color: var(--kr-accent-hover);
}

/* The WhatsApp widget is fixed bottom-right at 15px with a ~72px button and a
   z-index above the banner, so it sat on top of "View preferences". Lift the
   banner clear of it instead of moving the widget, which the plugin does not
   own. Desktop only: under 768px Complianz makes the banner full width at the
   bottom edge, where the widget overlaps a corner rather than a control. */
@media (min-width: 769px) {
  body.kr .cmplz-cookiebanner { bottom: 100px; }
  body.kr #cmplz-manage-consent .cmplz-manage-consent { right: 120px; }
}