/* Apply left padding to specific form groups */
/* .form-group__email,
.form-group__phone-no,
.form-group__first-name {
  padding-left: 10px !important;
} */

/* 
.form-group.form-group__first-name {
  padding-left: 0 !important;
} */

/* --- TABLE / CELL / LABEL LAYOUT --- */

/* Restore table semantics */
@media (min-width: 1024px) {
  .thankyou table {
    display: table !important;
    width: auto !important;
  }

  .thankyou table tr {
    display: table-row !important;
    height: 120px !important;
  }

  .thankyou table td {
    display: table-cell !important;
    height: 120px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    border: none !important;          /* ❗ remove borders from td */
  }

  /* LABEL = the box */
  .thankyou table td label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 120px !important;
    width: 150px !important;
    box-sizing: border-box !important;

    border: 2px solid #000 !important; /* border now on label */
    margin: 0 10px !important;         /* horizontal spacing between boxes */  
    cursor: pointer !important;
  }
}

@media (max-width: 767px) {
  .thankyou table {
    display: table !important;
    width: auto !important;
  }

  .thankyou table tr {
    display: table-row !important;
    height: 120px !important;
  }

  .thankyou table td {
    display: table-cell !important;
    height: 120px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    border: none !important;          /* ❗ remove borders from td */
  }

  /* LABEL = the box */
  .thankyou table td label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 120px !important;
    width: 150px !important;
    box-sizing: border-box !important;

    border: 2px solid #000 !important; /* border now on label */
    margin: 0 10px !important;         /* horizontal spacing between boxes */  
    cursor: pointer !important;
  }
}

/* Hide radios */
.thankyou table td label input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Center the radio groups as a whole */
.thankyou table.progressive-profiling_center,
.thankyou table.prof-form__bed,
.thankyou table.prof-form__bath,
.thankyou table.prof-form__car,
.thankyou table.prof-form__cycle,
.thankyou table.prof-form__purchase {
  margin-left: auto !important;
  margin-right: auto !important;
}
}
/* Below part for register now form
    
} */
/* Desktop layout for the register form */
@media (min-width: 768px) {
  /* Base: form groups inside this specific form */
  .greyBackgroundForm .form-group.has-feedback {
    width: 100%;
    display: block;
  }

  /* First name, Last name, Phone, Suburb -> half width */
  .greyBackgroundForm .form-group.has-feedback:has(input[name="firstName"]),
  .greyBackgroundForm .form-group.has-feedback:has(input[name="lastName"]),
  .greyBackgroundForm .form-group.has-feedback:has(input[name="phone"]),
  .greyBackgroundForm .form-group.has-feedback:has(input[name="suburb"]) {
    width: 48% !important;
    display: inline-block !important;
    vertical-align: top;
  }

  /* Email -> its own full-width row */
  .greyBackgroundForm .form-group.has-feedback:has(input[name="email"]) {
    width: 100% !important;
    display: block !important;
    margin-left: 0 !important;
  }

}

/* Mobile + Tablet controls full width */
@media (max-width: 1024px) {

  /* Override the min-width restriction */
  .contact-form .input-wrapper,
  #register-now .input-wrapper,
  #register-now .input-wrapper--text {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Make the controls (input, select, textarea) fill the wrapper */
  .contact-form .input-wrapper input,
  .contact-form .input-wrapper select,
  .contact-form .input-wrapper textarea,
  #register-now input,
  #register-now select,
  #register-now textarea {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Fix .form-group width (some templates set 50%) */
  #register-now .form-group {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
}


@media (min-width: 1024px) {

  
  
  .propertyDetails.greyBackgroundForm {
    margin-left: unset !important;
  }

  .propertyDetails.greyBackgroundForm #register-now {
    text-align:left !important;
    color: #9c866d !important;
  }


}

.propertyDetails.greyBackgroundForm .intro-content {
  display:none !important;  
  width: 100%;
}

.greyBackgroundForm .intro-content {
  display:block !important;  
  width: 100%  !important;
}

