/* ================================================================
   SEARCH PROPERTIES PAGE — PAGE-SPECIFIC STYLES
   Location: /home/kitchenbrand/public_html/T-Belle/styles/search_properties.css

   Requires global.css first.
   This is the primary IDX search landing page.
   The search card, tabs, steppers, area accordion, and listing
   cards all use --secondary (blue) as the interactive color.

   Variable map (old → new):
     --blue              → var(--secondary)        [global]
     --blue-lt           → var(--secondary-light)  [global]
     --blue-dk           → page token (darker secondary)
     --gold / --gold-lt  → var(--accent/accent-light) [global]
     --char              → var(--charcoal)          [global]
     --snow              → var(--warm-white)         [global]
     --pine, --snow-dk,
     --stone, --stone-dk → page tokens
     --r-md              → var(--radius-md)         [global]
     --r-lg/xl/2xl       → page tokens (14/20/28px — differ from global)
     --shadow-card/lift  → var(--shadow-card/lift)  [global]
     --trans             → var(--trans)             [global]
     DM Sans             → var(--sans) = Jost        [global]
================================================================ */


/* ================================================================
   PAGE-SPECIFIC TOKENS
================================================================ */
:root {
    /* ── Blue family (secondary acts as primary for IDX) ────── */
    --blue-dk:  #123550;    /* darkest secondary — search tab bg */

    /* ── IDX-specific neutrals ──────────────────────────────── */
    --pine:     #1D4032;    /* deep green — placeholder cards, badge.reduced */
    --snow-dk:  #EEE9E1;    /* darker warm-white — area accordion hover */
    --stone:    #D6D0C4;    /* warm neutral — borders, inputs */
    --stone-dk: #9A9488;    /* medium neutral — muted text */

    /* ── Radius overrides — slightly tighter than global ────── */
    --r-lg-idx: 14px;   /* global --radius-lg is 16px */
    --r-xl-idx: 20px;   /* global --radius-xl is 24px */
    --r-2xl-idx: 28px;  /* global --radius-2xl is 32px */
}


/* ================================================================
   BODY OVERRIDE
   Search page uses warm-white body background vs global white.
================================================================ */
body {
    background:  var(--warm-white);
    color:       var(--charcoal);
    overflow-x:  hidden;
}


