/* ==================================================
   Siam Property — site specific overrides
   Loaded last, after style.css / coloring.css.
   ================================================== */


/* --------------------------------------------------
   Cookie consent banner
   -------------------------------------------------- */

#cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1041;
  padding: 24px 0;
  background: var(--bg-dark-1);
  color: rgba(255, 255, 255, .75);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
  transform: translateY(100%);
  transition: transform .3s ease;
}

#cookie-banner.is-visible {
  transform: translateY(0);
}

#cookie-banner h4 {
  color: #ffffff;
}

#cookie-banner a:not(.btn-main) {
  color: var(--primary-color);
  text-decoration: underline;
}

/* the outline button is dark by default, which disappears on the dark bar */
#cookie-banner a.btn-main.btn-line {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .5);
}

@media only screen and (max-width: 992px) {
  #cookie-banner {
    padding: 18px 0;
    max-height: 80vh;
    overflow-y: auto;
  }

  #cookie-banner .btn-main {
    margin-top: 6px;
  }
}


/* --------------------------------------------------
   "From render to finished house" — uniform tiles
   -------------------------------------------------- */

/* the renders are 16:9 and the site photos are 3:2, so the paired tiles came
   out different heights. Force every image in the section to one ratio and
   crop to fill, so all six tiles are exactly the same size. */
#futured a.gallery-item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}


/* --------------------------------------------------
   Company facts table (home About block)
   -------------------------------------------------- */

/* the reused stats rows force values onto one line, which clips a long
   registered company name — let the value column wrap instead */
.company-facts .w-40 {
  white-space: normal;
  word-break: break-word;
}


/* --------------------------------------------------
   Legal pages (privacy / terms / cookies)
   -------------------------------------------------- */

.legal-doc h2 {
  font-size: 26px;
  margin-top: 50px;
  margin-bottom: 14px;
}

.legal-doc h4 {
  margin-top: 26px;
  margin-bottom: 8px;
}

.legal-doc p,
.legal-doc li {
  line-height: 1.7em;
}

.legal-doc ul {
  margin-bottom: 20px;
  padding-left: 20px;
}

.legal-doc li {
  margin-bottom: 8px;
}

.legal-doc table {
  width: 100%;
  margin: 10px 0 24px 0;
  font-size: 15px;
  border-collapse: collapse;
}

.legal-doc table th,
.legal-doc table td {
  padding: 10px 14px;
  border: solid 1px rgba(0, 0, 0, .1);
  vertical-align: top;
  text-align: left;
}

.legal-doc table th {
  background: var(--bg-grey);
  color: var(--heading-font-color);
  font-weight: 600;
}

.legal-doc code {
  background: var(--bg-grey);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 14px;
  color: var(--heading-font-color);
}

/* anything still to be filled in by the client */
.legal-doc .placeholder,
span.placeholder {
  background: rgba(var(--primary-color-rgb), .15);
  border-bottom: dashed 1px var(--primary-color);
  padding: 0 4px;
  color: var(--heading-font-color);
}


/* --------------------------------------------------
   Language switcher (header dropdown)
   -------------------------------------------------- */

/* the dropdown panel itself */
#mainmenu li ul.lang-switcher {
  width: 220px;
  padding: 8px 0;
  border: solid 1px rgba(0, 0, 0, .08);
  border-radius: var(--rounded-1);
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
  overflow: hidden;
}

#mainmenu li ul.lang-switcher li {
  display: block;
  width: 100%;
  float: none;
  border: none;
  margin: 0;
}

#mainmenu li ul.lang-switcher li a {
  display: block;
  width: 100%;
  padding: 9px 18px;
  border: none;
  text-align: left;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1.4em;
  color: var(--heading-font-color);
  transition: background .2s ease, color .2s ease;
}

/* the template turns sub-menu links white on hover, which is invisible
   on the white dropdown — use the brand colour instead */
#mainmenu li ul.lang-switcher li a:hover,
#mainmenu ul.lang-switcher li:hover > a {
  color: var(--primary-color);
  background: rgba(0, 0, 0, .04);
}

/* currently selected language */
#mainmenu li ul.lang-switcher li a.current-lang {
  color: var(--primary-color);
  font-weight: 600;
}

#mainmenu li ul.lang-switcher li a.current-lang:after {
  font-family: "FontAwesome";
  content: "\f00c";
  float: right;
  font-size: 11px;
  line-height: 1.9em;
}

/* kill the template's animated underline span inside the dropdown */
#mainmenu li ul.lang-switcher li a span:not(.badge) {
  display: none;
}


/* --------------------------------------------------
   Language switcher — mobile / off-canvas menu
   -------------------------------------------------- */

@media only screen and (max-width: 992px) {

  /* the template leaves sub-menus collapsed and invisible inside the mobile
     menu, so the language list was unreachable on phones — force it open */
  #mainmenu li ul.lang-switcher {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    transition: none !important;
    width: 100% !important;
    padding: 4px 0 10px 0;
    margin: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  #mainmenu li ul.lang-switcher > li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    padding-left: 0;
    margin: 0;
    border: none;
  }

  #mainmenu li ul.lang-switcher > li > a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
    padding: 8px 0 8px 16px;
    font-size: 15px;
    background: none;
  }

  #mainmenu li ul.lang-switcher li a:hover,
  #mainmenu ul.lang-switcher li:hover > a {
    background: none;
    color: var(--primary-color);
  }

  #mainmenu li ul.lang-switcher li a.current-lang:after {
    float: none;
    margin-left: 8px;
  }

  /* the arrow injected next to "Language" is useless when the list
     is permanently expanded on mobile */
  #mainmenu > li.has-child > span {
    display: none;
  }
}


/* --------------------------------------------------
   Contact Us — clean contact card
   -------------------------------------------------- */
#section-contact .contact-lead{ max-width:620px; margin:14px auto 0; color:#6d6d6d; }
.contact-card{
  background:#fff; border-radius:16px;
  box-shadow:0 24px 60px rgba(31,42,38,.10);
  padding:36px 40px;
}
.contact-agent{ display:flex; align-items:center; gap:22px; }
.contact-agent-photo{
  width:118px; height:118px; border-radius:50%;
  object-fit:cover; flex:0 0 auto;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.contact-agent h4{ font-size:22px; }
.contact-agent-role{ color:var(--primary-color); font-weight:500; font-size:14px; }
.contact-actions{ padding-left:10px; }
.contact-line{
  display:flex; align-items:center; gap:16px;
  padding:12px 8px; border-radius:12px;
  color:inherit; text-decoration:none;
  transition:background .2s ease, transform .2s ease;
}
a.contact-line:hover{ background:rgba(183,147,37,.08); transform:translateX(3px); }
.contact-ico{
  width:50px; height:50px; border-radius:50%;
  background:rgba(183,147,37,.12); color:var(--primary-color);
  display:flex; align-items:center; justify-content:center;
  font-size:23px; flex:0 0 auto;
}
.contact-text{ display:flex; flex-direction:column; line-height:1.3; }
.contact-label{ font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:#9a9a9a; }
.contact-val{ font-size:18px; font-weight:600; color:#222; }
.contact-cta{ margin-top:22px; }
@media (max-width:991px){ .contact-card{ padding:30px 26px; } .contact-agent{ margin-bottom:22px; } }
@media (max-width:575px){
  .contact-card{ padding:24px 18px; }
  .contact-agent{ flex-direction:column; text-align:center; gap:14px; }
  .contact-actions{ padding-left:0; }
}