/* Paint Calculator Specific Styles */

/* Dimensions Row */
.dimensions-row {
    display: flex;
    gap: 12px;
}

.dimension-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dimension-field .form-input {
    flex: 1;
    min-width: 0;
}

.field-unit {
    color: #6b7280;
    font-size: 14px;
    white-space: nowrap;
}

/* Form Row */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Helper Text */
.helper-text {
    color: #6b7280;
    font-size: 13px;
    margin-top: 4px;
}

/* Optional Label */
.optional {
    color: #9ca3af;
    font-weight: 400;
}

/* Results Label/Value Layout */
.results-label {
    color: #374151;
}

.results-item.highlight {
    background: #f0f9ff;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #bae6fd;
}

.results-item.highlight .results-value {
    color: #0369a1;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 640px) {
    .dimensions-row {
        flex-direction: column;
        gap: 16px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .results-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}