/* DESKTOP/TABLET – center the submit row */
@media (min-width: 769px) {
  .form.contact-form form > div:last-child,
  .form.contact-form form:not(.salesForm) > div:nth-last-child(2) {
    width: 25% !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    text-align: center !important;
    margin: 30px auto 0 160px !important;
  }

  .form.contact-form form > div:last-child input[type="submit"],
  .form.contact-form form > div:nth-last-child(2) input[type="submit"] {
    display: inline-block !important;
    margin: 0 auto !important;
  }
}


/* MOBILE + TABLET FORM CENTERING */
@media (max-width: 1024px) {

  /* Make the form a centered vertical stack */
  .propertyDetails.greyBackgroundForm {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* ALL rows (form-group) must center & stretch properly */
  .propertyDetails.greyBackgroundForm .form-group {
    width: 90% !important;        /* adjust to taste */
    max-width: 350px !important;  /* keeps nice mobile look */
    margin: 12px auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* The inputs inside form-group */
  .propertyDetails.greyBackgroundForm .form-group input,
  .propertyDetails.greyBackgroundForm .form-group select,
  .propertyDetails.greyBackgroundForm .form-group textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }

  /* Center the button */
  .propertyDetails.greyBackgroundForm button,
  .propertyDetails.greyBackgroundForm input[type="submit"] {
    margin: 20px auto !important;
    display: block !important;
    width: 180px !important; /* or 100% if you want full width */
    text-align: center !important;
  }
}

/**********************************************
 * MOBILE + TABLET — ONE COLUMN
 **********************************************/
@media (max-width: 1024px) {

  /* Make all fields full width */
  form .propertyDetails .form-group {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    display: block !important;
  }

  /* Inputs fill 100% */
  form .propertyDetails .form-group .input-wrapper,
  form .propertyDetails .form-group input,
  form .propertyDetails .form-group select,
  form .propertyDetails .form-group textarea {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Center submit button */
  .contact-form .propertyDetails input[type="submit"],
  .contact-form .propertyDetails button[type="submit"] {
    display: block !important;
    margin: 20px auto !important;
  }

  /* Ensure last row is full width */
  .contact-form form .propertyDetails > div:last-child,
  .contact-form form .propertyDetails > div:nth-last-child(2) {
    width: 100% !important;
    text-align: center !important;
  }
}


/**********************************************
 * DESKTOP — TWO COLUMNS WITH CORRECT PAIRING
 **********************************************/
@media (min-width: 1025px) {

  /* Desktop 2-column pairing */

  /* Row 1: First Name | Last Name */
  .propertyDetails .form-group__first-name,
  .propertyDetails .form-group__last-name {
    width: calc(50% - 20px) !important;
    float: left !important;
  }

  /* Row 2: Phone | Suburb */
  .propertyDetails .form-group__phone-no,
  .propertyDetails.form-group__post-code,   /* OR .form-group__suburb depending on your field */
  .propertyDetails .form-group__suburb {
    width: calc(50% - 20px) !important;
    float: left !important;
  }

  /* Row 3: Email full width */
  .propertyDetails .form-group__email {
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }

  /* Submit button row full width + centered */
  .contact-form form .propertyDetails > div:last-child,
  .contact-form form  .propertyDetails > div:nth-last-child(2) {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    text-align: center !important;
    margin-top: 20px !important;
  }

  .contact-form .propertyDetails input[type="submit"],
  .contact-form .propertyDetails button[type="submit"] {
    display: inline-block !important;
    margin: 0 auto !important;
  }
}


/* MOBILE + TABLET for property detail page carousel and now selling section */
@media (max-width: 1024px) {
  .property-detail-container {
    flex-direction: column !important;
    align-items: stretch !important; /* FORCE full-width children */
  }

  .property-detail-container > div,
  .property-detail-container > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;  /* stop shrinking behavior */
  }
}

/*for email in the sticky right  sales consultant nav in prop details page*/
.chat-with-us-email a {
  color: #000 !important;
}

/* key features in prop details page*/
/* Desktop layout for property features */
/* Desktop & tablet: multi-column layout, auto wrapping */
main .property-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 850px;
  column-gap: 2rem;
  row-gap: .5rem;
}

