e we l/*
Theme Name: Bhagwati-estate
Theme URI: https://wordpress.org/themes/bhagwati-estate/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Bhagwati-estate is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Bhagwati-estate comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.0
Version: 1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bhagwati-estate
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* ============================================
   PROPERTIES ARCHIVE PAGE STYLES
   ============================================ */
:root {
    --primary:    #0a192f;
    --accent:     #e8a020;
    --light-bg:   #f5f7fa;
    --card-bg:    #ffffff;
    --text:       #222831;
    --muted:      #6b7280;
    --border:     #e2e8f0;
    --sold:       #ef4444;
    --available:  #22c55e;
    --negotiation:#f59e0b;
    --booked:     #3b82f6;
    --radius:     12px;
    --shadow:     0 4px 24px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: 'Segoe UI', sans-serif; background: var(--light-bg); color: var(--text); } 

/* ── Hero Banner ── */
.prop-hero {
    background: linear-gradient(135deg, var(--primary) 60%, #2563a8 100%);
    padding: 60px 20px 40px;
    text-align: center;
    color: #fff;
}
.prop-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; margin-bottom: 10px; }
.prop-hero p  { font-size: 1.1rem; opacity: .8; margin-bottom: 30px; }

/* ── Search Bar ── */
.search-bar {
    display: flex;
    gap: 10px;
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    border-radius: 50px;
    padding: 6px 6px 6px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.search-bar input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    color: var(--text);
    background: transparent;
}
.search-bar button {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    font-size: .95rem;
    transition: background .2s;
}
.search-bar button:hover { background: #c8880e; }

/* ── Wrapper ── */
.prop-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
}
@media (max-width: 900px) {
    .prop-wrapper { grid-template-columns: 1fr; }
}

/* ── Sidebar Filters ── */
.filter-sidebar {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    height: fit-content;
    position: sticky;
    top: 20px;
}
.filter-sidebar h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--accent);
}
.filter-group { margin-bottom: 22px; }
.filter-group label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
}
.filter-group select,
.filter-group input[type="number"],
.filter-group input[type="text"] {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: .95rem;
    color: var(--text);
    background: var(--light-bg);
    outline: none;
    transition: border .2s;
}
.filter-group select:focus,
.filter-group input:focus { border-color: var(--primary); }

.price-range { display: flex; gap: 8px; align-items: center; }
.price-range span { color: var(--muted); font-size: .85rem; }
.price-range input { flex: 1; }

.filter-btn {
    width: auto;
    padding: 11px;
    background: rgba(10, 25, 47, 0.95);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s;
    margin-top: 4px;
}
.filter-btn:hover { background: #122d4a; color: #fff; }
.reset-btn {
    width: 100%;
    padding: 9px;
    background: transparent;
    color: var(--muted);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: .9rem;
    cursor: pointer;
    margin-top: 8px;
    transition: all .2s;
}
.reset-btn:hover { border-color: var(--primary); color: var(--primary); }

/* ── Property Type Checkboxes ── */
.type-checks { display: flex; flex-direction: column; gap: 8px; }
.type-checks label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    font-weight: 400;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}
.type-checks input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--primary);
}

/* ── Main Content ── */
.prop-main {}

.prop-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.prop-count { font-size: .95rem; color: var(--muted); }
.prop-count strong { color: var(--primary); }

.view-toggle { display: flex; gap: 6px; }
.view-toggle button {
    padding: 7px 12px;
    border: 1.5px solid var(--border);
    background: #fff;
    border-radius: 7px;
    cursor: pointer;
    font-size: 1rem;
    color: var(--muted);
    transition: all .2s;
}
.view-toggle button.active,
.view-toggle button:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.sort-select {
    padding: 8px 14px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: .9rem;
    color: var(--text);
    outline: none;
    cursor: pointer;
}

/* ── Property Grid ── */
.property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 24px;
}
.property-grid.list-view {
    grid-template-columns: 1fr;
}

