/**
 * PIXEL-PERFECT MASTERY CSS - АБСОЛЮТНОЕ СОВЕРШЕНСТВО
 * Date: August 17, 2025
 * Target: 99%+ Quality - Zero tolerance для недочетов
 */

/* ===== PERFECT 8PX GRID SYSTEM - MATHEMATICAL PRECISION ===== */
:root {
    /* Perfect spacing scale - только кратные 8px */
    --space-xs: 8px;   /* 8px */
    --space-sm: 16px;  /* 16px */  
    --space-md: 24px;  /* 24px */
    --space-lg: 32px;  /* 32px */
    --space-xl: 40px;  /* 40px */
    --space-2xl: 48px; /* 48px */
    --space-3xl: 64px; /* 64px */
    
    /* Perfect typography scale */
    --text-xs: 12px;   /* Small text */
    --text-sm: 14px;   /* Body text */
    --text-md: 16px;   /* Emphasized text */
    --text-lg: 18px;   /* Sub-headings */
    --text-xl: 24px;   /* Headings */
    --text-2xl: 32px;  /* Major headings */
    --text-3xl: 48px;  /* Hero text */
    
    /* Perfect weights - только professional */
    --weight-normal: 500;
    --weight-medium: 600;
    --weight-bold: 700;
    
    /* Perfect timing - cubic-bezier precision */
    --timing-snap: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --timing-smooth: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --timing-entrance: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===== PERFECT FILTER DROPDOWNS - MATHEMATICAL PRECISION ===== */
.filter-dropdown {
    /* Perfect dimensions */
    width: 168px !important; /* 8px grid: 21 * 8 */
    height: 56px !important; /* 8px grid: 7 * 8 */
    
    /* Perfect spacing */
    padding: var(--space-sm) var(--space-md) !important; /* 16px 24px */
    margin: 0 var(--space-xs) var(--space-sm) 0 !important; /* 0 8px 16px 0 */
    
    /* Perfect typography */
    font-size: var(--text-sm) !important; /* 14px */
    font-weight: var(--weight-medium) !important; /* 600 */
    line-height: 1.4 !important;
    
    /* Perfect visual treatment */
    border-radius: var(--space-xs) !important; /* 8px */
    border: 2px solid rgba(243, 159, 27, 0.4) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    
    /* Perfect interaction */
    cursor: pointer !important;
    transition: all var(--timing-smooth) !important;
    
    /* Perfect appearance override */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    
    /* Perfect custom arrow */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23F39F1B' stroke='%23F39F1B' stroke-width='1' d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right var(--space-sm) center !important; /* right 16px center */
    background-size: var(--space-sm) !important; /* 16px */
    padding-right: var(--space-2xl) !important; /* 48px for arrow space */
}

.filter-dropdown:hover, .filter-dropdown:focus {
    border-color: rgba(243, 159, 27, 0.8) !important;
    background: rgba(243, 159, 27, 0.12) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 var(--space-xs) var(--space-md) rgba(243, 159, 27, 0.25) !important; /* 0 8px 24px */
}

/* ===== PERFECT FILTER BUTTONS - MATHEMATICAL HARMONY ===== */
.filter-btn {
    /* Perfect dimensions - golden ratio inspired */
    min-width: 120px !important; /* 8px grid: 15 * 8 */
    height: var(--space-2xl) !important; /* 48px */
    
    /* Perfect spacing */
    padding: var(--space-sm) var(--space-md) !important; /* 16px 24px */
    margin: 0 var(--space-xs) var(--space-sm) 0 !important; /* 0 8px 16px 0 */
    
    /* Perfect typography */
    font-size: var(--text-sm) !important; /* 14px */
    font-weight: var(--weight-medium) !important; /* 600 */
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
    
    /* Perfect visual treatment */
    border-radius: var(--space-xs) !important; /* 8px */
    border: 2px solid rgba(243, 159, 27, 0.3) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    
    /* Perfect interaction */
    cursor: pointer !important;
    transition: all var(--timing-smooth) !important;
    position: relative !important;
    overflow: hidden !important;
    
    /* Perfect shadow hierarchy */
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.24) !important;
}

