/*
Theme Name: Rentz
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive WordPress + eCommerce Theme.
Version: 1.2
Template: porto
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/

/* Keep header items on one row down to 1040px */
.top-row.py-2 .wpb_wrapper.vc_column-inner {
  flex-wrap: nowrap !important;
  align-items: center;
}

/* Shrink logo right-margin below xl so items fit */
@media (max-width: 1199px) {
  .top-row.py-2 .logo {
    margin-right: 1rem !important;
  }
}

/* Below 1040px: hide phone + welcome, show mobile icon */
@media (max-width: 1039px) {
  .top-row.py-2 .porto-sicon-box-link,
  .top-row.py-2 .porto-sicon-box.d-none.d-lg-flex,
  .top-row.py-2 .separator.d-none.d-lg-block {
    display: none !important;
  }
}

/* Between 1040px and 1199px: show phone & welcome but compact */
@media (min-width: 1040px) and (max-width: 1199px) {
  .top-row.py-2 .porto-sicon-box.d-none.d-lg-flex {
    display: flex !important;
  }
  .top-row.py-2 .separator.d-none.d-lg-block {
    display: block !important;
  }
  .top-row.py-2 .separator.ms-3.me-4 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }
  .top-row.py-2 .porto-sicon-box .porto-sicon-header p {
    font-size: 14px !important;
  }
}

/* =========================================================================
   Mobile header: put account icon on the SAME line as the logo.
   The Porto builder places the account icon in a second Bootstrap column
   that wraps below on mobile. We absolute-position it to the top-right so
   it sits next to the logo on small screens.
   ========================================================================= */
@media (max-width: 767px) {
  #header .top-row.py-2 {
    position: relative;
  }
  /* Collapse the second builder column but keep its children visible */
  #header .top-row.py-2 > .porto-wrap-container > .row > .vc_column_container:has(a.my-account) {
    position: absolute !important;
    top: 0;
    right: 0;
    height: 100%;
    width: auto !important;
    padding: 0 15px !important;
    display: flex;
    align-items: center;
    z-index: 10;
  }
  /* Reserve room on the right of column 1 so the logo doesn't collide */
  #header .top-row.py-2 > .porto-wrap-container > .row > .vc_column_container:first-child {
    padding-right: 60px !important;
  }
  /* Fallback for browsers that don't support :has() — target by position */
  #header .top-row.py-2 > .porto-wrap-container > .row > .vc_column_container:last-child {
    position: absolute !important;
    top: 0;
    right: 0;
    height: 100%;
    width: auto !important;
    padding: 0 15px !important;
    display: flex;
    align-items: center;
    z-index: 10;
  }
  /* Account icon itself */
  #header a.my-account.d-md-none {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    line-height: 1;
  }
}

/* =========================================================================
   Property / compound carousel column widths
   ≥1480px: 4 per row • 991-1479px: 3 per row • <991px: 2 per row
   Matches the Owl `responsive` map set via `rentz_customize_carousel_breakpoints`.
   ========================================================================= */
.posts-wrap.has-ccols.ccols-xl-4 {
  --porto-col-xs: 50%;
  --porto-col-sm: 50%;
  --porto-col-md: 50%;
  --porto-col-lg: 33.3333%;
  --porto-col-xl: 33.3333%;
  --porto-col-xxl: 25%;
}
@media (min-width: 1480px) {
  .posts-wrap.has-ccols.ccols-xl-4 {
    --porto-col-xl: 25%;
    --porto-col-xxl: 25%;
    --porto-col-lg: 25%;
  }
}
@media (min-width: 991px) and (max-width: 1479.98px) {
  .posts-wrap.has-ccols.ccols-xl-4 {
    --porto-col-lg: 33.3333%;
    --porto-col-xl: 33.3333%;
    --porto-col-xxl: 33.3333%;
  }
}
@media (max-width: 990.98px) {
  .posts-wrap.has-ccols.ccols-xl-4 {
    --porto-col-xs: 50%;
    --porto-col-sm: 50%;
    --porto-col-md: 50%;
    --porto-col-lg: 50%;
  }
}

/* =========================================================================
   GLOBAL TYPOGRAPHY — darker, larger, with clearer hierarchy
   (no structural changes — sizes, weights, colours, line-heights only)
   ========================================================================= */

:root {
  --rentz-text:        #1f2937;  /* body text — dark slate */
  --rentz-text-soft:   #374151;  /* secondary body text */
  --rentz-muted:       #4b5563;  /* captions / meta */
  --rentz-heading:     #0f172a;  /* strong heading colour */
}

