/* VetriBoomi Real Estate — custom styles (Tailwind handles the rest) */
:root {
    --vb-green: #124e31;
    --vb-green-2: #187b48;
    --vb-gold: #c9911c;
    --vb-gold-light: #f2dc93;
}

html { scroll-behavior: smooth; }
body { -webkit-tap-highlight-color: transparent; }
[x-cloak] { display: none !important; }

/* Brand backgrounds */
.vb-hero-pattern {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .12) 1px, transparent 0),
        linear-gradient(135deg, rgba(201, 145, 28, .18), transparent 45%);
    background-size: 22px 22px, 100% 100%;
}
.vb-plot-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, .55) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255, 255, 255, .55) 2px, transparent 2px);
    background-size: 34px 26px;
}
.vb-placeholder-land { background: linear-gradient(135deg, #27995d, #124e31); }
.vb-placeholder-agricultural { background: linear-gradient(135deg, #84cc16, #187b48); }
.vb-placeholder-residential { background: linear-gradient(135deg, #3b82f6, #3730a3); }
.vb-placeholder-commercial { background: linear-gradient(135deg, #8b5cf6, #a21caf); }
.vb-placeholder-layout { background: linear-gradient(135deg, #e3ad33, #8a5215); }

@keyframes vb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.vb-float { animation: vb-float 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .vb-float { animation: none; } }

/* Map pins (Leaflet divIcon) */
.vb-pin-wrap { background: none !important; border: none !important; }
.vb-pin {
    display: block; position: relative; width: 26px; height: 26px; margin: 0 2px;
    background: var(--pin, var(--vb-green-2));
    border: 3px solid #fff; border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg); box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
}
.vb-pin::after {
    content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%;
    background: #fff; top: 6px; left: 6px;
}
.vb-pin-agent { border-radius: 50%; transform: none; background: #2563eb; }
.vb-pin-agent::after { width: 6px; height: 6px; top: 7px; left: 7px; }

/* Map popups */
.leaflet-popup-content-wrapper { border-radius: 14px; padding: 0; overflow: hidden; }
.leaflet-popup-content { margin: 0; width: 260px !important; }
.vb-pop { font-family: Inter, system-ui, sans-serif; width: 260px; }
.vb-pop-img { display: grid; place-items: center; width: 100%; height: 130px; object-fit: cover; color: rgba(255, 255, 255, .85); font-size: 38px; }
.vb-pop-body { padding: 10px 12px 12px; }
.vb-pop-price { font-family: Poppins, sans-serif; font-weight: 700; color: var(--vb-green); font-size: 16px; }
.vb-pop-title { font-weight: 600; color: #0f172a; font-size: 13px; line-height: 1.3; margin-top: 2px; }
.vb-pop-meta { color: #64748b; font-size: 11px; margin-top: 4px; }
.vb-pop-link { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--vb-green-2) !important; }
.vb-pop-simple { padding: 10px 12px; font-family: Inter, system-ui, sans-serif; font-size: 13px; }

.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background-color: rgba(201, 145, 28, .35); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background-color: rgba(18, 78, 49, .9); color: #fff; font-weight: 700; }

/* CMS content */
.vb-prose p { margin: 0 0 1rem; line-height: 1.75; color: #334155; }
.vb-prose h2, .vb-prose h3 { font-family: Poppins, sans-serif; font-weight: 600; color: #0f172a; margin: 1.5rem 0 .75rem; font-size: 1.2rem; }
.vb-prose ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; }
.vb-prose li { margin: .35rem 0; color: #334155; }
.vb-prose a { color: var(--vb-green-2); text-decoration: underline; }

/* Toasts */
.vb-toast { pointer-events: auto; animation: vb-toast-in .25s ease-out; }
@keyframes vb-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- premium visuals */
.vb-gold-text {
    background: linear-gradient(100deg, #f2dc93 0%, #e3ad33 40%, #c9911c 70%, #f2dc93 100%);
    background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: vb-gold-sweep 6s linear infinite;
}
@keyframes vb-gold-sweep { to { background-position: 200% center; } }

.vb-mesh {
    background:
        radial-gradient(60% 50% at 15% 20%, rgba(39, 153, 93, .45), transparent 60%),
        radial-gradient(50% 60% at 85% 30%, rgba(201, 145, 28, .35), transparent 60%),
        radial-gradient(70% 60% at 50% 100%, rgba(7, 36, 23, .9), transparent 70%);
}
.vb-blob { animation: vb-blob 14s ease-in-out infinite alternate; }
.vb-blob-2 { animation-duration: 18s; animation-direction: alternate-reverse; }
@keyframes vb-blob { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 30px) scale(1.08); } 100% { transform: translate(30px, -20px) scale(.95); } }

.vb-fade-up { animation: vb-fade-up .8s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vb-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.vb-spin-slow { animation: vb-spin 40s linear infinite; }
.vb-spin-slow-rev { animation: vb-spin 55s linear infinite reverse; }
@keyframes vb-spin { to { transform: rotate(360deg); } }
.vb-float-2 { animation: vb-float 7s ease-in-out infinite; animation-delay: -2s; }
.vb-float-3 { animation: vb-float 8s ease-in-out infinite; animation-delay: -4s; }

.vb-marquee { animation: vb-marquee 40s linear infinite; }
.vb-marquee:hover { animation-play-state: paused; }
@keyframes vb-marquee { to { transform: translateX(-50%); } }

.vb-shine { position: relative; overflow: hidden; }
.vb-shine::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-120%) skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
}
.vb-shine:hover::after { transition: transform .8s; transform: translateX(120%) skewX(-20deg); }

/* Scroll reveal (activated by app.js; content stays visible without JS) */
.vb-js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.vb-js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Header on scroll */
.vb-header-scrolled { box-shadow: 0 10px 30px -12px rgba(7, 36, 23, .25); }

/* Voice waveform (decorative + live) */
.vb-wave { display: inline-flex; align-items: center; gap: 3px; height: 18px; }
.vb-wave i { display: block; width: 3px; height: 100%; border-radius: 3px; background: currentColor; animation: vb-wave 1s ease-in-out infinite; }
.vb-wave i:nth-child(2) { animation-delay: .1s; } .vb-wave i:nth-child(3) { animation-delay: .2s; }
.vb-wave i:nth-child(4) { animation-delay: .3s; } .vb-wave i:nth-child(5) { animation-delay: .4s; }
.vb-wave i:nth-child(6) { animation-delay: .5s; } .vb-wave i:nth-child(7) { animation-delay: .6s; }
@keyframes vb-wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* Map: boundary area label */
.vb-area-label {
    background: rgba(7, 36, 23, .85); color: #f9efcb; border: 1px solid #e3ad33; border-radius: 999px;
    font: 600 12px/1 Inter, system-ui, sans-serif; padding: 6px 10px; box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}
.vb-area-label::before { display: none; }

@media (prefers-reduced-motion: reduce) {
    .vb-gold-text, .vb-blob, .vb-marquee, .vb-spin-slow, .vb-spin-slow-rev, .vb-float-2, .vb-float-3, .vb-fade-up { animation: none !important; }
    .vb-js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- chat widget */
.vb-chat-panel:not(.hidden) { animation: vb-panel-in .32s cubic-bezier(.2, .8, .2, 1) both; transform-origin: bottom left; }
@keyframes vb-panel-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.vb-chat-log {
    background:
        radial-gradient(circle at 1px 1px, rgba(18, 78, 49, .07) 1px, transparent 0) 0 0 / 18px 18px,
        linear-gradient(180deg, #f8fafc, #f1f5f4);
}
.vb-msg-in { animation: vb-msg-in .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vb-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vb-ping-soft { animation: vb-ping-soft 2.6s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes vb-ping-soft { 0% { transform: scale(1); opacity: .8; } 80%, 100% { transform: scale(1.25); opacity: 0; } }
.vb-mic-live { box-shadow: 0 0 0 0 rgba(225, 29, 72, .55); animation: vb-mic 1.4s infinite; }
@keyframes vb-mic { 0% { box-shadow: 0 0 0 0 rgba(225, 29, 72, .55); } 70% { box-shadow: 0 0 0 14px rgba(225, 29, 72, 0); } 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); } }
.vb-no-scrollbar { scrollbar-width: none; }
.vb-no-scrollbar::-webkit-scrollbar { display: none; }
.vb-speaking { background: #effaf3 !important; }

/* Chat typing indicator */
.vb-dots { display: inline-flex; gap: 4px; }
.vb-dots i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: vb-dot 1.2s infinite ease-in-out; }
.vb-dots i:nth-child(2) { animation-delay: .15s; }
.vb-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes vb-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Lightbox */
#lightbox:not(.hidden) { display: flex; }

/* Print */
@media print { header, footer, .no-print, #vbToast { display: none !important; } }