/* =====================================================================
   WALAJABAD PROPERTY — Premium Theme Upgrade
   ---------------------------------------------------------------------
   Loaded LAST so it wins over Bootstrap/styles5/colors-skin sheets.
   Pure additive layer — does not touch HTML structure or layout
   patterns. Provides:
     • Modern geometric typography (Plus Jakarta Sans body / Outfit head)
     • Brand color tokens (deep navy + gold + slate)
     • Polished card, badge, button surfaces
     • Generous section whitespace and tightened mobile reflow
   ===================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
    /* Brand palette */
    --cp-navy:        #14304D;   /* deep professional headings */
    --cp-navy-soft:   #1E3A56;   /* secondary text */
    --cp-teal:        #14304D;   /* primary CTA */
    --cp-teal-bright: #E0AC2E;   /* CTA hover/accent */
    --cp-slate:       #64748B;   /* muted meta (ID, location, status) */
    --cp-slate-light: #94A3B8;
    --cp-line:        #E4E0D6;   /* hairline dividers */
    --cp-bg:          #F7F7F4;   /* page surface */
    --cp-card:        #FFFFFF;
    --cp-rose:        #F43F5E;   /* "FOR SALE" / "FOR RENT" badges */
    --cp-amber:       #E0AC2E;

    /* Surfaces */
    --cp-radius-sm:   8px;
    --cp-radius:      12px;
    --cp-radius-lg:   16px;
    --cp-shadow-sm:   0 2px 6px rgba(15, 23, 42, 0.04);
    --cp-shadow:      0 4px 20px rgba(15, 23, 42, 0.05);
    --cp-shadow-md:   0 10px 30px rgba(15, 23, 42, 0.08);
    --cp-shadow-lg:   0 20px 50px rgba(15, 23, 42, 0.12);

    /* Type scale */
    --cp-font-body:   'Plus Jakarta Sans', 'Inter', 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --cp-font-head:   'Outfit', 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

/* ---------- 2. GLOBAL TYPOGRAPHY ---------- */
html { -webkit-text-size-adjust: 100%; }
body,
body.body-scroll {
    font-family: var(--cp-font-body) !important;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--cp-navy-soft);
    letter-spacing: -0.005em;
    background-color: var(--cp-bg);
}

/* All headings use Outfit, bold, tight tracking */
h1, h2, h3, h4, h5, h6,
.listing-name,
.section-title,
.sec-heading h2,
.sec-heading h3 {
    font-family: var(--cp-font-head) !important;
    font-weight: 700 !important;
    color: var(--cp-navy);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); }
h4 { font-size: clamp(1.125rem, 1.8vw, 1.375rem); }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p, li, label, input, select, textarea, button, a {
    font-family: var(--cp-font-body) !important;
}
p { line-height: 1.65; color: var(--cp-navy-soft); font-weight: 400; }
small, .small { color: var(--cp-slate); font-size: 0.8125rem; }

/* Links — clean, no underline noise except on hover for body links */
a { color: var(--cp-teal); text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--cp-teal-bright); }

