/**
 * Kredīta Kalkulators — CSS
 * Izmanto CSS mainīgos krāsu konfigurācijai.
 * Mainīgos iestata JS no admin iestatījumiem.
 */

:root {
    --cc-primary:   #2563eb;
    --cc-secondary: #1e40af;
    --cc-bg:        #f8fafc;
    --cc-text:      #1e293b;
    --cc-cta:       #16a34a;
    --cc-border:    #e2e8f0;
    --cc-white:     #ffffff;
    --cc-radius:    12px;
    --cc-shadow:    0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ---- Wrapper ---- */
.cc-calculator {
    background:    var(--cc-bg);
    color:         var(--cc-text);
    border-radius: var(--cc-radius);
    box-shadow:    var(--cc-shadow);
    padding:       2rem;
    max-width:     640px;
    margin:        0 auto;
    font-family:   inherit;
    box-sizing:    border-box;
}

.cc-calculator *,
.cc-calculator *::before,
.cc-calculator *::after {
    box-sizing: border-box;
}

/* ---- Fields ---- */
.cc-fields {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
    margin-bottom:  2rem;
}

.cc-field {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
}

.cc-field-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             0.5rem;
}

.cc-field-header label {
    font-weight:   600;
    font-size:     0.95rem;
    color:         var(--cc-text);
    margin:        0;
}

/* ---- Input ---- */
.cc-input-wrap {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    background:  var(--cc-white);
    border:      2px solid var(--cc-border);
    border-radius: 8px;
    padding:     0.3rem 0.6rem;
    transition:  border-color 0.2s;
}

.cc-input-wrap:focus-within {
    border-color: var(--cc-primary);
}

.cc-input {
    border:     none;
    outline:    none;
    background: transparent;
    font-size:  1rem;
    font-weight: 600;
    color:      var(--cc-text);
    width:      90px;
    text-align: right;
    -moz-appearance: textfield;
}

.cc-input::-webkit-outer-spin-button,
.cc-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cc-unit {
    font-size:   0.8rem;
    color:       #64748b;
    white-space: nowrap;
}

/* ---- Slider ---- */
.cc-slider {
    -webkit-appearance: none;
    appearance:         none;
    width:              100%;
    height:             6px;
    border-radius:      3px;
    background:         var(--cc-border);
    outline:            none;
    cursor:             pointer;
    accent-color:       var(--cc-primary);
}

.cc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance:         none;
    width:              22px;
    height:             22px;
    border-radius:      50%;
    background:         var(--cc-primary);
    cursor:             pointer;
    box-shadow:         0 2px 8px rgba(37, 99, 235, 0.3);
    transition:         transform 0.15s;
}

.cc-slider::-webkit-slider-thumb:active {
    transform: scale(1.2);
}

.cc-slider::-moz-range-thumb {
    width:       22px;
    height:      22px;
    border:      none;
    border-radius: 50%;
    background:  var(--cc-primary);
    cursor:      pointer;
    box-shadow:  0 2px 8px rgba(37, 99, 235, 0.3);
}

.cc-range-labels {
    display:         flex;
    justify-content: space-between;
    font-size:       0.75rem;
    color:           #94a3b8;
    margin-top:      0.1rem;
}

/* ---- Results ---- */
.cc-results {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   0.75rem;
    margin-bottom:         1.5rem;
}

.cc-result {
    background:    var(--cc-white);
    border:        1px solid var(--cc-border);
    border-radius: 10px;
    padding:       1rem 1.25rem;
    display:       flex;
    justify-content: space-between;
    align-items:   center;
    gap:           1rem;
}

.cc-result--main {
    border-color: var(--cc-primary);
    background:   linear-gradient(135deg,
                    color-mix(in srgb, var(--cc-primary) 8%, white),
                    var(--cc-white));
}

.cc-result-label {
    font-size:  0.88rem;
    color:      #64748b;
    font-weight: 500;
}

.cc-result-value {
    font-size:   1.25rem;
    font-weight: 700;
    color:       var(--cc-primary);
    white-space: nowrap;
}

.cc-result--main .cc-result-value {
    font-size: 1.5rem;
}

/* ---- CTA ---- */
.cc-cta {
    text-align: center;
}

.cc-cta-btn {
    display:       inline-block;
    background:    var(--cc-cta);
    color:         var(--cc-white);
    padding:       0.8rem 2rem;
    border-radius: 8px;
    font-weight:   600;
    font-size:     0.95rem;
    text-decoration: none;
    transition:    background 0.2s, transform 0.15s;
    cursor:        pointer;
}

.cc-cta-btn:hover {
    background: color-mix(in srgb, var(--cc-cta) 85%, black);
    transform:  translateY(-1px);
    color:      var(--cc-white);
    text-decoration: none;
}

/* ---- Responsivitāte ---- */
@media ( max-width: 480px ) {
    .cc-calculator {
        padding: 1.25rem;
    }

    .cc-field-header {
        flex-direction: column;
        align-items:    flex-start;
    }

    .cc-result {
        flex-direction: column;
        align-items:    flex-start;
        gap:            0.25rem;
    }

    .cc-result-value {
        font-size: 1.1rem;
    }

    .cc-result--main .cc-result-value {
        font-size: 1.3rem;
    }

    .cc-input {
        width: 70px;
    }

    .cc-slider::-webkit-slider-thumb {
        width:  28px;
        height: 28px;
    }
}