/* ================================================================
   HERO
================================================================ */
.hero {
    background: linear-gradient(168deg, #0d2d47 0%, #1b4f72 55%, #1d4032 100%);
    padding:    52px 40px 44px;
    margin-bottom: 25px;
    position:   relative;
    overflow:   hidden;
}
.hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-inner    { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; text-align: center; }
.hero-eyebrow  { font-size: 11px; font-weight: 500; letter-spacing: .20em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.hero-title    { font-family: var(--serif); font-size: clamp(36px,5vw,60px); font-weight: 300; color: var(--white); line-height: 1.06; margin-bottom: 12px; }
.hero-title em { font-style: italic; }
.hero-sub      { font-size: 15px; color: rgba(255,255,255,.58); margin-bottom: 36px; }
.hero-stats    { display: flex; justify-content: center; gap: 48px; margin-bottom: 36px; flex-wrap: wrap; }
.hstat-num     { font-family: var(--serif); font-size: 28px; font-weight: 300; color: var(--white); line-height: 1; }
.hstat-num sup { font-size: 14px; color: var(--accent); }
.hstat-lbl     { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.40); margin-top: 2px; }


/* ================================================================
   SEARCH CARD
================================================================ */
.search-wrap {
    position:      relative;
    z-index:       10;
    max-width:     1020px;
    margin:        0 auto;
    padding:       0 40px;
    margin-bottom: 25px;
}
.search-card {
    background:    var(--white);
    border-radius: var(--r-2xl-idx);
    box-shadow:    0 20px 60px rgba(10,25,40,.28), 0 2px 8px rgba(10,25,40,.12);
    overflow:      hidden;
}

/* Property type tabs */
.stabs        { display: flex; background: var(--blue-dk); border-radius: var(--r-2xl-idx) var(--r-2xl-idx) 0 0; overflow: hidden; }
.stab {
    flex:           1;
    padding:        14px 10px;
    font-size:      13px;
    font-weight:    400;
    color:          rgba(255,255,255,.55);
    text-align:     center;
    border-bottom:  2px solid transparent;
    cursor:         pointer;
    transition:     color var(--trans), background var(--trans), border-color var(--trans);
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            6px;
    white-space:    nowrap;
    font-family:    var(--sans);
    border:         none;
    background:     none;
}
.stab:hover              { color: rgba(255,255,255,.85); }
.stab.active             { color: var(--white); border-bottom: 2px solid var(--accent); background: rgba(255,255,255,.06); font-weight: 500; }
.stab-icon               { font-size: 14px; }
.stab-count              { background: rgba(255,255,255,.12); color: rgba(255,255,255,.6); font-size: 10px; padding: 2px 6px; border-radius: 999px; }
.stab.active .stab-count { background: rgba(200,146,58,.22); color: var(--accent-light); }

/* Active filter chips */
.chips-bar   { padding: 10px 28px 0; display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
.chip {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    background:  rgba(30,77,122,.08);
    border:      1px solid rgba(30,77,122,.18);
    color:       var(--secondary);
    font-size:   11px;
    font-weight: 500;
    padding:     3px 9px;
    border-radius: 999px;
}
.chip button       { font-size: 13px; color: var(--secondary); opacity: .65; padding: 0; line-height: 1; cursor: pointer; border: none; background: none; }
.chip button:hover { opacity: 1; }

/* Two-column form body */
.sbody              { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.scol               { padding: 24px 28px; }
.scol:first-child   { border-right: 1px solid var(--stone); }
.col-lbl {
    font-size:      10px;
    font-weight:    500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          var(--stone-dk);
    margin-bottom:  16px;
    display:        flex;
    align-items:    center;
    gap:            8px;
}
.col-lbl::after { content: ''; flex: 1; height: 1px; background: var(--stone); }

/* Field groups */
.fg           { margin-bottom: 18px; }
.fg:last-child { margin-bottom: 0; }
.flabel        { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--stone-dk); margin-bottom: 7px; display: block; }
.price-row     { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; }
.price-sep     { font-size: 12px; color: var(--stone-dk); padding-bottom: 10px; text-align: center; }

/* Select inputs */
.fsel {
    width:        100%;
    padding:      10px 32px 10px 12px;
    border:       1px solid var(--stone);
    border-radius: var(--radius-md);
    font-size:    13px;
    color:        var(--charcoal);
    background:   var(--white);
    appearance:   none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239A9488'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 12px center;
    font-family:  var(--sans);
    transition:   border-color var(--trans), box-shadow var(--trans);
}
.fsel:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(30,77,122,.10); }

/* Bed/bath/garage steppers */
.step-group    { display: flex; gap: 5px; }
.step-btn {
    flex:          1;
    padding:       9px 4px;
    border:        1px solid var(--stone);
    border-radius: var(--radius-md);
    font-size:     12px;
    font-weight:   500;
    color:         var(--stone-dk);
    background:    var(--white);
    text-align:    center;
    cursor:        pointer;
    font-family:   var(--sans);
    transition:    all var(--trans);
}
.step-btn:hover  { border-color: var(--secondary); color: var(--secondary); }
.step-btn.active { background: var(--secondary); border-color: var(--secondary); color: var(--white); }

/* Checkboxes */
.check-list                    { display: flex; flex-direction: column; gap: 2px; }
.ck-item                       { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-md); cursor: pointer; transition: background var(--trans); }
.ck-item:hover                 { background: var(--warm-white); }
.ck-item input[type=checkbox]  { width: 15px; height: 15px; accent-color: var(--secondary); cursor: pointer; flex-shrink: 0; }
.ck-item span                  { font-size: 13px; color: var(--charcoal); }

/* Area accordion */
.ar-region           { margin-bottom: 8px; }
.ar-head {
    display:      flex;
    align-items:  center;
    gap:          8px;
    padding:      8px 10px;
    border-radius: var(--radius-md);
    cursor:       pointer;
    background:   var(--warm-white);
    font-size:    12px;
    font-weight:  500;
    color:        var(--charcoal);
    transition:   background var(--trans);
    user-select:  none;
}
.ar-head:hover                  { background: var(--snow-dk); }
.ar-head input[type=checkbox]   { width: 14px; height: 14px; accent-color: var(--secondary); cursor: pointer; }
.ar-name                        { flex: 1; }
.ar-count                       { font-size: 10px; color: var(--stone-dk); background: var(--stone); padding: 1px 6px; border-radius: 999px; }
.ar-chev                        { color: var(--stone-dk); transition: transform var(--trans); flex-shrink: 0; }
.ar-region.open .ar-chev        { transform: rotate(180deg); }
.ar-body                        { display: none; padding: 8px 4px 4px; }
.ar-region.open .ar-body        { display: block; }
.ar-grid                        { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ar-item                        { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 4px; cursor: pointer; transition: background var(--trans); }
.ar-item:hover                  { background: var(--warm-white); }
.ar-item input[type=checkbox]   { width: 13px; height: 13px; accent-color: var(--secondary); cursor: pointer; flex-shrink: 0; }
.ar-item span                   { font-size: 12px; color: var(--charcoal); line-height: 1.3; }

/* Search actions bar */
.sactions {
    padding:         18px 28px 24px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    border-top:      1px solid var(--warm-white);
    background:      var(--warm-white);
}
.btn-go {
    padding:      14px 44px;
    background:   var(--accent);
    color:        var(--white);
    border:       none;
    border-radius: var(--r-lg-idx);
    font-size:    15px;
    font-weight:  500;
    font-family:  var(--sans);
    display:      inline-flex;
    align-items:  center;
    gap:          8px;
    cursor:       pointer;
    transition:   background var(--trans), transform var(--trans), box-shadow var(--trans);
}
.btn-go:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(200,146,58,.38); }
.btn-clr {
    padding:       14px 24px;
    background:    transparent;
    color:         var(--stone-dk);
    border:        1px solid var(--stone);
    border-radius: var(--r-lg-idx);
    font-size:     14px;
    font-family:   var(--sans);
    cursor:        pointer;
    transition:    all var(--trans);
}
.btn-clr:hover { border-color: var(--stone-dk); color: var(--charcoal); }


