/* ==========================================================================
   Smart-Immo UI — Components & Pages
   ========================================================================== */

/* Root tokens */
:root{
    --smart-red:#dc2626;
    --smart-red-2:#ef4444;
    --brand-red:#dc2626;
    --brand-red-2:#ef4444;
    --brand-red-600:#b02a37;
    --chip-border: rgba(220,53,69,.22);
    --chip-tint: rgba(220,53,69,.12);
    --muted:#6b7280;
}

/* ========== STAR RATING (single, consolidated version) ========== */
.star-rating{
    direction:ltr;
    display:flex;
    gap:.35rem;
    font-size:1.75rem;
    user-select:none;
}
.star-rating .star{
    color:#d1d5db;
    cursor:pointer;
    transition: color .2s, transform .15s;
}
.star-rating .star.hovered,
.star-rating .star.selected,
.star-rating .star.active{
    color:#f59e0b;
}
.star-rating.readonly .star{
    cursor: not-allowed;
    pointer-events: none;
    opacity:.7;
}

/* ========== BLUR OVERLAY BLOCKS (for gated/locked content) ========== */
.blur-container{ position:relative; width:100%; max-width:600px; margin:auto; }
.blur-background{ filter: blur(5px); pointer-events:none; user-select:none; }
.overlay-text{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:#111; font-weight:700; padding:1rem;
    background:rgba(255,255,255,.65); border-radius:.75rem;
}

