/* === Base === */
.trioberry-widget{width:100%}
.trioberry-title{margin:0 0 12px;font-size:2.2rem;font-weight:700}
.trioberry-price{font-size:1.6rem;font-weight:700;color:#d4a017;margin-bottom:16px}

/* === Facts === */
.trioberry-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin:20px 0}
.trioberry-fact{background:#f8f6f0;border-radius:12px;padding:20px;text-align:center;font-weight:500}
.trioberry-fact span{display:block;font-size:1.8rem;font-weight:700;color:#d4a017;margin-bottom:6px}

/* === Floor Plan === */
.trioberry-floorplan-img{max-width:100%;height:auto;border-radius:12px;display:block}

/* === Area Table === */
.trioberry-area-table{width:100%;border-collapse:collapse;background:#f8f6f0;border-radius:12px;overflow:hidden;margin:20px 0}
.trioberry-area-table th,.trioberry-area-table td{padding:14px 20px;text-align:left;border-bottom:1px solid #e0dcd0}
.trioberry-area-table th{background:#1a2233;color:#fff}

/* === Amenities === */
.trioberry-amenities{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.trioberry-amenities li{background:#f8f6f0;padding:12px 18px;border-radius:8px;border-left:4px solid #d4a017}

/* === Developer === */
.trioberry-developer{background:#1a2233;color:#fff;padding:32px;border-radius:16px;margin:20px 0}
.trioberry-developer h3{color:#d4a017;margin-top:0}

/* === Gallery === */
.trioberry-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.trioberry-gallery img{width:100%;height:200px;object-fit:cover;border-radius:12px;display:block}

/* === CTA === */
.trioberry-cta{display:flex;gap:14px;flex-wrap:wrap;margin:20px 0}
.trioberry-btn{display:inline-block;padding:14px 30px;background:#d4a017;color:#1a2233;border-radius:8px;text-decoration:none;font-weight:700;transition:.3s}
.trioberry-btn:hover{background:#1a2233;color:#d4a017}

/* === Grid & Cards === */
.trioberry-grid{display:grid;gap:24px}
.trioberry-cols-1{grid-template-columns:1fr}
.trioberry-cols-2{grid-template-columns:repeat(2,1fr)}
.trioberry-cols-3{grid-template-columns:repeat(3,1fr)}
.trioberry-cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.trioberry-cols-3,.trioberry-cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.trioberry-grid{grid-template-columns:1fr!important}}

.trioberry-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.08);transition:transform .3s;position:relative}
.trioberry-card:hover{transform:translateY(-6px)}
.trioberry-card-link{text-decoration:none;color:inherit;display:block}
.trioberry-card-image{position:relative}
.trioberry-card-image img{width:100%;height:220px;object-fit:cover;display:block}
.trioberry-card-price{position:absolute;bottom:12px;left:12px;background:#1a2233;color:#d4a017;padding:6px 14px;border-radius:8px;font-weight:700;font-size:14px}
.trioberry-card-body{padding:18px 20px}
.trioberry-card-body h3{margin:0 0 10px;font-size:1.1rem}
.trioberry-card-meta{display:flex;gap:12px;font-size:13px;color:#666}
.trioberry-card-meta span::before{content:"•";margin-right:6px;color:#d4a017}
.trioberry-card-meta span:first-child::before{display:none}

/* === Compare / Wishlist buttons on card === */
.trioberry-compare-toggle{position:absolute;top:12px;right:56px;background:rgba(255,255,255,.95);border:none;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;z-index:2}
.trioberry-compare-toggle.active{background:#d4a017;color:#1a2233}
.trioberry-wishlist-btn{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.95);border:none;width:34px;height:34px;border-radius:50%;font-size:16px;cursor:pointer;z-index:2;color:#999}
.trioberry-wishlist-btn.active{color:#e63946}

/* === Search === */
.trioberry-search-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:32px;padding:24px;background:#f8f6f0;border-radius:16px}
.trioberry-search-form select,.trioberry-search-form input{padding:12px 14px;border:1px solid #d9d4c7;border-radius:8px;background:#fff;font-size:14px;width:100%;box-sizing:border-box}
.trioberry-search-btn{background:#d4a017;color:#1a2233;border:none;padding:12px 24px;border-radius:8px;font-weight:700;cursor:pointer}
.trioberry-search-btn:hover{background:#1a2233;color:#d4a017}
.trioberry-pagination{text-align:center;margin-top:32px}
.trioberry-page{display:inline-block;margin:0 4px;padding:8px 14px;background:#f8f6f0;border:1px solid #d9d4c7;border-radius:6px;cursor:pointer}
.trioberry-page:hover{background:#1a2233;color:#fff}

/* === Agent / Contact === */
.trioberry-agent-widget,.trioberry-booking-widget,.trioberry-mortgage{background:#fff;border-radius:16px;padding:28px;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.trioberry-agent-info{text-align:center;margin-bottom:24px}
.trioberry-agent-photo{width:90px;height:90px;border-radius:50%;object-fit:cover;margin-bottom:12px}
.trioberry-whatsapp{display:inline-block;background:#25D366;color:#fff!important;padding:8px 18px;border-radius:8px;font-weight:700;margin-top:8px;text-decoration:none}

.trioberry-lead-form h4,.trioberry-booking-form h4{margin:0 0 16px}
.trioberry-lead-form input,.trioberry-lead-form textarea,
.trioberry-booking-form input,.trioberry-booking-form select,.trioberry-booking-form textarea{
    width:100%;padding:12px 14px;margin-bottom:12px;border:1px solid #d9d4c7;border-radius:8px;font-size:14px;box-sizing:border-box
}
.trioberry-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.trioberry-lead-form button,.trioberry-booking-form button{width:100%;background:#d4a017;color:#1a2233;border:none;padding:14px;border-radius:8px;font-weight:700;cursor:pointer}
.trioberry-lead-form button:hover,.trioberry-booking-form button:hover{background:#1a2233;color:#d4a017}
.trioberry-lead-message,.trioberry-booking-message{margin-top:12px;font-size:14px}
.trioberry-lead-message.success,.trioberry-booking-message.success{color:#1e7a3b}
.trioberry-lead-message.error,.trioberry-booking-message.error{color:#b3261e}

/* === Mortgage === */
.trioberry-mortgage{max-width:480px}
.trioberry-mortgage h3{margin:0 0 20px}
.trioberry-mortgage label{display:block;margin-bottom:14px;font-size:13px;font-weight:600;color:#444}
.trioberry-mortgage input{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1px solid #d9d4c7;border-radius:8px;font-size:15px;box-sizing:border-box}
.tm-results{margin-top:24px;padding-top:20px;border-top:1px solid #eee}
.tm-result-item{display:flex;justify-content:space-between;padding:10px 0;font-size:14px}
.tm-monthly{font-size:20px;font-weight:700;color:#d4a017}

/* === Dashboard === */
.trioberry-dashboard{max-width:1200px;margin:0 auto}
.trioberry-dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid #eee}
.trioberry-logout{color:#b3261e;text-decoration:none;font-weight:600}
.trioberry-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-bottom:36px}
.trioberry-stat-card{background:linear-gradient(135deg,#1a2233,#2c3e50);color:#fff;padding:24px;border-radius:16px;text-align:center}
.trioberry-stat-value{display:block;font-size:2.2rem;font-weight:800;color:#d4a017}
.trioberry-stat-label{font-size:12px;opacity:.85;text-transform:uppercase}
.trioberry-dashboard-tabs{display:flex;gap:8px;margin-bottom:24px;border-bottom:2px solid #eee}
.trioberry-dashboard-tabs a{padding:12px 20px;text-decoration:none;color:#666;font-weight:600;border-bottom:3px solid transparent;margin-bottom:-2px}
.trioberry-dashboard-tabs a.active{color:#1a2233;border-bottom-color:#d4a017}
.trioberry-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.trioberry-table th{background:#f8f6f0;padding:14px 16px;text-align:left;font-size:13px;font-weight:700}
.trioberry-table td{padding:14px 16px;border-top:1px solid #f0f0f0;font-size:14px}
.trioberry-status{display:inline-block;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;background:#e7f3ff;color:#1a4d80}

/* === Compare Table === */
.trioberry-compare-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.trioberry-compare-table th,.trioberry-compare-table td{padding:16px;border-bottom:1px solid #f0f0f0;text-align:left;vertical-align:top;font-size:14px}
.trioberry-compare-table thead th{background:#f8f6f0;text-align:center;position:relative}
.trioberry-compare-table thead img{width:100%;height:120px;object-fit:cover;border-radius:8px;margin-bottom:8px}
.trioberry-compare-table thead a{color:#1a2233;text-decoration:none;font-weight:700;font-size:13px}
.trioberry-compare-remove{position:absolute;top:6px;right:6px;background:#b3261e;color:#fff;border:none;width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:12px}
.trioberry-compare-clear{margin-top:16px;padding:10px 20px;background:#f4a0a0;border:none;border-radius:8px;font-weight:600;cursor:pointer}

/* === Brochure Button === */
.trioberry-brochure-btn{display:inline-flex;align-items:center;gap:8px;background:#1a2233;color:#fff;padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;transition:.3s}
.trioberry-brochure-btn::before{content:"📄"}
.trioberry-brochure-btn:hover{background:#d4a017;color:#1a2233}

/* === WhatsApp Button === */
.trioberry-whatsapp-btn{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff!important;padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;transition:.3s}
.trioberry-whatsapp-btn:hover{background:#1a2233;color:#fff!important;transform:translateY(-2px)}

/* === Admin === */
.trioberry-step{background:#fff;border:1px solid #ccd0d4;border-radius:8px;padding:24px;margin:20px 0;max-width:900px}
.trioberry-mapping-table th{background:#f1f1f1}
.trioberry-portal-badge{display:inline-block;background:#e7f3ff;color:#1a4d80;padding:4px 12px;border-radius:4px;font-size:13px}
.trioberry-progress-bar{height:24px;background:#f0f0f0;border-radius:12px;overflow:hidden;margin:10px 0}
.trioberry-progress-fill{height:100%;background:linear-gradient(90deg,#d4a017,#f0c040);width:0;transition:width .4s}
.trioberry-results .error{color:#b3261e}
.trioberry-results .success{color:#1e7a3b}
/* === Floating WhatsApp Click-to-Chat === */
.trioberry-whatsapp-float{position:fixed;right:24px;bottom:24px;z-index:9998;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff!important;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:transform .2s ease,box-shadow .2s ease}
.trioberry-whatsapp-float:hover,.trioberry-whatsapp-float:focus{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.24);color:#fff!important}
.trioberry-whatsapp-float:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.trioberry-form-privacy{font-size:.82em;line-height:1.45;opacity:.75;margin:8px 0}
@media(max-width:767px){.trioberry-whatsapp-float{right:16px;bottom:16px;width:52px;height:52px}}


/* ==========================================
 * LISTING FILTER
 * ========================================== */
.trioberry-filter { margin-bottom: 32px; }

.trioberry-filter-form {
    display: grid;
    gap: 14px;
    padding: 24px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.trioberry-filter-horizontal .trioberry-filter-form {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    align-items: end;
}

.trioberry-filter-sidebar .trioberry-filter-form {
    grid-template-columns: 1fr;
    max-width: 320px;
}

.trioberry-filter-compact .trioberry-filter-form {
    grid-template-columns: 1fr;
    max-width: 480px;
}

.tbf-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #666;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tbf-field select,
.tbf-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d9d4c7;
    border-radius: 8px;
    font-size: 14px;
    background: #fafaf7;
    box-sizing: border-box;
}

.tbf-actions {
    display: flex;
    gap: 8px;
    align-items: end;
}

.trioberry-filter-btn {
    flex: 1;
    background: #d4a017;
    color: #1a2233;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.trioberry-filter-btn:hover { background: #1a2233; color: #d4a017; }

.trioberry-filter-reset {
    background: #f0ede6;
    color: #666;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
}

.trioberry-filter-results { margin-top: 32px; }

.trioberry-filter-hint {
    text-align: center;
    color: #999;
    padding: 40px 20px;
    background: #f8f6f0;
    border-radius: 12px;
}

.trioberry-filter-count {
    font-size: 13px;
    color: #666;
    margin-bottom: 16px;
}

/* ==========================================
 * GRID GALLERY
 * ========================================== */
.trioberry-grid-gallery {
    width: 100%;
}

.trioberry-gallery-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 14px;
    break-inside: avoid;
    cursor: zoom-in;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.trioberry-gallery-item:hover {
    transform: scale(1.02);
}

.trioberry-gallery-item img {
    display: block;
    width: 100%;
    transition: filter 0.3s ease;
}

.trioberry-gallery-item:hover img {
    filter: brightness(1.08);
}

/* Lightbox */
.trioberry-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.trioberry-lightbox-overlay.open { opacity: 1; }
.trioberry-lightbox-overlay img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.trioberry-lightbox-close {
    position: absolute;
    top: 20px; right: 24px;
    background: none; border: none;
    color: #fff; font-size: 32px;
    cursor: pointer; line-height: 1;
    opacity: 0.7;
}
.trioberry-lightbox-close:hover { opacity: 1; }

/* ==========================================
 * FEATURED LISTING
 * ========================================== */
.trioberry-featured-heading {
    font-size: 2rem;
    margin: 0 0 8px;
    color: #1a2233;
}
.trioberry-featured-subheading {
    color: #666;
    margin: 0 0 28px;
    font-size: 15px;
}

.trioberry-featured-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, #d4a017, #f0c040);
    color: #1a2233;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(212,160,23,0.35);
}

.trioberry-featured-empty {
    text-align: center;
    padding: 40px;
    background: #f8f6f0;
    border-radius: 12px;
    color: #999;
}

/* Advanced widget layout and keyboard accessibility */
.trioberry-card { position: relative; }
.trioberry-filter-form[hidden] { display: none !important; }
.trioberry-filter-toggle { padding: 12px 18px; border-radius: 8px; cursor: pointer; }
.trioberry-gallery-mode-grid { display: grid; grid-template-columns: repeat(var(--trioberry-gallery-columns, 3), minmax(0, 1fr)); gap: 14px; }
.trioberry-gallery-mode-grid .trioberry-gallery-item { margin: 0; }
.trioberry-gallery-mode-grid img { height: var(--trioberry-gallery-height, 220px); object-fit: cover; }
.trioberry-gallery-mode-masonry { column-count: var(--trioberry-gallery-columns, 3); column-gap: 14px; }
.trioberry-gallery-item:focus-visible, .trioberry-lightbox-close:focus-visible { outline: 3px solid #d4a017; outline-offset: 4px; }
.trioberry-lightbox-scroll-lock { overflow: hidden !important; }
@media (max-width: 768px) {
 .trioberry-gallery-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .trioberry-gallery-mode-masonry { column-count: 2; }
 .trioberry-filter-horizontal .trioberry-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .trioberry-filter-form { padding: 16px; }
}
@media (max-width: 480px) {
 .trioberry-gallery-mode-grid, .trioberry-filter-horizontal .trioberry-filter-form { grid-template-columns: 1fr; }
 .trioberry-gallery-mode-masonry { column-count: 1; }
}
@media (prefers-reduced-motion: reduce) {
 .trioberry-gallery-item, .trioberry-gallery-item img, .trioberry-lightbox-overlay { transition: none; }
}