/* Shared visual system: calm, clear and consistent across public and admin pages. */
:root{
  --gold:#c69442;
  --gold-light:#f0d7a6;
  --ink:#302c26;
  --muted:#746e64;
  --green:#263b34;
  --cream:#f6f3ed;
  --line:#e5dfd4;
  --ui-border:#dfd8cc;
  --ui-radius:12px;
  --ui-shadow:0 8px 28px rgba(48,44,38,.07);
}

html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;padding:0;background:var(--cream);color:var(--ink);font:16px/1.7 'Noto Sans Thai',sans-serif;-webkit-font-smoothing:antialiased}
main{width:100%;max-width:1440px;min-height:65vh;margin:0 auto;padding:30px clamp(18px,4vw,56px) 64px}
p{color:var(--muted)}
a{color:#77571f;text-underline-offset:3px}
a:hover{color:#9b6c22}
::selection{background:#ead5ac;color:#302c26}
:focus-visible{outline:3px solid #c69442!important;outline-offset:3px}

header{position:relative;z-index:30;max-width:none;min-height:92px;height:auto;margin:0;padding:12px max(22px,calc((100vw - 1328px)/2));gap:clamp(12px,2vw,26px);background:#292623;border-bottom:1px solid #514634;box-shadow:0 5px 18px rgba(22,20,18,.12)}
header .brand-logo{width:138px;height:auto;max-height:82px;object-fit:contain}
header nav{align-items:center;gap:clamp(8px,1.05vw,16px);font-size:13px}
header nav a{min-height:38px;padding:5px 1px;color:#f2e8d6;font-size:13px;line-height:1.35;text-decoration:none;transition:color .18s ease}
header nav a:hover,header nav a.active{color:#edc77e}
header nav a.active{border-color:var(--gold)}
header .language-switch select{width:66px;height:38px;min-height:38px;border:1px solid #806b49;border-radius:8px;background:#302d28;color:#fff2d7;font-size:13px}
header .account-menu{width:auto;min-width:0;max-width:220px;flex:0 1 auto}
header .account-menu summary{display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;gap:5px;width:100%;max-width:220px;height:38px;min-height:38px;padding:6px 9px;border:1px solid #8e7447;border-radius:9px;color:#f5e8d0;font-size:13px;line-height:1.2;background:#302d28;white-space:nowrap}
header .account-menu summary>span[translate="no"]{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header .account-menu summary .activity-badge{flex:0 0 auto;min-width:18px;height:18px;margin:0;padding:0 4px!important;font-size:11px}
header .account-menu summary .account-label{display:block;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header .account-menu summary .account-chevron{position:relative;top:0;display:inline-flex;flex:0 0 10px;align-items:center;justify-content:center;width:10px;height:10px;margin:0!important;font-size:0;line-height:0}
header .account-menu summary .account-chevron::before{content:"";display:block;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px)}
header .account-menu>div{z-index:100;max-height:min(72vh,620px);overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fffdf9;box-shadow:0 18px 42px rgba(0,0,0,.24)}
header .account-menu a,header .account-menu button{min-height:38px;padding:8px 10px;color:var(--ink);font-size:13px;text-decoration:none}
header .account-menu a:hover,header .account-menu button:hover{background:#f7f1e5;color:#624519}

h1,h2,h3,h4{color:var(--ink);line-height:1.45;letter-spacing:normal}
h1{font-size:clamp(28px,3vw,42px);font-weight:600;margin:12px 0 18px}
h2{font-size:clamp(21px,2vw,29px);font-weight:600}
h3{font-size:19px;font-weight:600}
.page-heading{gap:18px;margin:12px 0 24px}
.page-heading h1,.catalog-title h2{margin:0;font-size:clamp(25px,2.5vw,36px);font-weight:600;letter-spacing:-.02em}
.page-heading p,.catalog-title p{margin:6px 0 0;font-size:15px}
.eyebrow{color:#8e6829;font-size:13px;font-weight:600;letter-spacing:.04em}
.edition-label{font-size:13px;letter-spacing:.06em}
.owner-invitation h2{font-size:clamp(21px,2vw,26px);line-height:1.5}
.owner-invitation>.button{font-size:14px;gap:18px}
.portal-breadcrumb{padding:16px 0;font-size:14px;color:#777167}

.button,.button.outline{min-height:44px;border-radius:8px;padding:10px 17px;font-size:15px;font-weight:600;line-height:1.4;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.button{background:#30483d;border-color:#30483d;color:#fff}
.button:hover{background:#21372e;border-color:#21372e;color:#fff;box-shadow:0 5px 14px rgba(38,59,52,.18);transform:translateY(-1px)}
.button.outline{background:#fffdf9;border-color:#cfc3ad;color:#443a2a}
.button.outline:hover{background:#f5ead5;border-color:#b38a49;color:#493816}
button:not(.button){font:inherit}
.related-listings-arrow{font-size:25px!important}
.small{min-height:36px!important;padding:7px 11px!important;font-size:13px!important}

input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{min-height:44px;border:1px solid #d8d1c6;border-radius:8px;background:#fffefa;color:var(--ink);font:inherit;padding:10px 12px;transition:border-color .16s ease,box-shadow .16s ease}
input::placeholder,textarea::placeholder{color:#8d877e;opacity:1}
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,select:focus,textarea:focus{border-color:#b88a42;box-shadow:0 0 0 3px rgba(198,148,66,.16)}
input[type=checkbox],input[type=radio]{accent-color:#a8782b}
label{color:#49443c}
label,.portal-search label{font-size:14px}
textarea{line-height:1.6}
input[type=file]{max-width:100%;font-size:14px}

.panel,.auth,.verification-panel,.availability-form,.appointment,.chat,.viewing-booking,.report-box{border:1px solid var(--line);border-radius:var(--ui-radius);background:#fffdf9;box-shadow:var(--ui-shadow)}
.panel,.auth,.verification-panel{padding:clamp(18px,2.5vw,30px)}
.panel h2:first-child,.panel h3:first-child{margin-top:0}
.stats>div{border:1px solid var(--line);border-radius:10px;background:#fffdf9}
.stats b{color:#795b27}
.dashboard-links{gap:10px;margin:20px 0 26px}
.dashboard-links a{min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:9px;background:#fffdf9;color:#4c4439;font-size:14px;text-decoration:none;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.dashboard-links a:hover{transform:translateY(-1px);border-color:#c9ad79;background:#fbf5e9;color:#634719}

.discovery-shell{border:1px solid #e2d9ca;border-radius:16px;background:#fffdf9;box-shadow:var(--ui-shadow)}
.portal-intro{background:linear-gradient(145deg,#263b34 0%,#332d25 100%);color:#fff8ea}
.portal-intro h1{color:#fff8ea;font-size:clamp(34px,4vw,52px);line-height:1.35}
.portal-intro h1>span{color:#efc77a}
.portal-search{background:#fffdf9}
.portal-search-primary input,.portal-search-primary select,.portal-search-secondary input,.portal-search-secondary select{border-radius:8px}
.portal-search-primary .button{border-radius:8px;background:#c69442;border-color:#c69442;color:#2c2519}
.portal-search-primary .button:hover{background:#b17d2d;border-color:#b17d2d;color:#fff}
.purpose-options label{border-radius:8px}
.portal-quick a{border-radius:6px;text-decoration:none}
.catalog-toolbar{border-color:var(--line)}
.type-pills a{border-radius:8px;font-size:14px}
.type-pills a.current{background:#30483d}
.active-filters a{border-radius:999px;background:#f6ecd9;border-color:#e6d4b2;color:#674d20;font-size:13px}
.portal-cards{gap:20px}
.portal-cards .card{overflow:hidden;border:1px solid var(--line);border-radius:13px;background:#fffdf9;box-shadow:0 4px 16px rgba(48,44,38,.055)}
.portal-cards .card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(48,44,38,.12)}
.portal-cards .card-image{border:0}
.portal-cards .badge,.portal-cards .status{border-radius:6px}
.portal-cards .card-body{padding:18px}
.portal-cards h3{font-size:18px;line-height:1.55;font-weight:600}
.portal-cards .location,.card-area,.portal-cards .specs,.portal-cards .card-bottom small,.unit-price,.contact-card,.card-date{font-size:13px}
.portal-cards .card-bottom b{font-size:26px;color:#6f5325}
.contact-card{border:1px solid #ddcfb7;border-radius:7px;padding:7px 10px;text-decoration:none}
.portal-empty{border:1px solid var(--line);border-radius:12px;background:#fbf8f2}

.detail-layout{gap:24px}
.detail-heading{margin:14px 0 22px}
.detail-heading h1{font-size:clamp(26px,2.5vw,36px);line-height:1.45}
.detail-heading p{font-size:14px}
.gallery{overflow:hidden;border-radius:14px;background:#e8e3d9}
.property-facts{gap:12px}
.property-facts>div,.chips span{border:1px solid var(--line);border-radius:9px;background:#fffdf9}
.contact-panel{border-top:3px solid var(--gold);border-radius:12px;background:#fffdf9;box-shadow:var(--ui-shadow)}
.viewing-booking{padding:clamp(18px,2.5vw,28px)}
.viewing-booking h2{margin-top:0}
.viewing-booking form{gap:16px}
.appointment-check{border-radius:8px!important}
.related-listings{border-color:var(--line)}
.related-listing-card{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fffdf9;box-shadow:0 4px 14px rgba(48,44,38,.06)}
.related-listing-image{background:#e8e3d9}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fffdf9;box-shadow:var(--ui-shadow)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{background:#f4efe5;color:#51483a;font-size:13px;font-weight:600;white-space:nowrap}
th,td{padding:12px 14px;border-color:#ece7de;vertical-align:top}
tbody tr:hover{background:#fdf9f1}
td small{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.moderation-tag,.notice,.chips span{border-radius:7px}
.notice{border:1px solid #ead7b2;background:#fbf4e6;color:#654e25;padding:12px 15px}
.form-error{color:#a3372e}

.chat{padding:clamp(16px,2vw,24px)}
.chat-heading{border-color:var(--line)}
#messages{border-radius:10px;background:#faf8f4}
.bubble{border:1px solid #e8e1d6;border-radius:14px;font-size:15px}
.bubble.mine{border-color:#30483d}
.conversation{border-radius:9px}
.conversation:hover,.conversation.active{background:#f6f0e5}
.calendar-toolbar{gap:10px}
.calendar-toolbar h2{font-size:20px}
.calendar-day{border-color:var(--line);border-radius:9px;background:#fffdf9}
.calendar-day:hover{border-color:#c69442;background:#fbf3e4}
.appointment,.appointment-editor,.closed-times{border-radius:10px}
.appointment-editor{border-color:var(--line);background:#fbf8f2}
.appointment-editor input,.availability-form input,.availability-form select{min-height:46px;height:auto;font-size:15px}
.save-search-dialog{border:1px solid #dfcfb2;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.25)}

footer{max-width:none;margin:0;padding:26px max(22px,calc((100vw - 1328px)/2));border-top:1px solid #514634;background:#292623;color:#e6ddcf}
footer a{color:#edc77e}
footer small{font-size:13px}
#toast,#compare-bar{border-radius:10px;box-shadow:0 12px 30px rgba(35,33,29,.2)}

@media(max-width:900px){
  main{padding:24px 24px 48px}
  header{padding:12px 24px}
  header nav{flex-wrap:wrap;gap:7px 12px}
  .detail-layout{gap:18px}
  .portal-cards{gap:16px}
}
@media(max-width:640px){
  body{font-size:15px}
  main{padding:18px 16px 40px}
  header{min-height:0;padding:10px 16px;gap:10px}
  header .brand-logo{width:116px;max-height:72px}
  header .language-switch select{height:36px;min-height:36px;width:58px;padding:0 6px;font-size:12px}
  header .account-menu{width:132px;max-width:132px;flex:0 0 132px}
  header nav{gap:3px 7px}
  header nav a{min-height:36px;padding:4px 1px;font-size:12px;line-height:1.3}
  header nav .appointment-nav{font-size:12px}
  header .account-menu summary{height:36px;min-height:36px;padding:5px 7px;font-size:12px}
  .portal-breadcrumb{padding:12px 0}
  .page-heading{align-items:flex-start}
  .page-heading h1{font-size:27px}
  .panel,.auth,.verification-panel{padding:17px}
  .button,.button.outline{min-height:44px;padding:9px 13px;font-size:14px}
  .portal-cards{gap:14px}
  .portal-cards .card-body{padding:15px}
  .portal-cards .card-image{height:210px}
  .portal-cards .card-bottom b{font-size:24px}
  .table-wrap table{min-width:650px}
  .viewing-booking{padding:17px}
  .viewing-booking input:not([type=checkbox]):not([type=radio]){font-size:16px}
  .dashboard-links a{font-size:12px}
  footer{padding:22px 16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Second pass: balance the compact navigation with denser forms and listings. */
header nav{gap:clamp(8px,1.1vw,15px)}
header nav a{font-size:14px}
header .account-menu a,header .account-menu button{font-size:14px}
.page-heading h1,.catalog-title h2{font-size:clamp(24px,2.2vw,31px)}
.property-form{max-width:820px;gap:14px}
.property-form h2{font-size:23px;line-height:1.4;padding:7px 0;margin:5px 0}
.property-form .form-grid{gap:13px 16px}
.property-form input:not([type=checkbox]):not([type=radio]):not([type=file]),.property-form select,.property-form textarea{height:auto!important;min-height:43px!important;padding:8px 11px!important;border-radius:7px;font-size:15px!important}
.property-form label{gap:5px;font-size:13px}
.portal-cards{gap:18px}
.portal-cards .card-image{height:185px}
.portal-cards .card-body{padding:16px}
.portal-cards h3{font-size:17px;line-height:1.5;min-height:0;margin:6px 0}
.portal-cards .card-bottom{padding-top:13px;margin-top:15px}
.portal-cards .card-bottom b{font-size:24px}
.portal-empty{padding:32px 22px}
.portal-empty>div{font-size:38px;line-height:1.1;margin-bottom:10px}
.portal-empty h3{font-size:23px;margin:8px 0}
.portal-empty p{font-size:14px;line-height:1.7;margin:0 auto 16px}
.portal-empty .button{font-size:14px;padding:9px 16px}
.dashboard-links a{font-size:13px}
@media(max-width:640px){
  header nav{gap:3px 7px}
  header nav a{font-size:13px}
  header nav .appointment-nav{font-size:13px}
  header .account-menu a,header .account-menu button{min-height:36px;padding:7px 9px;font-size:13px}
  .property-form{gap:12px}
  .property-form .form-grid{gap:11px}
  .property-form h2{font-size:21px}
  .portal-cards .card-image{height:180px}
  .portal-cards .card-body{padding:14px}
  .portal-cards h3{font-size:16px}
  .portal-empty{padding:26px 16px}
  .portal-empty h3{font-size:21px}
  .dashboard-links a{font-size:12px}
}

/* Keep each header link on the same baseline and hit area. */
header nav{align-items:center}
header nav a{display:inline-flex;align-items:center;justify-content:center;height:40px;min-height:40px;padding:0 2px;font:500 13px/1.2 'Noto Sans Thai',sans-serif;white-space:nowrap}
@media(max-width:640px){header nav a{height:38px;min-height:38px;padding:0 2px;font-size:13px}header nav .appointment-nav{width:100%;padding:0 2px;font-size:13px}}

/* Compact catalog cards so the search results are easier to scan. */
.catalog-title{margin-bottom:15px}
.catalog-title h2{font-size:clamp(22px,1.9vw,28px)}
.catalog-title p{font-size:13px}
.catalog-toolbar{padding:10px 0;margin-bottom:18px}
.type-pills a{padding:6px 12px;font-size:13px}
.active-filters{gap:6px;margin-bottom:14px}
.portal-cards{gap:16px}
.portal-cards .card-image{height:150px}
.portal-cards .card-body{padding:13px}
.portal-cards .location,.portal-cards .card-area,.portal-cards .specs,.portal-cards .card-bottom small,.portal-cards .unit-price,.portal-cards .contact-card,.portal-cards .card-date{font-size:12px}
.portal-cards h3{font-size:15px;line-height:1.45;margin:5px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.portal-cards .card-area{margin:0 0 8px}
.portal-cards .specs{gap:8px 11px}
.portal-cards .card-bottom{padding-top:10px;margin-top:12px;gap:8px}
.portal-cards .card-bottom b{font-size:21px}
.portal-cards .card-date{padding-top:8px;margin-top:9px}
.contact-card{padding:6px 9px}
@media(max-width:640px){
  .portal-cards .card-image{height:160px}
  .portal-cards .card-body{padding:12px}
  .portal-cards h3{font-size:15px}
  .portal-cards .card-bottom b{font-size:20px}
}

/* Match the language selector and account menu controls and chevrons. */
header .language-switch{position:relative;display:inline-flex;align-items:center;flex:0 0 auto}
header .language-switch select{box-sizing:border-box;width:66px;height:38px;min-height:38px;padding:0 22px 0 10px!important;border:1px solid #8e7447;border-radius:8px;background-color:#302d28;background-image:none!important;color:#f5e8d0;font:500 13px/1.2 'Noto Sans Thai',sans-serif;appearance:none;-webkit-appearance:none}
header .language-switch::after{content:"";position:absolute;right:10px;top:50%;width:6px;height:6px;border-right:1.5px solid #f5e8d0;border-bottom:1.5px solid #f5e8d0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
header .account-menu summary{height:38px;min-height:38px;border-radius:8px;border-color:#8e7447;background:#302d28;color:#f5e8d0}
header .account-menu summary .account-chevron{width:10px;height:10px;flex-basis:10px}
header .account-menu summary .account-chevron::before{width:6px;height:6px;border-color:#f5e8d0;transform:rotate(45deg)}
@media(max-width:640px){
  header .language-switch select{width:58px;height:36px;min-height:36px;padding:0 19px 0 8px!important;font-size:12px}
  header .language-switch::after{right:8px;width:5px;height:5px}
  header .account-menu summary{height:36px;min-height:36px}
  header .account-menu summary .account-chevron::before{width:5px;height:5px}
}

/* Use one explicit icon for both dropdowns; do not rely on font glyphs. */
:root{--ui-chevron:url("data:image/svg+xml,%3Csvg xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox=%220 0 10 10%22%3E%3Cpath d=%22M2 3.5L5 6.5L8 3.5%22 fill=%22none%22 stroke=%22%23f5e8d0%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
header .language-switch::after{top:50%;right:9px;width:8px;height:8px;border:0;background:var(--ui-chevron) center/contain no-repeat;transform:translateY(-50%)}
header .account-menu summary .account-chevron{display:block;flex:0 0 8px;width:8px;height:8px;background:var(--ui-chevron) center/contain no-repeat}
header .account-menu summary .account-chevron::before{display:none;content:none}
@media(max-width:640px){header .language-switch::after{right:7px;width:8px;height:8px}header .account-menu summary .account-chevron{flex-basis:8px;width:8px;height:8px}}

/* Keep the account control's chevron visible, centered, and aligned to the selector. */
header .account-menu>summary{list-style:none}
header .account-menu>summary::-webkit-details-marker{display:none}
header .account-menu summary .account-chevron{flex:0 0 10px;width:10px;height:10px;margin-left:auto!important}
header .language-switch::after{width:10px;height:10px}
@media(max-width:640px){header .account-menu summary .account-chevron{flex-basis:10px;width:10px;height:10px}header .language-switch::after{width:10px;height:10px}}