/* ====== GRID & CARD VIEW ====== */

    /* Smooth grid gutters */
.card-items .row.g-4 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }

/* Listing cards */
.listing-card{
    border:1px solid #eef1f4; border-radius:1rem;
    background:#fff; box-shadow:0 10px 26px rgba(16,18,22,.06);
    transition:transform .12s ease, box-shadow .18s ease;
}
.listing-card:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 34px rgba(16,18,22,.10);
}

/* Media area */
.listing-media{ position:relative; }
.listing-media .ratio{ background:#0b0d11; border-bottom:1px solid #f2f4f7; }
.listing-media img{ object-fit:cover; }

/* Status badge (top-left) */
.status-badge{
    position:absolute; left:.65rem; top:.65rem;
    display:inline-flex; align-items:center; gap:.35rem;
    background:#fff; color:#222; border:1px solid #e9edf2;
    border-radius:999px; padding:.25rem .55rem; font-size:.78rem; font-weight:700;
    box-shadow:0 6px 16px rgba(16,18,22,.08);
}

/* “Nouveau” chip (top-right) */
/*.new-chip{*/
/*    position:absolute; right:.65rem; top:.65rem;*/
/*    background:#121826; color:#fff; border:1px solid rgba(255,255,255,.18);*/
/*    padding:.22rem .55rem; border-radius:999px; font-size:.72rem; font-weight:800;*/
/*    box-shadow:0 8px 16px rgba(18,24,38,.18);*/
/*}*/

/* Listing body */
.listing-card .card-body{ padding: .85rem !important; }
.corner-badge{
    background:rgba(220,53,69,.08); color:#dc3545;
    padding:.18rem .55rem; border-radius:999px; font-size:.75rem; font-weight:800;
    border:1px solid rgba(220,53,69,.28);
}

/* Price box */
.price-box{
    background:#f9fbfd; border:1px solid #eef1f4;
    display:flex; align-items:end; justify-content:space-between;
}

/* Mini features row */
.dot-list{ font-size:.42rem; opacity:.35; }

/* Promo cards */
.promo-card{
    background: radial-gradient(85% 120% at 0% 0%, #3b0c10 0%, #1a1e27 60%) , linear-gradient(180deg, #1a1e27, #131722);
    border:1px solid rgba(255,255,255,.08);
    color:#fff; box-shadow:0 18px 38px rgba(0,0,0,.25);
}
.promo-card .promo-img{ width:64px; height:64px; object-fit:cover; }
.promo-chip{
    display:inline-flex; align-items:center; gap:.35rem;
    background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.12);
    padding:.25rem .6rem; border-radius:.6rem; font-size:.78rem; font-weight:700;
}
.promo-cta{
    background:#fff; color:#111; border:1px solid #fff;
    box-shadow:0 12px 26px rgba(255,255,255,.15);
}
.promo-cta:hover{ filter:brightness(.98); }

/* Alerts variant */
.promo-alerts{
    background: radial-gradient(90% 140% at 0% 0%, #0d2a34 0%, #12202b 70%);
    border:1px solid rgba(255,255,255,.08);
}

/* Subtle entrance animation */
.animate-in{ animation: listFade .35s ease both; }
@keyframes listFade{
    from{ opacity:0; transform:translateY(6px) }
    to{ opacity:1; transform:translateY(0) }
}

/* ====== LIST VIEW ====== */

.animate-item a{
    background:#fff; border:1px solid #eef1f4;
    box-shadow:0 10px 22px rgba(16,18,22,.06);
    transition:transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
.animate-item a:hover{
    transform:translateY(-2px);
    border-color:#e6eaf0; box-shadow:0 16px 30px rgba(16,18,22,.10);
}
.list-img{ width:100%; height:120px; object-fit:cover; }

/* Tighten text */
.item-body .fw-bold.small{ font-weight:700!important; }

/* ====== UTILITIES / RESPONSIVE ====== */
.text-danger.text-uppercase.small{ letter-spacing:.03em; }
.ratio-16x9{ border-radius:.75rem .75rem 0 0; overflow:hidden; }
.rounded-4{ border-radius:1rem !important; }

@media (max-width: 575.98px){
    .list-img{ height:96px; }
    .listing-card .card-body{ padding:.75rem !important; }
    .status-badge, .new-chip{ transform: scale(.96); }
}

/* Slight emphasis for the “Frais de visite” column */
.price-box .text-secondary{ opacity:.8; }

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.animate-item.visible {
    opacity: 1;
    transform: translateY(0);
    animation: fadeSlideIn 0.6s ease-out forwards;
}

     /* Make the whole container scrollable only on mobile */
 #mobile-scroll-area {
     height: 100vh; /* Full screen height */
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     scroll-behavior: smooth;
 }

/* Optional: Remove sticky from form if it's preventing scroll */
#mobileFilterForm.sticky-search-bar {
    position: relative !important;
    top: auto !important;
}
@media (max-width: 767.98px) {
    .sticky-footer-mobile {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1050;
    }

    body {
        padding-bottom: 70px; /* space so content isn't hidden behind footer */
    %}
}

 :root{
     --si-red: #d90429;
     --si-red-700:#b00322;
     --si-red-500:#ef233c;
     --si-red-300:#ff5c7a;
 }

/* ====== Cards ====== */
.listing-card{
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.listing-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 42px rgba(16,24,40,.14);
    border-color:rgba(217,4,41,.2);
}
.listing-media .ratio > img{ transition:transform .35s ease; }
.listing-card:hover .ratio > img{ transform:scale(1.04); }

.status-badge{
    position:absolute; top:.75rem; left:.75rem;
    padding:.4rem .6rem; font-weight:600; font-size:.8rem;
}

.corner-badge{
    /*position:absolute; top:0; right:0;*/
    background:linear-gradient(135deg, var(--si-red) 0%, var(--si-red-700) 100%);
    color:#fff; font-weight:700; font-size:.75rem;
    padding:.1rem .2rem .1rem .40rem;
    border-bottom-left-radius:.45rem;
    box-shadow:0 3px 8px rgba(217,4,41,.25);
}

/* Default: soft red */
.new-chip {
    position: absolute;
    top: .75rem;
    right: .75rem;
    background: #dc3545;         /* 🔴 Bootstrap danger red */
    color: #fff;                 /* white text */
    border: none;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    padding: .25rem .65rem;
    box-shadow: 0 4px 12px rgba(220, 53, 69, .35);
    z-index: 2;
}

.price-box{
    background:linear-gradient(180deg, #fafafa, #f6f6f6);
    border:1px solid rgba(0,0,0,.05);
}

/* ====== Promo cards (red theme) ====== */
.promo-card{
    color:#fff; border:0;
    box-shadow:0 14px 38px rgba(0,0,0,.18);
    transition:transform .25s ease, box-shadow .25s ease;
}
.promo-card:hover{ transform:translateY(-4px); box-shadow:0 20px 48px rgba(0,0,0,.22); }
.promo-img{ width:90px; height:90px; object-fit:cover; }

.promo-agent{
    background:
            radial-gradient(600px 220px at 10% 0%, rgba(255,255,255,.15), transparent 40%),
            linear-gradient(135deg, var(--si-red) 0%, var(--si-red-500) 55%, var(--si-red-300) 100%);
}
.promo-alerts{
    background:
            radial-gradient(600px 220px at 90% 0%, rgba(255,255,255,.15), transparent 40%),
            linear-gradient(135deg, var(--si-red-700) 0%, var(--si-red) 50%, var(--si-red-500) 100%);
}

/* ====== Appear animation ====== */
.animate-in{ opacity:0; transform:translateY(14px); animation:itemIn .45s ease forwards; }
.animate-in:nth-child(2n){ animation-delay:.05s; }
.animate-in:nth-child(3n){ animation-delay:.1s; }
@keyframes itemIn{ to{ opacity:1; transform:none; } }

 :root{
     --si-red: #d90429;
     --si-red-300:#ff7a8f;
     --si-red-50:#fff4f6;
 }

/* Light red background wash for the whole mobile area */
#mobile-scroll-area.mobile-listing-area{
    background:
            radial-gradient(1200px 300px at 10% -10%, #ffe8ec 0%, transparent 60%),
            radial-gradient(800px 240px at 90% -20%, #ffeef1 0%, transparent 60%),
            linear-gradient(0deg, #fff 0%, #fff 100%);
}

/* Hero */
.mobile-hero{
    background: linear-gradient(135deg, var(--si-red) 0%, var(--si-red-300) 85%);
    position: relative;
    overflow: hidden;
}
.mobile-hero::after{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(260px 120px at 85% -20%, rgba(255,255,255,.25), transparent 60%);
    pointer-events:none;
}
.hero-logo{
    width:64px; height:64px; flex:0 0 64px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(4px);
}
.hero-logo img{ width:70%; height:70%; object-fit:contain; }

/* Sticky filter bar with a subtle glass effect */
.mobile-filter-bar{
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0,0,0,.06);
}
.mobile-filter-bar .btn{
    font-weight: 600;
    letter-spacing: .2px;
}

/* Minor spacing refinement for list wrapper */
#listing-table-mobile > * + *{ margin-top:.5rem; }

/* Optional: smooth card entrance (if your list outputs cards) */
#listing-table-mobile .card{
    animation: fadeSlide .35s ease both;
}
@keyframes fadeSlide{
    from{ opacity:0; transform: translateY(8px); }
    to{ opacity:1; transform: none; }
}

 :root{
     --brand-red: #d90429;
     --brand-red-200:#ff6b81;
     --brand-red-50:#fff5f6;
 }

/* Hero band */
.desktop-hero{
    background:
            radial-gradient(600px 160px at -10% 10%, rgba(255,255,255,.2), transparent 60%),
            linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-200) 85%);
}
.hero-logo{
    width:64px;height:64px;flex:0 0 64px;
    background: rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(4px);
    padding:.5rem;
}
.hero-chip{
    display:inline-flex;align-items:center;
    background: rgba(255,255,255,.18);
    color:#fff;border:1px solid rgba(255,255,255,.28);
    padding:.35rem .6rem;border-radius:999px;font-size:.8rem;
    backdrop-filter: blur(4px);
}

