/* components/calculator.css */

/* Kalkulator */
.loan-calculator {
    background-color: var(--calculator-bg);
    color: var(--text-color);
    border-radius: 24px;
    padding: 40px;
    max-width: 500px;
    margin: 0 auto;
    -webkit-box-shadow: var(--shadow-default);
            box-shadow: var(--shadow-default);
    border: 1px solid rgba(0,0,0,0.1); 

    font-size: 0.95rem;
}

.calc-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 1rem;
}

.calc-label {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-color);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.calc-value {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 10px;
    text-align: right;
}

.calc-label-value {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 6px;
}

.slider-range {
    width: 100%;
}

.slider-limits span {
    font-size: 0.9rem;
    color: var(--calculator-limits-color);
}

.icon-line {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.info-line {
    color: var(--calculator-info-text);
}

/* Link "Warunki pożyczki" */
.text-link {
    color: var(--calculator-info-text);
    text-decoration: underline;
    cursor: pointer;
}

.post-template-default .loan-calculator {
    background-color: transparent;
    color: var(--text-color);
    border-radius: 24px;
    padding: 10px;
    -webkit-box-shadow: none;
            box-shadow: none;
    border: none;
    font-size: .95rem;
}

/* --- Przełącznik Wniosek dla firm (okrągły checkbox X/✓) --- */
.calc-switch {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.calc-switch .form-check-input {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    outline: none;
    -webkit-transition: background .25s;
    -o-transition: background .25s;
    transition: background .25s;
    background: #44475a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath d='M19.587 16.001l6.096 6.096c0.396 0.396 0.396 1.039 0 1.435l-2.151 2.151c-0.396 0.396-1.038 0.396-1.435 0l-6.097-6.096-6.097 6.096c-0.396 0.396-1.038 0.396-1.434 0l-2.152-2.151c-0.396-0.396-0.396-1.038 0-1.435l6.097-6.096-6.097-6.097c-0.396-0.396-0.396-1.039 0-1.435l2.153-2.151c0.396-0.396 1.038-0.396 1.434 0l6.096 6.097 6.097-6.097c0.396-0.396 1.038-0.396 1.435 0l2.151 2.152c0.396 0.396 0.396 1.038 0 1.435l-6.096 6.096z'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}

.calc-switch .form-check-input:checked {
    background: var(--primary-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath d='M28.998 8.531l-2.134-2.134c-0.394-0.393-1.030-0.393-1.423 0l-12.795 12.795-6.086-6.13c-0.393-0.393-1.029-0.393-1.423 0l-2.134 2.134c-0.393 0.394-0.393 1.030 0 1.423l8.924 8.984c0.393 0.393 1.030 0.393 1.423 0l15.648-15.649c0.393-0.392 0.393-1.030 0-1.423z'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}

@media (hover: none) and (pointer: coarse) {
  .calc-switch .form-check-input { transition: none; }
}

.calc-switch .form-check-label {
    font-weight: 600;
    color: var(--text-color);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    margin-top: auto;
}

/* --- Kolor gałek suwaków (HTML range) --- */
.amount-slider,
.time-slider {
    accent-color: var(--primary-color);
}

.slider-value-amount {
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
}

/* --- Wewnętrzne zmienne dla suwaków --- */
.loan-calculator {
    --loan-amount-percentage: 0%;
    --loan-duration-percentage: 0%;
}

.modal-content {
    --loan-amount-percentage-edit: 0%;
    --loan-duration-percentage-edit: 0%;
}

/* --- Stylowanie suwaków (range) --- */
input[type=range] {
    -webkit-appearance: none;
            appearance: none;
    width: 100%;
    height: 8px;
    background: -webkit-gradient(linear, left top, right top, from(var(--primary-color)), to(var(--slider-background)));
    background: -o-linear-gradient(left, var(--primary-color) var(--percentage), var(--slider-background) var(--percentage));
    background: linear-gradient(to right, var(--primary-color) var(--percentage), var(--slider-background) var(--percentage));
    border-radius: 4px;
    margin: 0;
    padding: 0;
    -webkit-transition: background 0.3s ease;
    -o-transition: background 0.3s ease;
    transition: background 0.3s ease;
}

.loan-calculator .form-range.amount-slider {
    --percentage: var(--loan-amount-percentage);
}

.loan-calculator .form-range.time-slider {
    --percentage: var(--loan-duration-percentage);
}

.modal-content .form-range.amount-slider-edit {
    --percentage: var(--loan-amount-percentage-edit);
}

.modal-content .form-range.time-slider-edit {
    --percentage: var(--loan-duration-percentage-edit);
}

input[type=range]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 4px;
    background: transparent;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    background: var(--slider-thumb-color);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-top: -11px;
    cursor: pointer;
    border: none;
    -webkit-box-shadow: 0 0 10px var(--slider-thumb-shadow);
            box-shadow: 0 0 10px var(--slider-thumb-shadow);
    -webkit-transition: background 0.2s ease, -webkit-box-shadow 0.2s ease;
    transition: background 0.2s ease, -webkit-box-shadow 0.2s ease;
    -o-transition: background 0.2s ease, box-shadow 0.2s ease;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    transition: background 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
}

input[type=range]:hover::-webkit-slider-thumb {
    background: var(--slider-thumb-hover-color);
    -webkit-box-shadow: 0 0 12px var(--slider-thumb-hover-shadow);
            box-shadow: 0 0 12px var(--slider-thumb-hover-shadow);
}

input[type=range]:active::-webkit-slider-thumb {
    background: var(--slider-thumb-hover-color);
    -webkit-box-shadow: 0 0 15px var(--slider-thumb-active-shadow);
            box-shadow: 0 0 15px var(--slider-thumb-active-shadow);
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-moz-range-track {
    height: 8px;
    border-radius: 4px;
    background: transparent;
}

input[type=range]::-moz-range-thumb {
    background: var(--slider-thumb-color);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 10px var(--slider-thumb-shadow);
    -moz-transition: background 0.2s ease, box-shadow 0.2s ease;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

input[type=range]:hover::-moz-range-thumb {
    background: var(--slider-thumb-hover-color);
    box-shadow: 0 0 12px var(--slider-thumb-hover-shadow);
}

input[type=range]:active::-moz-range-thumb {
    background: var(--slider-thumb-hover-color);
    box-shadow: 0 0 15px var(--slider-thumb-active-shadow);
}

input[type=range]::-ms-track {
    height: 8px;
    border-radius: 4px;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: var(--slider-thumb-color);
    border-radius: 4px;
}

input[type=range]::-ms-fill-upper {
    background: var(--slider-background);
    border-radius: 4px;
}

input[type=range]::-ms-thumb {
    background: var(--slider-thumb-color);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 10px var(--slider-thumb-shadow);
    -ms-transition: background 0.2s ease, box-shadow 0.2s ease;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

input[type=range]:hover::-ms-thumb {
    background: var(--slider-thumb-hover-color);
    box-shadow: 0 0 12px var(--slider-thumb-hover-shadow);
}

input[type=range]:active::-ms-thumb {
    background: var(--slider-thumb-hover-color);
    box-shadow: 0 0 15px var(--slider-thumb-active-shadow);
}

input[type=range]:focus::-webkit-slider-thumb,
input[type=range]:focus::-moz-range-thumb,
input[type=range]:focus::-ms-thumb {
    outline: none;
    -webkit-box-shadow: none;
            box-shadow: none;
}

/* --- Przełącznik typu klienta nad kalkulatorem --- */
.client-type-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 1rem;
}

.client-type-btn {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0;
            flex: 1 1 0;
    border-radius: 30px;
    border: 2px solid var(--btn-background-color);
    background: transparent;
    color: var(--btn-background-color);
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    -webkit-transition: background 0.2s, color 0.2s, border-color 0.2s;
    -o-transition: background 0.2s, color 0.2s, border-color 0.2s;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    outline: none;
    -webkit-box-shadow: none;
            box-shadow: none;
    padding: 0.6em 0.75em;
}

.client-type-btn:hover,
.client-type-btn.active {
    background: var(--btn-background-color);
    color: #fff;
    border-color: var(--btn-background-color);
}

.client-type-btn:focus {
    outline: none;
    -webkit-box-shadow: none;
            box-shadow: none;
}

@media (max-width: 576px) {
    .client-type-btn {
        font-size: 0.75rem;
        padding: 0.5em;
    }
}

@media (max-width: 375px) and (max-height: 667px) {
    .client-type-btn {
        font-size: 0.7rem;
        padding: 0.45em 0.6em;
    }
}

@media (min-width: 376px) and (max-width: 390px) and (max-height: 884px) {
    .client-type-btn {
        font-size: 0.78rem;
        padding: 0.5em 0.65em;
    }
}

@media (max-width: 360px) and (max-height: 740px) {
    .client-type-btn {
        font-size: 0.74rem;
        padding: 0.48em 0.3em;
    }
}

@media (max-width: 344px) and (max-height: 882px) {
    .client-type-btn {
        font-size: 0.72rem;
        padding: 0.45em 0.6em;
    }
}

/* --- Responsywne warianty kalkulatora --- */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .loan-calculator {
        max-width: 430px;
        max-height: 460px;
    }
}

@media (min-width: 1024px) and (max-width: 1366.98px) {
    .loan-calculator {
        max-width: 430px;
        max-height: 460px;
    }
}

@media (min-width: 1080px) {
    .loan-calculator {
        max-width: 500px;
        max-height: none;
    }
}