body,
.page-wrapper,
.site-content,
.entry-content,
.main-content {
  color: var(--rentz-text);
  font-size: 16.5px;
  line-height: 1.65;
}

@media (min-width: 1200px) {
  body { font-size: 17px; }
}

/* Paragraph text — everywhere */
body p,
.entry-content p,
.page-content p,
.woocommerce-Tabs-panel p,
.woocommerce-tabs .panel p,
.single-product .product p,
.summary p {
  color: var(--rentz-text);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1em;
}

/* List items inside content */
.entry-content li,
.page-content li,
.woocommerce-Tabs-panel li {
  color: var(--rentz-text);
  font-size: 1rem;
  line-height: 1.7;
}

/* Small / meta / captions — keep smaller but darker than default grey */
.entry-content small,
.woocommerce-tabs small,
.product-meta,
.compound-meta,
.porto-tb-meta,
.meta-info {
  color: var(--rentz-muted) !important;
}

/* Headings — clearer hierarchy */
body h1, body .h1,
body h2, body .h2,
body h3, body .h3,
body h4, body .h4,
body h5, body .h5,
body h6, body .h6 {
  color: var(--rentz-heading);
  line-height: 1.25;
  font-weight: 700;
}

body h1 { font-size: clamp(1.4rem, 1vw + .85rem, 1.75rem); margin-bottom: .55em; }
body h2 { font-size: clamp(1.2rem,  .7vw + .75rem, 1.5rem);  margin-bottom: .5em; }
body h3 { font-size: clamp(1.05rem, .55vw + .75rem, 1.25rem); margin-bottom: .5em; }
body h4 { font-size: clamp(.95rem,  .35vw + .85rem, 1.1rem); margin-bottom: .45em; }
body h5 { font-size: 1rem;   margin-bottom: .4em; }
body h6 { font-size: .9rem;  margin-bottom: .4em; text-transform: uppercase; letter-spacing: .04em; }

/* =========================================================================
   COMPOUND & PROPERTY (single) PAGE TYPOGRAPHY
   ========================================================================= */

/* "More About <Compound>" intro block (rendered by rentz functions.php) */
.single-product section p,
.single-compound section p,
.type-compound section p,
.type-product section p,
.single-product .woocommerce-tabs .panel p,
.single-compound .woocommerce-tabs .panel p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--rentz-text);
}

/* Attractions block (Don't Miss Out) */
.compound-attractions-wrapper .attraction-desc,
.compound-attractions-wrapper .attraction-desc p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--rentz-text);
  margin: 0 0 1em;
}
.compound-attractions-wrapper h3 {
  font-size: 1.45rem;
  margin-bottom: .55em;
  color: var(--rentz-heading);
}

/* Product / Property summary column */
.single-product .summary .product_title,
.single-product .summary .entry-title {
  font-size: clamp(1.6rem, 1.5vw + 1rem, 2rem);
  color: var(--rentz-heading);
  margin-bottom: .5em;
}
.single-product .summary .price,
.single-product .summary .bpr-total,
.single-product .summary .amount {
  font-size: 1.25rem;
  color: var(--rentz-heading);
}
.single-product .summary .woocommerce-product-details__short-description {
  color: var(--rentz-text);
  font-size: 1.02rem;
  line-height: 1.7;
}
.single-product .summary .product_meta,
.single-product .summary .product_meta a {
  color: var(--rentz-text-soft);
  font-size: .95rem;
}

/* WooCommerce tabs headings */
.woocommerce-tabs .panel h2,
.woocommerce-tabs .panel h3 {
  color: var(--rentz-heading);
}

/* Property / compound cards — body text */
.prop-card p,
.compound-card p,
.porto-tb-item p {
  font-size: .95rem;
  line-height: 1.55;
  color: var(--rentz-text);
}
.prop-card h3,
.compound-card h2,
.compound-card h3 {
  color: var(--rentz-heading);
}

/* Labels (form fields, booking box) — keep existing colour on coloured bg */
.bpr-field label,
.bpr-guests > label,
label[for] {
  font-weight: 700;
}

/* Porto defaults that are too light — override for page content only */
.page-wrapper .porto-u-heading .porto-u-main-heading h2,
.page-wrapper .porto-u-heading .porto-u-main-heading h3 {
  color: var(--rentz-heading);
}

/* =========================================================================
   Product (property) page: booking box stacks to mobile layout until 1200px
   Bootstrap's col-md-4 kicks in at 768px; we extend mobile stacking up to
   the xl breakpoint (<1200px) so the booking panel is full-width like it
   already is on phones.
   ========================================================================= */