/* ================================================================
   PAGE BODY
================================================================ */
.page-body { max-width: 1020px; margin: 0 auto; padding: 0 40px 80px; }

/* Quick links */
.quick-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.ql {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    padding:     9px 16px;
    background:  var(--white);
    border:      1px solid var(--stone);
    border-radius: 999px;
    font-size:   13px;
    color:       var(--charcoal);
    transition:  all var(--trans);
}
.ql:hover { border-color: var(--secondary); color: var(--secondary); background: rgba(30,77,122,.04); }

/* Section header */
.sec-hd      { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.sec-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.sec-title   { font-family: var(--serif); font-size: clamp(24px,3vw,34px); font-weight: 300; color: var(--charcoal); line-height: 1.1; }
.sec-link    { font-size: 13px; font-weight: 500; color: var(--secondary); display: inline-flex; align-items: center; gap: 4px; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color var(--trans); }
.sec-link:hover { border-bottom-color: var(--secondary); }



/* ================================================================
   LIVE CHAT BUTTON
================================================================ */
#live-chat {
    position:        fixed;
    bottom:          28px;
    right:           28px;
    z-index:         900;
    width:           52px;
    height:          52px;
    border-radius:   50%;
    background:      var(--accent);
    color:           var(--white);
    border:          none;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 4px 20px rgba(200,146,58,.45);
    transition:      transform var(--trans), box-shadow var(--trans);
    cursor:          pointer;
}
#live-chat:hover { transform: scale(1.08); box-shadow: 0 8px 28px rgba(200,146,58,.55); }
.chat-tip {
    position:       absolute;
    right:          64px;
    top:            50%;
    transform:      translateY(-50%);
    background:     var(--charcoal);
    color:          var(--white);
    font-size:      12px;
    white-space:    nowrap;
    padding:        6px 12px;
    border-radius:  4px;
    pointer-events: none;
    opacity:        0;
    transition:     opacity var(--trans);
}
#live-chat:hover .chat-tip { opacity: 1; }