main .property-features__sub-title {
  color:#9c866d !important;
}

/* Each feature row */
main .property-feature {
  display: flex;
  align-items: center;
}

/* Icon + text */
main .property-feature__icon {
  flex: 0 0 auto;
  margin-right: 0.75rem;
  background:rgba(0, 0, 0, 0) linear-gradient(255deg, #493824 0%, #a08b73 27%, #b6a087 50%, #a18c74 68%, #493824 100%) 0% 0% no-repeat padding-box
}

main .property-feature__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

/* Optional: on very small screens you can collapse to 1 column */
@media (max-width: 600px) {
  main .property-features-grid {
    grid-template-columns: 1fr;
  }
}


/* key features in prop details page -end*/

#content .component.form.contact-form form .form-submit-border {
    border-radius: 0;
    padding: 0 !important;
    background: rgba(0,0,0,0) !important;
    margin-left: 25% !important;
}

/* Mobile + Tablet (up to 1023px) */
@media (max-width: 1023px) {
    #content .component.form.contact-form form .form-submit-border {
        margin-left: 15% !important;
    }
}

/*owl carousel*/
.pp-carousel__slides .pp-carousel__slide-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.pp-carousel__slides .pp-carousel__slide {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Make inner dot smaller + darker */
.pp-carousel .owl-dots .owl-dot span {
  width: 5px !important;
  height: 5px !important;
  background-color: #000 !important; /* solid black inner dot */
  border-radius: 50% !important;
  margin: 0 auto !important; /* keep it centered */
  display: block !important;
}

/*Ensure the designed for rhythms of left description to stay within viewport in designs page*/
.pp-two-promo__container {
  gap: 0px !important;     /* reduce spacing between images & text */
  column-gap: 0px !important;
  padding-right: 30px !important;  /* remove factory right padding */
}

.pp-two-promo__content {
  margin-left: 0 !important;   /* sometimes Sitecore adds this */
  padding-left: 0 !important;  /* remove internal padding */
}

/* Ensure the section between hero banner and NOW SELLING is #e6e5e1 */
.project-resi.pp-page.now-selling-page #default-id .ab-bg-stone {
  background-color: #e6e5e1 !important;   /* ensures matching background */
  padding-top: 50px !important;           /* adds gap ABOVE Now Selling */
  padding-bottom: 0 !important;           /* avoid extra spacing */
  margin-top: 0 !important;               /* remove unwanted gaps */
}

/* Style the Now Selling heading */
.project-resi.pp-page.now-selling-page #default-id .ab-bg-stone h2 {
 
  font-size: 28px;
  letter-spacing: 4px;
  font-weight: 400;
  text-transform: uppercase;
  color: #9c866d;

  margin: 0 0 0 20px !important;   /* spacing below heading */
  padding: 0 !important;
  background-color: #e6e5e1;       /* ensures “no white gap” behind text */
}

/* Remove white gap that was coming from #content wrapper */
.project-resi.pp-page.now-selling-page #content {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background-color: #e6e5e1 !important; /* unify background */
}

/* Pull filter bar up so gap between heading and filters is seamless */
.resi-property-search-filter {
  margin-top: 0 !important;
  background-color: #ffffff !important;
}

/* pesky white gap in top of mq page in desktop mode*/


/* there is a margin-top added on-fly in the main div, removing it since its unnecessary since adds a white gap*/
body #content {
    margin-top: 0px !important;
}

/* the following for news event pages*/
body.tr-news-page #content  {
    margin-top: 220px !important;
}

@media (min-width: 1024px) {
  body.resi-page main {
    margin-top: 80px;    
  }
}

@media (max-width: 1023px) {
  body.resi-page main {
    margin-top: 40px;    
  }
}