.filter-btn:hover {
    border-color: rgba(243, 159, 27, 0.7) !important;
    background: rgba(243, 159, 27, 0.15) !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 
        0 var(--space-sm) var(--space-lg) rgba(243, 159, 27, 0.25), /* 0 16px 32px */
        0 var(--space-xs) var(--space-md) rgba(0, 0, 0, 0.15) !important; /* 0 8px 24px */
}

.filter-btn.active {
    border-color: #F39F1B !important;
    background: linear-gradient(135deg, #F39F1B 0%, #ff8c00 100%) !important;
    color: #000000 !important; /* Perfect contrast */
    font-weight: var(--weight-bold) !important; /* 700 */
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 
        0 var(--space-md) var(--space-2xl) rgba(243, 159, 27, 0.4), /* 0 24px 48px */
        0 var(--space-sm) var(--space-lg) rgba(243, 159, 27, 0.3) !important; /* 0 16px 32px */
}

/* ===== PERFECT SEARCH BUTTON - PREMIUM FEEL ===== */
.search-btn {
    /* Perfect dimensions */
    min-width: 144px !important; /* 8px grid: 18 * 8 */
    height: var(--space-3xl) !important; /* 64px - larger for importance */
    
    /* Perfect spacing */
    padding: var(--space-md) var(--space-2xl) !important; /* 24px 48px */
    margin: var(--space-sm) 0 !important; /* 16px 0 */
    
    /* Perfect typography */
    font-size: var(--text-md) !important; /* 16px */
    font-weight: var(--weight-bold) !important; /* 700 */
    
    /* Perfect visual treatment */
    border-radius: var(--space-xs) !important; /* 8px */
    border: none !important;
    background: linear-gradient(135deg, #F39F1B 0%, #ff8c00 50%, #ffa500 100%) !important;
    color: #000000 !important;
    
    /* Perfect interaction */
    cursor: pointer !important;
    transition: all var(--timing-smooth) !important;
    position: relative !important;
    overflow: hidden !important;
    
    /* Perfect shadow depth */
    box-shadow: 
        0 var(--space-xs) var(--space-md) rgba(243, 159, 27, 0.5), /* 0 8px 24px */
        0 var(--space-sm) var(--space-2xl) rgba(243, 159, 27, 0.3) !important; /* 0 16px 48px */
}

.search-btn:hover {
    background: linear-gradient(135deg, #ff8c00 0%, #F39F1B 50%, #ffb347 100%) !important;
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 
        0 var(--space-md) var(--space-3xl) rgba(243, 159, 27, 0.6), /* 0 24px 64px */
        0 var(--space-lg) var(--space-3xl) rgba(243, 159, 27, 0.4) !important; /* 0 32px 64px */
}

.search-btn:active {
    transform: translateY(-1px) scale(1.02) !important;
}

/* ===== PERFECT STATISTICS SECTION - 8PX GRID COMPLIANT ===== */
.property-statistics {
    /* Perfect layout */
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-sm) !important; /* 16px */
    
    /* CRITICAL FIX: Perfect 8px grid dimensions */
    width: 1280px !important; /* 8px grid: 160 * 8 */
    max-width: calc(100vw - 32px) !important; /* Responsive constraint */
    margin: var(--space-lg) auto !important; /* 32px auto - centered */
    
    /* Perfect spacing */
    padding: var(--space-lg) var(--space-2xl) !important; /* 32px 48px */
    
    /* Perfect visual treatment */
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(243, 159, 27, 0.3) !important;
    border-radius: var(--space-sm) !important; /* 16px */
    backdrop-filter: blur(20px) saturate(150%) !important;
    
    /* Perfect visibility */
    visibility: visible !important;
    opacity: 1 !important;
    
    /* Perfect shadow */
    box-shadow: 
        0 var(--space-xs) var(--space-lg) rgba(0, 0, 0, 0.1), /* 0 8px 32px */
        0 var(--space-sm) var(--space-2xl) rgba(0, 0, 0, 0.08) !important; /* 0 16px 48px */
}

/* PROFESSIONAL STATISTICS TYPOGRAPHY */
.stat-number {
    font-size: var(--text-2xl) !important; /* 32px - larger for impact */
    font-weight: var(--weight-bold) !important; /* 700 */
    color: #F39F1B !important;
    text-shadow: 0 3px 6px rgba(243, 159, 27, 0.4) !important; /* Enhanced glow */
    display: inline-block !important;
    margin: 0 var(--space-xs) !important; /* 0 8px */
}

.stat-label, .stat-text {
    font-size: var(--text-sm) !important; /* 14px */
    font-weight: var(--weight-medium) !important; /* 600 */
    color: rgba(255, 255, 255, 0.95) !important; /* Higher contrast */
    margin: 0 var(--space-xs) !important; /* 0 8px */
}

.stat-count {
    font-size: var(--text-lg) !important; /* 18px */
    font-weight: var(--weight-bold) !important; /* 700 */
    color: #F39F1B !important;
    margin-left: var(--space-xs) !important; /* 8px */
}

.stat-separator {
    color: rgba(255, 255, 255, 0.4) !important;
    margin: 0 var(--space-sm) !important; /* 0 16px */
    font-weight: var(--weight-normal) !important; /* 500 */
}

.stat-icon {
    font-size: var(--text-md) !important; /* 16px */
    margin-right: var(--space-xs) !important; /* 8px */
}

/* ===== PERFECT MOBILE RESPONSIVE - MATHEMATICAL BREAKPOINTS ===== */
@media (max-width: 768px) {
    .property-statistics {
        /* Perfect mobile layout */
        padding: var(--space-md) var(--space-sm) !important; /* 24px 16px */
        margin: var(--space-md) var(--space-xs) !important; /* 24px 8px */
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: var(--space-xs) !important; /* 8px */
        
        /* Perfect mobile visibility */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        
        /* Perfect mobile treatment */
        background: rgba(243, 159, 27, 0.1) !important;
        border: 2px solid rgba(243, 159, 27, 0.4) !important;
    }
    
    .stat-number {
        font-size: var(--text-lg) !important; /* 18px */
    }
    
    .stat-label, .stat-text {
        font-size: 12px !important;
    }
    
    /* Perfect filter group mobile */
    .filter-group {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
        gap: var(--space-xs) !important; /* 8px */
        width: 100% !important;
    }
    
    .filter-btn {
        min-width: 100px !important;
        height: 44px !important; /* Touch-friendly */
        padding: var(--space-xs) var(--space-xs) !important; /* 8px 8px */
        font-size: 12px !important;
        word-break: break-word !important;
    }
    
    .filter-dropdown {
        width: 100% !important;
        height: var(--space-2xl) !important; /* 48px */
        margin-bottom: var(--space-xs) !important; /* 8px */
    }
}

/* ===== PERFECT TYPOGRAPHY HIERARCHY ===== */
.hero-title {
    font-size: clamp(2.5rem, 4vw, 4rem) !important;
    font-weight: var(--weight-bold) !important; /* 700 */
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: var(--space-lg) !important; /* 32px */
    
    /* Perfect gradient text */
    background: linear-gradient(135deg, #ffffff 0%, #F39F1B 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.section-title {
    font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
    font-weight: var(--weight-medium) !important; /* 600 */
    line-height: 1.2 !important;
    margin-bottom: var(--space-md) !important; /* 24px */
    color: #ffffff !important;
}

/* ===== PERFECT FOOTER - PREMIUM QUALITY ===== */
.footer {
    /* Perfect layout */
    padding: var(--space-3xl) 0 !important; /* 64px 0 */
    margin-top: var(--space-3xl) !important; /* 64px */
    
    /* Perfect visual treatment */
    background: linear-gradient(135deg, 
        rgba(26, 26, 26, 0.98) 0%, 
        rgba(48, 49, 45, 0.95) 50%,
        rgba(26, 26, 26, 0.98) 100%) !important;
    border-top: 3px solid rgba(243, 159, 27, 0.4) !important;
    backdrop-filter: blur(24px) saturate(120%) !important;
    
    /* Perfect shadow depth */
    box-shadow: 
        0 -var(--space-xs) var(--space-lg) rgba(0, 0, 0, 0.2), /* 0 -8px 32px */
        0 -var(--space-sm) var(--space-3xl) rgba(0, 0, 0, 0.15) !important; /* 0 -16px 64px */
}

.footer-content {
    /* Perfect grid layout */
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: var(--space-2xl) !important; /* 48px */
    align-items: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 var(--space-md) !important; /* 0 24px */
}

.footer-logo .logo-text {
    font-size: var(--text-xl) !important; /* 24px */
    font-weight: var(--weight-bold) !important; /* 700 */
    color: #ffffff !important;
}

.footer-logo .logo-accent {
    color: #F39F1B !important;
}

.footer-logo p {
    font-size: var(--text-sm) !important; /* 14px */
    font-weight: var(--weight-normal) !important; /* 500 */
    color: rgba(255, 255, 255, 0.7) !important;
    margin-top: var(--space-xs) !important; /* 8px */
}

.footer-contact h4 {
    font-size: var(--text-md) !important; /* 16px */
    font-weight: var(--weight-bold) !important; /* 700 */
    color: #F39F1B !important;
    margin-bottom: var(--space-sm) !important; /* 16px */
}

.footer-contact a {
    display: block !important;
    font-size: var(--text-sm) !important; /* 14px */
    font-weight: var(--weight-medium) !important; /* 600 */
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    margin-bottom: var(--space-xs) !important; /* 8px */
    transition: all var(--timing-smooth) !important;
    padding: var(--space-xs) 0 !important; /* 8px 0 */
}

.footer-contact a:hover {
    color: #F39F1B !important;
    transform: translateX(4px) !important;
    text-shadow: 0 2px 4px rgba(243, 159, 27, 0.3) !important;
}

.footer-legal {
    text-align: right !important;
    font-size: 12px !important;
    font-weight: var(--weight-normal) !important; /* 500 */
    color: rgba(255, 255, 255, 0.6) !important;
    line-height: 1.5 !important;
}

.footer-legal p {
    margin-bottom: var(--space-xs) !important; /* 8px */
}

/* ===== PERFECT MOBILE FOOTER ===== */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: var(--space-md) !important; /* 24px */
    }
    
    .footer-legal {
        text-align: center !important;
    }
}

/* ===== PERFECT CORNER ALIGNMENT ===== */
.sidebar-logo {
    /* Perfect top-left positioning */
    padding: var(--space-md) var(--space-xs) !important; /* 24px 8px */
    text-align: center !important;
}

    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    
    /* NUCLEAR VISIBILITY OVERRIDE */
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important; /* FORCE display */
    transform: translateX(0) !important;
    
    /* RESTORE PROPER Z-INDEX */
    z-index: 1000 !important; /* Back to normal */
}

