/* MDIX Properti Elegan — template fixes (design QA 2026-10-12).
   The theme is fixed-width (962px). From 1000px up it keeps its original layout;
   below 1000px this file turns it into a fluid one-column layout with a menu button. */

/* ---------- All widths ---------- */

/* Missing theme file (404) */
.flex-direction-nav { background: none; }

/* AA text contrast */
#content p,
.post .description p,
.post blockquote,
.post .details table tr td:first-child { color: #666 !important; }
#sidebar .testimonials-container p { color: #5f646c; }
#sidebar .testimonials-container p.buyer,
#sidebar .loan-calculator #total { color: #8a6a35; }
.images-available-num { color: #6b7076; }
#sidebar .login-form input[type="submit"],
#sidebar .loan-calculator input[type="submit"] { background: #8a6a35; filter: none; }
#quick-search input[type="submit"] { background: #2e5a8a; filter: none; }
.file-container .button-file { background: #3d7a32; filter: none; }

/* No text under 12px */
.radio-value,
#sidebar .login-form a,
.file-container .button-file,
#toTop { font-size: 12px; }

/* "Lihat detail" is a real button-sized target */
.view-details a { display: inline-block; padding: 0 14px; }

/* Images keep their ratio (HTML width/height only reserve space) */
.post .post-photos img,
.post .post-videos img,
#content .about img { height: auto; }

/* Map: keyless Google Maps embed */
#map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Footer copyright line */
.mdix-copyright {
  clear: both;
  margin: 0;
  padding: 18px 16px 22px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: #b5b5b5;
}

/* Menu button only exists below 1000px */
.mdix-menu-toggle { display: none; }

/* ---------- Below 1000px: fluid layout ---------- */
@media (max-width: 999px) {
  /* Header */
  #header { height: auto; padding: 10px 0 0; }
  #inner-header {
    width: auto;
    padding: 0 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  #logo { float: none; margin: 0; }
  #logo img { display: block; width: 136px; height: auto; }
  #header-phone {
    float: none;
    order: 3;
    width: 100%;
    margin: 4px 0 12px;
    font-size: 15px;
  }
  .mdix-menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
  }
  .mdix-menu-toggle span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 1px;
  }
  .mdix-menu-toggle:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px !important; }
  #header.mdix-menu-open .mdix-menu-toggle { background: rgba(255, 255, 255, 0.15); }

  .sf-menu {
    display: none;
    order: 4;
    float: none;
    position: static;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    flex: 0 0 calc(100% + 32px);
    margin: 0 -16px;
    padding: 4px 0 8px;
    text-align: left;
    background: #fff;
  }
  #header.mdix-menu-open .sf-menu { display: block; }
  .sf-menu:before,
  .sf-menu:after { display: none; }
  .sf-menu li { float: none; top: 0; }
  .sf-menu a {
    border-left: 0;
    border-top: 1px solid #ececec;
    padding: 14px 16px;
    font-size: 15px;
    line-height: 20px;
  }
  .sf-menu > li:first-child > a { border-top: 0; }
  .sf-menu a.sf-with-ul { padding-right: 16px; }
  .sf-sub-indicator { display: none; }
  .sf-menu ul {
    position: static !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    top: auto !important;
    left: auto !important;
    min-width: 0;
  }
  .sf-menu ul a { padding-left: 32px; text-transform: none; }

  /* Page frame */
  #container { width: auto; margin: 16px 16px 0; }
  #container:after { content: ""; display: block; clear: both; }

  /* Home slider */
  #slider-container { float: none; width: auto; height: auto; margin-bottom: 16px; }
  .flexslider .slides img {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    border-width: 4px;
  }
  .flex-caption {
    position: static;
    display: block;
    height: auto;
    padding: 8px 12px;
    background: #fff;
  }
  .flex-caption:before,
  .flex-caption:after { display: none; }
  .flex-caption p,
  .flex-caption p strong { max-height: none; }
  .flex-direction-nav { top: 12px; bottom: auto; right: 12px; }
  .flex-control-nav {
    position: static;
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }
  .flex-control-nav li { flex: 1 1 0; margin: 0; padding: 3px; }
  .flex-control-thumbs img { display: block; width: 100%; height: auto; box-sizing: border-box; }

  /* Quick search (home: own box; inner pages: top of content) */
  #container > #quick-search { float: none; width: auto; }
  #quick-search .head { text-align: left; }
  #container > #quick-search .switcher-bg { margin: 0 25px; }
  #container > #quick-search .row { padding: 0 16px 8px; }
  #quick-search .selectbox-dropdown,
  #quick-search select.normal {
    width: 100% !important;
    box-sizing: border-box;
  }
  #container > #quick-search .row .selectbox-dropdown.left,
  #container > #quick-search .row .selectbox-dropdown.right,
  #quick-search .select-container .selectbox-dropdown.small {
    width: calc(50% - 9px) !important;
  }
  #container > #quick-search .row .left,
  #quick-search .column .first { margin-right: 10px; }
  #container > #quick-search .row:after { content: ""; display: block; clear: both; }
  #quick-search .column,
  #quick-search .column:first-child {
    float: none;
    width: auto;
    margin: 0;
    padding: 12px 16px 0;
  }
  #quick-search .column:last-child { padding-bottom: 16px; }
  #quick-search .select.small { width: calc(50% - 9px) !important; }
  .switcher a.on,
  .switcher a.off { height: 28px; line-height: 28px; padding: 0 4px; }
  .switcher-bg { height: 28px; }

  /* Content + sidebar stack */
  #content,
  #content.no-bg {
    float: none;
    width: auto;
    box-sizing: border-box;
  }
  #content { padding: 20px 16px; }
  #content .about {
    float: none;
    width: auto;
    margin-bottom: 16px;
    box-sizing: border-box;
  }
  #content .about p { max-height: none; }
  #content .services { float: none; width: auto; }
  #content h3 a { display: inline-block; padding: 4px 0; line-height: 1.2; }
  #content .services li p { max-height: none; }

  /* Listing cards: fixed-size theme cards in a centred grid */
  #new-listings {
    display: grid;
    grid-template-columns: repeat(auto-fill, 238px);
    justify-content: center;
    column-gap: 10px;
    row-gap: 18px;
    padding-top: 15px;
  }
  #new-listings.clearfix:after { display: none; }
  div.box,
  .box:nth-child(3n+3) { float: none; margin: 0 !important; }
  .box .next,
  .box .prev {
    top: 8px;
    width: 24px;
    height: 24px;
    background-position: center center;
  }
  .box .next { right: 4px; }
  .box .prev { left: 4px; }

  #content-title > span { float: none; display: block; }
  #content-title > ul { float: none; display: flex; border-top: 1px solid #eee; }
  #content-title li { flex: 1 1 0; }
  #pagenation ul { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 20px; }
  #pagenation li,
  #pagenation li:first-child { margin: 0; }

  /* Sidebar widgets */
  #sidebar { float: none; width: auto; margin-top: 16px; }
  #sidebar > ul { display: grid; grid-template-columns: 1fr; gap: 13px; }
  #sidebar > ul > li { margin-top: 0; }
  #sidebar .login-form input[type="text"],
  #sidebar .login-form input[type="password"] {
    width: 100%;
    height: 32px;
    box-sizing: border-box;
  }
  #sidebar .login-form input[type="checkbox"] { width: 24px; height: 24px; vertical-align: middle; }
  #sidebar .login-form .remember-me { line-height: 24px; }
  #sidebar .login-form input[type="submit"] { min-height: 36px; }
  #sidebar .login-form a { display: block; padding: 6px 0; margin-top: 2px; }
  #sidebar .testimonials-container .slides_control,
  #sidebar .testimonials-container .slides_control > div { width: 100% !important; }
  #sidebar .testimonials ul.pagination li a {
    width: 8px;
    height: 8px;
    padding: 8px;
    background-clip: content-box !important;
  }
  #sidebar .testimonials ul.pagination { margin-top: 15px; }
  #sidebar .loan-calculator input[type="text"] { height: 28px; box-sizing: border-box; width: calc(100% - 91px); }
  #sidebar .loan-calculator label { height: 28px; line-height: 28px; }
  #sidebar .loan-calculator .row { float: none; }
  #sidebar .loan-calculator input[type="submit"] { height: 36px; line-height: 36px; width: 120px; }

  /* Property detail */
  .post .post-image { width: auto; }
  .post .post-image img { display: block; width: 100%; height: auto; }
  .post .details {
    float: none;
    padding: 12px 16px;
    background: none;
    border-bottom: 1px dotted #ccc;
  }
  .post .details table { width: 100%; }
  .post .details table tr td { line-height: 22px; padding-top: 4px; padding-bottom: 4px; }
  .post .description { float: none; width: auto; padding: 15px 16px; }
  .post .post-photos,
  .post .post-videos {
    float: none;
    width: auto;
    padding: 15px 16px 20px;
  }
  .post .post-photos ul,
  .post .post-videos ul { display: grid; gap: 12px; }
  .post .post-photos ul { grid-template-columns: repeat(2, 1fr); }
  .post .post-videos ul { grid-template-columns: 1fr; }
  .post .post-photos li,
  .post .post-videos li { float: none; margin: 0 !important; }
  .post .post-photos img,
  .post .post-videos img { display: block; width: 100%; height: auto; }

  /* Forms (submit + contact) */
  #content .row,
  #content .row-1 { float: none; width: 100%; }
  #content .row label,
  #content .row-1 label {
    float: none;
    display: block;
    width: auto;
    height: auto;
    padding: 0 0 6px;
    line-height: 1.4;
    text-align: left;
  }
  #content .row input[type="text"],
  #content .row textarea,
  #content .row-1 input[type="text"],
  #content .row-1 textarea {
    float: none;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 36px;
    box-sizing: border-box;
  }
  #content .row textarea,
  #content .row-1 textarea { height: 160px; min-height: 120px; }
  #content .row-1 .selectbox-dropdown { width: 100% !important; box-sizing: border-box; }
  .file-container { float: none; width: auto; }
  .file-container .button-file { height: 30px; line-height: 30px; }
  .radiobox-container { float: none; height: auto; padding: 8px 0 0; }
  .radiobox { width: 24px; height: 24px; }
  .radio-value { height: 24px; line-height: 24px; }
  #content input[type="submit"] { float: none; margin: 8px 0 0; min-height: 40px; }
  #map { width: auto; height: 280px; margin: 20px 0 32px; }

  /* Footer */
  #footer { margin-top: 32px; }
  #inner-footer { width: auto; padding: 0 16px; }
  #inner-footer > ul > li,
  #inner-footer > ul > li:first-child { float: none; width: auto; margin: 0 0 8px; }
  .our-agents { width: auto !important; }
  .last-tweets a { display: inline-block; padding: 2px 0; }
  .contact-us input[type="text"] { width: calc(100% - 52px); height: 32px; box-sizing: border-box; }
  .contact-us textarea { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
  .contact-us input[type="submit"] { min-height: 36px; }
  #back-to-top { margin-top: 36px; }
}

/* Tablets / phone landscape: use the width */
@media (min-width: 600px) and (max-width: 999px) {
  #container > #quick-search .slideToggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
  }
  #container > #quick-search .switcher { grid-column: 1 / -1; }
  #content .about { float: left; width: calc(50% - 8px); }
  #content .services { float: right; width: calc(50% - 8px); }
  #new-listings { clear: both; }
  #sidebar > ul { grid-template-columns: repeat(3, 1fr); }
  #quick-search .select-container { display: grid; grid-template-columns: repeat(3, 1fr); }
  #quick-search .column:last-child { padding-bottom: 0; }
  .post .post-photos ul { grid-template-columns: repeat(4, 1fr); }
  .post .post-videos ul { grid-template-columns: repeat(2, 1fr); }
  #inner-footer > ul { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 24px; }
}

/* Phones: 16px gutters, comfortable type */
@media (max-width: 599px) {
  #content .services li { padding: 16px; }
  #content .services li p { margin-left: 0; clear: both; padding-top: 8px; }
  #content h3 { font-size: 17px; }
  .post .post-title { font-size: 16px; line-height: 1.35; }
}