.jsx-4267498336.enquire-button {
    background: rgba(0, 0, 0, 0) linear-gradient(255deg, #493824 0%, #a08b73 27%, #b6a087 50%, #a18c74 68%, #493824 100%) 0% 0% no-repeat padding-box;
    color: #fff;
    border: none;
    padding: 10px 20px;
    text-transform: uppercase;
    text-align: center;
    transition: all .3s ease-in-out;
    font-family: "Idlewild Book", "Open Sans", Helvetica, Arial, sans-serif !important;    
    font-weight: 400;
}

.chat-with-us-container .jsx-2226229635.chat-with-us-header  { 
  background-color: #9c866d !important;
  padding: 10px 20px !important;
  color: #fff !important;
}

.chat-with-us-container  .chat-with-us-header.jsx-1008184362 {
  background-color: #9c866d !important;  
}

.resi-property-detail .chat-with-us__container .chat-with-us-container .chat-with-us-title {
  background: #9c866d;
  height: 40px;  
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-left: 15px;
}

/* Put text + button on same row */
.resi-property-booking__wrapper {
    display: flex !important;
    /* flex-direction: row !important; */
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: nowrap !important; /* force them to stay on the same line */
}

/* Allow the text to wrap and not take 100% width */
.resi-property-booking__description {
    flex: 1 1 auto !important;
    /* max-width: 70% !important;    */
    margin: 0 !important;
}

/* Button stays its natural size and sits on same row */
.resi-property-booking__cta {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* Footer logo centering override */
.tr-footer__text-section-logo-section img[alt="Welcome to the Country logo"] {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important; 
  width: auto !important;
}

.tr-footer__text-section-logo-section {
  text-align: center !important;
}

/* ================================
   HERO LOGO – CENTER + SCALE
   ================================ */

/* 1. Center the wrapper */
main .hero-banner-one__overlay-wrapper.container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 2. Ensure text container does not restrict width */
main .hero-banner-one__text {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

/* 3. Override the image sizing completely */
main .hero-banner-one__overlay-wrapper img {
  width: 220px !important;     /* 👈 CONTROL SIZE HERE */
  max-width: none !important;
  height: auto !important;
  margin-right: 20px !important;
  display: block !important;
}

/* 4. Kill Tailwind utility restriction */
@media (min-width: 1024px) {
  main .hero-banner-one__overlay-wrapper img.w-20 {
      width: 720px !important;      
  }
}

@media (max-width: 767px) {
  main .hero-banner-one__overlay-wrapper img.w-20 {
      width: 300px !important;
      
  }
}

@media (min-width: 768px) and (max-width: 1023px)  {
  main .hero-banner-one__overlay-wrapper img.w-20 {
      width: 550px !important;
      
  }
}

/* News and Events Description */
main .pp-page.tr-news-and-events
.hero-banner-one__description p {  
  font-size: 20px !important;          /* 👈 adjust */ 
}

/* for sales form submit button*/
main .pp-page.thank-you-page .btn.btn-default {
  width: 350px !important;
}

/* for top-down arrangement of controls just for sales form */
#content .greyBackgroundForm.salesForm {
  display: grid !important;
  grid-template-columns: 1fr !important; /* single column */
  row-gap: 32px;                          /* vertical spacing */
}

/* Make sure each form group spans full width */
#content .greyBackgroundForm.salesForm .form-group,
#content .greyBackgroundForm.salesForm .input-wrapper {
  width: 100% !important;
  margin: 0 !important;
}


/* News and events page next button */
main .image-grid .btn.btn-primary-1 {
  background-color: #a89378; /* match design brown */
  color: #ffffff;

  padding: 14px 28px;
  border-radius: 999px; /* pill */
  border: none;

  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.5px;

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

  white-space: nowrap;
  cursor: pointer;
}

/* Lock CTA size regardless of text */
main .image-grid .btn.btn-primary-1 {
  width: 140px;          /* 👈 adjust once, stays fixed */
  min-width: 140px;
  max-width: 140px;

  height: 44px;          /* optional but recommended */
  padding: 0;            /* remove text-based sizing */

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

  white-space: nowrap;
  text-align: center;
}

.paging-indicator {
  font-size: 14px;
  font-weight: 500;
  color: #6f6f6f;
  white-space: nowrap;
}

/* Ensure buttons + text stay aligned */
.image-grid .d-flex.align-items-center {
  gap: 16px;
}

/*design page animation for jack merlo slides */
.pp-two-promo__promo-txt {
  display: none;
}

.pp-two-promo__promo-txt.is-active {
  display: block;
}

.pp-two-promo__image-container {
  transition: flex 0.4s ease;
}

/* ================================
   Sticky Enquire Button (Bottom)
   ================================ */

/* === HARD OVERRIDE: Sticky Enquire Button === */
/* =================================================
   Sticky Enquire — Bottom Floating Variant
   ================================================= */

body.resi-page .sticky-header--bottom {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);

  width: calc(100% - 32px);
  max-width: 360px;

  z-index: 50; /* above content, below menus if needed */
}

