/*
Theme Name: Son Page Properties
Theme URI: https://sonpageproperties.com
Author: Son Page Properties
Description: Custom real estate listing theme for Son Page Properties (Lucknow) - villas, flats, plots & lands. Users can submit properties for admin approval, browse by state/city/locality, and search listings.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: sonpage
*/

/* ==========================================================================
   COLOR SYSTEM (deliberately NOT gold/black — teal + terracotta on cream)
   ========================================================================== */
:root{
  --sp-primary:      #0B5D52;   /* deep teal - header, nav, buttons */
  --sp-primary-dark: #08403A;
  --sp-primary-light:#E7F2F0;
  --sp-accent:       #E8734A;   /* terracotta - CTAs, highlights */
  --sp-accent-dark:  #C85A34;
  --sp-bg:           #FAF7F2;   /* warm cream background */
  --sp-card:         #FFFFFF;
  --sp-text:         #2B2B2B;
  --sp-text-light:   #6B6B6B;
  --sp-border:       #E4DFD6;
  --sp-success:      #2E7D4F;
  --sp-warning:      #B98900;
  --sp-radius:       10px;
  --sp-shadow:       0 2px 10px rgba(11,93,82,0.08);
  --sp-shadow-hover: 0 8px 24px rgba(11,93,82,0.14);
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--sp-bg); color:var(--sp-text);
  font-family:'Poppins',-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}
