/* Rental.lk — shared styles */

:root{
  --orange:#FF6B2C;
  --orange-dark:#E84B16;
  --orange-soft:#FFF1EA;
  --ink:#1B1B1B;
  --muted:#6B6B6B;
  --line:#E6E2DD;
  --bg:#FFFFFF;
  --surface:#FAF9F7;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button, input, select, textarea{ font-family:inherit; font-size:inherit; }

.wrap{ max-width:1140px; margin:0 auto; padding:0 24px; }

/* ---------- Header ---------- */
header.site-header{
  border-bottom:1px solid var(--line);
  background:#fff;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  gap:20px;
}
.logo{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:20px;
  font-weight:700;
  flex-shrink:0;
}
.logo .mark{
  width:28px; height:28px;
  background:var(--orange);
  border-radius:7px;
  display:grid;
  place-items:center;
  color:#fff;
}
.nav-links{
  display:flex;
  gap:26px;
  font-size:14.5px;
  flex:1;
}
.nav-links a{ color:var(--muted); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); font-weight:600; }
.nav-right{
  display:flex;
  align-items:center;
  gap:16px;
  font-size:14.5px;
  flex-shrink:0;
}
.btn{
  display:inline-block;
  border:none;
  border-radius:7px;
  padding:9px 16px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
}
.btn-primary{ background:var(--orange); color:#fff; }
.btn-primary:hover{ background:var(--orange-dark); }
.btn-outline{ background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn-outline:hover{ border-color:var(--orange); }
.menu-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
}

/* ---------- Hero / search ---------- */
.hero{
  background:var(--surface);
  padding:48px 0;
  border-bottom:1px solid var(--line);
}
.hero h1{
  font-size:32px;
  margin:0 0 8px;
}
.hero p{
  color:var(--muted);
  margin:0 0 24px;
  font-size:15.5px;
}
.search-form{
  display:flex;
  gap:8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:6px;
  max-width:680px;
}
.search-form input, .search-form select{
  border:none;
  outline:none;
  padding:11px 12px;
  font-size:14.5px;
  background:transparent;
}
.search-form input[type="text"]{ flex:1; }
.search-form select{ border-left:1px solid var(--line); color:var(--muted); }
.search-form button{
  background:var(--orange);
  color:#fff;
  border:none;
  border-radius:7px;
  padding:0 20px;
  font-weight:600;
  font-size:14.5px;
}
.search-form button:hover{ background:var(--orange-dark); }

.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
.chip{
  border:1px solid var(--line);
  background:#fff;
  padding:6px 13px;
  border-radius:999px;
  font-size:13px;
  color:var(--muted);
}
.chip:hover{ border-color:var(--orange); color:var(--orange-dark); }

/* ---------- Section headings ---------- */
.section{ padding:44px 0; }
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:22px;
}
.section-head h2{ font-size:21px; margin:0; }
.section-head a{ font-size:13.5px; color:var(--orange-dark); font-weight:600; }

/* ---------- Category grid ---------- */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.cat-card{
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px;
  text-align:left;
}
.cat-card:hover{ border-color:var(--orange); background:var(--orange-soft); }
.cat-card .icon{
  width:36px; height:36px;
  border-radius:8px;
  background:var(--orange-soft);
  color:var(--orange-dark);
  display:grid;
  place-items:center;
  margin-bottom:10px;
}
.cat-card .name{ font-weight:600; font-size:14.5px; margin-bottom:2px; }
.cat-card .count{ font-size:12.5px; color:var(--muted); }