/* Sticky sidebar */
.filter-sticky{ position: sticky; top: 1.25rem; }
.form-check-label{ cursor:pointer; }
.form-check-input:checked{ border-color: var(--brand-red); background-color: var(--brand-red); }

/* Floating selects look */
.form-floating > .form-select { padding-top: 1.25rem; padding-bottom:.45rem; }
.form-floating > label{ opacity:.7; }

/* Buttons */
.btn-danger{ background-color: var(--brand-red); border-color: var(--brand-red); }
.btn-outline-danger{ color: var(--brand-red); border-color: var(--brand-red); }
.btn-outline-danger:hover{ background: var(--brand-red); color:#fff; }

/* Small type tweaks */
.opacity-85{ opacity:.85; }
.h3-lg{ font-size:1.6rem; }
@media(min-width:992px){ .h3-lg{ font-size:1.9rem; } }

/* Stat pills */
.stat-pill{
    display:inline-flex;align-items:center;gap:.35rem;
    background: rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(4px);
    color:#fff;
    padding:.4rem .6rem;
    border-radius:999px;
    line-height:1;
}
.stat-pill .stat-value{ font-weight:700; }
.stat-pill .stat-label{ opacity:.85; font-size:.75rem; margin-left:.15rem; }

 .amenities {
     display: grid;
     grid-template-columns: repeat(3, auto);
     gap: .25rem 1rem;            /* row gap / column gap */
     align-items: center;
 }
@media (max-width: 575.98px) { /* stack nicer on mobile */
    .amenities { grid-template-columns: repeat(2, auto); }
}
.amenity {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}
.amenity .icon {
    width: 1.1rem;               /* fixed icon slot for alignment */
    text-align: center;
    line-height: 1;
}

 .promo-card {
     background: linear-gradient(135deg, #E11D48 0%, #BE123C 45%, #9F1239 100%);
     color: #fff;
     border: 0;
     box-shadow: 0 8px 24px rgba(190, 18, 60, .35);
     position: relative;
     overflow: hidden;
     transition: transform .25s ease, box-shadow .25s ease;
 }
.promo-card::after{ /* soft glow */
    content:"";
    position:absolute; inset:-30%;
    background: radial-gradient( circle at 20% 10%, rgba(255,255,255,.25), transparent 40% );
    pointer-events:none;
}
.promo-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(190, 18, 60, .45);
}
.promo-img{
    width:64px; height:64px; object-fit:cover;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.promo-chip{
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color:#fff;
    padding:.25rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    backdrop-filter: blur(6px);
}
.promo-cta.btn{
    background:#fff; color:#C0163B;
    border: none;
}
.promo-cta.btn:hover{
    background:#FCE7EF; color:#9F1239;
}
/* entrance animation */
.animate-in{ animation: promoFadeUp .6s ease both; }
@keyframes promoFadeUp{
    from{ opacity:0; transform: translateY(10px); }
    to  { opacity:1; transform: translateY(0); }
}