@media (max-width: 1199.98px) {
  body.single-product .vc_column_container.col-md-4,
  body.single-product .vc_column_container.col-md-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Space between the stacked panels */
  body.single-product .vc_column_container.col-md-8 + .vc_column_container.col-md-4,
  body.single-product .vc_column_container.col-md-4 + .vc_column_container.col-md-8 {
    margin-top: 20px;
  }
  /* Let the booking box breathe at full width */
  body.single-product .igx-product-booking {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================================================================
   My Account — login page centered (register moved to its own page)
   ========================================================================= */
/* Don't cap the outer .woocommerce — Porto uses col-md-6.mx-auto INSIDE it */
.woocommerce-account:not(.logged-in) .woocommerce {
  width: 100%;
}
/* Widen Porto's centered column that wraps the login form */
.woocommerce-account:not(.logged-in) .woocommerce > .col-md-6.mx-auto,
.woocommerce-account:not(.logged-in) .page-content > .col-md-6.mx-auto {
  flex: 0 0 100% !important;
  max-width: 560px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Flatten WC's native two-column grid (fallback when it's the rendered layout) */
.woocommerce-account:not(.logged-in) .u-columns,
.woocommerce-account:not(.logged-in) .u-columns.col2-set,
.woocommerce-account:not(.logged-in) .u-columns.woocommerce-Addresses {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.woocommerce-account:not(.logged-in) .u-columns .u-column1,
.woocommerce-account:not(.logged-in) .u-columns .col-1 {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Hide the default inline register column on the login page */
.woocommerce-account:not(.logged-in) .u-columns .u-column2,
.woocommerce-account:not(.logged-in) .u-columns .col-2 {
  display: none !important;
}
/* Login form polish */
.woocommerce-account:not(.logged-in) form.woocommerce-form-login {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 28px 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.woocommerce-account:not(.logged-in) form.woocommerce-form-login .form-row {
  width: 100%;
}
.woocommerce-account:not(.logged-in) form.woocommerce-form-login input[type="text"],
.woocommerce-account:not(.logged-in) form.woocommerce-form-login input[type="email"],
.woocommerce-account:not(.logged-in) form.woocommerce-form-login input[type="password"] {
  width: 100%;
  box-sizing: border-box;
}
.woocommerce-account:not(.logged-in) form.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-account:not(.logged-in) form.woocommerce-form-login button[name="login"] {
  width: 100%;
}
.woocommerce-account:not(.logged-in) h2.woocommerce-login,
.woocommerce-account:not(.logged-in) .u-column1 > h2,
.woocommerce-account:not(.logged-in) form.woocommerce-form-login > h2 {
  text-align: left;
  margin-bottom: 16px;
}
.rentz-create-account-row {
  color: var(--rentz-text, #1f2937);
}
.rentz-create-account-link {
  color: var(--porto-primary-color, #ec6225);
}

/* Register page (via shortcode) */
.rentz-register-wrapper form.woocommerce-form-register {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 28px 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.rentz-register-wrapper form.woocommerce-form-register .form-row {
  margin-bottom: 14px;
}
.rentz-register-wrapper .button[name="register"],
.rentz-register-wrapper .woocommerce-form-register__submit {
  width: 100%;
  margin-top: 8px;
}

/* Phone prefix row */
.rentz-phone-row .rentz-phone-group select,
.rentz-phone-row .rentz-phone-group input {
  height: 42px;
}
@media (max-width: 480px) {
  .rentz-phone-row .rentz-phone-group {
    flex-wrap: wrap;
  }
  .rentz-phone-row .rentz-phone-group select {
    max-width: 100% !important;
    flex: 1 1 100%;
  }
  .rentz-phone-row .rentz-phone-group input {
    flex: 1 1 100%;
  }
}

/* =========================================================================
   H2 size cap — across the whole site, including WPBakery & Porto helpers
   that bake larger sizes into inline styles. Hierarchy still:
   H1 > H2 > H3 > H4 ...
   ========================================================================= */
body h2,
body .h2,
.entry-content h2,
.page-content h2,
.woocommerce h2,
.woocommerce-page h2,
.summary h2,
.product_title,
.vc_custom_heading h2,
h2.vc_custom_heading,
.porto-u-heading h2,
.porto-u-heading .porto-u-main-heading h2 {
  font-size: clamp(1.2rem, .7vw + .75rem, 1.5rem) !important;
  line-height: 1.28 !important;
}

/* =========================================================================
   Page-title cap — applies across all archive / single / WP pages.
   Catches Porto's .page-top / .page-header / archive-title / entry-title
   variants that bake larger sizes into inline styles.
   ========================================================================= */
body h1,
body .h1,
.entry-title,
h1.entry-title,
.page-title,
h1.page-title,
.archive-title,
.archive-header h1,
.page-top h1,
.page-top .page-title,
.page-header h1,
.page-header .page-title,
.woocommerce-products-header__title,
.product_title,
.single-product .product_title {
  font-size: clamp(1.4rem, 1vw + .85rem, 1.75rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -.005em !important;
}

/* =========================================================================
   Brand font override — replace Abril Fatface with Poppins everywhere.
   Poppins is already loaded by Porto; we just remap font-family.
   We exclude icon elements/classes so Font Awesome / Porto icon fonts keep
   working.
   ========================================================================= */
body,
body :not(i):not([class*="fa-"]):not([class*="fab"]):not([class*="fas"]):not([class*="far"]):not([class^="porto-icon"]):not([class*=" porto-icon"]) {
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif !important;
}

/* Belt-and-braces: anything with an inline style mentioning Abril is
   force-remapped to Poppins. */
[style*="Abril"],
[style*="abril"] {
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif !important;
}

/* Re-assert the font on the most common heading wrappers used by
   WPBakery / Porto so inline styles can't reintroduce Abril. */
.vc_custom_heading,
.vc_do_custom_heading,
.porto-u-heading,
.porto-u-heading h1,
.porto-u-heading h2,
.porto-u-heading h3,
.porto-u-main-heading,
.porto-u-main-heading h1,
.porto-u-main-heading h2,
.porto-u-main-heading h3,
.porto-block h1,
.porto-block h2,
.porto-block h3 {
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif !important;
}

/* =========================================================================
   Collapsible sidebar filters (Properties archive)
   Each .filter-group becomes a click-to-expand panel; default collapsed.
   ========================================================================= */
.props-sidebar .filter-group {
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 0 !important;
  padding: 6px 0;
}
.props-sidebar .filter-group:last-child {
  border-bottom: none;
}
.props-sidebar .filter-group__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  padding: 10px 0;
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  color: #0f172a;
  position: relative;
}
.props-sidebar .filter-group__title::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 10px;
  border-right: 2px solid #6b7280;
  border-bottom: 2px solid #6b7280;
  transform: rotate(45deg);
  transition: transform .2s ease;
  flex: 0 0 auto;
}
.props-sidebar .filter-group.is-collapsed .filter-group__title::after {
  transform: rotate(-45deg);
}
.props-sidebar .filter-group__title:hover {
  color: var(--porto-primary-color, #ec6225);
}
.props-sidebar .filter-group__title:focus-visible {
  outline: 2px solid var(--porto-primary-color, #ec6225);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Measured-height accordion — JS sets explicit pixel height on the body so
 * the transition runs across the body's actual content height (snaps to auto
 * after expand). Much snappier than the legacy max-height:1200px transition. */
.props-sidebar .filter-group__body {
  overflow: hidden;
  height: auto;
  opacity: 1;
  transition: height 160ms ease-out, opacity 120ms ease-out, padding 160ms ease-out;
  padding-bottom: 8px;
}
.props-sidebar .filter-group.is-collapsed .filter-group__body {
  opacity: 0;
  padding-bottom: 0;
  pointer-events: none;
}

/* =========================================================================
   Match WooCommerce "fee" rows (e.g. Service fee) to "cart-subtotal" styling
   in the checkout / cart / order-review tables.
   ========================================================================= */
.woocommerce-checkout-review-order-table tr.fee th,
.woocommerce-checkout-review-order-table tr.fee td,
.woocommerce-cart-form  tr.fee th,
.woocommerce-cart-form  tr.fee td,
.cart_totals            tr.fee th,
.cart_totals            tr.fee td,
.shop_table             tr.fee th,
.shop_table             tr.fee td {
  font-weight: 700 !important;
  color: var(--rentz-heading, #0f172a) !important;
}
.woocommerce-checkout-review-order-table tr.fee .amount,
.woocommerce-cart-form  tr.fee .amount,
.cart_totals            tr.fee .amount,
.shop_table             tr.fee .amount {
  font-weight: 700 !important;
  color: var(--rentz-heading, #0f172a) !important;
}
/* Keep the same baseline padding / size as cart-subtotal */
.shop_table tr.fee th,
.shop_table tr.fee td {
  font-size: inherit;
  padding-top:    var(--porto-table-cell-y, 12px);
  padding-bottom: var(--porto-table-cell-y, 12px);
}



/* ============================================================
   TinySlider dot navigation — mobile only (≤ 575px)
   Brand-tinted pager dots below each cps-slider property carousel.
   TNS renders `.tns-nav` with `<button data-nav>` children. JS sets
   `nav: false` on tablet+/desktop breakpoints, so the dots only need
   styling for phones.
   ============================================================ */
.tns-outer .tns-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 25px 0 4px;
}
.tns-outer .tns-nav > button {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(0, 0, 0, 0.18);
  border: 0;
  cursor: pointer;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  transition: background 0.18s ease, width 0.18s ease, transform 0.18s ease;
}
.tns-outer .tns-nav > button:hover {
  background: rgba(0, 0, 0, 0.32);
}
.tns-outer .tns-nav > button.tns-nav-active {
  background: var(--porto-primary-color, #ec6225);
  width: 22px;
  transform: scale(1);
}

/* Hide TNS dots on tablet/desktop — JS already turns `nav: false` at the
   576+ breakpoint, but on the very first paint (before TNS reads the
   responsive config) the dots can flash briefly. This media query keeps
   them hidden until our JS confirms the breakpoint. */
@media (min-width: 576px) {
  .tns-outer .tns-nav { display: none !important; }
}

/* ============================================================
   Mobile bottom navigation bar — design spec verbatim
   See: rentz_mobile_bottom_nav() in functions.php
   ============================================================ */
.rentz-mobile-only-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
}
.rentz-mobile-nav {
  position: relative;
  background: #ffffff;
  border-top: 1px solid #ECE9E0;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 22px -10px rgba(20, 22, 30, 0.10);
  width: 100%;
  font-family: "DM Sans", system-ui, sans-serif;
  user-select: none;
}
.rentz-mobile-nav-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
}
.rentz-nav-tab {
  background: transparent;
  border: none;
  padding: 8px 2px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font: inherit;
  position: relative;
  min-height: 56px;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: color .14s;
}
.rentz-nav-tab.is-disabled { cursor: not-allowed; }
.rentz-nav-tab:not(.is-disabled):active { transform: scale(.96); transition: transform .08s; }
.rentz-nav-pill {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 3px;
  border-radius: 0 0 999px 999px;
  background: currentColor;
}
.rentz-nav-icon-wrap {
  position: relative;
  display: inline-flex;
}
.rentz-nav-badge {
  position: absolute;
  top: -5px; right: -10px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: #EE6B2D;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 999px;
  border: 1.5px solid #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.rentz-nav-label {
  font-size: 10.5px;
  letter-spacing: -.005em;
  text-align: center;
  line-height: 1.15;
  white-space: nowrap;
}

/* Hide bar above 768px (desktop / tablet landscape) */
@media (min-width: 769px) {
  .rentz-mobile-only-nav { display: none !important; }
}

/* Pad body bottom on ≤768px so content isn't hidden behind the fixed bar.
   ~56 (min-height) + 16 (padding) ≈ 72 — round up for safe-area-inset. */
@media (max-width: 768px) {
  body { padding-bottom: 72px; }
}

/* ============================================================
   Google Sign-In button — official Google Branding Guidelines
   https://developers.google.com/identity/branding-guidelines
   Light theme, "Filled" variant:
     · White surface, #747775 1px border, 4px radius
     · Multi-color "G" logo (left), 20×20, 10px gap to text
     · Roboto Medium 14px, #1F1F1F text
     · 40px height, 0 12px padding
   Two button sources covered:
     1. Porto's `.social-button.google-plus` on the /my-account/ login form
     2. Nextend Social Login's `.nsl-button-google` on /register/ + popup
   ============================================================ */

/* Shared button shell.
   The triple-chain on `.nsl-button-google` / `.social-button.google-plus`
   gives us (0,6,1) specificity — needed to outrank Porto's
   `body :not(...)*6` Poppins-forcing rule (≈ (0,6,2)).
   `html body` prefix + chain pushes us past every Porto override. */
html body .nsl-button-default.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google,
html body .nsl-button-icon.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google,
html body a.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google,
html body div.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google,
html body a.social-button.google-plus.google-plus.google-plus.google-plus.google-plus.google-plus.google-plus,
html body .social-button.google-plus.google-plus.google-plus.google-plus.google-plus.google-plus.google-plus {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid #747775 !important;
  color: #1F1F1F !important;
  border-radius: 4px !important;
  font-family: 'Roboto', 'DM Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.25px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Force the Roboto font onto every descendant so Porto's Poppins-on-*
   rule doesn't bleed in (most importantly the label container span). */
html body .nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google *,
html body .social-button.google-plus.google-plus.google-plus.google-plus.google-plus.google-plus.google-plus * {
  font-family: 'Roboto', 'DM Sans', system-ui, -apple-system, sans-serif !important;
}
.nsl-button-default.nsl-button-google:hover,
.nsl-button-icon.nsl-button-google:hover,
a.nsl-button-google:hover,
div.nsl-button-google:hover,
a.social-button.google-plus:hover,
.social-button.google-plus:hover {
  background: #F8F9FA !important;        /* official light hover state */
  background-color: #F8F9FA !important;
  border-color: #747775 !important;
  color: #1F1F1F !important;
  box-shadow: 0 1px 2px rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15) !important;
}
.nsl-button-default.nsl-button-google:active,
a.nsl-button-google:active,
a.social-button.google-plus:active,
.social-button.google-plus:active {
  background: #EDEEF0 !important;
}
.nsl-button-default.nsl-button-google:focus-visible,
a.nsl-button-google:focus-visible,
a.social-button.google-plus:focus-visible,
.social-button.google-plus:focus-visible {
  outline: 2px solid #1976D2 !important;  /* Google blue focus ring */
  outline-offset: 2px !important;
}

/* Text label — same chain trick so Porto can't recolour or refont it. */
html body .nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google .nsl-button-label-container,
html body .nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google .nsl-button-label-container * {
  color: #1F1F1F !important;
  font-family: 'Roboto', 'DM Sans', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.25px !important;
}
html body .nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google.nsl-button-google .nsl-button-label-container b {
  font-weight: 500 !important;            /* don't bold the "Google" word */
  color: #1F1F1F !important;
}

/* The "G" logo — official 4-color SVG via background-image so we don't
   depend on whatever icon NSL or Porto happened to ship. We hide whatever
   they emit (NSL's monochrome SVG or Porto's Font Awesome glyph) and paint
   the canonical Google logo on the container itself. */
.nsl-button-default.nsl-button-google .nsl-button-svg-container,
.nsl-button-icon.nsl-button-google .nsl-button-svg-container,
a.nsl-button-google .nsl-button-svg-container,
div.nsl-button-google .nsl-button-svg-container,
a.social-button.google-plus i,
.social-button.google-plus i {
  display: inline-block !important;
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%23FFC107' d='M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z'/><path fill='%23FF3D00' d='M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z'/><path fill='%234CAF50' d='M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z'/><path fill='%231976D2' d='M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z'/></svg>") !important;
  color: transparent !important;
  text-indent: -9999px !important;
  font-size: 0 !important;
  overflow: hidden !important;
}
/* Hide the inner SVG/icon nodes that the plugins emit — our background-image
   on the container is the real logo. */
.nsl-button-default.nsl-button-google .nsl-button-svg-container svg,
.nsl-button-icon.nsl-button-google .nsl-button-svg-container svg,
a.nsl-button-google .nsl-button-svg-container svg,
div.nsl-button-google .nsl-button-svg-container svg {
  opacity: 0 !important;
  visibility: hidden !important;
}
a.social-button.google-plus i::before,
.social-button.google-plus i::before {
  display: none !important;
}

/* NSL container — make it full-width across every place it appears so the
   Google button always matches the parent submit button (Login / Register /
   popup Login / popup Create Account). The popup forms are in #rentz-login-form
   and #rentz-register-form inside #rentz-auth-modal; the dedicated /register/
   page is in .rentz-register-wrapper; WC's own register form uses
   .woocommerce-form-register. Cover all of them. */
.rentz-register-wrapper .nsl-container,
.woocommerce-form-register .nsl-container,
#rentz-login-form .nsl-container,
#rentz-register-form .nsl-container,
#rentz-auth-modal .nsl-container,
.rentz-register-wrapper #nsl-custom-login-form-main,
.woocommerce-form-register #nsl-custom-login-form-main,
#rentz-login-form #nsl-custom-login-form-main,
#rentz-register-form #nsl-custom-login-form-main {
  margin-top: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
}
.rentz-register-wrapper .nsl-container .nsl-container-buttons,
.woocommerce-form-register .nsl-container .nsl-container-buttons,
#rentz-login-form .nsl-container .nsl-container-buttons,
#rentz-register-form .nsl-container .nsl-container-buttons,
#rentz-auth-modal .nsl-container .nsl-container-buttons {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* And the button itself — beat NSL's inline width/max-width on the [div data-button].
   NSL sometimes puts the button inside a wrapper div with a fixed max-width. */
#rentz-login-form .nsl-button,
#rentz-register-form .nsl-button,
#rentz-auth-modal .nsl-button {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Remove the default top padding on the embedded "below" layout so the
   button sits flush with the gap controlled above. NSL ships its own
   spacing here (`padding: 20px 0 0`) which our base rule alone can't
   beat because NSL's stylesheet loads after ours — !important is needed.
   `[id^=...]` instead of `#nsl-custom-login-form-1` so the rule covers
   any auto-incremented NSL container ID. */
[id^="nsl-custom-login-form-"] .nsl-container-embedded-login-layout-below,
.nsl-container-embedded-login-layout-below {
  clear: both !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}

/* =========================================================================
   "Show on map" toolbar button — match the compound design across all 3
   listing pages (/all-properties/, /compound/, /compound/{slug}/properties/).
   Porto paints generic <button> elements orange, so #props-map-toggle was
   coming out as a filled orange pill instead of the intended outline pill.
   Heavy-chained selector beats Porto's `body :not(...)` cascade.
   ========================================================================= */
html body button#props-map-toggle.props-map-toggle,
html body #props-map-toggle,
html body button#cmp-map-toggle.cmp-map-toggle,
html body #cmp-map-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid #ECE9E0 !important;
  color: #15161C !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-family: 'DM Sans', 'Poppins', system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  flex-shrink: 0 !important;
  transition: border-color .14s, color .14s !important;
}
html body #props-map-toggle:hover,
html body #cmp-map-toggle:hover {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-color: #15161C !important;
  color: #15161C !important;
  box-shadow: none !important;
}
/* The pin SVG inside the button stays teal in all states. */
html body #props-map-toggle svg,
html body #cmp-map-toggle svg {
  stroke: #1F8B8B !important;
  fill: none !important;
  flex-shrink: 0 !important;
}

/* =========================================================================
   Property page polish — review stars + Explore All Images button
   ========================================================================= */

/* ---- WC star rating — render with unicode glyphs so we don't depend on the
   `star` icon font (which Porto / our customisations strip). Empty stars are
   the lightest brand grey; the filled overlay is brand orange. */
.woocommerce-product-rating .star-rating,
.star-rating {
  position: relative !important;
  display: inline-block !important;
  width: 5.4em !important;
  height: 1.2em !important;
  line-height: 1 !important;
  font-size: 14px !important;
  letter-spacing: .1em !important;
  font-family: Arial, "DejaVu Sans", "Liberation Sans", sans-serif !important;
  color: #DCD7CC !important;            /* empty (outline) star colour */
  overflow: hidden !important;
}
.woocommerce-product-rating .star-rating::before,
.star-rating::before {
  content: "\2605\2605\2605\2605\2605" !important;  /* ★★★★★ background */
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  color: #DCD7CC !important;
  font-family: Arial, "DejaVu Sans", sans-serif !important;
  font-weight: normal !important;
}
.woocommerce-product-rating .star-rating > span,
.star-rating > span {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  color: #EE6B2D !important;            /* filled-rating colour */
  white-space: nowrap !important;
}
.woocommerce-product-rating .star-rating > span::before,
.star-rating > span::before {
  content: "\2605\2605\2605\2605\2605" !important;  /* ★★★★★ foreground */
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  font-family: Arial, "DejaVu Sans", sans-serif !important;
}
.woocommerce-product-rating .star-rating > span > strong,
.star-rating > span > strong {
  position: absolute !important;
  left: -9999px !important;
  visibility: hidden !important;
}

/* ---- Explore All Images button (property-images-modal shortcode)
   Porto applies `position:relative; top:-85px; left:-10px; float:right`
   somewhere up the cascade that pulls this button onto the carousel.
   Pin it back to normal flow, right-align, brand-orange pill. */
.main-images-container .explore-images-btn {
  position: static !important;
  top: auto !important; left: auto !important;
  right: auto !important; bottom: auto !important;
  inset: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 12px 22px !important;
  background: #EE6B2D !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  cursor: pointer !important;
  box-shadow: 0 6px 16px -8px rgba(238,107,45,.6) !important;
  text-decoration: none !important;
  line-height: 1 !important;
  transition: background .15s ease !important;
}
.main-images-container .explore-images-btn:hover {
  background: #D85C20 !important;
  color: #fff !important;
}
/* The wrapping div in the shortcode already has text-align:right; ensure it
   sits on its own row below the carousel with breathing room. */
.main-images-container > div:last-child {
  display: block !important;
  text-align: right !important;
  margin-top: 14px !important;
  clear: both !important;
  position: relative !important;
}

/* =========================================================================
   Footer (Porto block ID 3067) — force light text + brand link colors on
   the dark band. Porto's global Poppins-color !important rule paints
   everything in the page's foreground color, so by the time it reaches the
   footer all the addresses, list items, and copyright text render as near-
   black. We re-light them here with high specificity.
   ========================================================================= */
/* Sub-section labels (ADDRESS / PHONE / EMAIL / WORKING DAYS) — keep muted */
html body #footer.footer-builder h4.text-uppercase {
  color: #9AA0A6 !important;
}
/* Large section headings (Get In Touch / Customer Services / Subscribe) — white */
html body #footer.footer-builder h3 {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
/* Links — light by default, brand orange on hover */
html body #footer.footer-builder a {
  color: #E5E7EB !important;
  text-decoration: none !important;
  transition: color .14s ease;
}
html body #footer.footer-builder a:hover,
html body #footer.footer-builder a:focus {
  color: #EE6B2D !important;
  text-decoration: none !important;
}
/* Porto info-list items (Customer Services column) */
html body #footer.footer-builder .porto-info-list-item-desc,
html body #footer.footer-builder .porto-info-list-item-desc a {
  color: #E5E7EB !important;
}
html body #footer.footer-builder .porto-info-list-item-desc a:hover {
  color: #EE6B2D !important;
}
/* Copyright line at the bottom — slightly dimmer than body */
html body #footer.footer-builder .vc_custom_heading h4 {
  color: #9AA0A6 !important;
}
/* Newsletter form: light text on the dark input bg already configured */
html body #footer.footer-builder input[type="text"],
html body #footer.footer-builder input[type="email"] {
  color: #FFFFFF !important;
}
html body #footer.footer-builder input::placeholder {
  color: rgba(255,255,255,.55) !important;
}
/* Defensive: kill the payment-icons strip in case any cache still serves it */
html body #footer.footer-builder .payment-icons {
  display: none !important;
}

