/* CSS za employment earnings calculator sa gradovima */

/* Tooltip ikonica */
.calculator__tooltip {
    font-size: 14px !important;
    cursor: help !important;
    margin-left: 5px !important;
    color: #666 !important;
}

.calculator__tooltip:hover {
    color: #333 !important;
}

/* Range slider */
.range-slider-wrapper {
    position: relative !important;
    margin: 0px 0 !important;
}

.range-value-display {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
}

.range-value {
    background: #ffc72c !important;
    color: #333 !important;
    padding: 6px 15px !important;
    border-radius: 20px !important;
    font-weight: bold !important;
    font-size: 18px !important; /* Povećan font */
    padding: 8px 18px !important; /* Povećan padding */
    display: inline-block !important;
}

.range-slider {
    width: 100% !important;
    height: 12px !important; /* Povećana debljina slajdera */
    background: #ddd !important;
    outline: none !important;
    border-radius: 4px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 26px !important; /* Povećan klizač */
    height: 26px !important; /* Povećan klizač */
    background: #ffc72c !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    border: 2px solid white !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}

.range-slider::-moz-range-thumb {
    width: 26px !important; /* Povećan klizač */
    height: 26px !important; /* Povećan klizač */
    background: #ffc72c !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    border: 2px solid white !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}

/* City selector */
.calculator .city-selector-dropdown {
    width: 100% !important;
    padding: 10px !important;
    border: 2px solid #ddd !important;
    border-radius: 5px !important;
    font-size: 16px !important;
}

.calculator .city-selector-dropdown:focus {
    border-color: #ffc72c !important;
    outline: none !important;
}

/* Layout responsivni */
.calculator__inputs-wrapper {
    margin-bottom: 20px !important;
}

.calculator__label-wrapper {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 10px !important;
}

.calculator__label {
    margin-right: 5px !important;
}

.calculator__input-group {
    margin-bottom: 20px !important;
    padding: 20px 10px 0 10px;
}
.calculator__content {
    padding: 0 10px;
}

/* Mobile specific styles */
@media (max-width: 767px) {
    .calculator__label {
        font-size: 18px !important; /* Povećan font na mobilnom */
    }
    .calculator .js-sum {
        font-size: 28px !important; /* Smanjen font rezultata na mobilnom */
    }
    .calculator {
        overflow-x: hidden; /* Sprečava horizontalno skrolovanje */
    }
}

/* Desktop layout */
@media (min-width: 768px) {
    .calculator__inputs-wrapper {
        display: flex !important;
        gap: 30px !important;
        align-items: flex-start !important;
    }
    
    .calculator__input-group {
        flex: 1 !important;
        margin-bottom: 0 !important;
    }
}

/* Disabled state */
.calculator.is-disabled .range-slider-wrapper {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

/* City note animation */
.js-city-note {
    margin-top: 15px !important;
    padding: 12px !important;
    background: #f8f9fa !important;
    border-left: 4px solid #ffc72c !important;
    border-radius: 4px !important;
}

/* Result animation */
.calculator .js-sum.updating {
    animation: resultPulse 0.3s ease !important;
}

@keyframes resultPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}