/* MDIX Properti Sentosa — audit fixes (auditor 4). */

/* Hero title: the wide letter-spacing made the Indonesian title break mid-word on phones. */
@media (max-width: 767px) {
  .finder h1 {
    font-size: 26px;
    letter-spacing: 2px;
    line-height: 1.3;
    word-break: normal;
    overflow-wrap: normal;
  }
}

/* Phones: the search form is absolutely placed inside a fixed-height banner, so its lower
   fields (type, rooms, price, "Cari") disappeared under the property strip. Let it flow. */
@media (max-width: 767px) {
  #banner {
    height: auto !important;
    overflow: visible;
  }
  #banner .flex-banner,
  #banner .flex-banner .slides li {
    height: 260px;
  }
  .home-1 .finder {
    position: relative;
    top: auto;
    margin-top: -200px;
    padding-bottom: 20px;
  }
}

/* Phones: price slider and "Cari" button stacked instead of squeezed side by side. */
@media (max-width: 767px) {
  .finder .find-sec .col-xs-9,
  .finder .find-sec .col-xs-3.search {
    width: 100%;
  }
  .finder .find-sec .col-xs-3.search .btn,
  .finder .find-sec .col-xs-3.search button {
    width: 100%;
    margin-top: 12px;
  }
}

/* ===================== Design QA 2026-10-12 ===================== */
:root {
  --mdix-green: #2e7d32;      /* theme #4caf50 failed AA with white text (2.8:1) */
  --mdix-green-dark: #1b5e20;
  --mdix-orange: #bf360c;     /* theme #ff5722 failed AA as text on white (3.2:1) */
  --mdix-green-on-dark: #81c784;
  --mdix-orange-on-dark: #ffab91;
}

