/**
 * Checkbox Fix CSS - Previne jumpingul checkbox-urilor
 * 
 * Fixează problemele cu animațiile checkbox-urilor care cauzează mișcări nedorite
 * PRIORITATE MAXIMĂ - override toate celelalte reguli CSS
 */

/* Stabilizează container-ul pentru opțiuni */
.filter-dropdown-content {
    contain: layout style; /* Previne layout thrashing */
    transform: translateZ(0); /* Hardware acceleration */
}

.filter-options-scroll {
    contain: layout style;
    transform: translateZ(0); /* Hardware acceleration */
}

/* Override TOATE regulile existente pentru checkbox-uri în dropdown */
.digitalease-main-filters .filter-dropdown-content .filter-option .checkmark {
    animation: none !important;
    transition: background-color 0.1s ease, border-color 0.1s ease !important;
    transform: translateY(-50%) translateZ(0) !important;
}

/* Centrare perfectă pentru check mark în dropdown */
.digitalease-main-filters .filter-dropdown-content .filter-option .checkmark:after {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -60%) rotate(45deg) translateZ(0) !important;
}

/* Elimină orice transform care ar putea cauza jumping */
.filter-dropdown-content .filter-option *,
.filter-dropdown-content .filter-option *:before,
.filter-dropdown-content .filter-option *:after {
    backface-visibility: hidden; /* Previne flickering pe animații */
    transform-style: flat; /* Forțează 2D rendering */
}

/* Forțează o înălțime consistentă pentru toate opțiunile */
.filter-dropdown-content .filter-option {
    display: flex !important;
    align-items: center !important;
    height: 28px !important; /* Înălțime fixă */
    overflow: hidden;
    position: relative !important;
    contain: layout !important; /* Izolează layoutul pentru a preveni propagarea schimbărilor */
}

/* Asigură că checkbox-ul rămâne centrat vertical */
.filter-dropdown-content .filter-option .checkmark {
    top: 50% !important;
    margin-top: 0 !important;
    transform: translateY(-50%) translateZ(0) !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
    position: absolute !important;
    left: 14px !important;
    /* Forțează poziția exactă - nu se mișcă niciodată */
    will-change: background-color, border-color !important;
}

/* Elimină orice scale sau transform pe hover/checked */
.filter-dropdown-content .filter-option:hover .checkmark,
.filter-dropdown-content .filter-option input:checked ~ .checkmark,
.filter-dropdown-content .filter-option input:focus ~ .checkmark {
    transform: translateY(-50%) translateZ(0) !important; /* Păstrează poziția exactă */
}

/* Optimizează textul pentru a nu afecta layout-ul */
.filter-dropdown-content .filter-label {
    line-height: 1.2 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* Elimină animațiile problematice în dropdown-uri */
.filter-dropdown-content .filter-option input:checked + .checkmark,
.filter-dropdown-content .filter-option input:checked ~ .checkmark {
    animation: none !important; /* Elimină orice animație care cauzează jumping */
    box-shadow: none !important; /* Elimină shadow-urile care pot cauza jumping */
}

.filter-dropdown-content .filter-option input:checked + .checkmark:after,
.filter-dropdown-content .filter-option input:checked ~ .checkmark:after {
    opacity: 1;
    transition: opacity 0.1s ease; /* Fără delay pentru a fi instant */
    /* Asigură centrarea perfectă */
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -60%) rotate(45deg) translateZ(0) !important;
}

/* Stabilizează dimensiunile container-ului */
.filter-dropdown-content {
    overflow-anchor: none; /* Previne scroll anchor adjustments */
}

/* Previne layout shifts la schimbarea stării */
.filter-dropdown-content .filter-option input {
    position: absolute !important;
    left: -9999px !important; /* Ascunde complet input-ul default */
    opacity: 0 !important;
}

/* Override complet pentru orice interferențe cu alte CSS-uri */
.filter-dropdown-content .filter-option input {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
}

/* Media query pentru mobile - optimizări suplimentare */
@media (max-width: 768px) {
    .filter-dropdown-content .filter-option {
        height: 32px !important; /* Puțin mai mare pe mobile pentru touch */
        padding: 8px 14px !important;
    }
    
    .filter-dropdown-content .filter-option .checkmark {
        width: 18px !important;
        height: 18px !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) translateZ(0) !important;
    }
    
    /* Centrare perfectă pentru mobile */
    .filter-dropdown-content .filter-option .checkmark:after {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -60%) rotate(45deg) translateZ(0) !important;
    }
} 