/* WPBakery defaults a 35px margin-bottom on .wpb_button / .wpb_content_element
   / ul.wpb_thumbnails-fluid > li. That margin sits below every text/heading
   block on every page composed in the page-builder and creates uneven gaps
   we never want. Zero it globally — lay out spacing in our own templates. */
html body .wpb_button,
html body .wpb_content_element,
html body ul.wpb_thumbnails-fluid > li {
  margin-bottom: 0 !important;
}

/* Porto's "scroll to top" button (#topcontrol) — sit 75px above the
   viewport bottom so it floats clear of the mobile bottom nav / footer. */
html #topcontrol {
  bottom: 75px !important;
}

/* Footer social icons — on hover the background goes orange, but the
   channel glyph itself must stay white. The inline-CSS rule that lives
   inside the Porto Footer block (#3067) already sets color: #fff on the
   anchor, but Porto's global a:hover { color: var(--porto-primary) } rule
   and the inline SVG's fill="currentColor" interact in a way that lets the
   SVG paint orange on hover. Lock the colour explicitly here. */
html body #rentz-footer-v2 .rf-socials a svg,
html body #rentz-footer-v2 .rf-socials a svg path {
  fill: currentColor !important;
}
html body #rentz-footer-v2 .rf-socials a:hover,
html body #rentz-footer-v2 .rf-socials a:hover:focus,
html body #rentz-footer-v2 .rf-socials a:focus {
  color: #fff !important;
}
html body #rentz-footer-v2 .rf-socials a:hover svg,
html body #rentz-footer-v2 .rf-socials a:hover svg path,
html body #rentz-footer-v2 .rf-socials a:focus svg,
html body #rentz-footer-v2 .rf-socials a:focus svg path {
  fill: #fff !important;
  color: #fff !important;
}

/* Footer "List your property" CTA button — mirror the Subscribe hover effect
   (darker-orange bg + white text + white arrow). Porto's global
   a:hover { color: var(--porto-primary) } wins specificity on the inline
   block CSS in some scopes, painting the label orange against the orange bg
   so it reads as invisible/all-orange. Hard-lock to match Subscribe. */
html body #rentz-footer-v2 a.rf-cta-btn:hover,
html body #rentz-footer-v2 a.rf-cta-btn:focus {
  background: #D85C20 !important;
  color: #fff !important;
}
html body #rentz-footer-v2 a.rf-cta-btn:hover svg,
html body #rentz-footer-v2 a.rf-cta-btn:focus svg {
  stroke: #fff !important;
  color: #fff !important;
}