a{color:var(--sp-primary); text-decoration:none;}
a:hover{color:var(--sp-accent);}
img{max-width:100%; display:block;}
h1,h2,h3,h4{font-family:'Poppins',sans-serif; color:var(--sp-primary-dark); margin:0 0 .5em;}
.container{max-width:1200px; margin:0 auto; padding:0 20px;}
.btn{
  display:inline-block; padding:12px 26px; border-radius:6px; font-weight:600;
  border:none; cursor:pointer; transition:.2s; font-size:15px;
}
.btn-primary{background:var(--sp-accent); color:#fff;}
.btn-primary:hover{background:var(--sp-accent-dark); color:#fff;}
.btn-outline{background:transparent; border:2px solid #fff; color:#fff;}
.btn-outline:hover{background:#fff; color:var(--sp-primary);}
.btn-secondary{background:var(--sp-primary); color:#fff;}
.btn-secondary:hover{background:var(--sp-primary-dark); color:#fff;}

/* ---------- Header ---------- */
.site-header{background:var(--sp-primary); position:sticky; top:0; z-index:999; box-shadow:0 2px 8px rgba(0,0,0,.1);}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.site-logo{color:#fff; font-size:24px; font-weight:700; letter-spacing:.3px;}
.site-logo span{color:var(--sp-accent);}
.main-nav ul{list-style:none; display:flex; gap:28px; margin:0; padding:0;}
.main-nav a{color:#fff; font-weight:500; font-size:15px;}
.header-cta{display:flex; align-items:center; gap:14px;}
.nav-toggle{display:none; background:none; border:none; color:#fff; font-size:26px; cursor:pointer;}

@media(max-width:880px){
  .main-nav{position:absolute; top:100%; left:0; right:0; background:var(--sp-primary); display:none; padding:10px 20px;}
  .main-nav.open{display:block;}
  .main-nav ul{flex-direction:column; gap:0;}
  .main-nav li{border-top:1px solid rgba(255,255,255,.15);}
  .main-nav a{display:block; padding:14px 0;}
  .nav-toggle{display:block;}
}

/* ---------- Hero / Search ---------- */
.hero{
  background:linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-primary-dark) 100%);
  color:#fff; padding:70px 0 90px; text-align:center;
}
.hero h1{color:#fff; font-size:38px; margin-bottom:12px;}
.hero p{font-size:18px; opacity:.92; margin-bottom:36px;}
.hero-badges{display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap;}
.hero-badge{background:rgba(255,255,255,.12); padding:6px 14px; border-radius:20px; font-size:13px;}

.search-box{
  background:var(--sp-card); border-radius:var(--sp-radius); box-shadow:var(--sp-shadow-hover);
  padding:22px; max-width:980px; margin:-55px auto 0; position:relative; z-index:5;
}
.search-tabs{display:flex; gap:6px; margin-bottom:16px;}
.search-tab{padding:8px 18px; border-radius:6px; background:var(--sp-primary-light); color:var(--sp-primary); font-weight:600; font-size:14px; cursor:pointer; border:none;}
.search-tab.active{background:var(--sp-primary); color:#fff;}
.search-grid{display:grid; grid-template-columns:repeat(5,1fr) auto; gap:12px; align-items:end;}
.search-grid label{font-size:12px; color:var(--sp-text-light); font-weight:600; display:block; margin-bottom:5px; text-align:left;}
.search-grid select, .search-grid input{
  width:100%; padding:11px 10px; border:1px solid var(--sp-border); border-radius:6px; font-size:14px; background:#fff;
}
.search-grid .btn{padding:12px 22px; white-space:nowrap;}
@media(max-width:900px){.search-grid{grid-template-columns:1fr 1fr;} .search-grid .btn{grid-column:1/-1;}}

/* ---------- Hero Slider (admin-managed via Slider menu) ---------- */
.hero-slider{position:relative; height:520px; overflow:hidden;}
.hero-slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .8s ease; z-index:1;}
.hero-slide.active{opacity:1; z-index:2;}
.hero-slide-overlay{background:linear-gradient(180deg, rgba(8,64,58,.35) 0%, rgba(8,64,58,.75) 100%); height:100%; display:flex; align-items:center; color:#fff; text-align:center;}
.hero-slide-overlay .container{width:100%;}
.hero-slide-overlay h1{color:#fff; font-size:36px;}
.hero-slide-overlay p{font-size:18px; opacity:.95; margin-bottom:22px;}
.hero-slider-dots{position:absolute; bottom:18px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:3;}
.hero-dot{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.5); border:none; cursor:pointer; padding:0;}
.hero-dot.active{background:#fff;}
@media(max-width:640px){.hero-slider{height:420px;}}

/* ---------- Flexible Home Sections (admin-managed via Home Sections menu) ---------- */
.home-section-split{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center;}
@media(max-width:768px){.home-section-split{grid-template-columns:1fr;}}
.hs-image img{border-radius:var(--sp-radius); box-shadow:var(--sp-shadow);}
.hs-text h2{margin-bottom:14px;}
.home-section-banner{background-size:cover; background-position:center; border-radius:var(--sp-radius); padding:70px 40px; text-align:center; color:#fff;}
.home-section-banner h2{color:#fff;}

/* ---------- Real Estate Guide section (3-panel layout) ---------- */
.guide-heading{margin-bottom:30px;}
.guide-heading h2{font-size:28px; margin-bottom:8px;}
.guide-heading-underline{display:block; width:40px; height:4px; background:var(--sp-accent); border-radius:2px;}
.guide-panels{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media(max-width:900px){.guide-panels{grid-template-columns:1fr;}}
.guide-panel-box{
  background:var(--sp-card); border:1px solid var(--sp-border); border-top:3px solid var(--sp-accent);
  border-radius:8px; padding:22px; display:flex; flex-direction:column;
}
.guide-panel-box h3{font-size:17px; margin-bottom:16px;}
.guide-panel-footer{display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding-top:14px; border-top:1px solid var(--sp-border);}
.guide-see-all{color:var(--sp-accent); font-weight:700; font-size:14px;}
.guide-cta-btn{padding:9px 20px; font-size:13px; border-radius:22px;}

/* Video carousel style */
.guide-video-carousel{display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory;}
.guide-video-item{flex:0 0 auto; width:150px; scroll-snap-align:start;}
.guide-video-thumb{position:relative; border-radius:6px; overflow:hidden; aspect-ratio:4/3; background:#111;}
.guide-video-thumb img{width:100%; height:100%; object-fit:cover; opacity:.9;}
.guide-play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.9); color:var(--sp-accent);
  display:flex; align-items:center; justify-content:center; font-size:13px; padding-left:3px;
}
.guide-play-btn.small{width:26px;height:26px;font-size:11px;}
.guide-video-caption{font-size:12px; color:var(--sp-text); margin-top:8px; line-height:1.4;}
.guide-carousel-dots{display:flex; gap:5px; margin-top:12px;}
.guide-dot{width:6px; height:6px; border-radius:50%; background:var(--sp-border);}
.guide-dot.active{background:var(--sp-accent);}

/* Simple list style */
.guide-simple-list{list-style:none; margin:0; padding:0;}
.guide-simple-list li{display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--sp-border); font-size:14px;}
.guide-simple-list li:last-child{border-bottom:none;}
.guide-simple-list a{color:var(--sp-text); flex:1;}
.guide-simple-list a:hover{color:var(--sp-accent);}
.guide-list-icon{width:22px; height:22px; border-radius:50%; border:1px solid var(--sp-border); display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; color:var(--sp-text-light);}
.guide-list-icon.is-video{color:var(--sp-accent); border-color:var(--sp-accent);}

/* Featured (thumbnail) list style */
.guide-featured-list{display:flex; flex-direction:column; gap:16px;}
.guide-featured-item{display:flex; gap:12px; align-items:flex-start;}
.guide-featured-thumb{position:relative; width:72px; height:56px; flex-shrink:0; border-radius:6px; overflow:hidden; display:block;}
.guide-featured-thumb img{width:100%; height:100%; object-fit:cover;}
.guide-featured-text{flex:1;}
.guide-featured-title{font-size:14px; font-weight:600; margin:0 0 6px; color:var(--sp-text);}
.guide-featured-link{font-size:13px; font-weight:700; color:var(--sp-accent);}

/* ---------- Sections ---------- */
.section{padding:60px 0;}
.section-head{text-align:center; margin-bottom:36px;}
.section-head p{color:var(--sp-text-light);}
.section-tag{color:var(--sp-accent); font-weight:700; font-size:13px; letter-spacing:1px; text-transform:uppercase;}

/* Category tiles */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px;}
.cat-card{background:var(--sp-card); border-radius:var(--sp-radius); padding:28px; text-align:center; box-shadow:var(--sp-shadow); transition:.2s; border:1px solid var(--sp-border);}
.cat-card:hover{transform:translateY(-4px); box-shadow:var(--sp-shadow-hover);}
.cat-card .cat-icon{font-size:38px; margin-bottom:10px;}
.cat-card h3{margin-bottom:4px; font-size:18px;}
.cat-card span{color:var(--sp-text-light); font-size:13px;}

/* Property cards */
.prop-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:24px;}
.prop-card{background:var(--sp-card); border-radius:var(--sp-radius); overflow:hidden; box-shadow:var(--sp-shadow); border:1px solid var(--sp-border); transition:.2s;}
.prop-card:hover{box-shadow:var(--sp-shadow-hover); transform:translateY(-3px);}
.prop-thumb{position:relative; aspect-ratio:4/3; overflow:hidden; background:#eee;}
.prop-thumb img{width:100%; height:100%; object-fit:cover;}
.prop-badge{position:absolute; top:12px; left:12px; background:var(--sp-accent); color:#fff; font-size:11px; font-weight:700; padding:5px 11px; border-radius:20px; text-transform:uppercase;}
.prop-badge.rent{background:var(--sp-primary);}
.prop-price{position:absolute; bottom:12px; left:12px; background:rgba(11,93,82,.92); color:#fff; padding:6px 12px; border-radius:6px; font-weight:700; font-size:15px;}
.prop-body{padding:18px;}
.prop-body h3{font-size:17px; margin-bottom:6px;}
.prop-loc{color:var(--sp-text-light); font-size:13px; margin-bottom:12px; display:flex; align-items:center; gap:5px;}
.prop-specs{display:flex; gap:14px; border-top:1px solid var(--sp-border); padding-top:12px; font-size:13px; color:var(--sp-text-light);}
.prop-specs strong{color:var(--sp-text); display:block; font-size:14px;}

/* Registration / list-your-property CTA banner */
.cta-banner{
  background:linear-gradient(135deg, var(--sp-accent) 0%, var(--sp-accent-dark) 100%);
  color:#fff; border-radius:var(--sp-radius); padding:44px; text-align:center; margin:60px 0;
}
.cta-banner h2{color:#fff;}
.cta-banner p{opacity:.95; max-width:600px; margin:0 auto 24px;}

/* ---------- Forms (submission, search filters) ---------- */
.sp-form{background:var(--sp-card); border:1px solid var(--sp-border); border-radius:var(--sp-radius); padding:34px; box-shadow:var(--sp-shadow);}
.sp-form h2{margin-bottom:6px;}
.sp-form .form-intro{color:var(--sp-text-light); margin-bottom:26px;}
.form-section-title{font-size:15px; font-weight:700; color:var(--sp-primary); margin:26px 0 14px; padding-bottom:8px; border-bottom:2px solid var(--sp-primary-light);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:16px;}
@media(max-width:640px){.form-row{grid-template-columns:1fr;}}
.form-group label{display:block; font-weight:600; font-size:13px; margin-bottom:6px;}
.form-group .req{color:var(--sp-accent);}
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:11px 12px; border:1px solid var(--sp-border); border-radius:6px; font-size:14px; font-family:inherit;
}
.form-group textarea{min-height:100px;}
.form-help{font-size:12px; color:var(--sp-text-light); margin-top:4px;}
.amenities-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px;}
.amenity-check{display:flex; align-items:center; gap:8px; font-size:14px; background:var(--sp-bg); padding:9px 12px; border-radius:6px;}
.amenity-check input{width:auto;}
.file-drop{border:2px dashed var(--sp-border); border-radius:8px; padding:24px; text-align:center; color:var(--sp-text-light); background:var(--sp-bg);}
.form-msg{padding:14px 18px; border-radius:8px; margin-bottom:20px; font-size:14px;}
.form-msg.success{background:#E5F3EA; color:var(--sp-success); border:1px solid #B9E0C6;}
.form-msg.error{background:#FCEAE4; color:#B03A17; border:1px solid #F3C3AF;}

/* ---------- Sidebar filters (archive) ---------- */
.listing-wrap{display:grid; grid-template-columns:280px 1fr; gap:30px;}
@media(max-width:880px){.listing-wrap{grid-template-columns:1fr;}}
.filter-box{background:var(--sp-card); border:1px solid var(--sp-border); border-radius:var(--sp-radius); padding:22px; align-self:start; position:sticky; top:90px;}
.filter-box h3{font-size:16px; margin-bottom:16px;}
.filter-group{margin-bottom:18px;}
.filter-group label{font-size:12px; font-weight:700; text-transform:uppercase; color:var(--sp-text-light); display:block; margin-bottom:6px;}
.listing-count{margin-bottom:18px; color:var(--sp-text-light); font-size:14px;}

/* ---------- Single property ---------- */
.single-gallery{display:grid; grid-template-columns:2fr 1fr; gap:8px; border-radius:var(--sp-radius); overflow:hidden; margin-bottom:30px;}
.single-gallery img{height:100%; object-fit:cover;}
.single-gallery .thumbs{display:grid; grid-template-rows:1fr 1fr; gap:8px;}
.single-layout{display:grid; grid-template-columns:2fr 1fr; gap:34px;}
@media(max-width:880px){.single-layout{grid-template-columns:1fr;} .single-gallery{grid-template-columns:1fr;}}
.single-price{font-size:28px; color:var(--sp-accent); font-weight:700;}
.spec-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px; margin:24px 0; padding:20px 0; border-top:1px solid var(--sp-border); border-bottom:1px solid var(--sp-border);}
.spec-item{text-align:center;}
.spec-item .val{font-size:17px; font-weight:700; color:var(--sp-primary-dark);}
.spec-item .lab{font-size:12px; color:var(--sp-text-light);}
.amenity-tags{display:flex; flex-wrap:wrap; gap:10px;}
.amenity-tag{background:var(--sp-primary-light); color:var(--sp-primary); padding:8px 14px; border-radius:20px; font-size:13px;}
.contact-card{background:var(--sp-card); border:1px solid var(--sp-border); border-radius:var(--sp-radius); padding:24px; position:sticky; top:90px;}
.contact-card .btn{width:100%; text-align:center; margin-bottom:10px;}
.btn-whatsapp{background:#25D366; color:#fff;}
.btn-whatsapp:hover{background:#1EBE5A; color:#fff;}
.owner-note{background:#FFF7E8; border:1px solid #F3E0B0; color:#7A5B00; font-size:12px; padding:12px; border-radius:8px; margin-top:14px;}

/* ---------- Disclaimer strip ---------- */
.disclaimer-strip{background:#FFF7E8; border-top:1px solid #F3E0B0; border-bottom:1px solid #F3E0B0; padding:14px 0; font-size:13px; color:#7A5B00; text-align:center;}

/* ---------- Footer ---------- */
.site-footer{background:var(--sp-primary-dark); color:#dfeceb; padding:50px 0 20px; margin-top:40px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; margin-bottom:30px;}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;}}
.site-footer h4{color:#fff; font-size:15px; margin-bottom:14px;}
.site-footer a{color:#c8ded9;}
.site-footer a:hover{color:var(--sp-accent);}
.site-footer ul{list-style:none; padding:0; margin:0;}
.site-footer li{margin-bottom:9px; font-size:14px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding-top:18px; font-size:13px; text-align:center; color:#a9c3bf;}

/* ---------- Misc ---------- */
.badge-pending{background:#FFF3D6; color:var(--sp-warning); padding:3px 10px; border-radius:12px; font-size:12px; font-weight:600;}
.empty-state{text-align:center; padding:60px 20px; color:var(--sp-text-light);}
.pagination{display:flex; gap:8px; justify-content:center; margin-top:30px;}
.pagination a, .pagination span{padding:9px 15px; border:1px solid var(--sp-border); border-radius:6px; font-size:14px;}
.pagination .current{background:var(--sp-primary); color:#fff; border-color:var(--sp-primary);}