/* ---------- Listing cards ---------- */
.listing-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.listing-card{
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
.listing-card:hover{ border-color:var(--orange); }
.listing-photo{
  height:150px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(140deg, var(--orange), var(--orange-dark));
}
.listing-photo{ position:relative; }
.listing-card.premium{ border-color:#E8B23A; box-shadow:0 0 0 1px #E8B23A; }
.premium-badge{
  position:absolute;
  top:10px;
  left:10px;
  font-size:11px;
  font-weight:700;
  color:#5C3D00;
  background:#FFD15C;
  padding:3px 9px;
  border-radius:20px;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.listing-photo.alt{ background:linear-gradient(140deg,#4A4A4A,#1B1B1B); }
.listing-body{ padding:14px 16px; }
.listing-title{ font-weight:600; font-size:15px; margin-bottom:4px; }
.listing-loc{ font-size:12.5px; color:var(--muted); margin-bottom:8px; }
.listing-price{ font-weight:700; font-size:15px; }
.listing-price span{ font-weight:400; font-size:12.5px; color:var(--muted); }
.listing-tag{
  display:inline-block;
  font-size:11px;
  font-weight:600;
  color:var(--orange-dark);
  background:var(--orange-soft);
  padding:3px 8px;
  border-radius:5px;
  margin-bottom:8px;
}

/* ---------- Listings page layout ---------- */
.listings-layout{
  display:grid;
  grid-template-columns:230px 1fr;
  gap:28px;
  align-items:flex-start;
}
.filters{
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px;
}
.filters h3{ font-size:14px; margin:0 0 12px; }
.filter-group{ margin-bottom:20px; }
.filter-group label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  color:var(--ink);
  margin-bottom:8px;
  cursor:pointer;
}
.filter-group input[type="range"]{ width:100%; }
.results-count{ font-size:13.5px; color:var(--muted); margin-bottom:16px; }

/* ---------- Forms ---------- */
.form-card{
  max-width:520px;
  margin:0 auto;
  border:1px solid var(--line);
  border-radius:12px;
  padding:32px;
}
.form-card h1{ font-size:22px; margin:0 0 6px; }
.form-card > p{ color:var(--muted); font-size:14px; margin:0 0 24px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:7px;
  padding:10px 12px;
  font-size:14.5px;
  outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--orange); }
.field-row{ display:flex; gap:12px; }
.field-row .field{ flex:1; }
.form-note{ font-size:12.5px; color:var(--muted); margin-top:16px; text-align:center; }
.form-note a{ color:var(--orange-dark); font-weight:600; }
.success-msg{
  display:none;
  background:var(--orange-soft);
  border:1px solid var(--orange);
  color:var(--orange-dark);
  padding:12px 14px;
  border-radius:8px;
  font-size:13.5px;
  margin-bottom:16px;
}

/* ---------- Listing detail ---------- */
.detail-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:32px;
}
.detail-photo{
  height:320px;
  border-radius:10px;
  background:linear-gradient(140deg, var(--orange), var(--orange-dark));
  margin-bottom:16px;
}
.detail-thumbs{ display:flex; gap:8px; }
.detail-thumbs div{
  height:64px; flex:1;
  border-radius:7px;
  background:linear-gradient(140deg,#4A4A4A,#1B1B1B);
  opacity:0.7;
}
.detail-info h1{ font-size:24px; margin:0 0 6px; }
.detail-info .loc{ color:var(--muted); font-size:14px; margin-bottom:16px; }
.detail-info .desc{ font-size:14.5px; color:var(--ink); margin-bottom:20px; }
.spec-list{ list-style:none; padding:0; margin:0 0 20px; }
.spec-list li{
  display:flex; justify-content:space-between;
  padding:9px 0; border-bottom:1px solid var(--line);
  font-size:14px;
}
.spec-list li span:first-child{ color:var(--muted); }
.side-card{
  border:1px solid var(--line);
  border-radius:10px;
  padding:20px;
}
.side-card .price{ font-size:24px; font-weight:700; margin-bottom:2px; }
.side-card .price span{ font-size:13px; color:var(--muted); font-weight:400; }
.side-card .owner{
  display:flex; align-items:center; gap:10px;
  margin:16px 0; padding:14px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.owner-avatar{
  width:38px; height:38px; border-radius:50%;
  background:var(--orange-soft); color:var(--orange-dark);
  display:grid; place-items:center; font-weight:700; font-size:14px;
}

/* ---------- Footer ---------- */
footer.site-footer{
  border-top:1px solid var(--line);
  background:var(--surface);
  padding:36px 0 24px;
  margin-top:40px;
}
.footer-row{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px;
}
.footer-brand p{ color:var(--muted); font-size:13px; max-width:260px; margin:8px 0 0; }
.footer-links{ display:flex; gap:44px; flex-wrap:wrap; }
.footer-col h4{ font-size:12px; color:var(--muted); margin:0 0 10px; }
.footer-col a{ display:block; font-size:13.5px; margin-bottom:8px; color:var(--ink); }
.footer-col a:hover{ color:var(--orange-dark); }
.footer-bottom{
  margin-top:26px; padding-top:16px;
  border-top:1px solid var(--line);
  font-size:12px; color:var(--muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .nav-links{ display:none; }
  .menu-toggle{ display:block; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .listing-grid{ grid-template-columns:repeat(2,1fr); }
  .listings-layout{ grid-template-columns:1fr; }
  .detail-grid{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .cat-grid{ grid-template-columns:1fr; }
  .listing-grid{ grid-template-columns:1fr; }
  .field-row{ flex-direction:column; gap:0; }
  .hero h1{ font-size:26px; }
}


/* Premium visual polish */
body{background:radial-gradient(circle at 85% 8%,rgba(255,107,44,.055),transparent 28%),var(--bg)}
header.site-header{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);position:sticky;top:0;z-index:50;box-shadow:0 2px 18px rgba(20,15,10,.045)}
.logo .mark{background:linear-gradient(135deg,var(--orange),#FFB347);box-shadow:0 6px 15px rgba(255,107,44,.22)}
.btn-primary,.search-form button{background:linear-gradient(135deg,var(--orange),var(--orange-dark));box-shadow:0 7px 18px rgba(232,75,22,.20);transition:.2s ease}
.btn-primary:hover,.search-form button:hover{background:linear-gradient(135deg,var(--orange),var(--orange-dark));transform:translateY(-2px);box-shadow:0 11px 24px rgba(232,75,22,.28)}
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 90% 20%,rgba(255,179,71,.17),transparent 26%),radial-gradient(circle at 10% 90%,rgba(255,107,44,.10),transparent 30%),linear-gradient(135deg,#FFF9F5,#FFF3EA);padding:64px 0 58px}
.hero h1{font-size:clamp(32px,4vw,44px);line-height:1.12;letter-spacing:-1.2px}
.search-form{max-width:760px;border-color:#DDD6CE;border-radius:13px;box-shadow:0 10px 30px rgba(28,20,14,.08);transition:.2s ease}
.search-form:focus-within{border-color:rgba(255,107,44,.55);box-shadow:0 12px 34px rgba(28,20,14,.11),0 0 0 4px rgba(255,107,44,.08);transform:translateY(-1px)}
.chip{transition:.2s ease;box-shadow:0 2px 8px rgba(28,20,14,.035)}
.chip:hover{background:var(--orange-soft);border-color:var(--orange);color:var(--orange-dark);transform:translateY(-2px)}
.cat-card,.listing-card{border-color:#E4DED7;box-shadow:0 4px 18px rgba(28,20,14,.045);transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.cat-card{border-radius:13px;background:rgba(255,255,255,.92)}
.cat-card:hover,.listing-card:hover{border-color:rgba(255,107,44,.65);box-shadow:0 16px 38px rgba(28,20,14,.13);transform:translateY(-5px)}
.cat-card:hover{background:linear-gradient(145deg,#FFF8F3,#FFF0E8)}
.cat-card .icon{background:linear-gradient(135deg,#FFF0E8,#FFE1D2);transition:.22s ease}
.cat-card:hover .icon{transform:scale(1.08);box-shadow:0 7px 16px rgba(255,107,44,.13)}
.listing-card{border-radius:13px}
.listing-photo{background:linear-gradient(135deg,rgba(255,107,44,.95),rgba(232,75,22,.98));position:relative;overflow:hidden}
.listing-photo.alt{background:linear-gradient(135deg,#3B3B3B,#141414)}
.listing-tag{background:linear-gradient(135deg,#FFF0E8,#FFE4D5)}
.filters,.form-card,.side-card{background:rgba(255,255,255,.96);border-color:#E4DED7;box-shadow:0 5px 22px rgba(28,20,14,.045)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,107,44,.08)}
footer.site-footer{background:radial-gradient(circle at 85% 15%,rgba(255,179,71,.09),transparent 25%),var(--surface)}

/* =========================================================
   RENTAL.LK — ADVANCED UI / PREMIUM MARKETPLACE MODE
   ========================================================= */
:root{
  --orange:#ff641f;
  --orange-2:#ff8a3d;
  --orange-dark:#d9430d;
  --cream:#fff8f2;
  --ink:#141414;
  --muted:#737373;
  --line:rgba(20,20,20,.09);
  --glass:rgba(255,255,255,.72);
  --shadow-sm:0 8px 25px rgba(20,12,5,.07);
  --shadow-lg:0 24px 60px rgba(20,12,5,.14);
}

html{scroll-behavior:smooth}
body{
  overflow-x:hidden;
  background:
    radial-gradient(circle at 8% 12%,rgba(255,100,31,.055),transparent 25%),
    radial-gradient(circle at 92% 35%,rgba(255,138,61,.05),transparent 22%),
    #fff;
}

/* Header */
.site-header{
  position:sticky!important;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.82)!important;
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid rgba(20,20,20,.07)!important;
  box-shadow:0 4px 25px rgba(0,0,0,.035);
}
.nav{min-height:72px}
.logo{letter-spacing:-.5px}
.logo .mark{
  background:linear-gradient(135deg,#ff5c17,#ff9b4a)!important;
  box-shadow:0 8px 20px rgba(255,100,31,.28);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;
}
.logo:hover .mark{transform:rotate(-8deg) scale(1.1);box-shadow:0 12px 28px rgba(255,100,31,.35)}
.nav-links a{position:relative;padding:8px 0;transition:.25s ease}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--orange),var(--orange-2));transition:right .3s ease;
}
.nav-links a:hover::after,.nav-links a.active::after{right:0}
.nav-links a:hover,.nav-links a.active{color:var(--orange-dark)!important}

/* Buttons */
.btn,.search-form button{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:10px!important;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark))!important;
  box-shadow:0 8px 22px rgba(255,100,31,.22);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
}
.btn::before,.search-form button::before{
  content:"";position:absolute;top:0;bottom:0;left:-120%;width:70%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-20deg);transition:left .55s ease;z-index:-1;
}
.btn:hover,.search-form button:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(255,100,31,.30);filter:saturate(1.08)}
.btn:hover::before,.search-form button:hover::before{left:140%}
.btn:active,.search-form button:active{transform:translateY(0) scale(.98)}

/* Hero */
.hero{
  position:relative;
  min-height:470px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 84% 35%,rgba(255,139,61,.24),transparent 22%),
    radial-gradient(circle at 70% 90%,rgba(255,100,31,.12),transparent 27%),
    linear-gradient(135deg,#fffaf6 0%,#fff2e7 52%,#fff8f3 100%)!important;
  border-bottom:1px solid rgba(20,20,20,.06)!important;
}
.hero::before,.hero::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
}
.hero::before{
  width:430px;height:430px;right:-180px;top:-210px;
  border:70px solid rgba(255,100,31,.055);
}
.hero::after{
  width:260px;height:260px;left:-150px;bottom:-180px;
  background:rgba(255,177,92,.10);
}
.hero .wrap{position:relative;z-index:2}
.hero h1{
  max-width:780px!important;
  font-size:clamp(38px,5vw,62px)!important;
  line-height:1.02!important;
  letter-spacing:-2.8px!important;
  font-weight:800!important;
  margin-bottom:18px!important;
  background:linear-gradient(100deg,#121212 10%,#3d2419 55%,#e65117 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{max-width:700px!important;font-size:17px!important;line-height:1.7!important}

/* Search */
.search-form{
  max-width:820px!important;
  margin-top:28px;
  padding:8px!important;
  border:1px solid rgba(20,20,20,.10)!important;
  border-radius:16px!important;
  box-shadow:0 18px 45px rgba(35,20,10,.12)!important;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.search-form:hover{transform:translateY(-2px);box-shadow:0 24px 55px rgba(35,20,10,.15)!important}
.search-form:focus-within{border-color:rgba(255,100,31,.45)!important;box-shadow:0 24px 55px rgba(35,20,10,.15),0 0 0 5px rgba(255,100,31,.07)!important}
.search-form input,.search-form select{min-height:46px}
.search-form input::placeholder{color:#999}

/* Chips */
.chip{
  background:rgba(255,255,255,.75)!important;
  border-color:rgba(20,20,20,.10)!important;
  padding:8px 15px!important;
  box-shadow:0 5px 15px rgba(30,15,5,.045);
  transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.chip:hover{transform:translateY(-3px) scale(1.02);background:#fff3eb!important;box-shadow:0 10px 22px rgba(255,100,31,.12)}

/* Sections */
.section{padding:64px 0!important}
.section-head{margin-bottom:28px!important}
.section-head h2{font-size:25px!important;letter-spacing:-.6px}
.section-head a{transition:transform .25s ease,color .25s ease}
.section-head a:hover{transform:translateX(5px);color:var(--orange)!important}

/* Category cards */
.cat-grid{gap:18px!important}
.cat-card{
  position:relative;
  overflow:hidden;
  min-height:155px;
  border:1px solid rgba(20,20,20,.08)!important;
  border-radius:18px!important;
  padding:22px!important;
  background:linear-gradient(145deg,#fff,#fffaf7)!important;
  box-shadow:0 7px 22px rgba(20,10,0,.045);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease;
}
.cat-card::before{
  content:"";position:absolute;inset:0;opacity:0;
  background:linear-gradient(135deg,rgba(255,100,31,.11),transparent 52%);
  transition:opacity .35s ease;
}
.cat-card::after{
  content:"→";position:absolute;right:20px;bottom:18px;font-size:20px;color:var(--orange);
  opacity:0;transform:translateX(-8px);transition:.3s ease;
}
.cat-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:rgba(255,100,31,.28)!important;background:#fff!important}
.cat-card:hover::before{opacity:1}
.cat-card:hover::after{opacity:1;transform:translateX(0)}
.cat-card .icon{
  position:relative;z-index:1;width:46px!important;height:46px!important;border-radius:13px!important;
  background:linear-gradient(135deg,#fff0e5,#ffd8c2)!important;
  box-shadow:inset 0 0 0 1px rgba(255,100,31,.08),0 8px 18px rgba(255,100,31,.10);
  transition:transform .35s ease,box-shadow .35s ease;
}
.cat-card:hover .icon{transform:rotate(-7deg) scale(1.12);box-shadow:0 12px 25px rgba(255,100,31,.18)}
.cat-card .name,.cat-card .count{position:relative;z-index:1}
.cat-card .name{font-size:15.5px!important}

/* Listing cards */
.listing-grid{gap:22px!important}
.listing-card{
  border:1px solid rgba(20,20,20,.08)!important;
  border-radius:18px!important;
  box-shadow:0 8px 25px rgba(20,10,0,.06)!important;
  transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s ease,border-color .38s ease;
}
.listing-card:hover{transform:translateY(-9px)!important;box-shadow:0 25px 55px rgba(20,10,0,.15)!important;border-color:rgba(255,100,31,.25)!important}
.listing-photo{height:190px!important;position:relative;overflow:hidden}
.listing-photo::before{
  content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 48%,transparent 65%);
  transform:translateX(-100%);transition:transform .65s ease;
}
.listing-card:hover .listing-photo::before{transform:translateX(100%)}
.listing-body{padding:18px!important}
.listing-title{font-size:16px!important;transition:color .25s ease}
.listing-card:hover .listing-title{color:var(--orange-dark)}
.listing-price{font-size:17px!important;color:#111}
.listing-tag{border-radius:999px!important;padding:5px 10px!important}

/* Forms / filters / details */
.filters,.form-card,.side-card{
  border:1px solid rgba(20,20,20,.08)!important;
  border-radius:18px!important;
  box-shadow:0 10px 30px rgba(20,10,0,.055)!important;
}
.filter-group label{transition:color .2s ease,transform .2s ease}
.filter-group label:hover{color:var(--orange-dark);transform:translateX(2px)}
.field input,.field select,.field textarea{border-radius:10px!important;transition:border-color .2s ease,box-shadow .2s ease}
.detail-photo{border-radius:18px!important;box-shadow:var(--shadow-lg)}
.side-card{position:sticky;top:95px}

/* Footer */
.site-footer{
  background:linear-gradient(145deg,#17120f,#241710)!important;
  color:#fff;
  border-top:none!important;
}
.footer-brand p,.footer-col h4,.footer-bottom{color:rgba(255,255,255,.58)!important}
.footer-col a{color:rgba(255,255,255,.88)!important;transition:color .2s ease,transform .2s ease}
.footer-col a:hover{color:#ff9b5c!important;transform:translateX(3px)}
.footer-bottom{border-top-color:rgba(255,255,255,.10)!important}

/* Entrance animations */
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.hero h1{animation:riseIn .65s ease both}
.hero p{animation:riseIn .65s .08s ease both}
.search-form{animation:riseIn .65s .16s ease both}
.chip-row{animation:riseIn .65s .24s ease both}
.cat-card,.listing-card{animation:riseIn .55s ease both}

@media (max-width:860px){
  .hero{min-height:430px;padding:58px 0!important}
  .hero h1{font-size:42px!important;letter-spacing:-1.8px!important}
  .side-card{position:static}
}
@media (max-width:560px){
  .nav{min-height:64px}
  .hero{min-height:400px}
  .hero h1{font-size:36px!important;letter-spacing:-1.4px!important}
  .search-form{flex-direction:column}
  .search-form select{border-left:0;border-top:1px solid var(--line)}
  .search-form button{min-height:46px;padding:0 18px}
  .section{padding:42px 0!important}
  .cat-card{min-height:140px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Error message (post-ad form) */
.error-msg{
  display:none;
  background:#FDECEB;
  border:1px solid #E8A69B;
  color:#A3301B;
  padding:12px 14px;
  border-radius:8px;
  font-size:13.5px;
  margin-bottom:16px;
}

/* ---------- Logo: pin image + site name ---------- */
.logo{ gap:10px; }
.logo-pin{ display:block; height:38px; width:auto; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.logo:hover .logo-pin{ transform:rotate(-8deg) scale(1.08); }
.logo-text{ font-size:22px; font-weight:800; letter-spacing:-.6px; line-height:1; }
.footer-brand .logo-pin{ height:34px; }
.site-header .logo{ margin-right:18px; }
@media (max-width:560px){ .logo-pin{ height:32px; } .logo-text{ font-size:20px; } .footer-brand .logo-pin{ height:30px; } }

/* Keep header and page content off the screen edge on phones and small laptops */
@media (max-width:1188px){
  .site-header .nav{ padding-left:24px; padding-right:24px; }
  .section.wrap{ padding-left:24px !important; padding-right:24px !important; }
}


/* ---------- Post-ad thank-you card ---------- */
.thanks-card{ text-align:center; padding:12px 4px 4px; animation:thanks-in .45s ease both; }
.thanks-card[hidden], #post-form-wrap[hidden]{ display:none; }
.thanks-icon{
  width:72px; height:72px; margin:0 auto 18px; border-radius:50%;
  background:var(--orange-soft); color:var(--orange-dark);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 8px rgba(255,107,44,.08);
}
.thanks-card h2{ font-size:24px; margin:0 0 8px; }
.thanks-lead{ color:var(--muted); font-size:15px; margin:0 0 20px; }
.thanks-wa{
  display:flex; gap:12px; align-items:flex-start; text-align:left;
  background:#F0FAF3; border:1px solid #CDEBD6; color:#1F5130;
  border-radius:12px; padding:14px 16px; font-size:14.5px; line-height:1.55; margin:0 0 16px;
}
.thanks-wa svg{ flex:none; margin-top:2px; color:#25A244; }
.thanks-sub{ color:var(--muted); font-size:13.5px; margin:0 0 22px; }
.thanks-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
@keyframes thanks-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }


/* ---------- Language switch (header) ---------- */
.lang-switch{
  display:inline-flex; padding:3px; gap:2px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
}
.lang-switch button{
  border:0; background:transparent; color:var(--muted); cursor:pointer;
  padding:5px 12px; border-radius:999px; font-size:13px; font-weight:600; line-height:1.2;
  min-width:40px;
}
.lang-switch button:hover{ color:var(--ink); }
.lang-switch button.active{
  background:linear-gradient(135deg,var(--orange),var(--orange-dark)); color:#fff;
  box-shadow:0 3px 10px rgba(232,75,22,.25);
}
.lang-switch button:focus-visible{ outline:2px solid var(--orange-dark); outline-offset:2px; }
@media (max-width:560px){
  .nav-right{ gap:8px; }
  .nav-right .btn{ display:none; }  /* "Post an ad" is still in the menu as "List your property" */
  .lang-switch button{ padding:5px 9px; min-width:34px; }
}

/* ---------- Sinhala typography ---------- */
html[lang="si"] body{
  font-family:"Noto Sans Sinhala","Nirmala UI","Iskoola Pota","Sinhala MN","Sinhala Sangam MN",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.65;
}
html[lang="si"] h1, html[lang="si"] h2, html[lang="si"] h3, html[lang="si"] .logo-text{ letter-spacing:0 !important; line-height:1.35 !important; }
html[lang="si"] .hero h1{ font-size:clamp(28px,5vw,44px) !important; }
html[lang="si"] .nav-links{ gap:20px; }

/* ---------- Floating WhatsApp button ---------- */
.wa-widget{ position:fixed; right:20px; bottom:20px; z-index:90; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.wa-fab{
  width:60px; height:60px; border-radius:50%; border:0; cursor:pointer; background:#25D366;
  display:grid; place-items:center; box-shadow:0 8px 22px rgba(18,140,70,.4);
  transition:transform .2s ease, box-shadow .2s ease; position:relative;
}
.wa-fab:hover{ transform:scale(1.07); box-shadow:0 10px 26px rgba(18,140,70,.5); }
.wa-fab:focus-visible{ outline:3px solid #fff; box-shadow:0 0 0 6px #128C46; }
.wa-fab::after{
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366;
  animation:wa-ping 2.4s ease-out infinite; pointer-events:none;
}
@keyframes wa-ping{ 0%{ transform:scale(1); opacity:.7; } 80%,100%{ transform:scale(1.6); opacity:0; } }
.wa-pop{
  width:290px; max-width:calc(100vw - 40px); background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:0 18px 44px rgba(20,15,10,.18); overflow:hidden;
  animation:wa-in .25s ease both;
}
.wa-pop[hidden]{ display:none; }
@keyframes wa-in{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:none; } }
.wa-pop-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:#128C46; color:#fff; padding:12px 14px;
}
.wa-pop-title{ font-weight:700; font-size:14.5px; }
.wa-pop-close{ background:none; border:0; color:#fff; font-size:22px; line-height:1; cursor:pointer; padding:0 4px; }
.wa-pop-text{ margin:0; padding:14px 14px 4px; font-size:14px; color:var(--ink); line-height:1.55; }
.wa-pop-start{
  display:block; margin:12px 14px 14px; text-align:center; background:#25D366; color:#fff;
  font-weight:700; font-size:14px; padding:11px; border-radius:10px;
}
.wa-pop-start:hover{ background:#1FB958; }
.wa-pop-start + .wa-pop-start{ margin-top:-4px; }
@media (max-width:560px){ .wa-widget{ right:14px; bottom:14px; } .wa-fab{ width:56px; height:56px; } }
@media (max-width:560px){
  .site-header .nav{ gap:10px; padding-left:16px; padding-right:16px; }
  .site-header .logo{ margin-right:0; gap:6px; }
  .logo-text{ font-size:18px; }
  .nav-right{ font-size:13.5px; margin-left:auto; }
  .lang-switch button{ padding:4px 8px; min-width:30px; font-size:12.5px; }
}

/* Compact rental disclaimer notice */
.rent-notice{
  display:flex; gap:9px; align-items:flex-start;
  margin:14px 0 16px; padding:9px 12px;
  background:#FFF8EC; border:1px solid #F3E2BF; border-left:3px solid #F2A33A;
  border-radius:10px; color:#6B5B3A;
}
.rent-notice svg{ flex:none; margin-top:2px; color:#E08A12; }
.rent-notice p{ margin:0; font-size:11.5px; line-height:1.5; }
.rent-notice strong{ display:block; font-size:12px; color:#4A3A1C; margin-bottom:1px; }
@media (max-width:600px){ .rent-notice{ padding:8px 10px; } }