/* ── Property Card ── */
.prop-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .25s, box-shadow .25s;
    position: relative;
}
.prop-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.13);
}

/* List view card */
.list-view .prop-card {
    display: grid;
    grid-template-columns: 380px 1fr;
}
@media (max-width: 700px) {
    .list-view .prop-card { grid-template-columns: 1fr; }
}

.card-image {
    position: relative;
    height: 35click on 0px;
    overflow: hidden;
}
.list-view .card-image { height: 100%; min-height: 180px; }

.card-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s;
}
.prop-card:hover .card-image img { transform: scale(1.05); }

.card-image .no-img {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #dde4ef, #c5d0e2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--primary);
    opacity: .4;
}

/* Status Badge */
.status-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.status-available   { background: var(--available);   color: #fff; }
.status-sold        { background: var(--sold);         color: #fff; }
.status-booked      { background: var(--booked);       color: #fff; }
.status-under_negotiation { background: var(--negotiation); color: #fff; }

/* Featured Badge */
.featured-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--accent);
    color: #fff;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: .72rem;
    font-weight: 700;
}

/* Listing Type */
.listing-type-tag {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(26,60,94,.85);
    color: #fff;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: .72rem;
    font-weight: 600;
}

.card-body { padding: 18px 20px 20px; }

.prop-code {
    font-size: .75rem;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 6px;
}

.prop-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 6px;
    line-height: 1.4;
}
.prop-title a { color: inherit; text-decoration: none; }
.prop-title a:hover { color: var(--accent); }

.prop-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: 12px;
}
.prop-location svg { flex-shrink: 0; }

.prop-price {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 14px;
}
.prop-price .price-type {
    font-size: .75rem;
    color: var(--muted);
    font-weight: 400;
}

/* Property Quick Stats */
.prop-stats {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.stat-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .8rem;
    color: var(--muted);
}
.stat-item strong { color: var(--text); font-size: .85rem; }

.prop-type-tag {
    display: inline-block;
    background: #eef2ff;
    color: var(--primary);
    padding: 3px 10px;
    border-radius: 50px;
    font-size: .75rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.card-footer {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.btn-view {
    flex: 1;
    padding: 9px;
    background: #d4af37;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none;
    transition: background .2s;
}
.btn-view:hover { background: #122d4a; color: #fff; }

.btn-query {
    padding: 9px 14px;
    background: var(--light-bg);
    color: var(--primary);
    border-radius: 8px;
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none;
    border: 1.5px solid var(--border);
    transition: all .2s;
    white-space: nowrap;
}
.btn-query:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ── No Results ── */
.no-props {
    text-align: center;
    padding: 80px 20px;
    grid-column: 1/-1;
}
.no-props .icon { font-size: 4rem; margin-bottom: 16px; opacity: .3; }
.no-props h3 { font-size: 1.4rem; color: var(--primary); margin-bottom: 8px; }
.no-props p { color: var(--muted); }

/* ── Pagination ── */
.prop-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================
   SINGLE PROPERTY PAGE STYLES
   ============================================ */

.single-prop { background: var(--light-bg); min-height: 40vh; }

.single-prop-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 60px 0;
}
.single-prop-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26,60,94,.88) 0%, rgba(37,99,168,.65) 60%, rgba(0,0,0,.25) 100%);
}
.single-prop-hero > .container { position: relative; z-index: 1; }