/* ========== PRODUCT / PROPERTY DETAIL — HERO ========== */
.pd-hero{
    background: linear-gradient(145deg,#fff5f5 0%, #ffe1e1 65%, #ffd6d6 100%);
    border-radius: 1rem;
}
.pd-hero .title{ line-height:1.25; }

/* ========== FAVORITE CHIP ========== */
.fav-chip{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.5rem .75rem; border-radius:999px;
    background:#fff; border:1px solid #e5e7eb; color:#111827;
    transition:.2s ease;
}
.fav-chip:hover{ background:#fff1f1; border-color:#fecaca; }
.fav-chip .mdi{ font-size:1.1rem; }
.fav-chip.active{ background:#fee2e2; border-color:#ef4444; color:#b91c1c; }

/* ========== GALLERY LAYOUT ========== */
.gallery-grid{
    display:grid; gap:1rem;
    grid-template-columns: 2fr 1fr;
}
.gallery-grid .main{ border-radius:.75rem; overflow:hidden; }
.gallery-grid .side{ display:grid; gap:1rem; grid-template-rows:1fr 1fr; }
.gallery-grid .side .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ========== INFO CHIPS (specs) ========== */
.spec-chip{
    display:flex; align-items:center; gap:.5rem;
    padding:.6rem .8rem; border-radius:.75rem; background:#f9fafb; border:1px solid #eef2f7;
    font-weight:600; color:#111827;
}
.spec-chip .lbl{ color:var(--muted); font-weight:500; }

/* ========== SECTION TITLES / DIVIDERS ========== */
.section-title{ font-weight:800; }
.divider{ height:1px; background:#f0f0f0; }

/* ========== AMENITIES ========== */
.amenity{
    display:flex; align-items:center; gap:.75rem;
    padding:.65rem .75rem; border:1px dashed #f1a2a2; border-radius:.75rem; background:#fff;
}
.amenity .mdi{ color:var(--smart-red); }

/* ========== STICKY SIDEBAR CARD ========== */
.sticky-card{ position: sticky; top: 1rem; }

/* ========== SOCIAL BUTTONS ========== */
.social-link{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:10px; color:#fff;
}

/* ========== RATING CARD / SUMMARY ========== */
.rating-card{
    border:1px solid #f1f3f5;
    border-radius:18px;
    background:
            linear-gradient(180deg, #fff7f7 0%, #ffffff 28%) padding-box,
            radial-gradient(1200px 300px at 0% 0%, rgba(220,38,38,.12), transparent 60%) border-box;
    box-shadow:0 6px 20px rgba(220,38,38,.08);
}
.score-wrap{ text-align:center; }
.score-badge{
    display:inline-flex; align-items:center; justify-content:center;
    width:110px; height:110px; border-radius:999px;
    background:conic-gradient(from 0deg, var(--brand-red), var(--brand-red-2));
    color:#fff; position:relative;
}
.score-badge::after{ content:""; position:absolute; inset:6px; border-radius:999px; background:#fff; }
.score-badge .score{ position:relative; z-index:1; font-weight:800; font-size:2rem; color:#111827; }
.score-badge .mdi{
    position:absolute; top:-10px; right:-10px; z-index:2;
    background:#fff; border-radius:999px; padding:6px; font-size:1.1rem; color:#f59e0b;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.score-meta{ color:#6b7280; font-size:.9rem; }
.rating-form{ background:#fff; border:1px solid #f1f3f5; border-radius:14px; }
.btn-rate{
    background:linear-gradient(90deg, var(--brand-red), var(--brand-red-2));
    border:none;
    box-shadow:0 8px 18px rgba(220,38,38,.22);
}
.btn-rate:hover{ filter:brightness(.98); }

/* ========== STAT TILES (spec grid) ========== */
.spec-grid .stat-tile{
    display:flex; align-items:center; gap:12px;
    background:#fff; border:1px solid #f1f3f5; border-radius:14px;
    padding:14px 16px; box-shadow:0 1px 2px rgba(0,0,0,.04);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.spec-grid .stat-tile:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(220,38,38,.12);
    border-color:#ffe0e0;
}
.spec-grid .icon-wrap{
    width:44px; height:44px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--brand-red), var(--brand-red-2));
    color:#fff; font-size:1.2rem; flex:0 0 44px;
}
.spec-grid .label{
    font-size:.78rem; text-transform:uppercase; letter-spacing:.03em;
    color:#6b7280; margin-bottom:.15rem; line-height:1;
}
.spec-grid .value{ font-size:1.1rem; font-weight:800; color:#111827; line-height:1.25; }
.spec-grid .unit{ font-size:.85rem; color:#6b7280; font-weight:600; margin-left:.25rem; }

/* ========== PRICE / BADGE UTILITIES ========== */
.rounded-12{ border-radius:1rem; }
.price{ color:#111827; font-weight:800; }
.badge-soft{
    background:#fff; border:1px solid #fca5a5; color:#b91c1c; border-radius:999px; padding:.15rem .6rem;
    font-weight:700; text-transform:uppercase; letter-spacing:.02em;
}

/* ========== AGENT'S OTHER PROPERTIES — CARD SET ========== */
.ap-card{
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    border-radius: 1rem;
}
@media (hover:hover) and (pointer:fine){
    .ap-card:hover{
        transform: translateY(-3px);
        box-shadow: 0 10px 28px rgba(220,53,69,.18);
    }
}
.ap-card:focus-within{ outline:2px solid var(--brand-red); outline-offset:2px; }

/* Media wrapper */
.ap-media{
    position:relative; overflow:hidden;
    border-bottom-left-radius:0; border-bottom-right-radius:0;
    background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
}
.ap-media img{
    width:100%; height:100%; display:block; object-fit:cover;
    transform:scale(1); transition: transform .35s ease; will-change:transform;
}
@media (hover:hover) and (pointer:fine){
    .ap-card:hover .ap-media img{ transform: scale(1.03); }
}
.ap-media .placeholder{
    display:flex; align-items:center; justify-content:center;
    background:#f8f9fa; color:#adb5bd; font-size:.9rem;
}

/* Chips container to avoid overlap */
.ap-chips{
    position:absolute; top:.25rem; left:.6rem; right:2.5rem;
    display:flex; align-items:center; justify-content:space-between;
    gap:.5rem; z-index:2; pointer-events:none;
}

/* Chips */
.ap-chip{
    pointer-events:auto;
    max-width:48%;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    padding:.25rem .6rem; border-radius:999px;
    font-size:.75rem; font-weight:700; line-height:1;
    background:rgba(255,255,255,.92);
    color:#d90429;
    border:1px solid rgba(217,4,41,.25);
    box-shadow:0 6px 20px rgba(0,0,0,.12);
    backdrop-filter: blur(4px);
}
.ap-chip.ap-status{
    color:#0b6b34;
    border-color:rgba(11,107,52,.25);
    background: white;
}
.ap-chip.ap-type{
    color:#d90429;
}

@media (max-width:420px){
    .ap-chips{ flex-direction:column; align-items:flex-start; }
    .ap-chip{ max-width:100%; }
    .ap-chip.ap-type{ align-self:flex-end; }
}

/* Specs row */
.ap-spec{ gap:.5rem; color:#6c757d; }
.ap-spec .pill{
    display:inline-flex; align-items:center; gap:.35rem;
    background:#f8f9fa; border:1px solid #f1f3f5; border-radius:999px;
    padding:.28rem .55rem; line-height:1; white-space:nowrap;
}
.ap-spec .pill i{ font-size:1rem; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    .ap-card, .ap-media img{ transition:none; }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark){
    .ap-card{ box-shadow: 0 2px 12px rgba(0,0,0,.25); }
    .ap-media{ background: linear-gradient(180deg, #1e1f22 0%, #131416 100%); }
    .ap-media .placeholder{ background:#1f2226; color:#7f8a96; }
    .ap-spec{ color:#9aa3ad; }
    .ap-spec .pill{ background:#1f2226; border-color:#2a2e33; }
    .ap-type{ background:#1f1f1f; color:#ff6b76; border-color: rgba(220,53,69,.35); }
    .ap-status{ background: rgba(220,53,69,.18); color:#ff8a92; }
}

/* Optional tighter media height if needed
.ap-media { max-height: 180px; } */