/* ---------- 3. PROPERTY CARD POLISH ---------- */
.property-listing.property-1 {
    background: var(--cp-card);
    border: none !important;
    border-radius: var(--cp-radius) !important;
    box-shadow: var(--cp-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    overflow: hidden;
}
.property-listing.property-1:hover {
    box-shadow: var(--cp-shadow-md);
    transform: translateY(-2px);
}

.property-listing.property-1 .listing-img-wrapper {
    border-radius: var(--cp-radius) var(--cp-radius) 0 0;
    overflow: hidden;
}
.property-listing.property-1 .listing-img-wrapper img {
    transition: transform 0.5s ease;
}
.property-listing.property-1:hover .listing-img-wrapper img {
    transform: scale(1.03);
}

/* Card title / price typography lock-in */
.property-listing.property-1 .listing-name a {
    color: var(--cp-navy) !important;
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.35;
}
.property-listing.property-1 .listing-name a:hover {
    color: var(--cp-teal);
}
.listing-card-info-price {
    font-family: var(--cp-font-head) !important;
    font-weight: 700 !important;
    color: var(--cp-teal) !important;
    font-size: 1.25rem !important;
    letter-spacing: -0.01em;
}
.listing-card-info-price font {
    font-family: var(--cp-font-body) !important;
    font-weight: 500 !important;
    color: var(--cp-slate) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.02em;
}

/* "FOR SALE" / "FOR RENT" badge — premium pill */
.property-listing.property-1 .prt-types,
.property-listing.property-1 .prt-types.sale,
.property-listing.property-1 .prt-types.rent {
    font-family: var(--cp-font-body) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px !important;
    padding: 5px 12px !important;
    line-height: 1 !important;
}
.property-listing.property-1 .prt-types.sale {
    background: rgba(193, 80, 46, 0.10) !important;
    color: var(--cp-rose) !important;
}
.property-listing.property-1 .prt-types.rent {
    background: rgba(20, 48, 77, 0.10) !important;
    color: var(--cp-teal) !important;
}

/* "Status : Active" tag — subtle slate chip */
.property-listing.property-1 .price-features-wrapper {
    padding: 0.25rem 1rem 0 !important;
}
.property-listing.property-1 .list-fx-features {
    color: var(--cp-slate) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
}

/* Location meta */
.property-listing.property-1 .listing-location {
    color: var(--cp-slate) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
}
.property-listing.property-1 .listing-location i {
    color: var(--cp-teal-bright) !important;
    margin-right: 4px;
}

/* "View" CTA — gradient teal pill */
.property-listing.property-1 .listing-detail-btn .more-btn {
    background: linear-gradient(135deg, var(--cp-teal), var(--cp-teal-bright)) !important;
    color: #ffffff !important;
    font-family: var(--cp-font-body) !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0.02em;
    border: none !important;
    border-radius: 999px !important;
    padding: 9px 22px !important;
    box-shadow: 0 4px 12px rgba(20, 48, 77, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.property-listing.property-1 .listing-detail-btn .more-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 6px 18px rgba(20, 48, 77, 0.35);
}

/* Card body uniform padding (left/right) */
.property-listing.property-1 .listing-detail-wrapper {
    padding: 1.25rem 1.25rem 0.5rem !important;
}
.property-listing.property-1 .listing-footer-wrapper {
    padding: 0.75rem 1.25rem 1.25rem !important;
}

/* ---------- 4. GLOBAL BUTTONS ---------- */
.btn,
.btn-primary,
.btn-theme {
    font-family: var(--cp-font-body);
    font-weight: 600;
    border-radius: var(--cp-radius-sm);
    letter-spacing: 0.01em;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }

/* ---------- 5. SECTION SPACING ---------- */
section,
.gray-bg,
.theme-bg,
.image-cover,
.featured_section,
.blog_box.style-1 {
    padding-top: clamp(48px, 6vw, 88px);
    padding-bottom: clamp(48px, 6vw, 88px);
}
.sec-heading {
    margin-bottom: clamp(24px, 3vw, 40px);
}
.sec-heading h2,
.sec-heading h3 {
    margin-bottom: 8px;
}
.sec-heading p {
    color: var(--cp-slate);
    max-width: 640px;
    margin: 0 auto;
}

/* ---------- 6. FORM POLISH ---------- */
input.form-control,
select.form-control,
textarea.form-control,
.form-control {
    font-family: var(--cp-font-body);
    border: 1.5px solid var(--cp-line);
    border-radius: var(--cp-radius-sm);
    color: var(--cp-navy);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.form-control:focus {
    border-color: var(--cp-teal);
    box-shadow: 0 0 0 3px rgba(20, 48, 77, 0.12);
    outline: none;
}
::placeholder { color: var(--cp-slate-light); opacity: 1; }

/* ---------- 7. RESPONSIVE FLUIDITY ---------- */
@media (max-width: 991.98px) {
    section { padding-top: 40px; padding-bottom: 40px; }
    .property-listing.property-1 .listing-detail-wrapper {
        padding: 1rem 1rem 0.5rem !important;
    }
    .property-listing.property-1 .listing-footer-wrapper {
        padding: 0.5rem 1rem 1rem !important;
    }
}
@media (max-width: 575.98px) {
    section { padding-top: 32px; padding-bottom: 32px; }
    .listing-card-info-price { font-size: 1.125rem !important; }
    .property-listing.property-1 .listing-name a { font-size: 1rem; }
}

/* ---------- 7b. CARD VERTICAL HIERARCHY ----------
   Strict top-to-bottom stack inside .listing-content:
     1. FOR SALE badge (.cp-badge-top)
     2. Title + Price row  (.listing-detail-wrapper)
     3. Status: Active     (.price-features-wrapper)
     4. ID (bold)          (.cp-card-id)
     5. Location + View    (.listing-footer-wrapper)
*/

/* 1. "FOR SALE" badge — first in-flow block, flush-left with content padding */
.property-listing.property-1 .cp-badge-top,
.property-listing.property-1 .prt-types.sale.cp-badge-top,
.property-listing.property-1 .prt-types.rent.cp-badge-top {
    display: inline-block !important;
    position: static !important;
    margin: 0 0 10px 0 !important;       /* flush-left, slight gap above title */
    padding: 5px 14px !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px !important;
    line-height: 1 !important;
    background: rgba(193, 80, 46, 0.10) !important;
    color: var(--cp-rose) !important;
    box-shadow: none !important;
}

/* 2. Title + Price row — sits directly below the badge with no top padding */
.property-listing.property-1 .listing-detail-wrapper {
    padding-top: 0 !important;
}

/* 3. Status: Active — small breathing space */
.property-listing.property-1 .price-features-wrapper {
    padding: 0.25rem 1.25rem 0.25rem !important;
}
.property-listing.property-1 .list-fx-features {
    color: #16a34a !important;       /* green status dot/text per screenshot */
    font-weight: 600 !important;
}

/* 4. Property ID — bold block, sits ABOVE the location row */
.property-listing.property-1 .cp-card-id {
    display: block;
    font-family: var(--cp-font-body);
    font-size: 0.78rem;
    font-weight: 700;                 /* explicit bold */
    letter-spacing: 0.06em;
    color: var(--cp-slate);
    text-transform: uppercase;
    padding: 0 1.25rem;
    margin: 0 0 0.25rem;
}
@media (max-width: 991.98px) {
    .property-listing.property-1 .cp-card-id { padding: 0 1rem; }
}

/* 5. Footer (location + View) stays at bottom — already styled elsewhere */

/* ---------- 8. ACCESSIBILITY HELPERS ---------- */
:focus-visible {
    outline: 2px solid var(--cp-teal);
    outline-offset: 2px;
    border-radius: 4px;
}
img { max-width: 100%; }