.single-prop-hero-badges { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.single-prop-listing-type-tag {
    background: rgba(26,60,94,.85);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
}
.single-prop-featured {
    background: var(--accent);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
}

.single-prop-content { padding: 40px 20px 70px; }

.single-prop-grid {
    display: grid;
    /* wider gallery like product cards */
    grid-template-columns: 520px 1fr;
    gap: 30px;
    align-items: start;
}


@media (max-width: 900px) {
    .single-prop-grid { grid-template-columns: 1fr; }
}

.single-prop-media { position: sticky; top: 20px; }
@media (max-width: 900px) { .single-prop-media { position: static; } }

.single-prop-gallery {
    background: var(--card-bg);
.single-prop-gallery {
    box-shadow: var(--shadow);
    background: var(--card-bg);
    width: 100%;
}

    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.single-prop-gallery img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid var(--border);
}
.single-prop-gallery img:last-child { border-bottom: 0; }

/* ── Single Property Slider + Lightbox ── */
.single-prop-slider {
    position: relative;
    background: var(--card-bg);
}

.single-prop-slides {
    position: relative;
    width: 100%;
}

.single-prop-slide {
    width: 100%;
    height: auto;
    display: none;
    cursor: zoom-in;
    border-bottom: 1px solid var(--border);
}
.single-prop-slide:last-child { border-bottom: 0; }
.single-prop-slide.is-active { display: block; }

.single-prop-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(26,60,94,0.7);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    font-size: 18px;
}
.single-prop-slider-nav.prev { left: 10px; }
.single-prop-slider-nav.next { right: 10px; }

.single-prop-thumbs {
    display: flex;
    gap: 10px;
    padding: 12px;
    overflow-x: auto;
    background: var(--card-bg);
}
.single-prop-thumb {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    flex: 0 0 auto;
    width: 88px;
    height: 62px;
    overflow: hidden;
}
.single-prop-thumb.is-active { border-color: var(--accent); }
.single-prop-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.single-prop-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 9999;
}
.single-prop-lightbox.is-open { display: flex; }

.single-prop-lightbox-stage {
    max-width: 1100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.single-prop-lightbox-image {
    max-height: 82vh;
    width: auto;
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 20px 80px rgba(0,0,0,0.45);
    user-select: none;
}

.single-prop-lightbox-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: none;
    background: rgba(255,255,255,0.18);
    color: #fff;
    cursor: pointer;
    font-size: 28px;
    line-height: 42px;
    z-index: 2;
}

.single-prop-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: none;
    background: rgba(255,255,255,0.18);
    color: #fff;
    cursor: pointer;
    font-size: 22px;
    z-index: 2;
}
.single-prop-lightbox-nav.prev { left: 8px; }
.single-prop-lightbox-nav.next { right: 8px; }

@media (max-width: 520px) {
    .single-prop-slider-nav { width: 34px; height: 34px; font-size: 16px; }
    .single-prop-thumb { width: 72px; height: 54px; }
    .single-prop-lightbox-close { width: 38px; height: 38px; font-size: 26px; line-height: 38px; }
}


.single-prop-fallback-image {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.single-prop-fallback-image img { width: 100%; display: block; height: auto; }

.single-prop-fallback-noimg {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    opacity: .35;
}

.single-prop-meta {
    background: transparent;
    padding: 10px 0;
}
.single-prop-code {
    font-size: .8rem;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 10px;
}
.single-prop-type-tag {
    display: inline-block;
    background: #eef2ff;
    color: var(--primary);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.single-prop-title {
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    color: var(--primary);
    margin-bottom: 10px;
    line-height: 1.2;
}

.single-prop-price {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--accent);
    margin-bottom: 12px;
}
.single-prop-price .price-type { color: var(--muted); font-weight: 600; font-size: .9rem; }

.single-prop-location {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 18px;
}

.single-prop-stats {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.single-prop-description {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 18px;
    margin-bottom: 18px;
}

.single-prop-description p { margin: 0 0 12px; line-height: 1.8; }

.single-prop-query {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
}
.single-prop-query h3 { color: var(--primary); margin-bottom: 8px; }

.single-prop-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.single-prop-query-note {
    color: var(--muted);
    font-size: .9rem;
    margin-top: 10px;
}

.prop-pagination .page-numbers {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    transition: all .2s;
    background: #fff;
}
.prop-pagination .page-numbers.current,
.prop-pagination .page-numbers:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ── Loading Skeleton ── */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 6px;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}