/*
Loan Calculator CSS
File: css/loan-calculator.css
*/

#calc_soc {
    font-family: 'Arial', sans-serif;
    color: #333;
}

#calc_soc .table-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    gap: 10px;
}

#calc_soc .table-row > div {
    padding: 12px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.4rem;
    text-align: center;
    flex: 1;
    min-width: 150px;
}

#calc_soc .pension-2 {
    font-size: 1.6rem;
    font-weight: bold;
    color: #000b42;
    margin: 20px 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #000b42;
}

#calc_soc input[type="number"] {
    transition: all 0.3s ease;
}

#calc_soc input[type="number"]:focus {
    background-color: #fff;
    border-color: #000b42;
    outline: none;
}

#calc_soc .it-row {
    font-size: 1.4rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    flex: 1;
    min-width: 250px;
}

#calc_soc .it-switch {
    flex: 2;
    min-width: 300px;
}

#calc_soc .input-with-slider-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

#calc_soc input[type="number"] {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1.4rem;
    transition: border-color 0.3s ease;
}

#calc_soc input[type="number"]:focus {
    border-color: #000b42;
    outline: none;
}

#calc_soc input[type="number"]:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

#calc_soc input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

#calc_soc .mb2 {
    margin-bottom: 20px !important;
}

#calc_soc .pen-sub {
    background: #f8f9fa;
    padding: 15px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #333;
    border-radius: 8px;
    margin-bottom: 5px;
    flex: 1;
    min-width: 200px;
}

#calc_soc .tooltip {
    background: #fff;
    padding: 15px;
    font-size: 1.6rem;
    font-weight: bold;
    color: #000b42;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    text-align: right;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 200px;
}

/* Ոչ ակտիվ կոճակների համար - ամիս/տարի */
#term-months:not(.active),
#term-years:not(.active) {
    background-color: #f5f5f5 !important;
    color: #999 !important;
    border: 1px solid #cccccc !important;
}

/* Ոչ ակտիվ կոճակների համար - տոկոսադրույք */
#interest-annual:not(.active),
#interest-monthly:not(.active) {
    background-color: #f5f5f5 !important;
    color: #999 !important;
    border: 1px solid #cccccc !important;
}

/* Ոչ ակտիվ կոճակների համար - վարկի տեսակ */
#annuity:not(.active),
#differentiated:not(.active) {
    background-color: #f5f5f5 !important;
    color: #999 !important;
    border: 1px solid #cccccc !important;
}

#term-months.active {
    background: #000B24 !important;
    color: #fff !important;
    border: none !important;
}

#term-years.active {
    background: #FF0000 !important;
    color: #fff !important;
    border: none !important;
}

#interest-annual.active {
    background: #FF0000 !important;
    color: #fff !important;
    border: none !important;
}

#interest-monthly.active {
    background: #000B24 !important;
    color: #fff !important;
    border: none !important;
}

#annuity.active {
    background: #fb1b1f !important;
    color: #fff !important;
    border: none !important;
}

#differentiated.active {
    background: #fb1b1f !important;
    color: #fff !important;
    border: none !important;
}

#calc_soc .tooltip:hover {
    background: #000b42;
    color: #fff;
    border-color: #000b42;
}

#calculate-btn, #build-graph-btn, #export-excel-btn {
    padding: 16px 30px !important;
    font-size: 1.6rem !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

#loan-details {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 25px;
    margin-top: 20px;
}

#loan-details p {
    margin-bottom: 10px;
    font-size: 1.4rem;
    line-height: 1.6;
}

#graph-container {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Slider ստիլեր */
#calc_soc input[type="range"] {
    width: 100%;
    height: 8px;
    background: #ddd;
    border-radius: 4px;
    outline: none;
    -webkit-appearance: none;
}

#calc_soc input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: #000b42;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

#calc_soc input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: #000b42;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}