/* ============================================
   CP Real Agent — Custom Styles
   ============================================ */

/* Alpine.js cloak — hide until ready */
[x-cloak] { display: none !important; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Selection color */
::selection {
    background: #1BB55B;
    color: white;
}

/* Image loading placeholder */
img[loading="lazy"] {
    background: #f3f4f6;
    transition: opacity 0.3s;
}

/* Focus styles */
input:focus, textarea:focus, select:focus {
    outline: none;
}

/* Animation keyframes */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Breadcrumb separator */
.breadcrumb-sep::after {
    content: "›";
    margin: 0 0.5rem;
    color: #94a3b8;
}

/* Property features grid */
.feature-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}