/* --- AA contrast: brand colours for text/buttons on light backgrounds --- */
.btn:not(.dropdown-toggle), .services li .icon, .services li .heading, .sub-banner .breadcrumb,
footer .subcribe, .find-sec .selected a, .find-sec .dropdown-menu a:hover,
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover,
.pagination > li > a:hover, .load-more:hover, .properti-detsil .tags li a:hover,
.register .regi-tag { background-color: var(--mdix-green); }
.btn:not(.dropdown-toggle):hover, .btn:not(.dropdown-toggle):focus { background-color: var(--mdix-orange); color: #fff; }
.bootstrap-select > .btn, .bootstrap-select > .btn:hover, .bootstrap-select > .btn:focus { background: #fff; }
footer .subcribe .btn { background-color: var(--mdix-green-dark); }
.services li .heading:hover, .services li:hover .heading { color: var(--mdix-green); background: #fff; }
.call-us .btn { border-bottom-color: var(--mdix-green-dark); }
.properti-detsil .sale-tag, .properties li .price-bg { background-color: var(--mdix-orange); }
.pagination li a, .load-more, .what-we-do .nav-tabs li a:hover, .what-we-do .nav-tabs li a:hover span,
.what-we-do .nav-tabs li a:hover i, .what-we-do .nav-tabs .active a span, .what-we-do .nav-tabs .active a i,
.blog-page .blog .post-admin h6, .properties li:hover .detail-sec a,
header .ownmenu ul.dropdown li a:hover, .ownmenu li > .megamenu li a:hover { color: var(--mdix-green); }
.pagination li a, .load-more { border-color: var(--mdix-green); }
header nav li.active a, header nav li:hover a, .cost-price-content span, #testimonials .testi h5,
.blog-page .blog .post-admin span, .properti-detsil .categories span, .properti-detsil .side-bar .recent-come li span,
.regi-sec li .forget, .regi-sec li .forget a, .regi-sec .checkbox label, .contact-info a { color: var(--mdix-orange); }
.find-sec .filter-option, .bootstrap-select > .btn { color: #555 !important; }
/* property strip sits on #444: lighter tints there */
.property-slide .sale { color: var(--mdix-green-on-dark); }
.property-slide .pri-info .auther h6 { color: var(--mdix-orange-on-dark); }
.find-sec:before { border-color: transparent var(--mdix-green) transparent transparent; }
.noUi-connect { background: var(--mdix-green); }

/* --- Hero: white title over a bright sky photo --- */
#banner .flex-banner .slides li { position: relative; }
#banner .flex-banner .slides li::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.15) 60%, rgba(0,0,0,.25));
  pointer-events: none;
}
.finder h1 { text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.call-us h1 a { color: #fff; }

/* --- Minimum text size 12px --- */
.properties li .tag, .home-3 .bnr-property .tag { font-size: 12px; }
.rights p { font-size: 12px; }

/* --- Footer --- */
footer .loc-info p { text-transform: none; }
footer .loc-info a, .top-bar .left-bar-side a { color: inherit; }
footer .loc-info a:hover, .top-bar .left-bar-side a:hover { color: #fff; text-decoration: underline; }
footer .social_icons li { margin: 0 8px 8px 0; }
footer .social_icons a { width: 44px; height: 44px; line-height: 44px; }
.top-bar .social_icons a { min-width: 32px; text-align: center; }

/* --- Targets: logo link, strip titles, cards --- */
header .logo a { display: inline-block; }
.property-slide .pri-info a { line-height: 24px; }
.properties .detail-sec > a { display: inline-block; min-height: 24px; }

/* --- Listing cards: spec strip wraps instead of overflowing into the card --- */
.properties .home-in { height: auto; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 10px; }
.properties .home-in li { float: none; width: auto; padding-left: 0; line-height: 37px; white-space: nowrap; }

/* --- Section ornaments / misc --- */
.parthner { display: none; } /* seller's fictional restaurant logos ("Cupcakes", "Grill House") — off-topic for a property agency */
.register .regi-tag { background-image: none; line-height: 43px; }
iframe.mdix-map { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
.mdix-map-wrap { height: 420px; }
.properti-detsil .location .inner { padding: 0; height: 320px; }
.pricing .price-head { font-size: 40px; padding-top: 22px; }
.pricing .curency { top: -12px; }

/* --- Index blog teasers: date/title anchored to the bottom over a stronger shade --- */
.home-1 .blog .b-details {
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.85) 100%);
}
.home-1 .blog .b-details .bottom-sec { left: 20px; right: 20px; bottom: 20px; }
.home-1 .blog .b-details .bottom-sec span { margin-top: 0; margin-bottom: 8px; }
.home-1 .blog .b-details .bottom-sec hr, .home-1 .blog .b-details .bottom-sec p { display: none; }
.home-1 .blog li:hover .b-details .bottom-sec { bottom: 20px; }

/* --- Accessible phone-menu button (js/mdix-menu.js) --- */
.mdix-menu-toggle { display: none; }
@media (max-width: 767px) {
  .ownmenu > li.showhide { display: none !important; }
  .mdix-menu-toggle {
    display: block; width: 100%; height: 48px; border: 0; background: #fff; color: #222;
    font-size: 24px; cursor: pointer;
  }
  .mdix-menu-toggle:focus-visible { outline: 3px solid var(--mdix-green); outline-offset: -3px; }
  header nav, header nav .ownmenu { min-height: 0; }
  .top-bar .left-bar-side span { display: none; }
}

/* --- Tablet & small laptop header: menu on one row --- */
@media (min-width: 992px) and (max-width: 1199px) {
  header nav li a { padding: 0 10px 25px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  header .logo { margin: 16px 0 4px; }
  header nav, header nav .ownmenu { min-height: 0; }
  header nav .ownmenu { display: flex; justify-content: center; flex-wrap: nowrap; }
  header nav li { margin-top: 0; padding-top: 14px; background-position: center 2px !important; }
  header nav li a { padding: 12px 10px; line-height: 20px; }
}

/* --- Tablet: hero form flows below the photo (it was covered by the property strip) --- */
@media (max-width: 991px) {
  #banner { height: auto !important; overflow: visible; }
  #banner .flex-banner, #banner .flex-banner .slides li { height: 320px; }
  #banner .flex-banner img { height: 100%; object-fit: cover; }
  .home-1 .finder { position: relative; top: auto; margin-top: -270px; padding-bottom: 24px; }
  .home-1 .finder .find-sec { margin-top: 40px; }
  /* call-to-action band: stack instead of squeezing the phone number and button */
  .call-us .overlay { text-align: center; }
  .call-us ul.row > li { width: 100%; float: none; }
  .call-us h1 { font-size: 30px; margin: 16px 0; }
  .call-us .btn { width: auto; padding-left: 32px; padding-right: 32px; }
  .call-us .no-padding { padding: 0 15px !important; }
  /* property strip: keep the small photo at its own size */
  .property-slide .plots .col-xs-4 img { max-width: 163px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  #banner .flex-banner, #banner .flex-banner .slides li { height: 360px; }
  .home-1 .finder { margin-top: -320px; }
  .finder h1 { font-size: 34px; letter-spacing: 4px; }
  /* services in a centred 2 x 2 grid so the labels are not cut by the corner ornament */
  .services ul.row > li.col-sm-3 { width: 50%; margin-bottom: 30px; }
  .services li section { max-width: 271px; margin: 0 auto; }
  .finder .find-sec .search .btn { padding-left: 0; padding-right: 0; }
  /* listing cards in two columns: the spec strip and titles fit */
  .properties ul.row > li.col-sm-4 { width: 50%; }
  .properties ul.row > li.col-sm-4:nth-child(2n+1) { clear: left; }
  /* footer in two columns */
  footer > .container > .row > li.col-sm-3 { width: 50%; }
  footer > .container > .row > li.col-sm-3:nth-child(2n+1) { clear: left; }
}

/* --- Phones --- */
@media (max-width: 767px) {
  .services li section { max-width: 271px; margin: 0 auto; }
  /* property strip: arrows no longer cover the title and agent name */
  .property-slide .plots { padding: 10px 48px; }
  .property-slide .owl-controls .owl-prev, .property-slide .owl-controls .owl-next { width: 40px; }
  .property-slide .owl-controls .owl-prev i, .property-slide .owl-controls .owl-next i { margin-top: 60px; }
  .property-slide .pri-info .auther h6 { margin-left: 12px; }
}

/* --- round 2: targets & contrast --- */
footer .recent-come .text-post a, footer .loc-info a, .side-bar .recent-come .text-post a { display: inline-block; min-height: 24px; line-height: 24px; }
footer .tweet a { display: inline-block; line-height: 24px; }
.property-slide .plots .col-xs-4 a { display: block; }
.properties .home-in li span { color: #595959; }
.properties .detail-sec p { color: #5f5f5f; }
@media (min-width: 768px) and (max-width: 991px) {
  .cost-price-content label { white-space: normal; }
  .finder .find-sec ul.row > li.col-sm-6 { width: 100%; }
}

/* --- round 2b: inner pages contrast / targets / sizes --- */
p { color: #666; }
.sub-banner .breadcrumb a { display: inline-block; line-height: 24px; }
.pricing .p-details a { white-space: nowrap; padding-left: 20px; padding-right: 8px; }
.properti-detsil .home-in li span { color: #595959; }
.properti-detsil .sale-tag.price { background: var(--mdix-green); }
.properti-detsil .categories li a { color: #555; display: block; line-height: 32px; }
.properti-detsil .socil-action li a { font-size: 12px; line-height: 28px; }
.properti-detsil .socil-action li i { height: 28px; line-height: 28px; }
.properti-detsil .socil-action li .rss { background: #bf360c; }
.properti-detsil .socil-action li .tw { background: #1b6c99; }
.properti-detsil .socil-action li .pin { background: #b71c1c; }
.properti-detsil .socil-action li .drib { background: #ad1457; }
.properti-detsil .socil-action li .g-plus { background: #1b7a3a; }
.properti-detsil .tags li a { color: #555; }
.agent-info a, .contact-info li > a { display: inline-block; line-height: 24px; }
.single-post blockquote { color: #555; }
.admin-info h5, .comments .media h6 { color: var(--mdix-green); }
.comments .media h6 span { color: #666; }
.comments .media a.btn { font-size: 12px; color: #444; padding: 4px 12px; line-height: 20px; }
.regi-sec li label { color: #555; font-size: 12px; }
.regi-sec li .forget, .regi-sec li .forget a { font-size: 12px; display: inline-block; line-height: 24px; }
.error-page h4 a { color: var(--mdix-green); }
@media (max-width: 767px) {
  .error-page .head-404 { font-size: 120px; }
}
.properti-detsil .flicker-post li a { display: block; }
.admin-info p { color: #666; }
.comments form .btn { background: var(--mdix-green); }
.regi-sec .checkbox label { font-size: 12px; }
.error-page h4 a { display: inline-block; line-height: 28px; }

/* --- round 3: inner pages on phones --- */
.blog-page .blog .b-details .bottom-sec { position: absolute; left: 20px; right: 20px; bottom: 16px; }
.blog-page .blog .b-details .bottom-sec span { margin-top: 0; margin-bottom: 8px; }
.blog-page .blog .b-details { background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.85) 100%); }
.properti-detsil .info-property .inner .col-sm-2 { display: none; } /* "owner" slot showed a vase of flowers */
.properti-detsil .info-property .inner .col-sm-10 { width: 100%; }
@media (max-width: 767px) {
  .sub-banner .breadcrumb li.pull-left { display: none; }
  .sub-banner .breadcrumb { text-align: center; }
  .blog-page .blog .b-details a { font-size: 16px; }
  .comments .media-body a { float: none; margin-top: 4px; }
  .comments .media h6 span { display: block; margin: 4px 0 0; }
  .register .regi-tag { margin-left: -20px; }
  .info-property.agents-info .agent-info li { float: none; width: 100%; margin-bottom: 6px; }
}
@media (max-width: 767px) {
  /* about page tabs: three equal columns instead of a broken wrap */
  .what-we-do .nav-tabs { display: flex; }
  .what-we-do .nav-tabs li { flex: 1 1 0; padding: 0 6px; }
  .what-we-do .nav-tabs li a span { font-size: 13px; }
  .what-we-do .nav-tabs li a i { margin-bottom: 10px; font-size: 24px; }
}
@media (min-width: 1400px) {
  /* property strip: arrows no longer cover the last card's title */
  .property-slide .prot-slide { padding: 0 60px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .services li .heading { font-size: 14px; padding-left: 12px; }
}
@media (min-width: 992px) {
  /* listing grid: unequal card heights made the third row float into the wrong column */
  .properties ul.row > li.col-sm-4:nth-child(3n+1) { clear: left; }
}