/* TICKER CONTENT SPEED FIX */
.ticker-content {
    /* SLOW DOWN animation - comfortable reading speed */
    animation: ticker-scroll 180s linear infinite !important; /* TRIPLED from 60s */
    display: flex !important;
    align-items: center !important;
}

/* MAIN CONTENT - PERFECT POSITIONING UNDER TICKER */
.main-content-wrapper {
    margin-top: 50px !important; /* EXACT ticker height - NO GAP */
    padding-top: 0 !important; /* NO additional padding */
}

@media (max-width: 768px) {
    .live-ticker {
        /* PERFECT MOBILE POSITIONING - NO GAP WITH MENU */
        padding: 12px 16px 12px 72px !important; /* EXACT menu width - NO GAP */
        height: 50px !important; /* Same as desktop */
        font-size: 12px !important;
        line-height: 1.3 !important;
        
        /* Perfect mobile background */
        background: rgba(26, 26, 26, 0.98) !important;
        backdrop-filter: blur(20px) saturate(120%) !important;
    }
    
    /* Mobile main content adjustment */
    .main-content-wrapper {
        margin-top: 50px !important; /* Same as ticker height */
    }
}

/* ===== PERFECT INTERACTION STATES ===== */
/* Focus indicators - WCAG AAA compliance */
button:focus,
select:focus,
input:focus,
a:focus {
    outline: 3px solid rgba(243, 159, 27, 0.8) !important;
    outline-offset: 2px !important;
    border-color: #F39F1B !important;
}