/* Ensure button fills container nicely */
body.resi-page .sticky-header--bottom .sticky-header__button {
  display: block;
  width: 100%;
  text-align: center;
}

@media (min-width: 1024px) {
  .resi-page #content .component.form.contact-form.pp-bg-marble {
      background:unset !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tr-news-and-events .image-grid .card .card__title, .tr-news-and-events #propertyListing .card .card__title{
    font-size: 12px !important;
  }
}

/* =========================================================
   News and Events page -MOBILE-SAFE PAGINATION (PREV / PAGE / NEXT)
   Prevents overflow on small viewports
   ========================================================= */

/* =========================================================
   MOBILE PAGINATION – SINGLE ROW, NO OVERFLOW
   ========================================================= */

/* =========================================================
   IMAGE GRID PAGINATION – REMOVE LEFT PADDING (MOBILE)
   ========================================================= */
/* =========================================================
   IMAGE GRID PAGINATION – SINGLE LINE LAYOUT
   ========================================================= */

/* =========================================================
   IMAGE GRID + PAGINATION – BOTTOM ALIGN (ALL VIEWPORTS)
   ========================================================= */

/* Make image grid act like a vertical layout */
.component.image-grid {
  display: flex;
  flex-direction: column;
}

/* Ensure content takes available space */
.component.image-grid .component-content {
  display: flex;
  flex-direction: column;
}

/* Image list grows, pagination sticks to bottom */
.component.image-grid .container {
  flex: 1 1 auto;
}

/* PAGINATION */
.image-grid__pagination {
  margin-top: auto;           /* 👈 pushes pagination to bottom */
  width: 100%;
}

/* Inner layout (single line) */
.image-grid__pagination-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100vw;
  /* padding: 0 16px; */
  box-sizing: border-box;
  gap: 12px;
}

/* Buttons */
.image-grid__pagination-prev .btn,
.image-grid__pagination-next .btn {
  min-width: 0;
  width: auto;
  padding: 8px 14px;
  white-space: nowrap;
}

/* Page indicator */
.image-grid__pagination-indicator {
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
}

/* ============================================================
   FIX HORIZONTAL OVERFLOW — TABLET & MOBILE
   Affects image-1 and image-3 only
   ============================================================ */

@media (max-width: 1024px) {

  /* 1️⃣ Never allow this component to expand viewport width */
  .pp-featured-video-promos,
  .pp-featured-video-promos__scroll,
  .pp-featured-video-promos__promos {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* 2️⃣ Reset desktop positioning hacks on mobile/tablet */
  .pp-featured-video-promos__image-1,
  .pp-featured-video-promos__image-3 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    position: relative;
  }

  /* 3️⃣ Force images to be fluid (kills % width overflow) */
  .pp-featured-video-promos__image-1 img,
  .pp-featured-video-promos__image-3 img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    display: block;
  }

}

/* ============================================================
   EXTRA SAFETY (optional but recommended)
   Prevents any future horizontal bleed on location pages
   ============================================================ */

.location-page {
  overflow-x: hidden;
}