@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

.solar-calc {
    color: var(--color-dark, black);
}

#quizCard {
    border-radius: 14px;
    border: none;
    box-shadow: none;
}

#quizCard:hover {
    transform: translateY(0px);
}

#quizCard>div {
    width: 100%;
}

.solar-calc .step-head {
    margin-bottom: 12px;
    text-align: center;
}

.solar-calc .form-label {
    font-size: clamp(0.75rem, 80%, 1rem);
}

.solar-calc .form-text {
    font-size: clamp(10px, 60%, 12px);
}

.solar-calc .selectable {
    border: 2px solid var(--color-muted, #e5e7eb);
    border-radius: 12px;
    background: var(--color-light, white);
    padding: .9rem .5rem;
    cursor: pointer;
    color: var(--color-action, #1f2937);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    width: 100%;
    height: 100%;
    font-size: clamp(0.75rem, 85%, 1rem);
}

.solar-calc .selectable:hover {
    border-color: var(--color-primary, #198754);
    background: var(--color-status-neutral, #e9f7f0);
}

.solar-calc .selectable.selected {
    border-color: var(--color-primary, #198754);
    background: var(--color-status-neutral, #e9f7f0);
    box-shadow: 0 0 0 3px rgba(25, 135, 84, .15);
}

.solar-calc .selectable i {
    color: var(--color-primary, #198754);
}

.solar-calc .metric-card {
    border: 1px solid var(--color-muted, #e5e7eb);
    border-radius: 12px;
    padding: .9rem .6rem;
    background: var(--color-light, white);
    height: 100%;
}

.solar-calc .metric-label {
    font-size: .78rem;
    color: var(--color-secondary, #6c757d);
}

.solar-calc .metric-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-primary, #198754);
}

.solar-calc .metric-unit {
    font-size: .75rem;
    color: var(--color-secondary, #6c757d);
}

.solar-calc .chip {
    background: var(--color-status-neutral, #e9f7f0);
    color: var(--color-primary50, #155e3a);
    border-radius: 20px;
    padding: .35rem .8rem;
    font-size: .82rem;
}

.solar-calc input[type="range"].form-range {
    -webkit-appearance: none; 
    width: 100%;
}

.solar-calc input[type="range"].form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 1rem; 
    width: 1rem; 
    background: var(--color-action, #155e3a);
    cursor: pointer;
}

.solar-calc input[type="range"].form-range::-webkit-slider-runnable-track {
    height: 8px;
    background: var(--color-muted, #ddd);
}
.solar-calc input[type="range"].form-range {
    accent-color: var(--color-action, #198754);
}


.solar-calc .abbr {
    position: relative;
    border-bottom: 1px dotted var(--color-secondary, #6c757d);
    cursor: help;
}

.solar-calc .abbr::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-dark50, #333);
    color: var(--color-light, white);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: .72rem;
    line-height: 1.35;
    white-space: nowrap;
    max-width: fit-content;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
    z-index: 10;
    text-align: center;
}

.solar-calc .abbr.end::after {
    left: auto;
    right: 50%;
    transform: translateX(0%)
}

.solar-calc .abbr:hover::after {
    opacity: 1;
}