/* ===== Weight-per-thousand calculator (templates/weight-calculator.php) ===== */

#rt-weight-calculator {
    --rt-gold: #B0850F; /* optional-field accent; accessible on white */
}

/* ----- Legend ----- */

#rt-weight-calculator .rt-calc__legend {
    font-size: 0.95rem;
    color: var(--rt-navy);
}

#rt-weight-calculator .rt-calc__dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
}

#rt-weight-calculator .rt-calc__dot--req  { background: var(--rt-green); }
#rt-weight-calculator .rt-calc__dot--opt  { background: var(--rt-gold); }
#rt-weight-calculator .rt-calc__dot--calc { background: var(--rt-navy); }

/* ----- Fieldset groups ----- */

#rt-weight-calculator .rt-calc__group {
    border: 0;
    padding: 0;
    margin: 0;
}

#rt-weight-calculator .rt-calc__group-title {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ----- Labels (colour-coded by requirement) ----- */

#rt-weight-calculator .rt-calc__label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}

#rt-weight-calculator .rt-calc__label--req { color: var(--rt-green); }
#rt-weight-calculator .rt-calc__label--opt { color: var(--rt-gold); }

#rt-weight-calculator .rt-calc__hint {
    font-size: 0.85rem;
    color: var(--rt-navy);
    opacity: 0.7;
    margin-top: 0.4rem;
}

/* ----- Inputs — pill, matching the site's .has-form treatment ----- */

#rt-weight-calculator .rt-calc__input {
    width: 100%;
    background: #fff;
    border: none;
    border-radius: 100px;
    padding: 14px 22px;
    font-size: 1rem;
    color: var(--rt-navy);
    box-shadow: 0 4px 12px rgba(2, 0, 134, 0.06);
    transition: box-shadow .25s ease, opacity .25s ease;
}

#rt-weight-calculator .rt-calc__input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(105, 184, 66, 0.32);
}

#rt-weight-calculator .rt-calc__input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    background: #f2f4f7;
}

/* ----- Results panel ----- */

#rt-weight-calculator .rt-calc__results {
    background: var(--rt-navy-light);
    border-radius: 20px;
    padding: 2rem;
    height: 100%;
}

@media (min-width: 992px) {
    #rt-weight-calculator .rt-calc__results {
        padding: 2.5rem;
    }
}

#rt-weight-calculator .rt-calc__results-eyebrow {
    color: var(--rt-navy);
    opacity: 0.6;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
}

#rt-weight-calculator .rt-calc__result {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(2, 0, 134, 0.12);
}

#rt-weight-calculator .rt-calc__result:first-of-type {
    padding-top: 0;
}

#rt-weight-calculator .rt-calc__result-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--rt-navy);
    opacity: 0.75;
}

#rt-weight-calculator .rt-calc__result-value {
    font-family: var(--rt-font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--rt-navy);
}

#rt-weight-calculator .rt-calc__result-unit {
    font-size: 0.9rem;
    color: var(--rt-navy);
    opacity: 0.6;
}

#rt-weight-calculator .rt-calc__results-hint {
    font-size: 0.9rem;
    color: var(--rt-navy);
    opacity: 0.7;
    margin-top: 1.25rem;
    margin-bottom: 0;
}