/* =========================================================
   MeeSabDee — Template "msd_livora"
   ดัดแปลงจากดีไซน์ต้นแบบ Livora
   ไฟล์นี้คุม "โครงเว็บ" (header/nav/hero/footer) ทั้งเว็บ
   ส่วนหน้าค้นหาทรัพย์/รายละเอียดทรัพย์ มีสไตล์ของตัวเองอยู่ใน
   components/com_meesabdeeproperties/tmpl/... ซึ่งอ้างอิงตัวแปรสี
   ชุดเดียวกันกับที่ประกาศไว้ที่นี่ (:root) เพื่อให้สีตรงกันทั้งเว็บ
   ========================================================= */

:root{
  --brand:#0A4BC8;
  --brand-dk:#08389A;
  --brand-lt:#EAF1FF;
  --gold:#F2A33C;
  --ink:#101A2E;
  --muted:#5C687E;
  --line:#E4E8F0;
  --bg:#FFFFFF;
  --soft:#F6F8FB;
  --r:16px;
  --disp:'Prompt',sans-serif;
  --body:'Anuphan',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{max-width:100%;display:block}
.wrap{max-width:1220px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--disp);line-height:1.35}
h1,h2,h3,h4{text-wrap:balance}
p,li{text-wrap:pretty}

.sec{padding:58px 0}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px}
.shead .en{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:block;font-family:var(--disp)}
.shead h2{font-size:clamp(1.35rem,2.8vw,1.85rem);font-weight:700}
.shead p{color:var(--muted);font-size:.9rem}
.shead .more{font-family:var(--disp);font-weight:600;font-size:.85rem;color:var(--brand);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.shead .more:hover{text-decoration:underline}

/* ── header ── */
.top{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:26px;height:66px}
.logo{font-family:var(--disp);font-weight:700;font-size:1.35rem;display:flex;align-items:center;gap:9px}
.logo img{height:38px;display:block}
.mainnav{display:flex;gap:22px;font-size:.92rem;font-weight:500}
.mainnav a:hover{color:var(--brand)}
.mainnav a.hot,.mainnav a.current{color:var(--brand);font-weight:600}
.mainnav .has-dropdown{position:relative}
.mainnav .dropdown{display:none;position:absolute;top:calc(100% + 12px);left:0;min-width:180px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px rgba(10,25,60,.18);padding:6px;z-index:60}
.mainnav .has-dropdown:hover .dropdown{display:block}
.mainnav .dropdown a{display:block;padding:9px 14px;border-radius:8px;font-size:.88rem;font-weight:500}
.mainnav .dropdown a:hover{background:var(--brand-lt)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:14px}
.postbtn{font-family:var(--disp);font-weight:600;font-size:.88rem;background:var(--brand);color:#fff;padding:11px 22px;border-radius:12px;display:inline-block}
.postbtn:hover{background:var(--brand-dk);color:#fff}
@media (max-width:940px){.mainnav{display:none}}

/* ── simple page-header hero (ใช้กับหน้าอื่นที่ไม่ใช่หน้าแรก) ── */
.msd-simple-hero{background:linear-gradient(120deg,var(--brand-dk),var(--brand));color:#fff;padding:54px 0}
.msd-simple-hero h1{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:700}
.msd-simple-hero p{color:rgba(255,255,255,.85);margin-top:8px;font-size:.98rem}

/* ── footer ── */
footer{background:#0A142E;color:#fff;margin-top:64px;padding:52px 0 26px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:28px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.1)}
@media (max-width:940px){.fgrid{grid-template-columns:1fr 1fr}}
.fgrid h4{font-family:var(--disp);font-size:.9rem;margin-bottom:12px;color:#FFD98A}
.fgrid a{display:block;color:rgba(255,255,255,.62);font-size:.85rem;margin-bottom:8px}
.fgrid a:hover{color:#fff}
.fdesc{color:rgba(255,255,255,.62);font-size:.86rem;margin-top:10px;max-width:24em}
.fbottom{display:flex;justify-content:space-between;gap:14px;padding-top:20px;color:rgba(255,255,255,.4);font-size:.78rem;flex-wrap:wrap}
.fsocial{display:flex;gap:10px;margin-top:14px}
.fsocial a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff}
.fsocial a:hover{background:var(--brand)}

/* ── ปุ่ม/การ์ดทั่วไปที่อาจใช้ร่วมกันหลายหน้า ── */
.btn-primary{font-family:var(--disp);font-weight:600;background:var(--brand);color:#fff;padding:12px 24px;border-radius:12px;display:inline-block;border:none}
.btn-primary:hover{background:var(--brand-dk);color:#fff}

/* Joomla system messages ให้ดูกลืนกับดีไซน์ */
#system-message-container{max-width:1220px;margin:16px auto 0;padding:0 20px}
.alert{border-radius:12px;padding:14px 18px;margin-bottom:10px;font-size:.9rem}

/* =========================================================
   หน้าแรก — ธีม Livora เต็มรูปแบบ
   ========================================================= */
.sec{padding:58px 0}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px}
.shead .en{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:block;font-family:var(--disp)}
.shead h2{font-size:clamp(1.35rem,2.8vw,1.85rem);font-weight:700}
.shead .more{font-family:var(--disp);font-weight:600;font-size:.85rem;color:var(--brand);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.shead .more:hover{text-decoration:underline}

/* ── hero ── */
.home-hero{position:relative;overflow:hidden;padding:70px 0 90px;color:#fff;background:linear-gradient(120deg,var(--brand-dk),var(--brand))}
.home-hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.home-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,15,40,.45),rgba(8,56,154,.78))}
.home-hero .wrap{position:relative;z-index:2}
.home-hero h1{font-size:clamp(2rem,4.8vw,3.1rem);font-weight:700;text-align:center}
.home-hero h1 em{font-style:normal;color:#FFD98A}
.home-hero-sub{text-align:center;margin:12px auto 32px;max-width:44em;color:rgba(255,255,255,.9);font-size:1.02rem}

.home-search{background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(6,20,60,.35);max-width:900px;margin:0 auto;overflow:hidden}
.home-tabs{display:flex;border-bottom:1px solid var(--line)}
.home-tab{position:relative;padding:14px 30px;cursor:pointer}
.home-tab input{position:absolute;opacity:0}
.home-tab span{font-family:var(--disp);font-weight:600;font-size:.95rem;color:var(--muted)}
.home-tab input:checked + span{color:var(--brand)}
.home-fields{display:grid;grid-template-columns:1.5fr 1fr 1fr auto;gap:0;align-items:stretch}
.home-field{padding:14px 18px;border-left:1px solid var(--line)}
.home-field:first-child{border-left:none}
.home-field label{display:block;font-size:.68rem;color:var(--muted);font-weight:600;letter-spacing:.05em;margin-bottom:3px}
.home-field input,.home-field select{width:100%;border:none;outline:none;font-family:inherit;font-size:.92rem;background:transparent;color:var(--ink)}
.home-gobtn{background:var(--brand);color:#fff;border:none;font-family:var(--disp);font-weight:600;font-size:.98rem;padding:0 34px;cursor:pointer}
.home-gobtn:hover{background:var(--brand-dk)}
@media (max-width:860px){.home-fields{grid-template-columns:1fr 1fr}.home-gobtn{grid-column:1/-1;padding:14px}.home-field{border-left:none;border-top:1px solid var(--line)}.home-field:first-child{border-top:none}}

/* ── property cards (ใช้ร่วมกับทรัพย์แนะนำ) ── */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pgrid{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.16s;position:relative}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(10,25,60,.12);border-color:#cdd6e6}
.card .im{display:block;aspect-ratio:16/11;position:relative;background:var(--soft);overflow:hidden}
.card .im img{transition:transform .4s ease}
.card:hover .im img{transform:scale(1.05)}
.bdg{position:absolute;top:10px;left:10px;z-index:4;display:flex;gap:6px}
.b1{font-family:var(--disp);font-size:.66rem;font-weight:600;padding:3px 10px;border-radius:7px;color:#fff}
.b-sell{background:var(--brand)}
.b-rent{background:#B07A1E}
.b-new{background:var(--gold)}
.card .meta{padding:16px 18px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1rem;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--disp);min-height:44px}
.loc{font-size:.8rem;color:var(--muted);margin:4px 0 10px}
.specs{display:flex;gap:14px;font-size:.78rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:9px;margin-top:auto}
.price{font-family:var(--disp);font-weight:800;font-size:1.3rem;color:var(--brand);margin-top:10px}

/* ── types ── */
.types{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
@media (max-width:980px){.types{grid-template-columns:repeat(4,1fr)}}
@media (max-width:620px){.types{grid-template-columns:repeat(3,1fr)}}
.type{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 10px 16px;text-align:center;transition:.15s;display:block}
.type:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:0 10px 24px rgba(10,75,200,.1)}
.type .ic{width:64px;height:64px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center}
.type .ic .ph{width:64px;height:64px;min-height:0;border:none;background:var(--brand-lt)}
.type .ic b{color:var(--brand);font-size:1.4rem}
.type b{font-size:.84rem;font-weight:600}

/* ── areas ── */
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:900px){.areas{grid-template-columns:repeat(2,1fr)}}
.area{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:12px;transition:.15s}
.area:hover{border-color:var(--brand);box-shadow:0 8px 22px rgba(10,75,200,.1)}
.area .pin{width:38px;height:38px;border-radius:10px;background:var(--brand-lt);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem}
.area b{font-family:var(--disp);font-size:.95rem;display:block;line-height:1.3}
.area span span{font-size:.78rem;color:var(--muted)}

/* ── why ── */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:900px){.why{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.why{grid-template-columns:1fr}}
.wcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.wcard .ic{width:44px;height:44px;border-radius:12px;background:var(--brand-lt);display:flex;align-items:center;justify-content:center;margin-bottom:12px;font-size:1.3rem}
.wcard h3{font-size:1rem;margin-bottom:5px;font-family:var(--disp)}
.wcard p{font-size:.86rem;color:var(--muted)}

/* ── agent band ── */
.band{background:linear-gradient(120deg,var(--brand-dk),var(--brand));border-radius:22px;color:#fff;padding:44px 46px;display:flex;align-items:center;gap:30px;flex-wrap:wrap;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.08);top:-140px;right:-80px}
.band h2{font-size:clamp(1.35rem,2.8vw,1.9rem);font-weight:700}
.band p{color:rgba(255,255,255,.85);font-size:.94rem;margin-top:6px;max-width:34em}
.band .btns{margin-left:auto;display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:2}
.bnd1{background:#fff;color:var(--brand-dk);font-family:var(--disp);font-weight:600;padding:13px 26px;border-radius:12px;display:inline-block}
.bnd1:hover{background:#FFD98A;color:var(--brand-dk)}
.bnd2{border:1.5px solid rgba(255,255,255,.6);color:#fff;font-family:var(--disp);font-weight:600;padding:13px 26px;border-radius:12px;display:inline-block}
.bnd2:hover{border-color:#fff;color:#fff}

/* ── articles ── */
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.arts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.arts{grid-template-columns:1fr}}
.art{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.16s;display:block}
.art:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(10,25,60,.12)}
.art .im{aspect-ratio:16/10;background:var(--soft);overflow:hidden}
.art .m{padding:14px 16px 16px}
.art h3{font-size:.95rem;font-weight:700;line-height:1.5;margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--disp);color:var(--ink)}
.art .by{font-size:.8rem;color:var(--muted)}

/* ── placeholder / empty state ── */
.ph{width:100%;height:100%;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#7c88a0;font-size:.74rem;font-weight:600;background:var(--soft);text-align:center;padding:10px}
.msd-empty-state{text-align:center;padding:60px 20px;color:var(--muted);background:var(--soft);border-radius:var(--r)}