/* ── Quick-action shortcuts on search form ─────────────────── */
.quick-actions {
    display:        flex;
    justify-content:center;
    gap:            10px;
    padding:        16px 20px 5px;  /* 5px bottom = buffer above sactions */
    flex-wrap:      wrap;
}
.btn-quick {
    display:        inline-flex;
    align-items:    center;
    gap:            7px;
    padding:        10px 18px;
    border-radius:  99px;
    font-size:      13px;
    font-weight:    500;
    font-family:    inherit;
    text-decoration:none;
    border:         1px solid var(--stone, #d1cdc7);
    background:     var(--white, #fff);
    color:          var(--char, #2c2c2c);
    cursor:         pointer;
    transition:     all .18s ease;
    white-space:    nowrap;
}
.btn-quick svg      { flex-shrink: 0; stroke: var(--blue, #1E4D7A); }
.btn-quick:hover    { border-color: var(--blue, #1E4D7A); color: var(--blue, #1E4D7A); background: rgba(30,77,122,.04); }
.btn-quick:nth-child(2):hover { border-color: #1d4032; color: #1d4032; }

.quick-sub {
    font-size:      10px;
    font-weight:    400;
    opacity:        .6;
    margin-left:    2px;
}

/* ── New listings banner in search_results.php ─────────────── */
.new-listings-banner {
    display:        flex;
    align-items:    center;
    gap:            8px;
    background:     rgba(29,64,50,.08);
    border:         1px solid rgba(29,64,50,.20);
    border-radius:  8px;
    padding:        10px 16px;
    font-size:      13px;
    color:          #1d4032;
    margin-bottom:  16px;
    flex-wrap:      wrap;
}
.new-listings-banner svg { stroke: #1d4032; flex-shrink: 0; }
.new-listings-banner a   { color: #1d4032; font-weight: 600; }
.new-listings-banner a:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .quick-actions { padding: 12px 16px 0; }
    .btn-quick     { font-size: 12px; padding: 8px 14px; }
}


/* ── Outer wrapper — full width, centered, with top separator ── */
.lifestyle-section {
    border-top:   1px solid var(--border);
    margin-top:   8px;
    margin-left: 9%;
    width:        80%;
}

/* ── Toggle row — matches the area accordion header rows ──────── */
.lifestyle-toggle {
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         13px 16px;
    background:      var(--off-white, #F8F8F6);
    border:          1px solid var(--border);
    border-radius:   var(--radius-md, 6px);
    cursor:          pointer;
    font-family:     var(--sans);
    text-align:      left;
    margin-top:      10px;
    transition:      background 0.15s, border-color 0.15s;
}
.lifestyle-toggle:hover {
    background:    var(--main-pale, #E8F5F4);
    border-color:  var(--main);
}
.lifestyle-section.open .lifestyle-toggle {
    background:    var(--main-pale, #E8F5F4);
    border-color:  var(--main);
    border-radius: var(--radius-md, 6px) var(--radius-md, 6px) 0 0;
    border-bottom: 1px solid var(--border);
}

/* ── Label inside toggle ──────────────────────────────────────── */
.lifestyle-toggle-label {
    display:        flex;
    align-items:    center;
    gap:            8px;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--charcoal);
}
.lifestyle-toggle-label svg {
    color:      var(--main);
    flex-shrink: 0;
}

/* ── Chevron ──────────────────────────────────────────────────── */
.lifestyle-chev {
    color:       var(--muted);
    transition:  transform 0.2s ease;
    flex-shrink: 0;
}
.lifestyle-section.open .lifestyle-chev {
    transform:   rotate(180deg);
    color:       var(--main);
}

/* ── Collapsible body ─────────────────────────────────────────── */
.lifestyle-body {
    display:       none;
    padding:       20px 25px 24px;
    border:        1px solid var(--border);
    border-top:    none;
    border-radius: 0 0 var(--radius-md, 6px) var(--radius-md, 6px);
    background:    var(--white);
}
.lifestyle-section.open .lifestyle-body {
    display: block;
}

/* ── Feature groups grid — 2-column on desktop ────────────────── */
.lifestyle-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   20px 40px;
}
.ls-group-label {
    font-size:      10px;
    font-weight:    600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--muted);
    margin-bottom:  8px;
}

/* ── Toggle pill checkboxes ───────────────────────────────────── */
.ls-pills {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
}
.ls-pill {
    display: inline-flex;
    cursor:  pointer;
}
.ls-pill input[type="checkbox"] {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
    margin:   0;
}
.ls-pill span {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    padding:        6px 13px;
    border:         1.5px solid var(--border);
    border-radius:  999px;
    font-size:      12px;
    font-family:    var(--sans);
    color:          var(--charcoal);
    background:     var(--white);
    transition:     border-color 0.15s, background 0.15s, color 0.15s;
    user-select:    none;
    white-space:    nowrap;
}
.ls-pill:hover span {
    border-color: var(--main);
    color:        var(--main-dark);
}
.ls-pill input:checked + span {
    background:   var(--main);
    color:        var(--white);
    border-color: var(--main);
}

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 820px) {
    .lifestyle-grid { grid-template-columns: 1fr; gap: 16px; }
    .lifestyle-body { padding: 16px 16px 20px; }
}



/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 860px) {
    .sbody              { grid-template-columns: 1fr; }
    .scol:first-child   { border-right: none; border-bottom: 1px solid var(--stone); }
}

@media (max-width: 640px) {
    .hero               { padding: 36px 20px 0; }
    .search-wrap        { margin: 0 16px; padding: 0; }
    .stabs              { flex-wrap: wrap; }
    .stab               { flex: 1 0 40%; }
    .scol               { padding: 18px; }
    .sactions           { flex-direction: column; }
    .btn-go,
    .btn-clr            { width: 100%; text-align: center; justify-content: center; }
    .page-body          { padding: 72px 20px 60px; }
    .hero-stats         { gap: 24px; }
}