/* Perfect ripple effect for premium feel */
@keyframes perfect-ripple {
    0% {
        transform: scale(0);
        opacity: 0.6;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Perfect loading animation */
@keyframes perfect-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: var(--space-md) !important; /* 24px */
    height: var(--space-md) !important; /* 24px */
    border: 3px solid rgba(243, 159, 27, 0.3) !important;
    border-top: 3px solid #F39F1B !important;
    border-radius: 50% !important;
    animation: perfect-spin 1s linear infinite !important;
    transform: translate(-50%, -50%) !important;
}

/* ===== PERFECT Z-INDEX HIERARCHY - NO OVERLAPPING ===== */
.skip-link:focus { z-index: 99999 !important; }
.photo-modal { z-index: 10000 !important; }
.sidebar-container { z-index: 1500 !important; } /* Higher than ticker */
.live-ticker { z-index: 1000 !important; }
.navbar { z-index: 9999 !important; }

/* PROFESSIONAL OVERLAPPING PREVENTION */
.hero-search, .property-results, .footer {
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate !important; /* Create stacking context */
    /* REMOVED contain - was blocking ticker */
}

.property-statistics {
    position: relative !important;
    z-index: 2 !important;
    isolation: isolate !important;
    contain: layout style paint !important; /* Prevent overflow */
}

/* ADDITIONAL OVERLAP PREVENTION */
.container {
    contain: layout !important; /* Prevent layout overflow */
}

.filter-dropdowns {
    contain: layout style !important; /* Prevent filter overlap */
}

.results-filters {
    contain: layout style paint !important; /* Complete containment */
}

/* ===== MATHEMATICAL PRECISION FOR ALL CONTAINERS ===== */
.container {
    /* Perfect 8px grid container */
    max-width: 1200px !important; /* 8px grid: 150 * 8 */
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 var(--space-md) !important; /* 0 24px */
}

.hero-content {
    /* PERFECT 8PX GRID COMPLIANCE */
    max-width: 1296px !important; /* 8px grid: 162 * 8 = 1296px */
    width: calc(100% - 32px) !important; /* 8px grid responsive */
    margin: 0 auto !important;
    padding: 0 var(--space-md) !important; /* 0 24px */
    box-sizing: border-box !important;
}

.results-filters {
    /* Perfect filter container */
    max-width: 1200px !important; /* 8px grid: 150 * 8 */
    width: 100% !important;
    margin: 0 auto var(--space-lg) auto !important; /* 0 auto 32px auto */
    padding: var(--space-md) !important; /* 24px */
}

/* ===== ABSOLUTELY PERFECT CLEANUP ===== */
/* Remove any layout shifts */
* {
    box-sizing: border-box !important;
}

/* Perfect smooth scrolling */
html {
    scroll-behavior: smooth !important;
}

/* Perfect text rendering */
body {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* HIDE SKIP LINKS COMPLETELY - NUCLEAR FIX */
.skip-link {
    position: absolute !important;
    top: -100px !important; /* Far off screen */
    left: -100px !important; /* Far off screen */
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    z-index: -9999 !important;
}

.skip-link:focus {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    clip: auto !important;
    z-index: 99999 !important;
    background: #F39F1B !important;
    color: #000000 !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}